'use client';

import { useMemo, useState } from 'react';
import { useTranslations } from 'next-intl';
import { ProductCard, type ProductCardData } from '@/components/cards/product-card';
import type { Locale } from '@/i18n/config';

export interface ProductCategoryData {
  slug: string;
  name: string;
}

type SortKey = 'newest' | 'price-asc' | 'price-desc' | 'name';

export function ProductListing({
  products,
  categories,
  locale
}: {
  products: ProductCardData[];
  categories: ProductCategoryData[];
  locale: Locale;
}) {
  const t = useTranslations('filters');
  const c = useTranslations('common');

  const [query, setQuery] = useState('');
  const [category, setCategory] = useState('all');
  const [sort, setSort] = useState<SortKey>('newest');

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    const list = products.filter((p) => {
      if (category !== 'all' && p.categorySlug !== category) return false;
      if (q && !`${p.name} ${p.shortDescription}`.toLowerCase().includes(q)) return false;
      return true;
    });

    switch (sort) {
      case 'price-asc':
        return [...list].sort((a, b) => (a.price ?? Infinity) - (b.price ?? Infinity));
      case 'price-desc':
        return [...list].sort((a, b) => (b.price ?? -Infinity) - (a.price ?? -Infinity));
      case 'name':
        return [...list].sort((a, b) => a.name.localeCompare(b.name, locale === 'ar' ? 'ar' : 'fr'));
      case 'newest':
      default:
        return list;
    }
  }, [products, query, category, sort, locale]);

  return (
    <div>
      <div className="mt-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={c('search')}
          className="rounded-lg border border-graphite-800/20 px-3 py-2 text-sm"
        />
        <select
          value={category}
          onChange={(e) => setCategory(e.target.value)}
          className="rounded-lg border border-graphite-800/20 bg-white px-3 py-2 text-sm"
        >
          <option value="all">{t('allCategories')}</option>
          {categories.map((cat) => (
            <option key={cat.slug} value={cat.slug}>
              {cat.name}
            </option>
          ))}
        </select>
        <select
          value={sort}
          onChange={(e) => setSort(e.target.value as SortKey)}
          className="rounded-lg border border-graphite-800/20 bg-white px-3 py-2 text-sm"
        >
          <option value="newest">{t('sortNewest')}</option>
          <option value="price-asc">{t('sortPriceAsc')}</option>
          <option value="price-desc">{t('sortPriceDesc')}</option>
          <option value="name">{t('sortTitle')}</option>
        </select>
      </div>

      {filtered.length > 0 ? (
        <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {filtered.map((p, i) => (
            <ProductCard key={p.id} product={p} locale={locale} delay={(i % 4) * 70} />
          ))}
        </div>
      ) : (
        <p className="mt-8 text-graphite-900/50">{c('noResults')}</p>
      )}
    </div>
  );
}