'use client';

import React, { useState, useMemo, useEffect, useRef } from 'react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { Product, Category } from '@/types/woocommerce';
import { ShopSettings, ProductHoverTagsSettings } from '@/lib/settings';
import ProductCard from '@/components/product/ProductCard';
import { trackViewItemList } from '@/lib/tracking';
import PromoBanner from '@/components/common/PromoBanner';

interface ShopClientProps {
  initialProducts: Product[];
  shopSettings?: ShopSettings;
  categories?: Category[];
  hoverTags?: ProductHoverTagsSettings;
}

export default function ShopClient({
  initialProducts,
  shopSettings,
  categories = [],
  hoverTags,
}: ShopClientProps) {
  const searchParams = useSearchParams();
  const querySearch = searchParams.get('q')?.toLowerCase() || '';
  const queryCategory = searchParams.get('c') || 'all';

  const availableCategories = useMemo(() => {
    let list: Category[] = [];
    if (categories && categories.length > 0) {
      list = [...categories];
    } else {
      const catMap = new Map<string, { slug: string; name: string; count: number }>();
      for (const p of initialProducts) {
        if (p.categories && Array.isArray(p.categories)) {
          for (const catSlug of p.categories) {
            if (!catMap.has(catSlug)) {
              const readableName = catSlug
                .replace(/-/g, ' ')
                .replace(/\b\w/g, (c) => c.toUpperCase());
              catMap.set(catSlug, { slug: catSlug, name: readableName, count: 1 });
            } else {
              const item = catMap.get(catSlug)!;
              item.count += 1;
            }
          }
        }
      }
      list = Array.from(catMap.values());
    }

    if (
      shopSettings?.visible_categories &&
      Array.isArray(shopSettings.visible_categories) &&
      shopSettings.visible_categories.length > 0
    ) {
      const visibleList = shopSettings.visible_categories;
      list = list.filter((c) => {
        const cSlugNorm = c.slug.toLowerCase().replace(/[^a-z0-9]/g, '');
        const cNameNorm = (c.name || '').toLowerCase().replace(/[^a-z0-9]/g, '');
        return visibleList.some((v) => {
          const vNorm = v.toLowerCase().replace(/[^a-z0-9]/g, '');
          return (
            v === c.slug ||
            cSlugNorm.includes(vNorm) ||
            vNorm.includes(cSlugNorm) ||
            cNameNorm.includes(vNorm) ||
            vNorm.includes(cNameNorm)
          );
        });
      });
    }

    return list;
  }, [categories, initialProducts, shopSettings?.visible_categories]);

  const [activeCategory, setActiveCategory] = useState<string>(queryCategory);
  const [sortBy, setSortBy] = useState<string>(shopSettings?.default_sort || 'featured');
  const trackedCatalogRef = useRef(false);

  useEffect(() => {
    if (queryCategory) {
      setActiveCategory(queryCategory);
    }
  }, [queryCategory]);

  useEffect(() => {
    if (!trackedCatalogRef.current && initialProducts && initialProducts.length > 0) {
      trackedCatalogRef.current = true;
      trackViewItemList(initialProducts, shopSettings?.title || 'Shop Catalog');
    }
  }, [initialProducts, shopSettings?.title]);

  const filteredProducts = useMemo(() => {
    let list = [...initialProducts];

    if (querySearch) {
      list = list.filter(
        (p) =>
          (p.name && p.name.toLowerCase().includes(querySearch)) ||
          (p.brand && p.brand.toLowerCase().includes(querySearch)) ||
          p.categories.some((c) => c.toLowerCase().includes(querySearch))
      );
    }

    if (activeCategory === 'sale') {
      list = list.filter(
        (p) => (p.discountPercent && p.discountPercent > 0) || (p.regularPrice && p.regularPrice > p.price)
      );
    } else if (activeCategory !== 'all') {
      const actNorm = activeCategory.toLowerCase().replace(/[^a-z0-9]/g, '');
      list = list.filter((p) => {
        const matchCat = p.categories && p.categories.some((c) => {
          const cn = c.toLowerCase().replace(/[^a-z0-9]/g, '');
          return c === activeCategory || cn.includes(actNorm) || actNorm.includes(cn);
        });
        const matchConcern = p.concerns && p.concerns.some((c) => {
          const cn = c.toLowerCase().replace(/[^a-z0-9]/g, '');
          return c === activeCategory || cn.includes(actNorm) || actNorm.includes(cn);
        });
        return matchCat || matchConcern;
      });
    }

    if (sortBy === 'low' || sortBy === 'price-asc') {
      list.sort((a, b) => a.price - b.price);
    } else if (sortBy === 'high' || sortBy === 'price-desc') {
      list.sort((a, b) => b.price - a.price);
    } else if (sortBy === 'off' || sortBy === 'discount') {
      list.sort((a, b) => (b.discountPercent || 0) - (a.discountPercent || 0));
    }

    return list;
  }, [activeCategory, sortBy, querySearch, initialProducts]);

  const pageTitle = querySearch
    ? `“${querySearch}” এর ফলাফল`
    : activeCategory === 'all'
    ? shopSettings?.title || 'All Products'
    : activeCategory === 'sale'
    ? 'Offer Zone'
    : (availableCategories.find((c) => c.slug === activeCategory)?.name || 'Shop');

  const pageSubtitle =
    shopSettings?.subtitle || 'সব খাঁটি ও অর্গানিক পণ্য এক জায়গায়';

  // Sort options matching HTML demo
  const sortOptions = [
    { value: 'popular', label: 'Popular' },
    { value: 'low', label: 'Price: Low → High' },
    { value: 'high', label: 'Price: High → Low' },
    { value: 'off', label: 'Biggest discount' },
    { value: 'new', label: 'New arrivals' },
  ];

  // Handle "new" sort (by product date/id descending as proxy)
  const sortedProducts = useMemo(() => {
    if (sortBy === 'new') {
      return [...filteredProducts].sort((a, b) => (b.id || 0) - (a.id || 0));
    }
    return filteredProducts;
  }, [filteredProducts, sortBy]);

  // "popular" is default order (no re-sort needed)
  const displayProducts = sortBy === 'popular' ? filteredProducts : sortedProducts;

  return (
    <div className="wrap">
      <div className="phead">
        <h1>{pageTitle}</h1>
        <p>{pageSubtitle}</p>
      </div>

      {shopSettings?.promo?.enabled && (
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>
          <PromoBanner settings={shopSettings.promo} />
        </div>
      )}

      <div className="tools">
        {shopSettings?.show_categories !== false && (
        <div className="chipsrow">
          <button
            type="button"
            className={`chip${activeCategory === 'all' ? ' on' : ''}`}
            aria-pressed={activeCategory === 'all'}
            onClick={() => setActiveCategory('all')}
          >
            All
          </button>
          {availableCategories.map((c) => (
            <button
              key={c.slug}
              type="button"
              className={`chip${activeCategory === c.slug ? ' on' : ''}`}
              aria-pressed={activeCategory === c.slug}
              onClick={() => setActiveCategory(c.slug)}
            >
              {c.name}
            </button>
          ))}
          <button
            type="button"
            className={`chip${activeCategory === 'sale' ? ' on' : ''}`}
            aria-pressed={activeCategory === 'sale'}
            onClick={() => setActiveCategory('sale')}
          >
            Offer Zone
          </button>
        </div>
        )}
        <label className="sr" htmlFor="sortsel">
          Sort
        </label>
        <select
          id="sortsel"
          className="sortsel"
          value={sortBy}
          onChange={(e) => setSortBy(e.target.value)}
        >
          {sortOptions.map((o) => (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          ))}
        </select>
      </div>

      <div className="count" style={{ margin: '12px 0' }}>
        {displayProducts.length} products
      </div>

      <section style={{ paddingBottom: 'clamp(40px, 6vw, 72px)' }}>
        {displayProducts.length === 0 ? (
          <div className="empty">
            <h3>কিছু পাওয়া যায়নি</h3>
            <p>
              অন্য শব্দে খুঁজুন অথবা <Link className="link" href="/shop">সব পণ্য দেখুন</Link>
            </p>
          </div>
        ) : (
          <div className="grid">
            {displayProducts.map((p, idx) => (
              <ProductCard key={p.id} product={p} index={idx} hoverTags={hoverTags} />
            ))}
          </div>
        )}
      </section>
    </div>
  );
}