'use client';

import { useEffect, useState, useRef } from 'react';
import { ChevronDown } from 'lucide-react';
import {
  useProductListing,
  sortOptions,
  isActiveInTree,
  type CategoryNode,
} from '@/core/hooks/use-product-listing';
import { ProductGrid } from '@/ui/product/product-grid';
import { LoadingSpinner } from '@/ui/shared/loading-spinner';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';

/** Radix Select items can't carry an empty-string value, so "no filter"
 *  round-trips through this sentinel and is written back as ''. */
const ALL = '__all__';

/** Recursive dropdown items for nested categories */
function CategoryDropdownItems({
  items,
  depth,
  selectedId,
  onSelect,
}: {
  items: CategoryNode[];
  depth: number;
  selectedId: string;
  onSelect: (id: string) => void;
}) {
  return (
    <>
      {items.map((child) => (
        <div key={child.id}>
          <button
            onClick={() => onSelect(child.id)}
            className={cn(
              'hover:bg-muted w-full px-4 py-2 text-start text-sm transition-colors',
              selectedId === child.id && 'bg-primary/10 text-primary font-medium'
            )}
            style={{ paddingInlineStart: `${(depth + 1) * 16}px` }}
          >
            {child.name}
          </button>
          {child.children.length > 0 && (
            <CategoryDropdownItems
              items={child.children}
              depth={depth + 1}
              selectedId={selectedId}
              onSelect={onSelect}
            />
          )}
        </div>
      ))}
    </>
  );
}

