"use client";

import { useState, useEffect, useRef } from "react";
import {
  LayoutDashboard,
  Users,
  Globe,
  LayoutTemplate,
  CreditCard,
  Link,
  Settings,
  Shield,
  Activity,
  Search,
  Bell,
  Menu,
  X,
  Sparkles,
  TrendingUp,
  TrendingDown,
  ArrowUp,
  ArrowDown,
  ChevronLeft,
  ChevronRight,
  Check,
  Star,
  GraduationCap,
  Wand2,
  Building2,
  ShoppingBag,
  Smartphone,
  Moon,
  Sun,
  MoreHorizontal,
  Eye,
  Ban,
  Filter,
  Download,
  Plus,
  RefreshCw,
  AlertCircle,
  CheckCircle2,
  Clock,
  Server,
  Database,
  Lock,
  Mail,
  AlertTriangle,
} from "lucide-react";
import {
  platformUsers,
  adminTourSteps,
  revenueData,
  sitesGrowthData,
  recentActivities,
  pendingDomains,
  templates,
  userSites,
  faNum,
  faMoney,
  faToman,
  toFa,
  truncate,
} from "@/lib/site-saz-data";
import {
  useAdminStats,
  useAdminUsers,
  useAdminSites,
  useAdminDomains,
  useAdminLogs,
  useTemplates,
} from "@/lib/api-hooks";
import { useTheme } from "./ThemeProvider";

type AdminPage =
  | "dashboard"
  | "users"
  | "sites"
  | "templates"
  | "subscriptions"
  | "domains"
  | "settings"
  | "logs";

const navItems: { id: AdminPage; label: string; icon: any; tourId: string; badge?: number }[] = [
  { id: "dashboard", label: "داشبورد", icon: LayoutDashboard, tourId: "admin-dashboard" },
  { id: "users", label: "مدیریت کاربران", icon: Users, tourId: "admin-nav-users" },
  { id: "sites", label: "مدیریت سایت‌ها", icon: Globe, tourId: "admin-nav-sites" },
  { id: "templates", label: "کتابخانه قالب‌ها", icon: LayoutTemplate, tourId: "admin-nav-templates" },
  { id: "subscriptions", label: "اشتراک‌ها و کیف پول", icon: CreditCard, tourId: "admin-nav-subs" },
  { id: "domains", label: "دامنه‌ها و SSL", icon: Link, tourId: "admin-nav-domains", badge: 4 },
  { id: "settings", label: "تنظیمات پلتفرم", icon: Settings, tourId: "admin-nav-settings" },
  { id: "logs", label: "لاگ‌ها و امنیت", icon: Shield, tourId: "admin-nav-logs" },
];

