"use client";

import { useState } from "react";
import {
  Check,
  ArrowLeft,
  ArrowRight,
  ShoppingBag,
  Building2,
  Sparkles,
  Globe,
  Rocket,
  Store,
  Shield,
  Palette,
  Loader2,
  PartyPopper,
  ExternalLink,
  ArrowUpRight,
  X,
} from "lucide-react";
import { ViewId } from "@/app/page";
import { templates, templateCategories, toFa } from "@/lib/site-saz-data";
import { useTemplates, apiPost } from "@/lib/api-hooks";
import { useTheme } from "./ThemeProvider";

interface WizardState {
  step: number;
  siteType: "woocommerce" | "corporate" | null;
  business: {
    name: string;
    slogan: string;
    description: string;
    category: string;
    phone: string;
    email: string;
    city: string;
    address: string;
    instagram: string;
    telegram: string;
    whatsapp: string;
  };
  template: string | null;
  domain: {
    subdomain: string;
    customDomain: string;
    useCustom: boolean;
    primaryColor: string;
    font: string;
  };
  launching: boolean;
  launched: boolean;
  launchProgress: number;
  createdSiteUrl?: string;
  launchError?: string | null;
}

const steps = [
  { title: "نوع سایت", subtitle: "فروشگاه یا شرکتی؟", icon: Sparkles },
  { title: "اطلاعات کسب‌وکار", subtitle: "مشخصات و لوگو", icon: Building2 },
  { title: "انتخاب قالب", subtitle: "طراحی آماده", icon: Palette },
  { title: "دامنه و برندینگ", subtitle: "آدرس و رنگ", icon: Globe },
  { title: "راه‌اندازی", subtitle: "ساخت سایت", icon: Rocket },
];

const businessCategories = [
  "طلا و جواهر",
  "میوه و سبزی",
  "موبایل و کامپیوتر",
  "ابزارآلات و رنگ",
  "شرکت و خدمات",
  "آژانس و خدمات دیجیتال",
  "کلینیک و پزشکی",
  "رستوران و کافه",
  "مد و پوشاک",
  "آرایشی و بهداشتی",
  "کتاب و فرهنگی",
  "سایر",
];

const colorPresets = [
  { name: "بنفش", value: "#8B5CF6" },
  { name: "طلایی", value: "#D4AF37" },
  { name: "سبز", value: "#22C55E" },
  { name: "آبی", value: "#0EA5E9" },
  { name: "سرخابی", value: "#EC4899" },
  { name: "نارنجی", value: "#F97316" },
  { name: "قرمز", value: "#EF4444" },
  { name: "فیروزه‌ای", value: "#14B8A6" },
];

const fonts = [
  { name: "وزیرمتن", value: "Vazirmatn" },
  { name: "ایران‌سنس", value: "IRANSans" },
  { name: "یکان", value: "Yekan" },
  { name: "شبنم", value: "Shabnam" },
];

const launchSteps = [
  "ایجاد زیرساخت وردپرس...",
  "نصب افزونه‌های پیش‌فرض (المنتور، ووکامرس، دیجیتس)...",
  "ایمپورت قالب و صفحات آماده...",
  "پیکربندی ووکامرس و درگاه پرداخت...",
  "تنظیم دامنه و گواهی SSL...",
  "ساخت صفحات اصلی و منو...",
  "بهینه‌سازی SEO و کش...",
  "سایت شما آماده شد!",
];

