"use client";

import { useEffect, useMemo, useState } from "react";
import ProductCard from "@/components/ProductCard";
import FilterSheet, { type FilterState } from "@/components/FilterSheet";
import type { DiskFilters, Product, ProductListResponse, TireFilters } from "@/types/product";

type Category = "tire" | "disk";

export default function CatalogView() {
  const [category, setCategory] = useState<Category>("tire");
  const [search, setSearch] = useState("");
  const [sort, setSort] = useState("popular");
  const [filters, setFilters] = useState<FilterState>({});
  const [filterOpen, setFilterOpen] = useState(false);

  const [tireOptions, setTireOptions] = useState<TireFilters | null>(null);
  const [diskOptions, setDiskOptions] = useState<DiskFilters | null>(null);

  const [items, setItems] = useState<Product[]>([]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setFilters({});
    setPage(1);
  }, [category]);

  useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/filters?category=${category}`, { signal: controller.signal })
      .then((r) => r.json())
      .then((data) => {
        if (category === "tire") setTireOptions(data);
        else setDiskOptions(data);
      })
      .catch(() => {});
    return () => controller.abort();
  }, [category]);

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);
    const params = new URLSearchParams({ category, sort, page: String(page), pageSize: "12" });
    if (search) params.set("q", search);
    if (filters.brand) params.set("brand", filters.brand);
    if (filters.width) params.set("width", String(filters.width));
    if (filters.height) params.set("height", String(filters.height));
    if (filters.diameter) params.set("diameter", String(filters.diameter));
    if (filters.season) params.set("season", filters.season);
    if (filters.pcd) params.set("pcd", filters.pcd);
    if (filters.diskType) params.set("diskType", filters.diskType);

    fetch(`/api/products?${params.toString()}`, { signal: controller.signal })
      .then((r) => r.json())
      .then((data: ProductListResponse) => {
        setItems((prev) => (page === 1 ? data.items : [...prev, ...data.items]));
        setTotalPages(data.totalPages);
      })
      .catch(() => {})
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [category, sort, page, search, filters]);

  const activeFilterCount = useMemo(
    () => Object.values(filters).filter((v) => v !== undefined && v !== "").length,
    [filters],
  );

  return (
    <div>
      <header className="safe-top sticky top-0 z-30 border-b border-white/10 bg-[var(--tg-bg)]/95 px-4 pb-3 pt-4 backdrop-blur">
        <h1 className="mb-3 text-xl font-bold">🛞 Шины и Диски</h1>
        <div className="flex gap-2">
          <input
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setPage(1);
            }}
            placeholder="Поиск по бренду или модели..."
            className="flex-1 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-[var(--tg-text)] placeholder:text-[var(--tg-hint)] focus:border-[var(--tg-accent)] focus:outline-none"
          />
        </div>

        <div className="mt-3 flex gap-2">
          {(["tire", "disk"] as Category[]).map((c) => (
            <button
              key={c}
              onClick={() => setCategory(c)}
              className={`flex-1 rounded-xl py-2 text-sm font-semibold transition-colors ${
                category === c
                  ? "bg-[var(--tg-accent)] text-white"
                  : "bg-white/5 text-[var(--tg-hint)]"
              }`}
            >
              {c === "tire" ? "Шины" : "Диски"}
            </button>
          ))}
        </div>

        <div className="mt-3 flex items-center gap-2">
          <button
            onClick={() => setFilterOpen(true)}
            className="relative flex items-center gap-1 rounded-xl border border-white/15 px-3 py-1.5 text-xs font-semibold text-[var(--tg-text)]"
          >
            ⚙️ Фильтры
            {activeFilterCount > 0 && (
              <span className="ml-1 rounded-full bg-[var(--tg-accent)] px-1.5 text-[10px] text-white">
                {activeFilterCount}
              </span>
            )}
          </button>
          <select
            value={sort}
            onChange={(e) => {
              setSort(e.target.value);
              setPage(1);
            }}
            className="rounded-xl border border-white/15 bg-[var(--tg-surface)] px-2 py-1.5 text-xs text-[var(--tg-text)]"
          >
            <option value="popular">По популярности</option>
            <option value="price_asc">Сначала дешевле</option>
            <option value="price_desc">Сначала дороже</option>
          </select>
        </div>
      </header>

      <main className="px-4 py-4">
        {items.length === 0 && !loading && (
          <p className="mt-10 text-center text-sm text-[var(--tg-hint)]">
            Ничего не найдено. Попробуйте изменить фильтры.
          </p>
        )}

        <div className="grid grid-cols-2 gap-3">
          {items.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>

        {loading && (
          <p className="mt-4 text-center text-sm text-[var(--tg-hint)]">Загрузка...</p>
        )}

        {!loading && page < totalPages && (
          <button
            onClick={() => setPage((p) => p + 1)}
            className="mx-auto mt-5 block rounded-xl border border-white/15 px-6 py-2.5 text-sm font-semibold text-[var(--tg-text)]"
          >
            Показать ещё
          </button>
        )}
      </main>

      {filterOpen && (
        <FilterSheet
          category={category}
          options={category === "tire" ? tireOptions : diskOptions}
          value={filters}
          onApply={(value) => {
            setFilters(value);
            setPage(1);
            setFilterOpen(false);
          }}
          onClose={() => setFilterOpen(false)}
        />
      )}
    </div>
  );
}