export function AdminPanel() {
  const { theme, toggle } = useTheme();
  const [page, setPage] = useState<AdminPage>("dashboard");
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [tourActive, setTourActive] = useState(false);
  const [tourStep, setTourStep] = useState(0);
  const [tourCompleted, setTourCompleted] = useState(false);

  // Start tour automatically on first visit
  useEffect(() => {
    const seen = sessionStorage.getItem("admin-tour-seen");
    if (!seen) {
      setTimeout(() => {
        setTourActive(true);
        setTourStep(0);
      }, 800);
    }
  }, []);

  const nextTourStep = () => {
    if (tourStep < adminTourSteps.length - 1) {
      setTourStep(tourStep + 1);
    } else {
      setTourActive(false);
      setTourCompleted(true);
      sessionStorage.setItem("admin-tour-seen", "1");
    }
  };

  const prevTourStep = () => {
    if (tourStep > 0) setTourStep(tourStep - 1);
  };

  const skipTour = () => {
    setTourActive(false);
    sessionStorage.setItem("admin-tour-seen", "1");
  };

  const restartTour = () => {
    setTourStep(0);
    setTourActive(true);
  };

  const currentTourTarget = tourActive ? adminTourSteps[tourStep] : null;

  return (
    <div className="min-h-screen bg-slate-100 dark:bg-slate-950 flex">
      {/* ===== Sidebar ===== */}
      <aside
        className={`fixed lg:sticky top-0 right-0 z-40 h-screen w-72 bg-white dark:bg-slate-900 border-l border-slate-200 dark:border-slate-800 transition-transform duration-300 ${
          sidebarOpen ? "translate-x-0" : "translate-x-full lg:translate-x-0"
        }`}
        data-tour="admin-sidebar"
      >
        <div className="h-full flex flex-col">
          {/* Logo */}
          <div className="p-5 border-b border-slate-100 dark:border-slate-800">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2.5">
                <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center text-white font-black text-lg shadow-violet">
                  س
                </div>
                <div className="leading-none">
                  <div className="font-black text-slate-900 dark:text-white">سایت‌ساز پرو</div>
                  <div className="text-[10px] text-violet-600 dark:text-violet-400 mt-1 font-bold flex items-center gap-1">
                    <Shield className="w-3 h-3" />
                    پنل سوپرادمین
                  </div>
                </div>
              </div>
              <button
                onClick={() => setSidebarOpen(false)}
                className="lg:hidden h-9 w-9 rounded-lg flex items-center justify-center text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* Nav */}
          <nav className="flex-1 overflow-y-auto scroll-persian p-3 space-y-1">
            {navItems.map((n) => {
              const active = page === n.id;
              const isTourTarget = currentTourTarget?.target === n.tourId;
              return (
                <button
                  key={n.id}
                  data-tour={n.tourId}
                  onClick={() => {
                    setPage(n.id);
                    setSidebarOpen(false);
                  }}
                  className={`w-full flex items-center gap-3 px-3.5 py-3 rounded-xl text-sm font-semibold transition-base relative ${
                    active
                      ? "bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300 shadow-soft"
                      : "text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
                  } ${isTourTarget && tourActive ? "tour-highlight" : ""}`}
                >
                  {active && <div className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-7 bg-violet-600 rounded-l-full" />}
                  <n.icon className={`w-5 h-5 ${active ? "text-violet-600 dark:text-violet-400" : ""}`} />
                  <span className="flex-1 text-right">{n.label}</span>
                  {n.badge && (
                    <span className="px-1.5 min-w-6 h-5 rounded-full bg-rose-500 text-white text-[10px] font-bold flex items-center justify-center">
                      {toFa(n.badge)}
                    </span>
                  )}
                </button>
              );
            })}
          </nav>

          {/* Tour restart button */}
          <div className="p-3 border-t border-slate-100 dark:border-slate-800">
            <button
              data-tour="admin-tour-btn"
              onClick={restartTour}
              className={`w-full flex items-center gap-3 px-3.5 py-3 rounded-xl bg-gradient-to-l from-violet-50 to-fuchsia-50 dark:from-violet-950/40 dark:to-fuchsia-950/40 text-violet-700 dark:text-violet-300 text-sm font-semibold hover:shadow-soft transition-base ${
                currentTourTarget?.target === "admin-tour-btn" && tourActive ? "tour-highlight" : ""
              }`}
            >
              <GraduationCap className="w-5 h-5" />
              مشاهده مجدد تور
            </button>
          </div>

          {/* Admin profile */}
          <div className="p-3 border-t border-slate-100 dark:border-slate-800">
            <div className="flex items-center gap-3 p-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-base cursor-pointer">
              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center text-white font-bold">
                ا.م
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-sm font-bold text-slate-900 dark:text-white truncate">ابوالفضل مدیر</div>
                <div className="text-[10px] text-slate-400 truncate">admin@sitesaz.pro</div>
              </div>
              <button
                onClick={toggle}
                className="h-8 w-8 rounded-lg flex items-center justify-center text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700"
              >
                {theme === "light" ? <Moon className="w-4 h-4" /> : <Sun className="w-4 h-4" />}
              </button>
            </div>
          </div>
        </div>
      </aside>

      {sidebarOpen && (
        <div
          onClick={() => setSidebarOpen(false)}
          className="lg:hidden fixed inset-0 z-30 bg-slate-900/40 backdrop-blur-sm"
        />
      )}

      {/* ===== Main content ===== */}
      <div className="flex-1 min-w-0 flex flex-col">
        {/* Top header */}
        <header className="sticky top-0 z-30 bg-white/85 dark:bg-slate-900/85 backdrop-blur-lg border-b border-slate-200 dark:border-slate-800">
          <div className="px-4 sm:px-6 h-16 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <button
                onClick={() => setSidebarOpen(true)}
                className="lg:hidden 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"
              >
                <Menu className="w-5 h-5" />
              </button>
              <div>
                <h1 className="font-black text-lg text-slate-900 dark:text-white">
                  {navItems.find((n) => n.id === page)?.label}
                </h1>
                <p className="text-xs text-slate-400 hidden sm:block">
                  {new Date().toLocaleDateString("fa-IR")} - سلام، ابوالفضل 👋
                </p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <div className="relative hidden md:block">
                <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <input
                  placeholder="جستجوی کاربر، سایت، دامنه..."
                  className="h-10 w-64 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>
              <button 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 relative">
                <Bell className="w-5 h-5" />
                <span className="absolute top-2 right-2 w-2 h-2 rounded-full bg-rose-500" />
              </button>
              <button
                onClick={restartTour}
                data-tour="admin-tour-btn"
                className="h-10 px-4 rounded-lg bg-violet-600 hover:bg-violet-700 text-white text-sm font-semibold flex items-center gap-2 shadow-violet transition-base"
              >
                <Wand2 className="w-4 h-4" />
                <span className="hidden sm:inline">شروع تور</span>
              </button>
            </div>
          </div>
        </header>

        {/* Page content */}
        <main className="flex-1 p-4 sm:p-6 max-w-[1400px] w-full mx-auto">
          {page === "dashboard" && <DashboardPage currentTour={currentTourTarget} tourActive={tourActive} />}
          {page === "users" && <UsersPage />}
          {page === "sites" && <SitesPage />}
          {page === "templates" && <TemplatesPage />}
          {page === "subscriptions" && <SubscriptionsPage />}
          {page === "domains" && <DomainsPage />}
          {page === "settings" && <SettingsPage />}
          {page === "logs" && <LogsPage />}
        </main>
      </div>

      {/* ===== Interactive Tour Overlay ===== */}
      {tourActive && currentTourTarget && <TourOverlay step={currentTourTarget} current={tourStep} total={adminTourSteps.length} onNext={nextTourStep} onPrev={prevTourStep} onSkip={skipTour} />}
    </div>
  );
}

// ============================================================
// Dashboard page
// ============================================================
function DashboardPage({ currentTour, tourActive }: { currentTour: any; tourActive: boolean }) {
  // داده واقعی از دیتابیس
  const { data, loading } = useAdminStats();
  const stats = data?.stats;
  const recentLogs = data?.recentLogs || [];

  if (loading) {
    return (
      <div className="space-y-6">
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="h-32 rounded-2xl bg-white dark:bg-slate-900 animate-pulse" />
          ))}
        </div>
        <div className="grid lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 h-80 rounded-2xl bg-white dark:bg-slate-900 animate-pulse" />
          <div className="h-80 rounded-2xl bg-white dark:bg-slate-900 animate-pulse" />
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6" data-tour="admin-dashboard">
      {/* Stat cards */}
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          tourId="admin-stat-users"
          currentTour={currentTour}
          tourActive={tourActive}
          icon={Users}
          label="کاربران فعال"
          value={faNum(stats?.activeUsers || 0)}
          delta="+۱۲٪"
          deltaUp
          color="violet"
          subtext={`${faNum(stats?.totalUsers || 0)} کل کاربران`}
        />
        <StatCard
          tourId="admin-stat-sites"
          currentTour={currentTour}
          tourActive={tourActive}
          icon={Globe}
          label="سایت‌های ساخته‌شده"
          value={faNum(stats?.totalSites || 0)}
          delta="+۸٪"
          deltaUp
          color="emerald"
          subtext={`${faNum(stats?.activeSites || 0)} سایت فعال`}
        />
        <StatCard
          tourId="admin-stat-revenue"
          currentTour={currentTour}
          tourActive={tourActive}
          icon={TrendingUp}
          label="درآمد کل (تومان)"
          value={faNum(stats?.totalRevenue || 0)}
          delta="+۲۳٪"
          deltaUp
          color="amber"
          subtext={`${faMoney(stats?.monthlyRevenue || 0)} در ماه`}
        />
        <StatCard
          tourId="admin-stat-domains"
          currentTour={currentTour}
          tourActive={tourActive}
          icon={Link}
          label="دامنه‌های در انتظار"
          value={faNum(stats?.pendingDomains || 0)}
          delta="نیازمند بررسی"
          deltaUp={false}
          color="rose"
          subtext={`${faNum(stats?.activeDomains || 0)} دامنه فعال`}
        />
      </div>

      <div className="grid lg:grid-cols-3 gap-6">
        {/* Revenue chart */}
        <div
          data-tour="admin-revenue-chart"
          className={`lg:col-span-2 bg-white dark:bg-slate-900 rounded-2xl p-6 border border-slate-100 dark:border-slate-800 shadow-soft ${
            currentTour?.target === "admin-revenue-chart" && tourActive ? "tour-highlight" : ""
          }`}
        >
          <div className="flex items-center justify-between mb-6">
            <div>
              <h3 className="font-bold text-slate-900 dark:text-white">نمودار درآمد ۶ ماه اخیر</h3>
              <p className="text-xs text-slate-400 mt-1">به میلیون تومان - تقویم شمسی (داده واقعی)</p>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <div className="flex items-center gap-1.5 text-violet-600 dark:text-violet-400">
                <div className="w-3 h-3 rounded-sm bg-violet-600" />
                درآمد اشتراک
              </div>
            </div>
          </div>
          <RevenueChart />
        </div>

        {/* Sites growth */}
        <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 border border-slate-100 dark:border-slate-800 shadow-soft">
          <h3 className="font-bold text-slate-900 dark:text-white mb-1">رشد سایت‌ها</h3>
          <p className="text-xs text-slate-400 mb-5">مجموع سایت‌های فعال</p>
          <div className="space-y-3">
            {sitesGrowthData.map((d, i) => (
              <div key={i} className="flex items-center gap-3">
                <div className="text-xs text-slate-500 w-16">{d.month}</div>
                <div className="flex-1 h-7 bg-slate-100 dark:bg-slate-800 rounded-lg overflow-hidden relative">
                  <div
                    className="h-full bg-gradient-to-l from-violet-600 to-fuchsia-500 rounded-lg flex items-center justify-end pl-2 transition-all"
                    style={{ width: `${(d.value / 158) * 100}%` }}
                  >
                    <span className="text-[10px] text-white font-bold">{faNum(d.value)}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid lg:grid-cols-3 gap-6">
        {/* Recent activity */}
        <div
          data-tour="admin-activity"
          className={`lg:col-span-2 bg-white dark:bg-slate-900 rounded-2xl p-6 border border-slate-100 dark:border-slate-800 shadow-soft ${
            currentTour?.target === "admin-activity" && tourActive ? "tour-highlight" : ""
          }`}
        >
          <div className="flex items-center justify-between mb-5">
            <h3 className="font-bold text-slate-900 dark:text-white">فعالیت‌های اخیر پلتفرم</h3>
            <button className="text-xs font-semibold text-violet-600 dark:text-violet-400 hover:underline flex items-center gap-1">
              مشاهده همه
              <ChevronLeft className="w-3 h-3" />
            </button>
          </div>
          <div className="space-y-1">
            {recentLogs.length === 0 ? (
              <div className="text-center py-8 text-sm text-slate-400">هنوز فعالیتی ثبت نشده</div>
            ) : (
              recentLogs.map((log: any) => (
                <div key={log.id} className="flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-base">
                  <div
                    className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
                    style={{ background: `${log.userColor || "#64748B"}22`, color: log.userColor || "#64748B" }}
                  >
                    {log.type === "site_created" && <Globe className="w-5 h-5" />}
                    {log.type === "subscription" && <CreditCard className="w-5 h-5" />}
                    {log.type === "domain" && <Link className="w-5 h-5" />}
                    {log.type === "wallet" && <CreditCard className="w-5 h-5" />}
                    {log.type === "ssl" && <Lock className="w-5 h-5" />}
                    {log.type === "backup" && <Database className="w-5 h-5" />}
                    {log.type === "security" && <Shield className="w-5 h-5" />}
                    {log.type === "system" && <Server className="w-5 h-5" />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-semibold text-slate-900 dark:text-white">
                      {log.userName || "سیستم"}
                    </div>
                    <div className="text-xs text-slate-500 truncate">{log.message}</div>
                  </div>
                  <div className="text-xs text-slate-400 whitespace-nowrap">{log.time}</div>
                </div>
              ))
            )}
          </div>
        </div>

        {/* System health */}
        <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 border border-slate-100 dark:border-slate-800 shadow-soft">
          <h3 className="font-bold text-slate-900 dark:text-white mb-5">سلامت سیستم</h3>
          <div className="space-y-4">
            <HealthBar label="پردازشگر" value={42} color="emerald" />
            <HealthBar label="حافظه RAM" value={68} color="amber" />
            <HealthBar label="فضای دیسک" value={31} color="emerald" />
            <HealthBar label="پهنای باند" value={55} color="violet" />
          </div>
          <div className="mt-5 pt-5 border-t border-slate-100 dark:border-slate-800 space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="text-slate-500">آپ‌تایم سرور</span>
              <span className="font-bold text-emerald-600">{toFa(99.98)}٪</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-slate-500">آخرین بکاپ</span>
              <span className="font-bold text-slate-900 dark:text-white">۲ ساعت پیش</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-slate-500">نسخه پلتفرم</span>
              <span className="font-bold text-slate-900 dark:text-white">v{toFa(3.2)}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StatCard({
  tourId,
  currentTour,
  tourActive,
  icon: Icon,
  label,
  value,
  delta,
  deltaUp,
  color,
  subtext,
}: {
  tourId: string;
  currentTour: any;
  tourActive: boolean;
  icon: any;
  label: string;
  value: string;
  delta: string;
  deltaUp: boolean;
  color: string;
  subtext: string;
}) {
  return (
    <div
      data-tour={tourId}
      className={`bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-100 dark:border-slate-800 shadow-soft transition-base ${
        currentTour?.target === tourId && tourActive ? "tour-highlight" : ""
      }`}
    >
      <div className="flex items-start justify-between mb-4">
        <div className={`w-12 h-12 rounded-2xl bg-${color}-100 dark:bg-${color}-900/30 flex items-center justify-center`}>
          <Icon className={`w-6 h-6 text-${color}-600 dark:text-${color}-400`} />
        </div>
        <div className={`text-xs font-bold px-2 py-1 rounded-full flex items-center gap-1 ${
          deltaUp ? "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300" : "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300"
        }`}>
          {deltaUp ? <ArrowUp className="w-3 h-3" /> : <AlertCircle className="w-3 h-3" />}
          {delta}
        </div>
      </div>
      <div className="text-3xl font-black text-slate-900 dark:text-white mb-1">{value}</div>
      <div className="text-sm text-slate-500 dark:text-slate-400 font-medium">{label}</div>
      <div className="text-xs text-slate-400 mt-1">{subtext}</div>
    </div>
  );
}

function HealthBar({ label, value, color }: { label: string; value: number; color: string }) {
  return (
    <div>
      <div className="flex items-center justify-between text-sm mb-1.5">
        <span className="text-slate-500">{label}</span>
        <span className="font-bold text-slate-900 dark:text-white">{toFa(value)}٪</span>
      </div>
      <div className="h-2 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
        <div className={`h-full bg-${color}-500 rounded-full transition-all`} style={{ width: `${value}%` }} />
      </div>
    </div>
  );
}

function RevenueChart() {
  const max = Math.max(...revenueData.map((d) => d.value));
  return (
    <div className="flex items-end justify-between gap-2 sm:gap-4 h-64 pt-4">
      {revenueData.map((d, i) => (
        <div key={i} className="flex-1 flex flex-col items-center gap-2 group cursor-pointer">
          <div className="text-xs font-bold text-slate-500 group-hover:text-violet-600 transition-base">{faNum(d.value)}</div>
          <div className="w-full flex-1 flex items-end">
            <div
              className="w-full rounded-t-xl bg-gradient-to-t from-violet-600 to-fuchsia-500 group-hover:from-violet-700 group-hover:to-fuchsia-600 transition-all relative"
              style={{ height: `${(d.value / max) * 100}%` }}
            >
              <div className="absolute -top-7 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity text-[10px] font-bold bg-slate-900 dark:bg-slate-700 text-white px-2 py-1 rounded-lg whitespace-nowrap">
                {d.growth}
              </div>
            </div>
          </div>
          <div className="text-xs text-slate-500 font-medium">{d.month}</div>
        </div>
      ))}
    </div>
  );
}

// ============================================================
// Users management page
// ============================================================
function UsersPage() {
  const [filter, setFilter] = useState<"all" | "active" | "suspended" | "pending">("all");
  const [search, setSearch] = useState("");
  // داده واقعی از API (فیلتر و جستجو در API انجام می‌شود)
  const { data, loading } = useAdminUsers(filter, search);
  const users = data || [];

  return (
    <div className="space-y-5">
      {/* Stats strip */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        {[
          { label: "کل کاربران", value: faNum(12400), color: "violet" },
          { label: "فعال", value: faNum(11800), color: "emerald" },
          { label: "معلق", value: faNum(420), color: "rose" },
          { label: "در انتظار", value: faNum(180), color: "amber" },
        ].map((s, i) => (
          <div key={i} className="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-100 dark:border-slate-800 shadow-soft">
            <div className="text-xs text-slate-500 mb-1">{s.label}</div>
            <div className={`text-2xl font-black text-${s.color}-600 dark:text-${s.color}-400`}>{s.value}</div>
          </div>
        ))}
      </div>

      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft overflow-hidden">
        {/* Toolbar */}
        <div className="p-4 border-b border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row gap-3 sm:items-center justify-between">
          <div className="flex gap-2 flex-wrap">
            {[
              { id: "all", label: "همه" },
              { id: "active", label: "فعال" },
              { id: "suspended", label: "معلق" },
              { id: "pending", label: "در انتظار" },
            ].map((f) => (
              <button
                key={f.id}
                onClick={() => setFilter(f.id as any)}
                className={`px-4 py-2 rounded-lg text-sm font-semibold transition-base ${
                  filter === f.id
                    ? "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"
                }`}
              >
                {f.label}
              </button>
            ))}
          </div>
          <div className="relative">
            <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="h-10 w-full sm:w-64 pr-10 pl-4 rounded-lg 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>

        {/* Table */}
        <div className="overflow-x-auto scroll-persian">
          <table className="w-full text-right">
            <thead>
              <tr className="border-b border-slate-100 dark:border-slate-800 text-xs text-slate-500">
                <th className="p-4 font-semibold">کاربر</th>
                <th className="p-4 font-semibold">موبایل</th>
                <th className="p-4 font-semibold">پلن</th>
                <th className="p-4 font-semibold">سایت‌ها</th>
                <th className="p-4 font-semibold">کیف پول</th>
                <th className="p-4 font-semibold">وضعیت</th>
                <th className="p-4 font-semibold">آخرین فعالیت</th>
                <th className="p-4 font-semibold"></th>
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <tr><td colSpan={8} className="p-8 text-center text-slate-400">در حال بارگذاری...</td></tr>
              ) : users.length === 0 ? (
                <tr><td colSpan={8} className="p-8 text-center text-slate-400">کاربری یافت نشد</td></tr>
              ) : (
                users.map((u: any) => (
                <tr key={u.id} className="border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-base">
                  <td className="p-4">
                    <div className="flex items-center gap-3">
                      <div
                        className="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm shrink-0"
                        style={{ background: u.avatarColor }}
                      >
                        {u.name?.charAt(0) || "؟"}
                      </div>
                      <div className="min-w-0">
                        <div className="font-bold text-sm text-slate-900 dark:text-white truncate">{u.name}</div>
                        <div className="text-xs text-slate-400 truncate" dir="ltr">{u.email}</div>
                      </div>
                    </div>
                  </td>
                  <td className="p-4 text-sm text-slate-600 dark:text-slate-300 font-mono" dir="ltr">{u.mobile}</td>
                  <td className="p-4">
                    <span className="text-xs font-bold px-2.5 py-1 rounded-full bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300">
                      {u.plan}
                    </span>
                  </td>
                  <td className="p-4 text-sm font-bold text-slate-900 dark:text-white">{toFa(u.sitesCount)}</td>
                  <td className="p-4 text-sm font-bold text-emerald-600">{faMoney(u.wallet)}</td>
                  <td className="p-4">
                    <StatusBadge status={u.status} />
                  </td>
                  <td className="p-4 text-xs text-slate-400">{u.lastActive}</td>
                  <td className="p-4">
                    <div className="flex items-center gap-1">
                      <button title="ورود به‌عنوان کاربر" className="h-8 w-8 rounded-lg flex items-center justify-center text-slate-500 hover:bg-violet-100 dark:hover:bg-violet-900/40 hover:text-violet-600 transition-base">
                        <Eye className="w-4 h-4" />
                      </button>
                      <button title="تعلیق" className="h-8 w-8 rounded-lg flex items-center justify-center text-slate-500 hover:bg-rose-100 dark:hover:bg-rose-900/40 hover:text-rose-600 transition-base">
                        <Ban className="w-4 h-4" />
                      </button>
                      <button className="h-8 w-8 rounded-lg flex items-center justify-center text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700 transition-base">
                        <MoreHorizontal className="w-4 h-4" />
                      </button>
                    </div>
                  </td>
                </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* Pagination */}
        <div className="p-4 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between text-sm">
          <div className="text-slate-500">
            نمایش {toFa(users.length)} کاربر از دیتابیس
          </div>
          <div className="flex items-center gap-1">
            <button className="h-9 w-9 rounded-lg border border-slate-200 dark:border-slate-700 flex items-center justify-center text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-50" disabled>
              <ChevronRight className="w-4 h-4" />
            </button>
            <span className="px-3 py-2 rounded-lg bg-violet-600 text-white font-bold">{toFa(1)}</span>
            <span className="px-3 py-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">{toFa(2)}</span>
            <span className="px-3 py-2 rounded-lg text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800">{toFa(3)}</span>
            <button className="h-9 w-9 rounded-lg border border-slate-200 dark:border-slate-700 flex items-center justify-center text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800">
              <ChevronLeft className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function StatusBadge({ status }: { status: string }) {
  const map: Record<string, { label: string; color: string }> = {
    active: { label: "فعال", color: "emerald" },
    suspended: { label: "معلق", color: "rose" },
    pending: { label: "در انتظار", color: "amber" },
    draft: { label: "پیش‌نویس", color: "slate" },
  };
  const s = map[status] || map.active;
  return (
    <span className={`text-xs font-bold px-2.5 py-1 rounded-full bg-${s.color}-100 dark:bg-${s.color}-900/40 text-${s.color}-700 dark:text-${s.color}-300 flex items-center gap-1.5 w-fit`}>
      <div className={`w-1.5 h-1.5 rounded-full bg-${s.color}-500`} />
      {s.label}
    </span>
  );
}

// ============================================================
// Sites management
// ============================================================
function SitesPage() {
  const { data, loading } = useAdminSites();
  const sites = data || [];

  if (loading) {
    return (
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {[...Array(6)].map((_, i) => (
          <div key={i} className="h-72 rounded-2xl bg-white dark:bg-slate-900 animate-pulse" />
        ))}
      </div>
    );
  }

  return (
    <div className="space-y-5">
      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft p-4">
        <div className="flex flex-col sm:flex-row gap-3 sm:items-center justify-between">
          <div className="flex gap-2 flex-wrap">
            {["همه", "فعال", "پیش‌نویس", "معلق"].map((f, i) => (
              <button
                key={f}
                className={`px-4 py-2 rounded-lg text-sm font-semibold ${i === 0 ? "bg-violet-600 text-white" : "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300"}`}
              >
                {f}
              </button>
            ))}
          </div>
          <button className="h-10 px-4 rounded-lg bg-violet-600 text-white text-sm font-semibold flex items-center gap-2 self-start">
            <Download className="w-4 h-4" />
            خروجی CSV
          </button>
        </div>
      </div>

      {sites.length === 0 ? (
        <div className="text-center py-16 bg-white dark:bg-slate-900 rounded-2xl border border-dashed border-slate-200 dark:border-slate-700">
          <Globe className="w-16 h-16 mx-auto text-slate-300 mb-3" />
          <h3 className="font-bold text-slate-900 dark:text-white mb-1">هنوز سایتی در دیتابیس نیست</h3>
          <p className="text-sm text-slate-500">با ویزارد اولین سایت را بسازید</p>
        </div>
      ) : (
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {sites.map((s: any) => (
          <div key={s.id} className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft overflow-hidden hover:shadow-violet transition-base">
            <div className="aspect-video relative" style={{ background: `linear-gradient(135deg, ${s.accentColor}, ${s.accentColor}88)` }}>
              <div className="absolute inset-0 bg-dotted opacity-30" />
              <div className="absolute inset-0 flex items-center justify-center text-white text-4xl font-black">
                {s.name.charAt(0)}
              </div>
              <div className="absolute top-3 right-3">
                <StatusBadge status={s.status} />
              </div>
            </div>
            <div className="p-4">
              <h3 className="font-bold text-slate-900 dark:text-white mb-1 truncate">{s.name}</h3>
              <div className="text-xs text-slate-400 font-mono mb-3" dir="ltr">{s.customDomain || s.url}</div>
              <div className="grid grid-cols-3 gap-2 text-center mb-3">
                <div>
                  <div className="text-xs text-slate-400">بازدید</div>
                  <div className="font-bold text-sm text-slate-900 dark:text-white">{faNum(s.visits)}</div>
                </div>
                <div>
                  <div className="text-xs text-slate-400">فروش</div>
                  <div className="font-bold text-sm text-slate-900 dark:text-white">{faNum(s.sales)}</div>
                </div>
                <div>
                  <div className="text-xs text-slate-400">حجم</div>
                  <div className="font-bold text-sm text-slate-900 dark:text-white">{s.storageUsed}</div>
                </div>
              </div>
              <div className="flex items-center gap-1">
                <button className="flex-1 h-9 rounded-lg bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300 text-xs font-bold flex items-center justify-center gap-1.5">
                  <Eye className="w-3.5 h-3.5" />
                  پنل سایت
                </button>
                <button className="h-9 w-9 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-slate-700">
                  <Database className="w-4 h-4" />
                </button>
                <button className="h-9 w-9 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-slate-700">
                  <MoreHorizontal className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        ))}
        </div>
      )}
    </div>
  );
}

// ============================================================
// Templates library
// ============================================================
function TemplatesPage() {
  const { data, loading } = useTemplates();
  const allTemplates = data || templates;

  if (loading) {
    return (
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {[...Array(8)].map((_, i) => (
          <div key={i} className="h-72 rounded-2xl bg-white dark:bg-slate-900 animate-pulse" />
        ))}
      </div>
    );
  }

  return (
    <div className="space-y-5">
      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft p-4 flex flex-col sm:flex-row gap-3 sm:items-center justify-between">
        <div className="flex gap-2 flex-wrap">
          {["همه", "فروشگاهی", "شرکتی", "پرمیوم", "رایگان"].map((f, i) => (
            <button key={f} className={`px-4 py-2 rounded-lg text-sm font-semibold ${i === 0 ? "bg-violet-600 text-white" : "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300"}`}>{f}</button>
          ))}
        </div>
        <button className="h-10 px-4 rounded-lg bg-violet-600 text-white text-sm font-semibold flex items-center gap-2 self-start">
          <Plus className="w-4 h-4" />
          آپلود قالب جدید (Elementor Kit)
        </button>
      </div>

      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {allTemplates.map((t:any) => (
          <div key={t.id || t.templateKey} className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft overflow-hidden">
            <div className="relative aspect-[4/5] 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" />
              ) : (
                <div className="w-full h-full flex items-center justify-center" style={{ background: `linear-gradient(160deg, ${t.accentColor}, ${t.accentColor}AA)` }}>
                  <div className="text-5xl font-black text-white">{t.name.charAt(0)}</div>
                </div>
              )}
              {t.isPro && (
                <span className="absolute top-3 right-3 text-[10px] font-bold px-2 py-0.5 rounded-full bg-amber-400 text-amber-950">پرمیوم</span>
              )}
            </div>
            <div className="p-4">
              <h3 className="font-bold text-sm text-slate-900 dark:text-white mb-1 truncate">{t.name}</h3>
              <div className="flex items-center justify-between text-xs text-slate-400 mb-3">
                <span>{t.pages.length} صفحه</span>
                <span className="flex items-center gap-1">
                  <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
                  {toFa(t.rating)}
                </span>
              </div>
              <div className="flex items-center gap-1">
                <button className="flex-1 h-8 rounded-lg bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300 text-xs font-bold">ویرایش</button>
                <button className="h-8 w-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-slate-700">
                  <Download className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// Subscriptions
// ============================================================
function SubscriptionsPage() {
  return (
    <div className="space-y-5">
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {[
          { label: "اشتراک‌های فعال", value: faNum(9800), color: "emerald", icon: CheckCircle2 },
          { label: "درآمد ماهانه (م ت)", value: faNum(312), color: "violet", icon: TrendingUp },
          { label: "شارژ کیف پول (م ت)", value: faNum(48), color: "amber", icon: CreditCard },
          { label: "تمدید در ۷ روز آینده", value: faNum(124), color: "sky", icon: Clock },
        ].map((s, i) => (
          <div key={i} className="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-100 dark:border-slate-800 shadow-soft">
            <div className={`w-12 h-12 rounded-xl bg-${s.color}-100 dark:bg-${s.color}-900/30 flex items-center justify-center mb-4`}>
              <s.icon className={`w-6 h-6 text-${s.color}-600 dark:text-${s.color}-400`} />
            </div>
            <div className="text-3xl font-black text-slate-900 dark:text-white mb-1">{s.value}</div>
            <div className="text-sm text-slate-500">{s.label}</div>
          </div>
        ))}
      </div>

      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft overflow-hidden">
        <div className="p-4 border-b border-slate-100 dark:border-slate-800">
          <h3 className="font-bold text-slate-900 dark:text-white">آخرین تراکنش‌ها</h3>
        </div>
        <div className="overflow-x-auto scroll-persian">
          <table className="w-full text-right">
            <thead>
              <tr className="border-b border-slate-100 dark:border-slate-800 text-xs text-slate-500">
                <th className="p-4 font-semibold">کاربر</th>
                <th className="p-4 font-semibold">نوع</th>
                <th className="p-4 font-semibold">مبلغ</th>
                <th className="p-4 font-semibold">پلن</th>
                <th className="p-4 font-semibold">تاریخ</th>
                <th className="p-4 font-semibold">وضعیت</th>
              </tr>
            </thead>
            <tbody>
              {platformUsers.slice(0, 6).map((u) => (
                <tr key={u.id} className="border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800/30">
                  <td className="p-4">
                    <div className="flex items-center gap-3">
                      <div className="w-9 h-9 rounded-full text-white font-bold text-xs flex items-center justify-center" style={{ background: u.avatarColor }}>{u.name.charAt(0)}</div>
                      <div className="text-sm font-bold text-slate-900 dark:text-white">{u.name}</div>
                    </div>
                  </td>
                  <td className="p-4 text-sm text-slate-600">شارژ اشتراک</td>
                  <td className="p-4 text-sm font-bold text-emerald-600">{faToman(490000)}</td>
                  <td className="p-4"><span className="text-xs font-bold px-2 py-1 rounded-full bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300">{u.plan}</span></td>
                  <td className="p-4 text-xs text-slate-400">{u.joinedAt}</td>
                  <td className="p-4"><StatusBadge status="active" /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Domains management
// ============================================================
function DomainsPage() {
  const { data, loading } = useAdminDomains();
  const domains = data || [];

  if (loading) {
    return (
      <div className="space-y-4">
        <div className="grid sm:grid-cols-3 gap-4">
          {[...Array(3)].map((_, i) => (
            <div key={i} className="h-20 rounded-2xl bg-white dark:bg-slate-900 animate-pulse" />
          ))}
        </div>
        <div className="h-64 rounded-2xl bg-white dark:bg-slate-900 animate-pulse" />
      </div>
    );
  }

  const dnsPending = domains.filter((d:any) => d.sslStatus === "dns_pending").length;
  const sslPending = domains.filter((d:any) => d.sslStatus === "ssl_pending").length;
  const active = domains.filter((d:any) => d.status === "active").length;

  return (
    <div className="space-y-5">
      <div className="grid sm:grid-cols-3 gap-4">
        {[
          { label: "در انتظار DNS", value: faNum(dnsPending), color: "amber" },
          { label: "در انتظار SSL", value: faNum(sslPending), color: "sky" },
          { label: "دامنه‌های فعال", value: faNum(active), color: "emerald" },
        ].map((s, i) => (
          <div key={i} className="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-100 dark:border-slate-800 shadow-soft">
            <div className={`text-3xl font-black text-${s.color}-600 dark:text-${s.color}-400 mb-1`}>{s.value}</div>
            <div className="text-sm text-slate-500">{s.label}</div>
          </div>
        ))}
      </div>

      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft overflow-hidden">
        <div className="p-4 border-b border-slate-100 dark:border-slate-800">
          <h3 className="font-bold text-slate-900 dark:text-white">دامنه‌های در انتظار تأیید</h3>
          <p className="text-xs text-slate-400 mt-1">برای ادامه، رکوردهای DNS را بررسی و گواهی SSL را صادر کنید</p>
        </div>
        <div className="divide-y divide-slate-50 dark:divide-slate-800/50">
          {domains.length === 0 ? (
            <div className="p-8 text-center text-sm text-slate-400">دامنه‌ای در انتظار نیست</div>
          ) : (
            domains.map((d:any) => (
            <div key={d.id} className="p-4 flex flex-col sm:flex-row sm:items-center gap-3">
              <div className="flex items-center gap-3 flex-1">
                <div className="w-10 h-10 rounded-xl bg-violet-50 dark:bg-violet-900/30 flex items-center justify-center">
                  <Globe className="w-5 h-5 text-violet-600 dark:text-violet-400" />
                </div>
                <div>
                  <div className="font-bold text-sm text-slate-900 dark:text-white" dir="ltr">{d.domain}</div>
                  <div className="text-xs text-slate-400">مالک: {d.userName || "نامشخص"} - {d.time || ""}</div>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <DomainStatusBadge status={d.sslStatus as any} />
                <button className="h-9 px-3 rounded-lg bg-violet-600 text-white text-xs font-bold flex items-center gap-1.5 hover:bg-violet-700">
                  <RefreshCw className="w-3.5 h-3.5" />
                  بررسی
                </button>
              </div>
            </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
}

function DomainStatusBadge({ status }: { status: string }) {
  const map: Record<string, { label: string; color: string }> = {
    dns_pending: { label: "در انتظار DNS", color: "amber" },
    ssl_pending: { label: "در انتظار SSL", color: "sky" },
    active: { label: "فعال", color: "emerald" },
    failed: { label: "خطا", color: "rose" },
  };
  const s = map[status];
  return (
    <span className={`text-xs font-bold px-2.5 py-1 rounded-full bg-${s.color}-100 dark:bg-${s.color}-900/40 text-${s.color}-700 dark:text-${s.color}-300 flex items-center gap-1.5`}>
      <div className={`w-1.5 h-1.5 rounded-full bg-${s.color}-500`} />
      {s.label}
    </span>
  );
}

// ============================================================
// Settings page
// ============================================================
function SettingsPage() {
  return (
    <div className="grid lg:grid-cols-3 gap-5">
      <div className="lg:col-span-2 space-y-5">
        <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft p-6">
          <h3 className="font-bold text-slate-900 dark:text-white mb-1">افزونه‌های نصب خودکار</h3>
          <p className="text-xs text-slate-400 mb-5">هنگام ساخت سایت جدید این افزونه‌ها به‌صورت خودکار فعال می‌شوند</p>
          <div className="grid sm:grid-cols-2 gap-3">
            {[
              { name: "Elementor Pro", desc: "صفحه‌ساز پیشرفته", checked: true },
              { name: "WooCommerce", desc: "فروشگاه آنلاین", checked: true },
              { name: "Digits - OTP", desc: "ورود با موبایل", checked: true },
              { name: "کیف پول ووکامرس", desc: "موجودی کاربر", checked: true },
              { name: "Yoast SEO", desc: "بهینه‌سازی موتور جستجو", checked: true },
              { name: "WPML", desc: "چندزبانه", checked: false },
            ].map((p, i) => (
              <label key={i} className="flex items-start gap-3 p-3 rounded-xl border border-slate-100 dark:border-slate-800 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-base">
                <input type="checkbox" defaultChecked={p.checked} className="mt-1 w-4 h-4 accent-violet-600" />
                <div>
                  <div className="font-bold text-sm text-slate-900 dark:text-white">{p.name}</div>
                  <div className="text-xs text-slate-400">{p.desc}</div>
                </div>
              </label>
            ))}
          </div>
        </div>

        <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft p-6">
          <h3 className="font-bold text-slate-900 dark:text-white mb-1">محدودیت منابع هر پلن</h3>
          <p className="text-xs text-slate-400 mb-5">تعریف سهمیه برای هر پلن اشتراک</p>
          <div className="space-y-4">
            {[
              { plan: "استارتر", sites: 1, storage: "5GB", bw: "20GB" },
              { plan: "حرفه‌ای", sites: 3, storage: "20GB", bw: "100GB" },
              { plan: "بیزینس", sites: 10, storage: "50GB", bw: "نامحدود" },
            ].map((p, i) => (
              <div key={i} className="flex items-center gap-4 p-3 rounded-xl bg-slate-50 dark:bg-slate-800/50">
                <div className="w-3 h-3 rounded-full bg-violet-600" />
                <div className="font-bold text-sm text-slate-900 dark:text-white w-20">{p.plan}</div>
                <div className="flex-1 grid grid-cols-3 gap-2 text-xs">
                  <div><span className="text-slate-400">سایت:</span> <span className="font-bold text-slate-900 dark:text-white">{toFa(p.sites)}</span></div>
                  <div><span className="text-slate-400">حجم:</span> <span className="font-bold text-slate-900 dark:text-white">{p.storage}</span></div>
                  <div><span className="text-slate-400">باند:</span> <span className="font-bold text-slate-900 dark:text-white">{p.bw}</span></div>
                </div>
                <button className="text-xs text-violet-600 font-bold">ویرایش</button>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="space-y-5">
        <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft p-6">
          <h3 className="font-bold text-slate-900 dark:text-white mb-4">ایمیل‌های خودکار</h3>
          <div className="space-y-3">
            {[
              "خوش‌آمدگویی و راهنمای شروع",
              "اطلاعات ورود به سایت جدید",
              "یادآوری تمدید اشتراک",
              "تأیید دامنه و SSL",
              "بکاپ هفتگی آماده شد",
            ].map((m, i) => (
              <label key={i} className="flex items-center gap-3 cursor-pointer">
                <input type="checkbox" defaultChecked={i < 4} className="w-4 h-4 accent-violet-600" />
                <span className="text-sm text-slate-700 dark:text-slate-200">{m}</span>
              </label>
            ))}
          </div>
        </div>

        <div className="bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-2xl p-6 text-white">
          <Mail className="w-8 h-8 mb-3" />
          <h3 className="font-bold mb-1">نیاز به پشتیبانی؟</h3>
          <p className="text-sm text-white/80 mb-4">تیم پشتیبانی ۲۴/۷ آماده پاسخگویی</p>
          <button className="w-full h-10 rounded-xl bg-white text-violet-700 font-bold text-sm">تماس با پشتیبانی</button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Logs page
// ============================================================
function LogsPage() {
  const { data, loading } = useAdminLogs();
  const logs = data || [];

  const iconForType = (type: string) => {
    switch (type) {
      case "security": return Shield;
      case "system": return Server;
      case "site_created": return Globe;
      case "subscription": return CreditCard;
      case "domain": return Link;
      case "wallet": return Wallet;
      case "backup": return Database;
      default: return AlertCircle;
    }
  };
  const colorForType = (type: string) => {
    switch (type) {
      case "security": return "rose";
      case "system": return "violet";
      case "site_created": return "emerald";
      case "subscription": return "amber";
      case "domain": return "sky";
      case "wallet": return "violet";
      default: return "slate";
    }
  };

  if (loading) {
    return (
      <div className="space-y-4">
        <div className="grid sm:grid-cols-4 gap-3">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="h-20 rounded-2xl bg-white dark:bg-slate-900 animate-pulse" />
          ))}
        </div>
        <div className="h-64 rounded-2xl bg-white dark:bg-slate-900 animate-pulse" />
      </div>
    );
  }

  const errorCount = logs.filter((l:any) => l.level === "error").length;
  const warningCount = logs.filter((l:any) => l.level === "warning").length;
  const successCount = logs.filter((l:any) => l.level === "success").length;

  return (
    <div className="space-y-5">
      <div className="grid sm:grid-cols-4 gap-3">
        {[
          { label: "کل رویدادها", value: faNum(logs.length), color: "violet" },
          { label: "خطا", value: faNum(errorCount), color: "rose" },
          { label: "هشدار", value: faNum(warningCount), color: "amber" },
          { label: "موفق", value: faNum(successCount), color: "emerald" },
        ].map((s, i) => (
          <div key={i} className="bg-white dark:bg-slate-900 rounded-2xl p-4 border border-slate-100 dark:border-slate-800 shadow-soft">
            <div className="text-xs text-slate-500 mb-1">{s.label}</div>
            <div className={`text-2xl font-black text-${s.color}-600 dark:text-${s.color}-400`}>{s.value}</div>
          </div>
        ))}
      </div>

      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft overflow-hidden">
        <div className="p-4 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
          <h3 className="font-bold text-slate-900 dark:text-white">رویدادهای اخیر (از دیتابیس)</h3>
          <button className="text-xs font-semibold text-violet-600 dark:text-violet-400 flex items-center gap-1">
            <Download className="w-3.5 h-3.5" />
            خروجی گزارش
          </button>
        </div>
        <div className="divide-y divide-slate-50 dark:divide-slate-800/50">
          {logs.length === 0 ? (
            <div className="p-8 text-center text-sm text-slate-400">رویدادی ثبت نشده</div>
          ) : (
            logs.map((l:any, i:number) => {
            const Icon = iconForType(l.type);
            const color = colorForType(l.type);
            return (
              <div key={l.id || i} className="p-4 flex items-start gap-3 hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-base">
                <div className={`w-10 h-10 rounded-xl bg-${color}-100 dark:bg-${color}-900/30 flex items-center justify-center shrink-0`}>
                  <Icon className={`w-5 h-5 text-${color}-600 dark:text-${color}-400`} />
                </div>
                <div className="flex-1">
                  <div className="text-sm font-medium text-slate-900 dark:text-white">{l.message}</div>
                  <div className="text-xs text-slate-400 mt-0.5">{l.userName || "سیستم"} - {l.time}</div>
                </div>
                <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${
                  l.level === "error" ? "bg-rose-100 dark:bg-rose-900/40 text-rose-700 dark:text-rose-300" :
                  l.level === "warning" ? "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300" :
                  l.level === "success" ? "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300" :
                  "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300"
                }`}>
                  {l.level === "error" ? "خطا" : l.level === "warning" ? "هشدار" : l.level === "success" ? "موفق" : "اطلاع"}
                </span>
              </div>
            );
            })
          )}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Tour Overlay component (interactive tour)
// ============================================================
function TourOverlay({
  step,
  current,
  total,
  onNext,
  onPrev,
  onSkip,
}: {
  step: any;
  current: number;
  total: number;
  onNext: () => void;
  onPrev: () => void;
  onSkip: () => void;
}) {
  // Map step icon names to actual lucide components
  const iconMap: Record<string, any> = {
    Sparkles, Users, Globe, Link, TrendingUp, Activity, LayoutTemplate, CreditCard, Settings, Shield, GraduationCap,
    BarChart3: TrendingUp,
  };
  const StepIcon = step ? (iconMap[step.icon] || Sparkles) : Sparkles;

  return (
    <div className="fixed inset-0 z-[100]">
      {/* Backdrop */}
      <div className="tour-backdrop" />

      {/* Tour card - positioned in center bottom */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 w-[min(420px,calc(100vw-2rem))]">
        <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
          {/* Header with progress */}
          <div className="h-1.5 bg-slate-100 dark:bg-slate-700">
            <div className="h-full bg-gradient-to-l from-violet-600 to-fuchsia-500 transition-all" style={{ width: `${((current + 1) / total) * 100}%` }} />
          </div>

          {/* Content */}
          <div className="p-6">
            <div className="flex items-start gap-3 mb-4">
              <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center shrink-0">
                <StepIcon className="w-6 h-6 text-white" />
              </div>
              <div className="flex-1">
                <div className="text-xs font-bold text-violet-600 dark:text-violet-400 mb-1">
                  مرحله {toFa(current + 1)} از {toFa(total)}
                </div>
                <h3 className="font-black text-lg text-slate-900 dark:text-white">{step.title}</h3>
              </div>
            </div>
            <p className="text-sm text-slate-600 dark:text-slate-300 leading-relaxed mb-6">{step.description}</p>

            {/* Actions */}
            <div className="flex items-center justify-between gap-2">
              <button
                onClick={onSkip}
                className="text-sm font-semibold text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-base"
              >
                رد کردن تور
              </button>
              <div className="flex items-center gap-2">
                <button
                  onClick={onPrev}
                  disabled={current === 0}
                  className="h-10 px-4 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 text-sm font-semibold flex items-center gap-1.5 disabled:opacity-40 hover:bg-slate-50 dark:hover:bg-slate-800 transition-base"
                >
                  <ChevronRight className="w-4 h-4" />
                  قبلی
                </button>
                <button
                  onClick={onNext}
                  className="h-10 px-5 rounded-lg bg-violet-600 hover:bg-violet-700 text-white text-sm font-bold flex items-center gap-1.5 shadow-violet transition-base"
                >
                  {current === total - 1 ? "پایان تور" : "بعدی"}
                  <ChevronLeft className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>

          {/* Dot indicators */}
          <div className="px-6 pb-4 flex items-center justify-center gap-1.5">
            {Array.from({ length: total }).map((_, i) => (
              <div
                key={i}
                className={`h-1.5 rounded-full transition-all ${i === current ? "w-6 bg-violet-600" : i < current ? "w-1.5 bg-violet-400" : "w-1.5 bg-slate-300 dark:bg-slate-700"}`}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// (BarChart3 alias removed - we use TrendingUp icon for revenue chart)