/** Category chip with dropdown for subcategories */
function CategoryChip({
  category,
  selectedId,
  onSelect,
  tc,
}: {
  category: CategoryNode;
  selectedId: string;
  onSelect: (id: string) => void;
  tc: (key: string) => string;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const hasChildren = category.children.length > 0;
  const isActive = isActiveInTree(category, selectedId);

  // Find the display name for the selected subcategory
  function findName(nodes: CategoryNode[], id: string): string | null {
    for (const n of nodes) {
      if (n.id === id) return n.name;
      const found = findName(n.children, id);
      if (found) return found;
    }
    return null;
  }

  const selectedChildName =
    isActive && selectedId !== category.id ? findName(category.children, selectedId) : null;

  // Close dropdown on outside click
  useEffect(() => {
    if (!open) return;
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [open]);

  if (!hasChildren) {
    return (
      <button
        onClick={() => onSelect(category.id)}
        className={cn(
          'rounded-full border px-3 py-1.5 text-sm transition-colors',
          selectedId === category.id
            ? 'bg-primary text-primary-foreground border-primary'
            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
        )}
      >
        {category.name}
      </button>
    );
  }

  return (
    <div ref={ref} className="relative">
      <button
        onClick={() => setOpen((prev) => !prev)}
        className={cn(
          'inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-sm transition-colors',
          isActive
            ? 'bg-primary text-primary-foreground border-primary'
            : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
        )}
      >
        {category.name}
        {selectedChildName && (
          <span className="opacity-80">
            {'·'} {selectedChildName}
          </span>
        )}
        <ChevronDown
          className={cn('ms-0.5 h-3 w-3 transition-transform', open && 'rotate-180')}
          aria-hidden="true"
        />
      </button>

      {open && (
        <div className="bg-popover text-popover-foreground border-border absolute start-0 top-full z-50 mt-1 min-w-[180px] overflow-hidden rounded-lg border shadow-lg">
          {/* "All in [category]" option */}
          <button
            onClick={() => {
              onSelect(category.id);
              setOpen(false);
            }}
            className={cn(
              'hover:bg-muted w-full px-4 py-2 text-start text-sm font-medium transition-colors',
              selectedId === category.id && 'bg-primary/10 text-primary'
            )}
          >
            {tc('all')} {category.name}
          </button>
          <div className="bg-border mx-2 h-px" />
          {/* Recursive children */}
          <div onClick={() => setOpen(false)}>
            <CategoryDropdownItems
              items={category.children}
              depth={0}
              selectedId={selectedId}
              onSelect={onSelect}
            />
          </div>
        </div>
      )}
    </div>
  );
}

/**
 * Append a product count to a facet value label when one is known.
 *
 * `metafieldCounts` comes from `getMetafieldFilters()`, which not every mode
 * or store can answer — a missing entry means "no count available", NOT zero,
 * so the bare label is returned unchanged rather than showing "(0)" on a facet
 * that may well have products behind it.
 */
function withCount(label: string, count: number | undefined): string {
  return typeof count === 'number' ? `${label} (${count})` : label;
}

/**
 * Product listing page (filters + sort + grid + load-more). All data and
 * URL-state behavior comes from `useProductListing`; this component is
 * presentation only. Must be rendered inside `<Suspense>` (URL params).
 */
export function ProductListing() {
  const t = useTranslations('products');
  const tc = useTranslations('common');

  const {
    products,
    loading,
    loadingMore,
    page,
    totalPages,
    total,
    categories,
    brands,
    tags,
    metafieldDefs,
    metafieldCounts,
    searchQuery,
    categoryId,
    brandId,
    tagId,
    sortIndex,
    handleLoadMore,
    updateParam,
    handleCategorySelect,
    getSelectedMetafieldValues,
    setMetafieldValue,
  } = useProductListing();

  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      {/* Page Header */}
      <div className="mb-8">
        <h1 className="text-foreground text-3xl font-bold">
          {searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}
        </h1>
        {!loading && (
          <p className="text-muted-foreground mt-1 text-sm">
            {total} {total === 1 ? tc('product') : tc('products')} {tc('found')}
          </p>
        )}
      </div>

      {/* Filters and Sort */}
      <div className="mb-6 flex flex-col gap-4">
        {/* Category Filter */}
        {categories.length > 0 && (
          <div className="flex flex-wrap gap-2">
            <button
              onClick={() => updateParam('category', '')}
              className={cn(
                'rounded-full border px-3 py-1.5 text-sm transition-colors',
                !categoryId
                  ? 'bg-primary text-primary-foreground border-primary'
                  : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
              )}
            >
              {tc('all')}
            </button>
            {categories.map((cat) => (
              <CategoryChip
                key={cat.id}
                category={cat}
                selectedId={categoryId}
                onSelect={handleCategorySelect}
                tc={tc as (key: string) => string}
              />
            ))}
          </div>
        )}

        {/* Brand, Tag & Sort row */}
        <div className="flex flex-wrap items-center gap-3">
          {/* Brand Filter */}
          {brands.length > 0 && (
            <Select
              value={brandId || ALL}
              onValueChange={(v) => updateParam('brand', v === ALL ? '' : v)}
            >
              <SelectTrigger className="h-9 w-auto min-w-[8rem] rounded" aria-label={t('allBrands')}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={ALL}>{t('allBrands')}</SelectItem>
                {brands.map((b) => (
                  <SelectItem key={b.id} value={b.id}>
                    {b.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}

          {/* Tag Filter */}
          {tags.length > 0 && (
            <Select
              value={tagId || ALL}
              onValueChange={(v) => updateParam('tag', v === ALL ? '' : v)}
            >
              <SelectTrigger className="h-9 w-auto min-w-[8rem] rounded" aria-label={t('allTags')}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={ALL}>{t('allTags')}</SelectItem>
                {tags.map((tg) => (
                  <SelectItem key={tg.id} value={tg.id}>
                    {tg.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}

          {/* Custom-field (metafield) facets — rendered per definition type.
              Only definitions flagged `filterable: true` and published to
              this sales channel reach this list (see `metafieldDefs` filter
              in the hook). The merchant's display name (`def.name`) is shown
              as-is — `enumValues` come from the merchant's dashboard config. */}
          {metafieldDefs.map((def) => {
            const selected = getSelectedMetafieldValues(def.key);
            const counts = metafieldCounts[def.key];

            if (def.type === 'BOOLEAN') {
              const isOn = selected.includes('true');
              return (
                <Label
                  key={def.id}
                  className="border-border text-foreground hover:border-primary inline-flex h-9 cursor-pointer items-center gap-2 rounded border px-3 text-sm font-normal transition-colors"
                >
                  <Checkbox
                    checked={isOn}
                    onCheckedChange={(checked) =>
                      setMetafieldValue(def.key, checked === true ? ['true'] : [])
                    }
                  />
                  {def.name}
                </Label>
              );
            }

            if (def.type === 'SELECT') {
              return (
                <Select
                  key={def.id}
                  value={selected[0] || ALL}
                  onValueChange={(v) => setMetafieldValue(def.key, v === ALL ? [] : [v])}
                >
                  <SelectTrigger
                    className="h-9 w-auto min-w-[8rem] rounded"
                    aria-label={def.name}
                  >
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value={ALL}>{`${tc('all')} ${def.name}`}</SelectItem>
                    {(def.enumValues || []).map((v) => (
                      <SelectItem key={v.value} value={v.value}>
                        {withCount(v.label || v.value, counts?.[v.value])}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              );
            }

            // MULTI_SELECT — chip toggles. Each click adds/removes one value.
            return (
              <div
                key={def.id}
                className="border-border inline-flex items-center gap-1 rounded border px-2 py-1"
                aria-label={def.name}
              >
                <span className="text-muted-foreground px-1 text-xs">{def.name}:</span>
                {(def.enumValues || []).map((v) => {
                  const active = selected.includes(v.value);
                  return (
                    <button
                      key={v.value}
                      type="button"
                      onClick={() =>
                        setMetafieldValue(
                          def.key,
                          active ? selected.filter((s) => s !== v.value) : [...selected, v.value]
                        )
                      }
                      className={cn(
                        'rounded-full border px-2 py-0.5 text-xs transition-colors',
                        active
                          ? 'bg-primary text-primary-foreground border-primary'
                          : 'border-border text-muted-foreground hover:border-primary hover:text-foreground'
                      )}
                    >
                      {withCount(v.label || v.value, counts?.[v.value])}
                    </button>
                  );
                })}
              </div>
            );
          })}

          {/* Sort */}
          <div className="flex items-center gap-2 sm:ms-auto">
            <Label
              htmlFor="sort"
              className="text-muted-foreground whitespace-nowrap font-normal"
            >
              {tc('sortBy')}
            </Label>
            <Select
              value={String(sortIndex)}
              onValueChange={(v) => updateParam('sort', v)}
            >
              <SelectTrigger id="sort" className="h-9 w-auto min-w-[8rem] rounded">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {sortOptions.map((opt, idx) => (
                  <SelectItem key={idx} value={String(idx)}>
                    {t(opt.labelKey)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* Products Grid */}
      {loading ? (
        <div className="flex items-center justify-center py-20">
          <LoadingSpinner size="lg" />
        </div>
      ) : (
        <>
          <ProductGrid products={products} />

          {/* Load More */}
          {page < totalPages && (
            <div className="mt-10 flex justify-center">
              <Button
                onClick={handleLoadMore}
                disabled={loadingMore}
                className="rounded px-6 py-2.5"
              >
                {loadingMore ? (
                  <>
                    <LoadingSpinner
                      size="sm"
                      className="border-primary-foreground/30 border-t-primary-foreground"
                    />
                    {tc('loading')}
                  </>
                ) : (
                  t('loadMore')
                )}
              </Button>
            </div>
          )}
        </>
      )}
    </div>
  );
}