"use client";

import { useState, useEffect, useCallback } from "react";
import { useApi } from "@/lib/api";
import { PosterGrid } from "../content-row";
import { EmptyState, Spinner } from "../skeleton";
import { Film, SlidersHorizontal, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { toPersianDigits } from "@/lib/poster";
import type { PosterItem } from "../poster";

interface BrowseViewProps {
  endpoint: string; // "/api/movies" | "/api/series"
  title: string;
  initialGenre?: string;
}

interface BrowseResponse {
  items: PosterItem[];
  total: number;
  page: number;
  totalPages: number;
  filters: {
    genres: { slug: string; name: string; persianName: string }[];
    years: number[];
    qualities: string[];
    countries?: { slug: string; name: string; persianName: string }[];
  };
}

export function BrowseView({ endpoint, title, initialGenre }: BrowseViewProps) {
  const [genre, setGenre] = useState(initialGenre ?? "");
  const [year, setYear] = useState("");
  const [quality, setQuality] = useState("");
  const [sort, setSort] = useState("latest");
  const [dubbed, setDubbed] = useState(false);
  const [showFilters, setShowFilters] = useState(false);

  const filterKey = `${genre}|${year}|${quality}|${sort}|${dubbed}`;
  const [trackedKey, setTrackedKey] = useState(filterKey);
  const [page, setPage] = useState(1);
  const [moreItems, setMoreItems] = useState<PosterItem[]>([]);

  // Reset pagination when filters change (render-phase adjustment).
  if (trackedKey !== filterKey) {
    setTrackedKey(filterKey);
    setPage(1);
    setMoreItems([]);
  }

  const qs = useCallback((p: number) => {
    const params = new URLSearchParams();
    params.set("page", String(p));
    params.set("limit", "24");
    if (genre) params.set("genre", genre);
    if (year) params.set("year", year);
    if (quality) params.set("quality", quality);
    if (dubbed) params.set("dubbed", "1");
    if (sort) params.set("sort", sort);
    return `${endpoint}?${params.toString()}`;
  }, [endpoint, genre, year, quality, dubbed, sort]);

  const { data, loading } = useApi<BrowseResponse>(qs(1));

  const items = [...(data?.items ?? []), ...moreItems];

  // load more pages
  const [more, setMore] = useState<{ loading: boolean; data: BrowseResponse | null }>({ loading: false, data: null });
  const loadMore = async () => {
    if (!data || page >= data.totalPages) return;
    setMore({ loading: true, data: null });
    try {
      const res = await fetch(qs(page + 1));
      const json: BrowseResponse = await res.json();
      setMoreItems((prev) => [...prev, ...json.items]);
      setPage((p) => p + 1);
      setMore({ loading: false, data: json });
    } catch {
      setMore({ loading: false, data: null });
    }
  };

  const totalPages = more.data?.totalPages ?? data?.totalPages ?? 1;
  const filters = data?.filters;

  return (
    <div className="px-4 md:px-8 py-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl md:text-3xl font-black flex items-center gap-3">
            <span className="h-8 w-1.5 rounded-full bg-gradient-brand" />
            {title}
          </h1>
          {data && (
            <p className="text-sm text-muted-foreground mt-1">{toPersianDigits(data.total)} عنوان</p>
          )}
        </div>
        <button
          onClick={() => setShowFilters((p) => !p)}
          className="flex items-center gap-2 rounded-xl glass px-4 py-2 text-sm font-medium hover:bg-primary/10 transition md:hidden"
        >
          <SlidersHorizontal className="h-4 w-4" /> فیلترها
        </button>
      </div>

      <div className={cn("grid md:grid-cols-[220px_1fr] gap-6", !showFilters && "max-md:[&>aside]:hidden")}>
        {/* Filters sidebar */}
        <aside className="space-y-4 h-fit md:sticky md:top-20">
          <FilterGroup title="ژانر">
            <div className="flex flex-wrap gap-1.5">
              <Chip active={!genre} onClick={() => setGenre("")}>همه</Chip>
              {filters?.genres.map((g) => (
                <Chip key={g.slug} active={genre === g.slug} onClick={() => setGenre(g.slug)}>{g.persianName}</Chip>
              ))}
            </div>
          </FilterGroup>

          <FilterGroup title="سال">
            <select value={year} onChange={(e) => setYear(e.target.value)} className="w-full bg-card border border-border rounded-lg px-3 py-2 text-sm">
              <option value="">همه</option>
              {filters?.years.map((y) => (
                <option key={y} value={y}>{toPersianDigits(y)}</option>
              ))}
            </select>
          </FilterGroup>

          <FilterGroup title="کیفیت">
            <div className="flex flex-wrap gap-1.5">
              <Chip active={!quality} onClick={() => setQuality("")}>همه</Chip>
              {filters?.qualities.map((q) => (
                <Chip key={q} active={quality === q} onClick={() => setQuality(q)}>{q === "2160p" ? "4K" : q}</Chip>
              ))}
            </div>
          </FilterGroup>

          <FilterGroup title="مرتب‌سازی">
            <select value={sort} onChange={(e) => setSort(e.target.value)} className="w-full bg-card border border-border rounded-lg px-3 py-2 text-sm">
              <option value="latest">جدیدترین</option>
              <option value="rating">بالاترین امتیاز</option>
              <option value="views">پربازدیدترین</option>
              <option value="year">جدیدترین سال</option>
            </select>
          </FilterGroup>

          <FilterGroup title="صدا">
            <Chip active={dubbed} onClick={() => setDubbed(!dubbed)}>فقط دوبله فارسی</Chip>
          </FilterGroup>
        </aside>

        {/* Grid */}
        <div>
          {loading ? (
            <div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4">
              {Array.from({ length: 15 }).map((_, i) => (
                <div key={i} className="aspect-[2/3] rounded-xl shimmer" />
              ))}
            </div>
          ) : items.length === 0 ? (
            <EmptyState icon={Film} title="موردی یافت نشد" subtitle="فیلترها را تغییر دهید یا بعداً دوباره تلاش کنید." />
          ) : (
            <>
              <PosterGrid items={items} />
              <div className="flex justify-center mt-8">
                {page < totalPages ? (
                  <button
                    onClick={loadMore}
                    disabled={more.loading}
                    className="rounded-xl glass-strong hover:bg-primary/20 px-6 py-3 font-bold text-sm transition flex items-center gap-2"
                  >
                    {more.loading ? <Spinner className="h-5 w-5" /> : null}
                    بارگذاری بیشتر
                  </button>
                ) : (
                  <p className="text-sm text-muted-foreground">پایان لیست</p>
                )}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function FilterGroup({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="glass rounded-xl p-3">
      <div className="text-xs font-bold text-muted-foreground mb-2">{title}</div>
      {children}
    </div>
  );
}

function Chip({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
  return (
    <button
      onClick={onClick}
      className={cn(
        "rounded-full px-3 py-1 text-xs font-medium transition",
        active ? "bg-primary text-white" : "glass text-muted-foreground hover:text-white",
      )}
    >
      {children}
    </button>
  );
}