"use client";

import { useState } from "react";
import { ViewId } from "@/app/page";
import {
  LayoutGrid,
  ShoppingBag,
  Building2,
  Laptop,
  Stethoscope,
  Apple,
  Newspaper,
  Star,
  Check,
  ArrowLeft,
  ArrowRight,
  Eye,
  Sparkles,
  Download,
  Search,
  Filter,
  X,
  Layers,
  Wand2,
  Heart,
  Crown,
} from "lucide-react";
import { templates, templateCategories, type TemplateCategory, toFa, faNum } from "@/lib/site-saz-data";
import { useTemplates } from "@/lib/api-hooks";
import { useTheme } from "./ThemeProvider";
import { Moon, Sun } from "lucide-react";

export function TemplatesGallery({ onNavigate }: { onNavigate: (v: ViewId) => void }) {
  const { theme, toggle } = useTheme();
  const [category, setCategory] = useState<TemplateCategory | "all">("all");
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState<string | null>(null);

  // داده واقعی از دیتابیس
  const { data: dbTemplates, loading, error } = useTemplates(category);

  // در صورت بارگذاری نشدن، از داده محلی استفاده کن (fallback)
  const allTemplates = dbTemplates && dbTemplates.length > 0 ? dbTemplates : templates;

  const filtered = allTemplates.filter((t: any) => {
    if (category !== "all" && t.category !== category) return false;
    if (search && !t.name.includes(search) && !t.description.includes(search)) return false;
    return true;
  });

  const selectedTemplate = allTemplates.find((t: any) => t.id === selected || t.templateKey === selected);

  return (
    <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950">
      {/* Header */}
      <header className="sticky top-0 z-40 bg-white/85 dark:bg-slate-900/85 backdrop-blur-lg border-b border-slate-200 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <button
              onClick={() => onNavigate("landing")}
              className="h-10 w-10 rounded-lg flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
            >
              <ArrowRight className="w-5 h-5" />
            </button>
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center text-white font-black">س</div>
            <div>
              <div className="font-black text-slate-900 dark:text-white">گالری قالب‌ها</div>
              <div className="text-xs text-slate-400">{toFa(filtered.length)} قالب آماده فارسی</div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={toggle}
              className="h-10 w-10 rounded-lg flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
            >
              {theme === "light" ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
            </button>
            <button
              onClick={() => onNavigate("wizard")}
              className="h-10 px-4 rounded-lg bg-violet-600 text-white text-sm font-semibold flex items-center gap-2 shadow-violet"
            >
              <Wand2 className="w-4 h-4" />
              شروع ساخت
            </button>
          </div>
        </div>
      </header>

      {/* Hero strip */}
      <section className="bg-gradient-to-l from-violet-50 via-fuchsia-50 to-white dark:from-violet-950/30 dark:via-slate-900 dark:to-slate-950 py-8 border-b border-slate-100 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 text-center">
          <h1 className="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white mb-3">
            قالب‌های آماده فارسی <span className="text-gradient-violet">بر پایه المنتور</span>
          </h1>
          <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
            مجموعه‌ای از قالب‌های حرفه‌ای برای هر نوع کسب‌وکار. هر قالب با صفحات کامل، آماده راه‌اندازی
          </p>
        </div>
      </section>

      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 py-6">
        {/* Search + filter bar */}
        <div className="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-100 dark:border-slate-800 shadow-soft mb-6">
          <div className="flex flex-col lg:flex-row gap-3 lg:items-center">
            <div className="relative flex-1">
              <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
              <input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="جستجو در نام و توضیحات قالب‌ها..."
                className="w-full h-11 pr-10 pl-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm focus:ring-2 focus:ring-violet-500 outline-none"
              />
            </div>
            <div className="flex gap-2 flex-wrap">
              {templateCategories.map((c) => {
                const Icon = iconMap[c.icon as keyof typeof iconMap] || LayoutGrid;
                const active = category === c.id;
                return (
                  <button
                    key={c.id}
                    onClick={() => setCategory(c.id)}
                    className={`h-11 px-4 rounded-xl text-sm font-semibold flex items-center gap-2 transition-base ${
                      active
                        ? "bg-violet-600 text-white shadow-violet"
                        : "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700"
                    }`}
                  >
                    <Icon className="w-4 h-4" />
                    {c.label}
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {/* Featured banner */}
        <div className="mb-6 rounded-2xl bg-gradient-to-l from-violet-600 to-fuchsia-500 p-5 sm:p-6 text-white relative overflow-hidden">
          <div className="absolute inset-0 bg-dotted opacity-30" />
          <div className="absolute -top-10 -left-10 w-32 h-32 bg-white/10 rounded-full blur-2xl" />
          <div className="relative flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <div className="flex items-center gap-2 mb-2">
                <Sparkles className="w-5 h-5" />
                <span className="text-xs font-bold">قالب جدید</span>
              </div>
              <h3 className="text-xl font-black mb-1">قالب فروشگاهی «طلا و جواهر زرین» منتشر شد!</h3>
              <p className="text-sm text-white/80">با محاسبه زنده قیمت، گالری ۳۶۰ درجه و کیف پول ووکامرس</p>
            </div>
            <button
              onClick={() => setSelected("tpl-gold-jewelry")}
              className="h-11 px-5 rounded-xl bg-white text-violet-700 font-bold text-sm flex items-center gap-2 hover:scale-105 transition-base shrink-0"
            >
              <Eye className="w-4 h-4" />
              پیش‌نمایش
            </button>
          </div>
        </div>

        {/* Templates grid */}
        {loading && (
          <div className="text-center py-20">
            <div className="w-12 h-12 mx-auto rounded-full border-4 border-violet-200 border-t-violet-600 animate-spin mb-3" />
            <p className="text-sm text-slate-500">در حال بارگذاری قالب‌ها از دیتابیس...</p>
          </div>
        )}
        {!loading && (
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
          {filtered.map((t: any) => (
            <button
              key={t.id || t.templateKey}
              onClick={() => setSelected(t.id || t.templateKey)}
              className="group text-right rounded-2xl overflow-hidden bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-soft hover:shadow-violet hover:-translate-y-1 transition-base"
            >
              <div className="relative aspect-[4/5] overflow-hidden bg-slate-200 dark:bg-slate-800">
                {/* تصویر پیش‌نمایش واقعی */}
                {t.previewImage ? (
                  <img
                    src={t.previewImage}
                    alt={t.name}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                ) : (
                  <div
                    className="w-full h-full flex items-center justify-center"
                    style={{ background: `linear-gradient(160deg, ${t.accentColor}, ${t.accentColor}AA 60%, ${t.accentColor}66)` }}
                  >
                    <div className="text-6xl font-black text-white drop-shadow-lg">{t.name.charAt(0)}</div>
                  </div>
                )}
                {/* Gradient overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-slate-900/40 via-transparent to-transparent" />
                {/* Badges */}
                <div className="absolute top-3 right-3 flex flex-col gap-1.5 items-end">
                  {t.isPro && (
                    <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-amber-400 text-amber-950 flex items-center gap-1 shadow-lg">
                      <Crown className="w-3 h-3" />
                      پرمیوم
                    </span>
                  )}
                  <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-black/40 text-white backdrop-blur flex items-center gap-1">
                    <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
                    {toFa(t.rating)}
                  </span>
                </div>
                {/* Hover overlay */}
                <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                  <div className="h-12 px-4 rounded-xl bg-white text-slate-900 font-bold text-sm flex items-center gap-2">
                    <Eye className="w-4 h-4" />
                    پیش‌نمایش
                  </div>
                </div>
              </div>
              <div className="p-4">
                <h3 className="font-bold text-slate-900 dark:text-white mb-1">{t.name}</h3>
                <p className="text-xs text-slate-500 dark:text-slate-400 line-clamp-2 mb-3">{t.description}</p>
                <div className="flex items-center justify-between text-xs">
                  <span className="text-slate-400">{t.pages.length} صفحه آماده</span>
                  <span className="text-violet-600 dark:text-violet-400 font-bold">{faNum(t.downloads)} دانلود</span>
                </div>
              </div>
            </button>
          ))}
        </div>
        )}

        {/* Empty state */}
        {filtered.length === 0 && !loading && (
          <div className="text-center py-20">
            <div className="w-20 h-20 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mx-auto mb-4">
              <Search className="w-10 h-10 text-slate-400" />
            </div>
            <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-1">قالبی یافت نشد</h3>
            <p className="text-sm text-slate-500">با فیلتر یا جستجوی دیگری امتحان کنید</p>
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-400 mt-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs">
          <div>© {toFa(1403)} سایت‌ساز پرو - گالری قالب‌های فارسی</div>
          <div className="flex items-center gap-4">
            <button onClick={() => onNavigate("landing")} className="hover:text-violet-400">صفحه اصلی</button>
            <button onClick={() => onNavigate("wizard")} className="hover:text-violet-400">ویزارد</button>
          </div>
        </div>
      </footer>

      {/* ===== Template preview modal ===== */}
      {selectedTemplate && (
        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 sm:p-6">
          <div
            className="absolute inset-0 bg-slate-900/70 backdrop-blur-sm"
            onClick={() => setSelected(null)}
          />
          <div className="relative bg-white dark:bg-slate-900 rounded-3xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto scroll-persian animate-in zoom-in duration-300">
            {/* Close */}
            <button
              onClick={() => setSelected(null)}
              className="absolute top-4 left-4 z-10 h-10 w-10 rounded-full bg-white/90 dark:bg-slate-800/90 backdrop-blur flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 shadow-soft"
            >
              <X className="w-5 h-5" />
            </button>

            {/* Preview hero */}
            <div className="relative h-64 sm:h-80 flex items-center justify-center bg-slate-200 dark:bg-slate-800 overflow-hidden">
              {selectedTemplate.previewImage ? (
                <img
                  src={selectedTemplate.previewImage}
                  alt={selectedTemplate.name}
                  className="w-full h-full object-cover"
                />
              ) : (
                <div
                  className="w-full h-full flex items-center justify-center"
                  style={{ background: `linear-gradient(160deg, ${selectedTemplate.accentColor}, ${selectedTemplate.accentColor}AA 60%, ${selectedTemplate.accentColor}66)` }}
                >
                  <div className="text-8xl font-black text-white drop-shadow-lg">{selectedTemplate.name.charAt(0)}</div>
                </div>
              )}
            </div>

            {/* Content */}
            <div className="p-6 sm:p-8">
              <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-6">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <h2 className="text-2xl font-black text-slate-900 dark:text-white">{selectedTemplate.name}</h2>
                    {selectedTemplate.isPro && (
                      <span className="text-xs font-bold px-2 py-1 rounded-full bg-amber-400 text-amber-950 flex items-center gap-1">
                        <Crown className="w-3 h-3" />
                        پرمیوم
                      </span>
                    )}
                  </div>
                  <p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed mb-4">{selectedTemplate.longDescription}</p>
                  <div className="flex items-center gap-4 text-sm">
                    <div className="flex items-center gap-1">
                      <Star className="w-4 h-4 fill-amber-400 text-amber-400" />
                      <span className="font-bold text-slate-900 dark:text-white">{toFa(selectedTemplate.rating)}</span>
                    </div>
                    <div className="text-slate-400">{faNum(selectedTemplate.downloads)} دانلود</div>
                    <div className="text-slate-400">{selectedTemplate.pages.length} صفحه آماده</div>
                  </div>
                </div>
                <button
                  onClick={() => {
                    setSelected(null);
                    onNavigate("wizard");
                  }}
                  className="h-12 px-6 rounded-xl bg-violet-600 hover:bg-violet-700 text-white font-bold text-sm flex items-center gap-2 shadow-violet shrink-0"
                >
                  <Wand2 className="w-5 h-5" />
                  استفاده از این قالب
                </button>
              </div>

              {/* Features */}
              <div className="grid sm:grid-cols-2 gap-4 mb-6">
                <div className="bg-slate-50 dark:bg-slate-800/50 rounded-2xl p-5">
                  <h3 className="font-bold text-slate-900 dark:text-white mb-3 flex items-center gap-2">
                    <Layers className="w-4 h-4 text-violet-600" />
                    صفحات آماده
                  </h3>
                  <div className="flex flex-wrap gap-2">
                    {selectedTemplate.pages.map((p, i) => (
                      <span key={i} className="text-xs font-semibold px-2.5 py-1.5 rounded-lg bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700">
                        {p}
                      </span>
                    ))}
                  </div>
                </div>
                <div className="bg-slate-50 dark:bg-slate-800/50 rounded-2xl p-5">
                  <h3 className="font-bold text-slate-900 dark:text-white mb-3 flex items-center gap-2">
                    <Sparkles className="w-4 h-4 text-violet-600" />
                    امکانات قالب
                  </h3>
                  <ul className="space-y-2">
                    {selectedTemplate.features.map((f, i) => (
                      <li key={i} className="flex items-start gap-2 text-sm text-slate-700 dark:text-slate-200">
                        <Check className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
                        {f}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              {/* Tech spec */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-center">
                {[
                  { label: "صفحه‌ساز", value: "المنتور پرو" },
                  { label: "نوع سایت", value: selectedTemplate.type === "woocommerce" ? "فروشگاهی" : "شرکتی" },
                  { label: "بهینه SEO", value: "بله" },
                  { label: "ریسپانسیو", value: "کاملاً" },
                ].map((s, i) => (
                  <div key={i} className="p-3 rounded-xl bg-slate-50 dark:bg-slate-800/50">
                    <div className="text-xs text-slate-400">{s.label}</div>
                    <div className="font-bold text-sm text-slate-900 dark:text-white mt-0.5">{s.value}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const iconMap = {
  LayoutGrid,
  ShoppingBag,
  Building2,
  Laptop,
  Stethoscope,
  Apple,
  Newspaper,
};