"use client";

import Link from "next/link";
import { SlidersHorizontal } from "lucide-react";
import { useEffect, useState } from "react";

const weights = ["1g", "2.5g", "5g", "10g", "1 oz", "5 oz", "10 oz", "100 oz", "1 kg"];
const purities = ["22k", "24k", ".999", ".9999"];
const brands = ["Nadir", "IAR", "Atasay", "Royal Mint", "Perth Mint", "PAMP Suisse", "Valcambi", "US Mint", "Royal Canadian Mint"];

function FilterBlock({ title, items, name }: { title: string; items: string[]; name: string }) {
  return (
    <details className="listing-filter-group" open>
      <summary className="listing-filter-title">{title}</summary>
      <div className="mt-3 grid gap-2 text-sm">
        {items.map((item) => (
          <label key={item} className="listing-check-row">
            <input className="listing-check-input" type="checkbox" name={name} value={item} />
            <span>{item}</span>
          </label>
        ))}
      </div>
    </details>
  );
}

export function ProductFilterPanel({ search, sort, resultCount }: { search: string; sort?: string; resultCount: number }) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const media = window.matchMedia("(min-width: 1024px)");
    const syncOpen = () => setOpen(media.matches);
    syncOpen();
    media.addEventListener("change", syncOpen);
    return () => media.removeEventListener("change", syncOpen);
  }, []);

  return (
    <details className="product-filter-panel listing-filter-card h-fit lg:sticky lg:top-44" open={open} onToggle={(event) => setOpen(event.currentTarget.open)}>
      <summary className="product-filter-summary">
        <span className="inline-flex items-center gap-2">
          <SlidersHorizontal size={18} className="text-[#d4af37]" />
          <span className="lg:hidden">Filter & Sort</span>
          <span className="hidden lg:inline">Refine Results</span>
        </span>
        <strong className="lg:hidden">{resultCount} products</strong>
      </summary>
      <div className="product-filter-body">
        <div className="hidden border-b border-[#efe6d2] bg-[#fffdf8] px-4 py-3 text-xs font-bold uppercase tracking-[0.12em] text-[#7a5310] lg:block">Metal, format, size, and availability</div>
        <form className="p-4">
          <div className="mobile-filter-search">
            <label>
              Search products
              <input name="search" defaultValue={search} placeholder="Gold, silver, mint, weight" />
            </label>
            <label>
              Sort
              <select name="sort" defaultValue={sort || "featured"}>
                <option value="featured">Featured</option>
                <option value="price-asc">Price Low to High</option>
                <option value="price-desc">Price High to Low</option>
              </select>
            </label>
          </div>
          <FilterBlock title="Metal Type" name="metal" items={["Gold", "Silver"]} />
          <FilterBlock title="Product Type" name="type" items={["Coin", "Bar", "Round", "Collectible"]} />
          <FilterBlock title="Weight" name="weight" items={weights} />
          <FilterBlock title="Purity / Ayar" name="purity" items={purities} />
          <FilterBlock title="Brand / Mint" name="brand" items={brands} />
          <details className="listing-filter-group" open>
            <summary className="listing-filter-title">Price Range</summary>
            <div className="mt-3 grid grid-cols-2 gap-2 text-sm">
              {["Under $250", "$250 - $1,000", "$1,000 - $5,000", "$5,000+"].map((item) => (
                <label key={item} className="listing-price-chip">
                  <input className="sr-only" type="checkbox" name="price" value={item} />
                  <span>{item}</span>
                </label>
              ))}
            </div>
          </details>
          <FilterBlock title="Stock Status" name="stock" items={["In Stock", "Low Stock", "Out of Stock"]} />
          <label className="listing-ira-row">
            <input className="listing-check-input" type="checkbox" name="ira" value="true" />
            <span>IRA eligible</span>
          </label>
          <div className="mt-4 grid gap-2">
            <button className="btn btn-primary w-full">Apply Filters</button>
            <Link href="/products" className="btn btn-secondary w-full">Clear Filters</Link>
          </div>
        </form>
        <div className="catalog-help-card hidden lg:grid">
          <strong>Need help choosing?</strong>
          <p>Compare metal, weight, mint, and checkout options before placing an order.</p>
          <Link href="/support">Contact Support</Link>
        </div>
      </div>
    </details>
  );
}