"use client";

import { useState, useEffect } from "react";
import { useAppStore } from "@/lib/store";
import { useApi, apiPost } from "@/lib/api";
import { Poster } from "../poster";
import { Spinner, EmptyState } from "../skeleton";
import { cn } from "@/lib/utils";
import { toPersianDigits } from "@/lib/poster";
import { Search, Sparkles, Film, Tv, Mic2, Radio, ArrowLeft, Loader2 } from "lucide-react";
import type { PosterItem } from "../poster";

interface SearchData {
  query: string;
  suggestion: string[];
  movies: PosterItem[];
  series: PosterItem[];
  actors: { id: string; name: string; persianName: string; gradient: [string, string] }[];
  channels: { id: string; name: string; persianName: string; logoColors: [string, string]; status: string }[];
  tracks: { id: string; title: string; duration: number; plays: number; coverColors: [string, string]; artist: { name: string; persianName: string } }[];
  total: number;
}

interface AiSearchResult {
  summary: string;
  filters: { type: string; genres: string[]; minRating: number; summary: string };
  movies: PosterItem[];
  series: PosterItem[];
  total: number;
}

export function SearchView() {
  const initialQuery = useAppStore((s) => s.searchQuery ?? "");
  const [q, setQ] = useState(initialQuery);
  const [mode, setMode] = useState<"normal" | "ai">("normal");
  const [aiLoading, setAiLoading] = useState(false);
  const [aiResult, setAiResult] = useState<AiSearchResult | null>(null);
  const navigate = useAppStore((s) => s.navigate);

  const path = q.trim() ? `/api/search?q=${encodeURIComponent(q.trim())}&limit=8` : null;
  const { data, loading } = useApi<SearchData>(path);

  useEffect(() => { setQ(initialQuery); }, [initialQuery]);

  const runAiSearch = async () => {
    if (!q.trim()) return;
    setMode("ai");
    setAiLoading(true);
    setAiResult(null);
    try {
      const res = await apiPost<AiSearchResult>("/api/ai/search", { query: q.trim() });
      setAiResult(res);
    } catch (e: any) {
      setAiResult({ summary: "خطا در جستجوی هوشمند.", filters: { type: "all", genres: [], minRating: 0, summary: "" }, movies: [], series: [], total: 0 });
    } finally {
      setAiLoading(false);
    }
  };

  return (
    <div className="px-4 md:px-8 py-6">
      <h1 className="text-2xl md:text-3xl font-black flex items-center gap-3 mb-6">
        <span className="h-8 w-1.5 rounded-full bg-gradient-brand" />
        <Search className="h-7 w-7" /> جستجو
      </h1>

      {/* Search bar */}
      <div className="flex gap-2 mb-4">
        <div className="flex items-center glass rounded-xl px-4 py-3 flex-1">
          <Search className="h-5 w-5 text-muted-foreground ml-2" />
          <input
            value={q}
            onChange={(e) => { setQ(e.target.value); setMode("normal"); }}
            onKeyDown={(e) => { if (e.key === "Enter") runAiSearch(); }}
            placeholder="نام فیلم، سریال، بازیگر، شبکه یا آهنگ..."
            className="bg-transparent flex-1 px-2 text-sm outline-none placeholder:text-muted-foreground"
            autoFocus
          />
        </div>
        <button
          onClick={runAiSearch}
          disabled={aiLoading || !q.trim()}
          className="inline-flex items-center gap-2 rounded-xl bg-gradient-brand hover:opacity-90 px-4 md:px-6 font-bold text-sm text-white transition disabled:opacity-50"
        >
          {aiLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
          <span className="hidden sm:inline">جستجوی هوشمند</span>
        </button>
      </div>

      {/* AI result banner */}
      {mode === "ai" && (
        <div className="mb-6">
          {aiLoading ? (
            <div className="glass rounded-2xl p-6 flex items-center gap-3">
              <Loader2 className="h-5 w-5 animate-spin text-accent" />
              <span className="text-sm text-muted-foreground">هوش مصنوعی در حال تحلیل درخواست شماست...</span>
            </div>
          ) : aiResult ? (
            <div className="glass rounded-2xl p-4 md:p-6 border border-accent/30">
              <div className="flex items-start gap-3">
                <Sparkles className="h-5 w-5 text-accent shrink-0 mt-0.5" />
                <div>
                  <div className="font-bold mb-1">نتایج جستجوی هوشمند</div>
                  <p className="text-sm text-muted-foreground">{aiResult.summary}</p>
                  {aiResult.filters.genres.length > 0 && (
                    <div className="flex gap-1.5 mt-2 flex-wrap">
                      {aiResult.filters.genres.map((g) => (
                        <span key={g} className="rounded-full bg-accent/20 text-accent px-2 py-0.5 text-[10px] font-bold">{g}</span>
                      ))}
                      {aiResult.filters.minRating > 0 && <span className="rounded-full bg-warning/20 text-warning px-2 py-0.5 text-[10px] font-bold">امتیاز +{toPersianDigits(aiResult.filters.minRating)}</span>}
                    </div>
                  )}
                </div>
              </div>
            </div>
          ) : null}
        </div>
      )}

      {/* Suggestions when empty */}
      {!q.trim() && data?.suggestion?.length ? (
        <div>
          <h3 className="text-sm font-bold text-muted-foreground mb-2">جستجوهای اخیر</h3>
          <div className="flex flex-wrap gap-2">
            {data.suggestion.map((s, i) => (
              <button key={i} onClick={() => setQ(s)} className="rounded-full glass px-3 py-1.5 text-sm hover:bg-primary/20 transition">{s}</button>
            ))}
          </div>
        </div>
      ) : null}

      {/* Results */}
      {mode === "ai" && aiResult ? (
        <div>
          {aiResult.movies.length > 0 && (
            <Section title="فیلم‌ها" count={aiResult.movies.length}>
              <Grid items={aiResult.movies} />
            </Section>
          )}
          {aiResult.series.length > 0 && (
            <Section title="سریال‌ها" count={aiResult.series.length}>
              <Grid items={aiResult.series} />
            </Section>
          )}
          {aiResult.total === 0 && <EmptyState icon={Film} title="موردی یافت نشد" subtitle="درخواست خود را دقیق‌تر کنید." />}
        </div>
      ) : q.trim() ? (
        loading ? (
          <div className="h-40 flex items-center justify-center"><Spinner /></div>
        ) : data && data.total === 0 ? (
          <EmptyState icon={Film} title="موردی یافت نشد" subtitle={`نتیجه‌ای برای «${q}» پیدا نشد.`} />
        ) : data ? (
          <div className="space-y-8">
            {data.movies.length > 0 && <Section title="فیلم‌ها" count={data.movies.length}><Grid items={data.movies} /></Section>}
            {data.series.length > 0 && <Section title="سریال‌ها" count={data.series.length}><Grid items={data.series} /></Section>}
            {data.actors.length > 0 && (
              <Section title="بازیگران" count={data.actors.length}>
                <div className="flex gap-3 overflow-x-auto hide-scrollbar pb-2">
                  {data.actors.map((a) => (
                    <div key={a.id} className="shrink-0 w-20 text-center">
                      <div className="relative aspect-square rounded-full overflow-hidden mx-auto mb-2" style={{ background: `linear-gradient(135deg, ${a.gradient[0]}, ${a.gradient[1]})` }}>
                        <div className="absolute inset-0 flex items-center justify-center text-2xl font-black text-white/80">{a.persianName.charAt(0)}</div>
                      </div>
                      <div className="text-xs font-bold truncate">{a.persianName}</div>
                    </div>
                  ))}
                </div>
              </Section>
            )}
            {data.channels.length > 0 && (
              <Section title="شبکه‌های تلویزیونی" count={data.channels.length}>
                <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
                  {data.channels.map((ch) => (
                    <button key={ch.id} onClick={() => navigate("live")} className="glass rounded-xl p-3 hover:bg-primary/10 transition text-center">
                      <div className="h-10 w-10 rounded-lg mx-auto mb-2 flex items-center justify-center text-white font-black" style={{ background: `linear-gradient(135deg, ${ch.logoColors[0]}, ${ch.logoColors[1]})` }}>{ch.persianName.charAt(0)}</div>
                      <div className="text-xs font-bold truncate">{ch.persianName}</div>
                    </button>
                  ))}
                </div>
              </Section>
            )}
            {data.tracks.length > 0 && (
              <Section title="آهنگ‌ها" count={data.tracks.length}>
                <div className="space-y-1">
                  {data.tracks.map((t) => (
                    <button key={t.id} onClick={() => navigate("music")} className="w-full flex items-center gap-3 rounded-lg p-2 hover:bg-white/5 transition">
                      <div className="h-10 w-10 rounded-md shrink-0" style={{ background: `linear-gradient(135deg, ${t.coverColors[0]}, ${t.coverColors[1]})` }} />
                      <div className="flex-1 text-right"><div className="text-sm font-medium">{t.title}</div><div className="text-xs text-muted-foreground">{t.artist.persianName}</div></div>
                    </button>
                  ))}
                </div>
              </Section>
            )}
          </div>
        ) : null
      ) : null}
    </div>
  );
}

function Section({ title, count, children }: { title: string; count: number; children: React.ReactNode }) {
  return (
    <div>
      <h2 className="flex items-center gap-2 text-lg font-bold mb-3">
        <span className="h-5 w-1 rounded-full bg-gradient-brand" /> {title}
        <span className="text-xs text-muted-foreground font-normal">({toPersianDigits(count)})</span>
      </h2>
      {children}
    </div>
  );
}

function Grid({ items }: { items: PosterItem[] }) {
  return (
    <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
      {items.map((it, i) => <Poster key={`${it.slug}-${i}`} item={it} className="w-full" />)}
    </div>
  );
}