export function Wizard({ onNavigate }: { onNavigate: (v: ViewId) => void }) {
  const { theme, toggle } = useTheme();
  const [state, setState] = useState<WizardState>({
    step: 0,
    siteType: null,
    business: {
      name: "",
      slogan: "",
      description: "",
      category: "",
      phone: "",
      email: "",
      city: "",
      address: "",
      instagram: "",
      telegram: "",
      whatsapp: "",
    },
    template: null,
    domain: {
      subdomain: "",
      customDomain: "",
      useCustom: false,
      primaryColor: "#8B5CF6",
      font: "Vazirmatn",
    },
    launching: false,
    launched: false,
    launchProgress: 0,
    launchError: null,
    createdSiteUrl: undefined,
  });

  const canProceed = () => {
    if (state.step === 0) return state.siteType !== null;
    if (state.step === 1) return state.business.name.length > 2;
    if (state.step === 2) return state.template !== null;
    if (state.step === 3) return state.domain.subdomain.length > 2;
    return true;
  };

  // داده واقعی قالب‌ها از API
  const { data: dbTemplates, loading: templatesLoading } = useTemplates();
  const allTemplates = dbTemplates && dbTemplates.length > 0 ? dbTemplates : templates;

  const filteredTemplates = state.siteType
    ? (allTemplates as any[]).filter((t) => t.type === state.siteType)
    : (allTemplates as any[]);

  const next = () => {
    if (state.step < 4 && canProceed()) {
      setState({ ...state, step: state.step + 1 });
    } else if (state.step === 4) {
      // launch
      launchSite();
    }
  };

  const prev = () => {
    if (state.step > 0) setState({ ...state, step: state.step - 1 });
  };

  const launchSite = async () => {
    setState({ ...state, launching: true, launchProgress: 0, launched: false });
    let progress = 0;
    const interval = setInterval(() => {
      progress += 12.5;
      setState((s) => ({ ...s, launchProgress: progress }));
      if (progress >= 100) {
        clearInterval(interval);
      }
    }, 350);

    // ارسال داده به API برای ساخت واقعی سایت در دیتابیس
    const result = await apiPost("/api/wizard/launch", {
      siteType: state.siteType,
      business: state.business,
      templateId: state.template,
      domain: state.domain,
    });

    // منتظر اتمام انیمیشن می‌مانیم
    setTimeout(() => {
      if (result.success) {
        setState((s) => ({
          ...s,
          launching: false,
          launched: true,
          createdSiteUrl: (result.data as any)?.siteUrl,
        }));
      } else {
        setState((s) => ({ ...s, launching: false, launchError: result.error || "خطا در ساخت سایت" }));
      }
    }, 3500);
  };

  // Suggest subdomain from business name
  const suggestSubdomain = (name: string) => {
    return name
      .toLowerCase()
      .replace(/[^\u0600-\u06FFa-z0-9]/g, "")
      .slice(0, 20) || "mysite";
  };

  return (
    <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950">
      {/* ===== Top 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-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center text-white font-black">س</div>
            <div className="font-black text-slate-900 dark:text-white">ویزارد ساخت سایت</div>
          </div>
          <button
            onClick={() => onNavigate("landing")}
            className="text-sm font-semibold text-slate-600 dark:text-slate-300 hover:text-violet-600 transition-base flex items-center gap-1"
          >
            <ArrowRight className="w-4 h-4" />
            بازگشت به خانه
          </button>
        </div>
      </header>

      {/* ===== Stepper ===== */}
      <div className="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-6">
          <div className="relative flex items-center justify-between">
            {steps.map((s, i) => {
              const Icon = s.icon;
              const done = i < state.step;
              const active = i === state.step;
              return (
                <div key={i} className="relative flex-1 flex flex-col items-center">
                  {/* connector line */}
                  {i < steps.length - 1 && (
                    <div className="absolute top-5 right-1/2 left-1/2 h-0.5 bg-slate-200 dark:bg-slate-700" style={{ zIndex: 0 }}>
                      <div
                        className={`h-full transition-all duration-500 ${done ? "w-full bg-violet-600" : "w-0"}`}
                      />
                    </div>
                  )}
                  {/* circle */}
                  <div
                    className={`relative z-10 w-10 h-10 rounded-full flex items-center justify-center mb-2 transition-base ${
                      done
                        ? "bg-violet-600 text-white"
                        : active
                          ? "bg-violet-600 text-white ring-4 ring-violet-200 dark:ring-violet-900/50"
                          : "bg-slate-100 dark:bg-slate-800 text-slate-400"
                    }`}
                  >
                    {done ? <Check className="w-5 h-5" /> : <Icon className="w-5 h-5" />}
                  </div>
                  <div className="text-center hidden sm:block">
                    <div className={`text-xs font-bold ${active || done ? "text-slate-900 dark:text-white" : "text-slate-400"}`}>
                      {s.title}
                    </div>
                    <div className="text-[10px] text-slate-400 mt-0.5">{s.subtitle}</div>
                  </div>
                  <div className="sm:hidden text-[10px] text-slate-500 font-bold mt-1">{toFa(i + 1)}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* ===== Step content ===== */}
      <main className="flex-1 max-w-5xl w-full mx-auto px-4 sm:px-6 py-8">
        {/* STEP 1: Site type */}
        {state.step === 0 && (
          <div className="animate-in fade-in duration-300">
            <h2 className="text-2xl font-black text-slate-900 dark:text-white mb-2 text-center">چه نوع سایت‌ای می‌خواهید بسازید؟</h2>
            <p className="text-slate-500 dark:text-slate-400 text-center mb-10">نوع سایت، افزونه‌ها و قالب‌های پیشنهادی را تعیین می‌کند</p>
            <div className="grid sm:grid-cols-2 gap-6 max-w-3xl mx-auto">
              <SiteTypeCard
                active={state.siteType === "woocommerce"}
                onClick={() => setState({ ...state, siteType: "woocommerce", template: null })}
                icon={ShoppingBag}
                title="سایت فروشگاهی (ووکامرس)"
                desc="فروش محصول فیزیکی یا دیجیتال، درگاه پرداخت، سبد خرید، مدیریت سفارشات و موجودی. کامل با ووکامرس و کیف پول."
                features={["سبد خرید و تسویه حساب", "مدیریت محصول و موجودی", "درگاه پرداخت ایرانی", "کیف پول ووکامرس"]}
                gradient="from-violet-500 to-fuchsia-500"
              />
              <SiteTypeCard
                active={state.siteType === "corporate"}
                onClick={() => setState({ ...state, siteType: "corporate", template: null })}
                icon={Building2}
                title="سایت شرکتی / خدماتی"
                desc="معرفی شرکت، خدمات، نمونه کارها، تیم، فرم تماس و بلاگ. مناسب شرکت‌ها، آژانس‌ها، کلینیک‌ها و..."
                features={["صفحات شرکتی آماده", "فرم تماس و درخواست", "گالری نمونه کار", "بلاگ و مقالات"]}
                gradient="from-sky-500 to-cyan-500"
              />
            </div>
          </div>
        )}

        {/* STEP 2: Business info */}
        {state.step === 1 && (
          <div className="animate-in fade-in duration-300 max-w-3xl mx-auto">
            <h2 className="text-2xl font-black text-slate-900 dark:text-white mb-2 text-center">اطلاعات کسب‌وکار خود را وارد کنید</h2>
            <p className="text-slate-500 dark:text-slate-400 text-center mb-10">این اطلاعات در قالب سایت و صفحات تماس استفاده می‌شود</p>

            <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 sm:p-8 shadow-soft">
              <div className="grid sm:grid-cols-2 gap-5">
                <Field label="نام کسب‌وکار" required>
                  <input
                    value={state.business.name}
                    onChange={(e) => {
                      const v = e.target.value;
                      setState({
                        ...state,
                        business: { ...state.business, name: v },
                        domain: { ...state.domain, subdomain: suggestSubdomain(v) },
                      });
                    }}
                    placeholder="مثال: طلا و جواهر زرین"
                    className="h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none transition-base"
                  />
                </Field>
                <Field label="شعار / اسلوگان">
                  <input
                    value={state.business.slogan}
                    onChange={(e) => setState({ ...state, business: { ...state.business, slogan: e.target.value } })}
                    placeholder="مثال: بهترین کیفیت طلا"
                    className="h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 focus:border-transparent outline-none transition-base"
                  />
                </Field>
                <Field label="دسته‌بندی کسب‌وکار" required>
                  <select
                    value={state.business.category}
                    onChange={(e) => setState({ ...state, business: { ...state.business, category: e.target.value } })}
                    className="h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none transition-base"
                  >
                    <option value="">انتخاب کنید</option>
                    {businessCategories.map((c) => (
                      <option key={c} value={c}>{c}</option>
                    ))}
                  </select>
                </Field>
                <Field label="شهر">
                  <input
                    value={state.business.city}
                    onChange={(e) => setState({ ...state, business: { ...state.business, city: e.target.value } })}
                    placeholder="مثال: تهران"
                    className="h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none transition-base"
                  />
                </Field>
                <Field label="تلفن تماس" required>
                  <input
                    value={state.business.phone}
                    onChange={(e) => setState({ ...state, business: { ...state.business, phone: e.target.value } })}
                    placeholder="09123456789"
                    className="h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none transition-base"
                  />
                </Field>
                <Field label="ایمیل">
                  <input
                    value={state.business.email}
                    onChange={(e) => setState({ ...state, business: { ...state.business, email: e.target.value } })}
                    placeholder="info@example.com"
                    dir="ltr"
                    className="h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none transition-base"
                  />
                </Field>
                <div className="sm:col-span-2">
                  <Field label="توضیحات کوتاه">
                    <textarea
                      value={state.business.description}
                      onChange={(e) => setState({ ...state, business: { ...state.business, description: e.target.value } })}
                      placeholder="در مورد کسب‌وکار خود بنویسید..."
                      rows={3}
                      className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none transition-base resize-none"
                    />
                  </Field>
                </div>
                <div className="sm:col-span-2">
                  <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">لوگوی کسب‌وکار (اختیاری)</label>
                  <div className="flex items-center gap-4">
                    <div className="w-20 h-20 rounded-2xl bg-violet-100 dark:bg-violet-900/30 border-2 border-dashed border-violet-300 dark:border-violet-700 flex items-center justify-center text-violet-400">
                      <Sparkles className="w-8 h-8" />
                    </div>
                    <div className="flex-1">
                      <button className="h-10 px-4 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 text-sm font-semibold hover:bg-slate-200 dark:hover:bg-slate-700 transition-base">
                        انتخاب فایل لوگو
                      </button>
                      <p className="text-xs text-slate-400 mt-2">PNG, SVG, JPG - حداکثر ۲ مگابایت</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Social */}
              <div className="mt-6 pt-6 border-t border-slate-100 dark:border-slate-800">
                <div className="text-sm font-bold text-slate-700 dark:text-slate-200 mb-3">شبکه‌های اجتماعی (اختیاری)</div>
                <div className="grid sm:grid-cols-3 gap-4">
                  <Field label="اینستاگرام">
                    <input
                      value={state.business.instagram}
                      onChange={(e) => setState({ ...state, business: { ...state.business, instagram: e.target.value } })}
                      placeholder="@username"
                      dir="ltr"
                      className="h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none transition-base"
                    />
                  </Field>
                  <Field label="تلگرام">
                    <input
                      value={state.business.telegram}
                      onChange={(e) => setState({ ...state, business: { ...state.business, telegram: e.target.value } })}
                      placeholder="@username"
                      dir="ltr"
                      className="h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none transition-base"
                    />
                  </Field>
                  <Field label="واتساپ">
                    <input
                      value={state.business.whatsapp}
                      onChange={(e) => setState({ ...state, business: { ...state.business, whatsapp: e.target.value } })}
                      placeholder="989123456789"
                      dir="ltr"
                      className="h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none transition-base"
                    />
                  </Field>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* STEP 3: Template */}
        {state.step === 2 && (
          <div className="animate-in fade-in duration-300">
            <h2 className="text-2xl font-black text-slate-900 dark:text-white mb-2 text-center">قالب آماده انتخاب کنید</h2>
            <p className="text-slate-500 dark:text-slate-400 text-center mb-8">قالب‌ها بر اساس نوع سایت شما فیلتر شده‌اند</p>

            <div className="flex flex-wrap justify-center gap-2 mb-8">
              {templateCategories.slice(0, 6).map((c) => (
                <span
                  key={c.id}
                  className={`px-4 py-2 rounded-full text-sm font-semibold cursor-default ${
                    c.id === "all"
                      ? "bg-violet-600 text-white"
                      : "bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-700"
                  }`}
                >
                  {c.label}
                </span>
              ))}
            </div>

            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
              {filteredTemplates.map((t: any) => (
                <button
                  key={t.id || t.templateKey}
                  onClick={() => setState({ ...state, template: t.id || t.templateKey })}
                  className={`group text-right rounded-2xl overflow-hidden bg-white dark:bg-slate-900 border-2 transition-base ${
                    state.template === (t.id || t.templateKey)
                      ? "border-violet-500 shadow-violet"
                      : "border-slate-100 dark:border-slate-800 shadow-soft hover:border-violet-300"
                  }`}
                >
                  <div className="relative aspect-[16/10] bg-slate-200 dark:bg-slate-800 overflow-hidden">
                    {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">{t.name.charAt(0)}</div>
                      </div>
                    )}
                    {state.template === (t.id || t.templateKey) && (
                      <div className="absolute top-3 right-3 w-7 h-7 rounded-full bg-violet-600 flex items-center justify-center shadow-violet">
                        <Check className="w-4 h-4 text-white" />
                      </div>
                    )}
                    {t.isPro ? (
                      <span className="absolute bottom-3 right-3 text-[10px] font-bold px-2 py-0.5 rounded-full bg-amber-400 text-amber-950">پرمیوم</span>
                    ) : (
                      <span className="absolute bottom-3 right-3 text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-400 text-emerald-950">رایگان</span>
                    )}
                  </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">
                      <div className="text-xs text-slate-400">{t.pages.length} صفحه آماده</div>
                      <div className="text-xs text-violet-600 dark:text-violet-400 font-semibold">پیش‌نمایش</div>
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* STEP 4: Domain + Branding */}
        {state.step === 3 && (
          <div className="animate-in fade-in duration-300 max-w-3xl mx-auto">
            <h2 className="text-2xl font-black text-slate-900 dark:text-white mb-2 text-center">دامنه و برندینگ</h2>
            <p className="text-slate-500 dark:text-slate-400 text-center mb-10">آدرس سایت و رنگ سازمانی خود را انتخاب کنید</p>

            <div className="space-y-6">
              {/* Subdomain */}
              <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 shadow-soft">
                <div className="flex items-center gap-2 mb-4">
                  <Globe className="w-5 h-5 text-violet-600" />
                  <h3 className="font-bold text-slate-900 dark:text-white">ساب‌دامنه رایگان</h3>
                  <span className="text-xs px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 font-bold">رایگان</span>
                </div>
                <div className="flex items-stretch rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden bg-slate-50 dark:bg-slate-800">
                  <input
                    value={state.domain.subdomain}
                    onChange={(e) => setState({ ...state, domain: { ...state.domain, subdomain: e.target.value.toLowerCase().replace(/[^a-z0-9]/g, "") } })}
                    dir="ltr"
                    placeholder="myshop"
                    className="flex-1 h-12 px-4 bg-transparent text-slate-900 dark:text-white focus:outline-none"
                  />
                  <div className="h-12 px-4 flex items-center text-slate-500 dark:text-slate-400 text-sm font-mono bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-700">
                    .sitesaz.pro
                  </div>
                </div>
                <p className="text-xs text-slate-400 mt-2">پیشنهاد: {suggestSubdomain(state.business.name)}.sitesaz.pro</p>
              </div>

              {/* Custom domain */}
              <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 shadow-soft">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2">
                    <Globe className="w-5 h-5 text-violet-600" />
                    <h3 className="font-bold text-slate-900 dark:text-white">دامنه اختصاصی</h3>
                    <span className="text-xs px-2 py-0.5 rounded-full bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300 font-bold">پلن حرفه‌ای+</span>
                  </div>
                  <label className="relative inline-flex items-center cursor-pointer">
                    <input
                      type="checkbox"
                      checked={state.domain.useCustom}
                      onChange={(e) => setState({ ...state, domain: { ...state.domain, useCustom: e.target.checked } })}
                      className="sr-only peer"
                    />
                    <div className="w-11 h-6 bg-slate-200 dark:bg-slate-700 peer-focus:ring-2 peer-focus:ring-violet-500 rounded-full peer peer-checked:bg-violet-600 transition-colors after:content-[''] after:absolute after:top-0.5 after:right-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-transform peer-checked:after:-translate-x-5" />
                  </label>
                </div>
                {state.domain.useCustom ? (
                  <>
                    <input
                      value={state.domain.customDomain}
                      onChange={(e) => setState({ ...state, domain: { ...state.domain, customDomain: e.target.value } })}
                      dir="ltr"
                      placeholder="myshop.ir"
                      className="w-full h-12 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none"
                    />
                    <div className="mt-4 p-4 rounded-xl bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900">
                      <div className="text-xs font-bold text-amber-800 dark:text-amber-300 mb-2">دستورالعمل تنظیم DNS:</div>
                      <p className="text-xs text-amber-700 dark:text-amber-200 leading-relaxed">
                        یک رکورد A با مقدار <code className="font-mono bg-amber-100 dark:bg-amber-900/50 px-1.5 py-0.5 rounded">185.143.220.10</code> و یک رکورد CNAME برای www به <code className="font-mono bg-amber-100 dark:bg-amber-900/50 px-1.5 py-0.5 rounded">sitesaz.pro</code> تنظیم کنید. پس از تأیید DNS، گواهی SSL به‌صورت خودکار صادر می‌شود.
                      </p>
                    </div>
                  </>
                ) : (
                  <p className="text-sm text-slate-400">با فعال‌سازی این گزینه، می‌توانید دامنه شخصی خود را متصل کنید. گواهی SSL رایگان خودکار صادر می‌شود.</p>
                )}
              </div>

              {/* Branding */}
              <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 shadow-soft">
                <div className="flex items-center gap-2 mb-4">
                  <Palette className="w-5 h-5 text-violet-600" />
                  <h3 className="font-bold text-slate-900 dark:text-white">برندینگ و ظاهر</h3>
                </div>
                <div className="grid sm:grid-cols-2 gap-5">
                  <div>
                    <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-3">رنگ اصلی سازمان</label>
                    <div className="grid grid-cols-4 gap-2">
                      {colorPresets.map((c) => (
                        <button
                          key={c.value}
                          onClick={() => setState({ ...state, domain: { ...state.domain, primaryColor: c.value } })}
                          className={`aspect-square rounded-xl flex items-center justify-center transition-base ${
                            state.domain.primaryColor === c.value ? "ring-2 ring-offset-2 ring-violet-500 scale-105" : ""
                          }`}
                          style={{ background: c.value }}
                          title={c.name}
                        >
                          {state.domain.primaryColor === c.value && <Check className="w-4 h-4 text-white drop-shadow" />}
                        </button>
                      ))}
                    </div>
                    <div className="mt-3 flex items-center gap-2">
                      <input
                        type="color"
                        value={state.domain.primaryColor}
                        onChange={(e) => setState({ ...state, domain: { ...state.domain, primaryColor: e.target.value } })}
                        className="w-10 h-10 rounded-lg cursor-pointer"
                      />
                      <span className="text-sm text-slate-500 font-mono">{state.domain.primaryColor}</span>
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-3">فونت سایت</label>
                    <div className="space-y-2">
                      {fonts.map((f) => (
                        <button
                          key={f.value}
                          onClick={() => setState({ ...state, domain: { ...state.domain, font: f.value } })}
                          className={`w-full h-11 px-4 rounded-xl border text-right transition-base ${
                            state.domain.font === f.value
                              ? "border-violet-500 bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300"
                              : "border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-200"
                          }`}
                          style={{ fontFamily: f.value }}
                        >
                          {f.name}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* STEP 5: Review */}
        {state.step === 4 && (
          <div className="animate-in fade-in duration-300 max-w-3xl mx-auto">
            <h2 className="text-2xl font-black text-slate-900 dark:text-white mb-2 text-center">بررسی نهایی و راه‌اندازی</h2>
            <p className="text-slate-500 dark:text-slate-400 text-center mb-10">اطلاعات خود را بررسی و سپس دکمه راه‌اندازی را بزنید</p>

            <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 sm:p-8 shadow-soft space-y-5">
              <ReviewRow label="نوع سایت" value={state.siteType === "woocommerce" ? "فروشگاهی (ووکامرس)" : "شرکتی"} icon={state.siteType === "woocommerce" ? ShoppingBag : Building2} />
              <ReviewRow label="نام کسب‌وکار" value={state.business.name || "—"} icon={Sparkles} />
              {state.business.category && <ReviewRow label="دسته‌بندی" value={state.business.category} icon={Store} />}
              <ReviewRow
                label="قالب انتخابی"
                value={templates.find((t) => t.id === state.template)?.name || "—"}
                icon={Palette}
              />
              <ReviewRow
                label="آدرس سایت"
                value={`${state.domain.subdomain || "mysite"}.sitesaz.pro${state.domain.useCustom && state.domain.customDomain ? ` (و ${state.domain.customDomain})` : ""}`}
                icon={Globe}
              />
              <ReviewRow label="رنگ اصلی" valueColor={state.domain.primaryColor} icon={Palette} />
              <ReviewRow label="فونت" value={fonts.find((f) => f.value === state.domain.font)?.name || "وزیرمتن"} icon={Sparkles} />
            </div>

            {/* Feature checklist */}
            <div className="mt-6 bg-violet-50 dark:bg-violet-950/30 rounded-2xl border border-violet-100 dark:border-violet-900 p-5">
              <div className="text-sm font-bold text-violet-900 dark:text-violet-200 mb-3">چیزهایی که به‌طور خودکار نصب می‌شوند:</div>
              <div className="grid sm:grid-cols-2 gap-2">
                {[
                  "وردپرس نسخه آخر",
                  "المنتور پرو",
                  state.siteType === "woocommerce" ? "ووکامرس + کیف پول" : "Yoast SEO",
                  "دیجیتس - ورود با موبایل",
                  "قالب انتخابی + صفحات آماده",
                  "گواهی SSL رایگان",
                ].map((f, i) => (
                  <div key={i} className="flex items-center gap-2 text-sm text-violet-800 dark:text-violet-200">
                    <Check className="w-4 h-4 text-violet-600" />
                    {f}
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* ===== Launch overlay ===== */}
        {state.launching && (
          <div className="fixed inset-0 z-[200] bg-slate-900/90 backdrop-blur flex items-center justify-center p-4">
            <div className="bg-white dark:bg-slate-800 rounded-3xl p-8 sm:p-12 max-w-md w-full text-center shadow-2xl">
              <div className="w-20 h-20 mx-auto rounded-full bg-violet-100 dark:bg-violet-900/40 flex items-center justify-center mb-6">
                <Loader2 className="w-10 h-10 text-violet-600 dark:text-violet-400 animate-spin" />
              </div>
              <h3 className="text-2xl font-black text-slate-900 dark:text-white mb-2">در حال ساخت سایت شما...</h3>
              <p className="text-slate-500 dark:text-slate-400 mb-6">این فرآیند چند ثانیه طول می‌کشد</p>

              {/* Progress bar */}
              <div className="h-3 rounded-full bg-slate-100 dark:bg-slate-700 overflow-hidden mb-4">
                <div
                  className="h-full bg-gradient-to-l from-violet-600 to-fuchsia-500 transition-all duration-300"
                  style={{ width: `${state.launchProgress}%` }}
                />
              </div>
              <div className="text-2xl font-black text-violet-600 mb-6">{toFa(state.launchProgress)}٪</div>

              <div className="space-y-2 text-right">
                {launchSteps.map((s, i) => {
                  const stepDone = (i + 1) * 12.5 <= state.launchProgress;
                  const stepActive = (i + 1) * 12.5 > state.launchProgress && i * 12.5 <= state.launchProgress;
                  return (
                    <div key={i} className="flex items-center gap-2 text-sm">
                      {stepDone ? (
                        <Check className="w-4 h-4 text-emerald-500" />
                      ) : stepActive ? (
                        <Loader2 className="w-4 h-4 text-violet-500 animate-spin" />
                      ) : (
                        <div className="w-4 h-4 rounded-full border-2 border-slate-200 dark:border-slate-700" />
                      )}
                      <span className={stepDone ? "text-slate-900 dark:text-white font-medium" : stepActive ? "text-violet-600 dark:text-violet-400 font-medium" : "text-slate-400"}>
                        {s}
                      </span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        {/* ===== Launched overlay ===== */}
        {state.launched && (
          <div className="fixed inset-0 z-[200] bg-slate-900/90 backdrop-blur flex items-center justify-center p-4">
            <div className="bg-white dark:bg-slate-800 rounded-3xl p-8 sm:p-12 max-w-lg w-full text-center shadow-2xl animate-in zoom-in duration-500">
              <div className="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center mb-6">
                <PartyPopper className="w-10 h-10 text-white" />
              </div>
              <h3 className="text-2xl font-black text-slate-900 dark:text-white mb-2">تبریک! سایت شما در دیتابیس ذخیره شد!</h3>
              <p className="text-slate-500 dark:text-slate-400 mb-6">سایت شما با موفقیت در دیتابیس ساخته شد</p>

              <div className="bg-slate-50 dark:bg-slate-900 rounded-2xl p-5 mb-6">
                <div className="text-xs text-slate-400 mb-1">آدرس سایت شما:</div>
                <div className="font-mono text-violet-600 dark:text-violet-400 font-bold text-lg" dir="ltr">
                  {state.createdSiteUrl || `${state.domain.subdomain || "mysite"}.sitesaz.pro`}
                </div>
                <div className="text-xs text-slate-400 mt-2">
                  قالب: {(allTemplates as any[]).find((t: any) => (t.id || t.templateKey) === state.template)?.name || "پیش‌فرض"}
                </div>
                <div className="text-[10px] text-emerald-600 mt-2 flex items-center justify-center gap-1">
                  <Check className="w-3 h-3" />
                  در دیتابیس ذخیره شد ✓
                </div>
              </div>

              <div className="flex flex-col sm:flex-row gap-3">
                <button
                  onClick={() => onNavigate("user")}
                  className="flex-1 h-12 rounded-xl bg-violet-600 hover:bg-violet-700 text-white font-bold flex items-center justify-center gap-2 transition-base"
                >
                  <Shield className="w-5 h-5" />
                  ورود به پنل کاربری
                </button>
                <button
                  onClick={() => onNavigate("landing")}
                  className="flex-1 h-12 rounded-xl bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold flex items-center justify-center gap-2 transition-base"
                >
                  <ExternalLink className="w-5 h-5" />
                  مشاهده سایت
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Error overlay */}
        {state.launchError && (
          <div className="fixed inset-0 z-[200] bg-slate-900/90 backdrop-blur flex items-center justify-center p-4">
            <div className="bg-white dark:bg-slate-800 rounded-3xl p-8 sm:p-12 max-w-md w-full text-center shadow-2xl">
              <div className="w-20 h-20 mx-auto rounded-full bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center mb-6">
                <X className="w-10 h-10 text-rose-600" />
              </div>
              <h3 className="text-xl font-black text-slate-900 dark:text-white mb-2">خطا در ساخت سایت</h3>
              <p className="text-sm text-rose-600 dark:text-rose-400 mb-6">{state.launchError}</p>
              <button
                onClick={() => setState({ ...state, launchError: null })}
                className="w-full h-12 rounded-xl bg-violet-600 text-white font-bold"
              >
                تلاش مجدد
              </button>
            </div>
          </div>
        )}
      </main>

      {/* ===== Bottom nav ===== */}
      <footer className="sticky bottom-0 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
          <button
            onClick={prev}
            disabled={state.step === 0 || state.launching}
            className="h-12 px-5 rounded-xl border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-sm flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 dark:hover:bg-slate-800 transition-base"
          >
            <ArrowRight className="w-4 h-4" />
            قبلی
          </button>

          <div className="text-xs text-slate-400 hidden sm:block">
            مرحله {toFa(state.step + 1)} از {toFa(5)}
          </div>

          <button
            onClick={next}
            disabled={!canProceed() || state.launching}
            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 disabled:opacity-50 disabled:cursor-not-allowed shadow-violet transition-base"
          >
            {state.step === 4 ? (
              <>
                <Rocket className="w-5 h-5" />
                راه‌اندازی سایت
              </>
            ) : (
              <>
                مرحله بعد
                <ArrowLeft className="w-4 h-4" />
              </>
            )}
          </button>
        </div>
      </footer>
    </div>
  );
}

function SiteTypeCard({
  active,
  onClick,
  icon: Icon,
  title,
  desc,
  features,
  gradient,
}: {
  active: boolean;
  onClick: () => void;
  icon: any;
  title: string;
  desc: string;
  features: string[];
  gradient: string;
}) {
  return (
    <button
      onClick={onClick}
      className={`text-right rounded-3xl p-6 border-2 transition-base ${
        active ? "border-violet-500 shadow-violet bg-white dark:bg-slate-900" : "border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 hover:border-violet-300"
      }`}
    >
      <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center mb-4 ${active ? "scale-110" : ""} transition-base`}>
        <Icon className="w-8 h-8 text-white" />
      </div>
      <h3 className="font-black text-xl text-slate-900 dark:text-white mb-2">{title}</h3>
      <p className="text-sm text-slate-500 dark:text-slate-400 mb-4 leading-relaxed">{desc}</p>
      <ul className="space-y-1.5">
        {features.map((f, i) => (
          <li key={i} className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300">
            <Check className="w-4 h-4 text-violet-500" />
            {f}
          </li>
        ))}
      </ul>
      {active && (
        <div className="mt-4 flex items-center gap-2 text-violet-600 dark:text-violet-400 text-sm font-bold">
          <Check className="w-5 h-5" />
          انتخاب شد
        </div>
      )}
    </button>
  );
}

function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
  return (
    <div>
      <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">
        {label} {required && <span className="text-rose-500">*</span>}
      </label>
      {children}
    </div>
  );
}

function ReviewRow({ label, value, valueColor, icon: Icon }: { label: string; value: string; valueColor?: string; icon: any }) {
  return (
    <div className="flex items-center justify-between py-3 border-b border-slate-100 dark:border-slate-800 last:border-0">
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-900/30 flex items-center justify-center">
          <Icon className="w-5 h-5 text-violet-600 dark:text-violet-400" />
        </div>
        <span className="text-sm text-slate-500 dark:text-slate-400">{label}</span>
      </div>
      <div className="flex items-center gap-2">
        {valueColor && <div className="w-5 h-5 rounded-full border border-slate-200" style={{ background: valueColor }} />}
        <span className="font-bold text-slate-900 dark:text-white">{value}</span>
      </div>
    </div>
  );
}