"use client";

import { useApi } from "@/lib/api";
import { useAppStore } from "@/lib/store";
import { HeroSlider } from "../hero-slider";
import { ContentRow, PosterGrid } from "../content-row";
import { Poster, type PosterItem } from "../poster";
import { RowSkeleton, Spinner } from "../skeleton";
import { Crown, Sparkles, Tv, Music, Film, Search } from "lucide-react";
import { toPersianDigits } from "@/lib/poster";

interface HomeData {
  heroes: PosterItem[];
  rows: { id: string; title: string; items: PosterItem[] }[];
  continueWatching: PosterItem[];
  genres: { id: string; name: string; persianName: string; slug: string }[];
}

interface AiRecommend {
  headline: string;
  recommendations: (PosterItem & { reason: string })[];
}

export function HomeView() {
  const { data, loading } = useApi<HomeData>("/api/content/home");
  const { data: aiRec, loading: aiLoading } = useApi<AiRecommend>("/api/ai/recommend");
  const navigate = useAppStore((s) => s.navigate);

  if (loading || !data) {
    return (
      <div>
        <div className="h-[68vh] min-h-[440px] max-h-[720px] shimmer" />
        <div className="pt-8">
          <RowSkeleton />
          <RowSkeleton />
          <RowSkeleton />
        </div>
      </div>
    );
  }

  return (
    <div>
      <HeroSlider items={data.heroes} />

      <div className="pt-8">
        {data.continueWatching.length > 0 && (
          <ContentRow title="ادامه تماشا" items={data.continueWatching} />
        )}

        {/* AI Recommendation */}
        <section className="mb-8 px-4 md:px-8">
          <div className="rounded-2xl glass p-4 md:p-6 relative overflow-hidden">
            <div className="absolute -top-20 -left-20 h-48 w-48 rounded-full bg-primary/20 blur-3xl" />
            <div className="absolute -bottom-20 -right-20 h-48 w-48 rounded-full bg-secondary/20 blur-3xl" />
            <div className="relative">
              <div className="flex items-center gap-2 mb-1">
                <Sparkles className="h-5 w-5 text-accent" />
                <h2 className="text-lg md:text-xl font-bold text-foreground">{aiRec?.headline ?? "پیشنهاد هوشمند AI"}</h2>
                <span className="rounded-md bg-accent/20 px-2 py-0.5 text-[10px] font-bold text-accent">AI</span>
              </div>
              <p className="text-xs text-muted-foreground mb-4">پیشنهاد شخصی‌سازی‌شده بر اساس تحلیل هوش مصنوعی PeepBox</p>
              {aiLoading || !aiRec ? (
                <div className="flex gap-3 md:gap-4 overflow-hidden">
                  {Array.from({ length: 6 }).map((_, i) => (
                    <div key={i} className="shrink-0 w-[140px] sm:w-[160px] md:w-[180px] aspect-[2/3] rounded-xl shimmer" />
                  ))}
                </div>
              ) : (
                <div className="flex gap-3 md:gap-4 overflow-x-auto hide-scrollbar pb-2">
                  {aiRec.recommendations.map((item, i) => (
                    <div key={`${item.slug}-${i}`} className="shrink-0 w-[140px] sm:w-[160px] md:w-[180px]">
                      <Poster item={item} showReason className="w-full" />
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </section>

        {/* Premium banner */}
        <PremiumBanner />

        {data.rows.map((row) => (
          <ContentRow
            key={row.id}
            title={row.title}
            items={row.items}
            onMore={
              row.id === "latest-series" ? () => navigate("series")
              : row.id === "trending" ? () => navigate("movies", undefined as any)
              : undefined
            }
          />
        ))}

        {/* Genres */}
        <section className="mb-8 px-4 md:px-8">
          <h2 className="flex items-center gap-2 text-lg md:text-xl font-bold mb-4">
            <span className="h-5 w-1 rounded-full bg-gradient-brand" /> کاوش بر اساس ژانر
          </h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
            {data.genres.map((g) => (
              <button
                key={g.id}
                onClick={() => navigate("movies", { adminTab: g.slug } as any)}
                className="relative h-20 rounded-xl glass overflow-hidden hover:scale-[1.03] transition group"
              >
                <div className="absolute inset-0 opacity-30 group-hover:opacity-50 transition" style={{ background: `linear-gradient(135deg, #7C3AED, #EC4899)` }} />
                <div className="relative h-full flex items-center justify-center">
                  <span className="font-bold text-white">{g.persianName}</span>
                </div>
              </button>
            ))}
          </div>
        </section>

        {/* Quick access cards */}
        <section className="mb-8 px-4 md:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {[
              { icon: Tv, label: "تلویزیون زنده", desc: "۱۴ شبکه آنلاین", view: "live" as const, color: "#EF4444" },
              { icon: Music, label: "موزیک", desc: "هنرمندان و آلبوم‌ها", view: "music" as const, color: "#22D3EE" },
              { icon: Film, label: "سینما", desc: "۲۵ فیلم", view: "movies" as const, color: "#7C3AED" },
              { icon: Search, label: "جستجوی هوشمند", desc: "جستجوی طبیعی با AI", view: "ai-center" as const, color: "#EC4899" },
            ].map((c) => (
              <button
                key={c.label}
                onClick={() => navigate(c.view)}
                className="rounded-xl glass p-4 hover:scale-[1.03] transition text-right group"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-lg mb-3" style={{ background: `${c.color}30` }}>
                  <c.icon className="h-5 w-5" style={{ color: c.color }} />
                </div>
                <div className="font-bold text-sm">{c.label}</div>
                <div className="text-xs text-muted-foreground mt-0.5">{c.desc}</div>
              </button>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

function PremiumBanner() {
  const navigate = useAppStore((s) => s.navigate);
  return (
    <section className="mb-8 px-4 md:px-8">
      <div className="relative rounded-2xl overflow-hidden bg-gradient-brand p-6 md:p-8">
        <div className="absolute inset-0 opacity-20" style={{ backgroundImage: "radial-gradient(circle at 20% 50%, white, transparent 40%)" }} />
        <div className="relative flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="text-center md:text-right">
            <div className="flex items-center gap-2 mb-2 justify-center md:justify-start">
              <Crown className="h-6 w-6 text-white" />
              <span className="text-xl md:text-2xl font-black text-white">اشتراک PeepBox Premium</span>
            </div>
            <p className="text-white/90 text-sm md:text-base max-w-xl">
              فیلم و سریال 4K بدون تبلیغ، تلویزیون زنده، موسیقی بی‌نهایت و ۴ دستگاه همزمان. سرگرمی، بدون مرز.
            </p>
          </div>
          <button
            onClick={() => navigate("subscription")}
            className="shrink-0 rounded-xl bg-white text-primary font-bold px-6 py-3 hover:bg-white/90 transition shadow-glow"
          >
            همین حالا عضو شو ←
          </button>
        </div>
      </div>
    </section>
  );
}