"use client";

import { useState } from "react";
import { ViewId } from "@/app/page";
import {
  LayoutDashboard,
  Globe,
  ShoppingBag,
  CreditCard,
  Settings,
  Moon,
  Sun,
  Menu,
  X,
  Bell,
  Search,
  Sparkles,
  TrendingUp,
  Users as UsersIcon,
  Package,
  Eye,
  Edit,
  Link,
  Plus,
  CreditCard as CardIcon,
  Wallet,
  Calendar,
  Download,
  ArrowUp,
  ArrowDown,
  ChevronLeft,
  Star,
  Crown,
  Check,
  ExternalLink,
  Lock,
  Server,
  Copy,
  Zap,
  Filter,
  RefreshCw,
  ShoppingCart,
  AlertCircle,
  Server as ServerIcon,
} from "lucide-react";
import {
  userSites,
  storeStats,
  plans,
  walletTransactions,
  pendingDomains,
  faNum,
  faMoney,
  faToman,
  toFa,
} from "@/lib/site-saz-data";
import { useUserDashboard, useUserSites, useUserWallet, usePlans, apiPost } from "@/lib/api-hooks";
import { todayShamsi } from "@/lib/fa-utils";
import { useTheme } from "./ThemeProvider";

type UserPage = "dashboard" | "sites" | "store" | "domain" | "subscription" | "settings";

export function UserPanel({ onNavigate }: { onNavigate: (v: ViewId) => void }) {
  const { theme, toggle } = useTheme();
  const [page, setPage] = useState<UserPage>("dashboard");
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const navItems: { id: UserPage; label: string; icon: any }[] = [
    { id: "dashboard", label: "داشبورد", icon: LayoutDashboard },
    { id: "sites", label: "سایت‌های من", icon: Globe },
    { id: "store", label: "فروشگاه", icon: ShoppingBag },
    { id: "domain", label: "دامنه", icon: Link },
    { id: "subscription", label: "اشتراک و کیف پول", icon: CreditCard },
    { id: "settings", label: "تنظیمات", icon: Settings },
  ];

  return (
    <div className="min-h-screen flex bg-slate-100 dark:bg-slate-950">
      {/* ===== 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"
        }`}
      >
        <div className="h-full flex flex-col">
          {/* Profile */}
          <div className="p-5 border-b border-slate-100 dark:border-slate-800">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2.5">
                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 flex items-center justify-center text-white font-black">س</div>
                <div>
                  <div className="font-black text-slate-900 dark:text-white text-sm">سایت‌ساز پرو</div>
                  <div className="text-[10px] text-violet-600 dark:text-violet-400 font-bold">پنل کاربری</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>

            {/* User info */}
            <div className="flex items-center gap-3 p-3 rounded-xl bg-slate-50 dark:bg-slate-800/50">
              <div className="w-11 h-11 rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 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">سردبیر - فروشگاه آرمیش</div>
              </div>
            </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;
              return (
                <button
                  key={n.id}
                  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"
                  }`}
                >
                  {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>
                </button>
              );
            })}
          </nav>

          {/* Subscription card */}
          <div className="p-3">
            <div className="rounded-2xl bg-gradient-to-br from-violet-500 to-fuchsia-500 p-4 text-white relative overflow-hidden">
              <div className="absolute inset-0 bg-dotted opacity-20" />
              <div className="relative">
                <div className="flex items-center gap-2 mb-2">
                  <Crown className="w-4 h-4 text-amber-300" />
                  <div className="text-xs font-bold">پلن: حرفه‌ای</div>
                </div>
                <div className="mb-3">
                  <div className="flex items-center justify-between text-xs mb-1.5">
                    <span className="text-white/80">روز باقی‌مانده</span>
                    <span className="font-bold">{toFa(60)} روز</span>
                  </div>
                  <div className="h-2 bg-white/20 rounded-full overflow-hidden">
                    <div className="h-full bg-white rounded-full" style={{ width: "60%" }} />
                  </div>
                </div>
                <button
                  onClick={() => setPage("subscription")}
                  className="w-full h-9 rounded-lg bg-white text-violet-700 text-xs font-bold flex items-center justify-center gap-1.5 hover:bg-violet-50 transition-base"
                >
                  ارتقا به پلن بالاتر
                  <ChevronLeft className="w-3.5 h-3.5" />
                </button>
              </div>
            </div>
          </div>

          {/* Footer */}
          <div className="p-3 border-t border-slate-100 dark:border-slate-800">
            <button
              onClick={() => onNavigate("landing")}
              className="w-full flex items-center gap-3 px-3.5 py-3 rounded-xl text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 text-sm font-semibold transition-base"
            >
              <ExternalLink className="w-5 h-5" />
              خروج
            </button>
          </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">سلام سارا - {todayShamsi()}</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button className="relative 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">
                <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={toggle}
                className="h-10 w-10 rounded-lg flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800"
              >
                {theme === "light" ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
              </button>
              <div className="flex items-center gap-2 px-3 h-10 rounded-lg bg-violet-50 dark:bg-violet-950/40 border border-violet-100 dark:border-violet-900/50">
                <Wallet className="w-4 h-4 text-violet-600" />
                <span className="text-sm font-bold text-violet-700 dark:text-violet-300">{faMoney(450000)}</span>
              </div>
            </div>
          </div>
        </header>

        {/* Page content */}
        <main className="flex-1 p-4 sm:p-6 max-w-[1200px] w-full mx-auto">
          {page === "dashboard" && <UserDashboard onNavigate={onNavigate} onPanel={setPage} />}
          {page === "sites" && <UserSites onPanel={setPage} />}
          {page === "store" && <UserStore />}
          {page === "domain" && <UserDomain />}
          {page === "subscription" && <UserSubscription />}
          {page === "settings" && <UserSettings />}
        </main>
      </div>
    </div>
  );
}

// ============================================================
// User Dashboard
// ============================================================
function UserDashboard({ onNavigate, onPanel }: { onNavigate: (v: ViewId) => void; onPanel: (p: UserPage) => void }) {
  // داده واقعی از دیتابیس
  const { data, loading } = useUserDashboard();
  const stats = data?.stats;
  const sites = data?.sites || [];
  const user = data?.user;

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

  return (
    <div className="space-y-6">
      {/* Welcome / hero CTA */}
      <div className="relative rounded-3xl bg-gradient-to-br from-violet-600 to-fuchsia-600 p-6 sm:p-8 overflow-hidden">
        <div className="absolute inset-0 bg-dotted opacity-30" />
        <div className="absolute -top-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl" />
        <div className="relative text-white">
          <h2 className="text-2xl sm:text-3xl font-black mb-2">سایت جدید بسازید</h2>
          <p className="text-white/80 mb-5 max-w-lg">در ۵ کلیک یک سایت حرفه‌ای دیگر بسازید و کسب‌وکارتان را گسترش دهید.</p>
          <button
            onClick={() => onNavigate("wizard")}
            className="h-12 px-6 rounded-xl bg-white text-violet-700 font-black inline-flex items-center gap-2 hover:scale-[1.03] transition-base shadow-lg"
          >
            <Sparkles className="w-5 h-5" />
            ساخت سایت جدید
            <ChevronLeft className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* Quick stats */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {[
          { label: "سایت‌های من", value: toFa(stats?.totalSites || 0), color: "violet", icon: Globe },
          { label: "کل بازدید", value: faNum(stats?.totalVisits || 0), color: "emerald", icon: TrendingUp },
          { label: "کیف پول", value: faMoney(stats?.walletBalance || 0), color: "amber", icon: Wallet },
          { label: "کل فروش", value: faNum(stats?.totalSales || 0), color: "sky", icon: UsersIcon },
        ].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-10 h-10 rounded-xl bg-${s.color}-100 dark:bg-${s.color}-900/30 flex items-center justify-center mb-3`}>
              <s.icon className={`w-5 h-5 text-${s.color}-600 dark:text-${s.color}-400`} />
            </div>
            <div className="text-2xl font-black text-slate-900 dark:text-white mb-1">{s.value}</div>
            <div className="text-xs text-slate-500">{s.label}</div>
          </div>
        ))}
      </div>

      {/* My sites */}
      <div>
        <div className="flex items-center justify-between mb-4">
          <div>
            <h3 className="font-black text-lg text-slate-900 dark:text-white">سایت‌های من</h3>
            <p className="text-xs text-slate-400 mt-0.5">مدیریت و بازدید سایت‌های خود را اینجا انجام دهید</p>
          </div>
          <button
            onClick={() => onPanel("sites")}
            className="text-sm font-semibold text-violet-600 dark:text-violet-400 flex items-center gap-1 hover:underline"
          >
            مشاهده همه
            <ChevronLeft className="w-4 h-4" />
          </button>
        </div>

        {sites.length === 0 ? (
          <div className="text-center py-12 bg-white dark:bg-slate-900 rounded-2xl border border-dashed border-slate-200 dark:border-slate-700">
            <Globe className="w-12 h-12 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 mb-4">در ۵ کلیک اولین سایت خود را بسازید</p>
            <button
              onClick={() => onNavigate("wizard")}
              className="h-11 px-5 rounded-xl bg-violet-600 text-white font-bold text-sm inline-flex items-center gap-2 hover:bg-violet-700"
            >
              <Sparkles className="w-4 h-4" />
              شروع ساخت سایت
            </button>
          </div>
        ) : (
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {sites.slice(0, 3).map((s: any) => (
              <SiteCard key={s.id} site={s} onPanel={onPanel} />
            ))}
          </div>
        )}
      </div>

      {/* Help section */}
      <div className="grid sm:grid-cols-2 gap-4">
        <div className="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-100 dark:border-slate-800 shadow-soft flex items-center gap-4">
          <div className="w-12 h-12 rounded-xl bg-violet-100 dark:bg-violet-900/30 flex items-center justify-center shrink-0">
            <AlertCircle className="w-6 h-6 text-violet-600 dark:text-violet-400" />
          </div>
          <div className="flex-1">
            <div className="font-bold text-slate-900 dark:text-white mb-0.5">تنها یک سوال دارید؟</div>
            <div className="text-xs text-slate-400">مرکز پاسخگویی سوالات متداول شماست.</div>
          </div>
          <button className="h-9 px-4 rounded-lg border border-violet-200 dark:border-violet-800 text-violet-700 dark:text-violet-300 text-sm font-bold hover:bg-violet-50 dark:hover:bg-violet-950/40 transition-base">
            مشاهده راهنما
          </button>
        </div>

        <div className="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-100 dark:border-slate-800 shadow-soft flex items-center gap-4">
          <div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center shrink-0">
            <Server className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
          </div>
          <div className="flex-1">
            <div className="font-bold text-slate-900 dark:text-white mb-0.5">از بکاپ سایت مطمئن شوید</div>
            <div className="text-xs text-slate-400">دریافت بکاپ دستی سایت‌هایتان.</div>
          </div>
          <button className="h-9 px-4 rounded-lg bg-emerald-600 text-white text-sm font-bold hover:bg-emerald-700 transition-base">
            بکاپ گیری
          </button>
        </div>
      </div>
    </div>
  );
}

function SiteCard({ site, onPanel }: { site: any; onPanel: (p: UserPage) => void }) {
  return (
    <div 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, ${site.accentColor}, ${site.accentColor}88)` }}>
        <div className="absolute inset-0 bg-dotted opacity-30" />
        <div className="absolute inset-0 flex items-center justify-center text-white text-5xl font-black">
          {site.name.charAt(0)}
        </div>
        <div className="absolute top-3 right-3">
          <span className="text-xs font-bold px-2.5 py-1 rounded-full bg-emerald-500 text-white flex items-center gap-1.5 shadow-lg">
            <div className="w-1.5 h-1.5 rounded-full bg-white" />
            {site.status === "active" ? "فعال" : "پیش‌نویس"}
          </span>
        </div>
      </div>
      <div className="p-4">
        <h3 className="font-bold text-sm text-slate-900 dark:text-white mb-1 truncate">{site.name}</h3>
        <div className="flex items-center gap-1.5 text-xs text-slate-400 mb-3" dir="ltr">
          <Globe className="w-3.5 h-3.5" />
          {site.customDomain || site.url}
        </div>

        <div className="flex items-center gap-2 text-xs text-slate-500 mb-3">
          <div className="flex items-center gap-1">
            <div className={`w-1.5 h-1.5 rounded-full ${site.status === "active" ? "bg-emerald-500" : "bg-amber-500"}`} />
            {site.status === "active" ? "سایت فعال" : "در حال طراحی"}
          </div>
          <div>•</div>
          <div>عضویت: {site.createdAt}</div>
        </div>

        <div className="grid grid-cols-4 gap-1">
          <button className="h-10 rounded-lg bg-violet-50 dark:bg-violet-950/40 text-violet-700 dark:text-violet-300 flex flex-col items-center justify-center gap-0.5 hover:bg-violet-100 dark:hover:bg-violet-900/40 transition-base">
            <Edit className="w-4 h-4" />
            <span className="text-[9px]">ویرایش</span>
          </button>
          <button className="h-10 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 flex flex-col items-center justify-center gap-0.5 hover:bg-slate-200 dark:hover:bg-slate-700 transition-base">
            <ShoppingCart className="w-4 h-4" />
            <span className="text-[9px]">فروشگاه</span>
          </button>
          <button
            onClick={() => onPanel("domain")}
            className="h-10 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 flex flex-col items-center justify-center gap-0.5 hover:bg-slate-200 dark:hover:bg-slate-700 transition-base"
          >
            <Link className="w-4 h-4" />
            <span className="text-[9px]">دامنه</span>
          </button>
          <button className="h-10 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 flex flex-col items-center justify-center gap-0.5 hover:bg-slate-200 dark:hover:bg-slate-700 transition-base">
            <Eye className="w-4 h-4" />
            <span className="text-[9px]">بازدید</span>
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// User sites list
// ============================================================
function UserSites({ onPanel }: { onPanel: (p: UserPage) => void }) {
  const { data: sites, loading } = useUserSites();

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

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm text-slate-500">مدیریت تمام سایت‌های ساخته‌شده توسط شما</p>
        </div>
        <div className="flex items-center gap-2">
          <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 flex items-center gap-2">
            <Filter className="w-4 h-4" />
            جدیدترین
          </button>
        </div>
      </div>

      {sites && sites.length > 0 ? (
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {sites.map((s: any) => (
            <SiteCard key={s.id} site={s} onPanel={onPanel} />
          ))}
        </div>
      ) : (
        <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>
  );
}

// ============================================================
// Store management
// ============================================================
function UserStore() {
  return (
    <div className="space-y-5">
      {/* Top stats */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {[
          { label: "فروش این ماه", value: faNum(20), delta: "+۱۲٪", up: true, color: "emerald", icon: TrendingUp },
          { label: "سفارش‌های جدید", value: faNum(8), delta: "+۵", up: true, color: "violet", icon: Package },
          { label: "مشتریان", value: faNum(234), delta: "+۲۴", up: true, color: "sky", icon: UsersIcon },
          { label: "درآمد (تومان)", value: faNum(12800000), delta: "-۳٪", up: false, color: "amber", icon: Wallet },
        ].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="flex items-start justify-between mb-3">
              <div className={`w-10 h-10 rounded-xl bg-${s.color}-100 dark:bg-${s.color}-900/30 flex items-center justify-center`}>
                <s.icon className={`w-5 h-5 text-${s.color}-600 dark:text-${s.color}-400`} />
              </div>
              <span className={`text-xs font-bold px-2 py-1 rounded-full flex items-center gap-1 ${
                s.up ? "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300" : "bg-rose-100 dark:bg-rose-900/40 text-rose-700 dark:text-rose-300"
              }`}>
                {s.up ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />}
                {s.delta}
              </span>
            </div>
            <div className="text-2xl font-black text-slate-900 dark:text-white mb-1">{s.value}</div>
            <div className="text-xs text-slate-500">{s.label}</div>
          </div>
        ))}
      </div>

      <div className="grid lg:grid-cols-3 gap-5">
        {/* Sales chart */}
        <div 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">
          <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="flex items-end justify-between gap-2 sm:gap-4 h-48">
            {storeStats.monthlyData.map((d, i) => {
              const max = Math.max(...storeStats.monthlyData.map((m) => m.sales));
              return (
                <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">{faNum(d.sales)}</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:scale-y-105 transition-transform origin-bottom"
                      style={{ height: `${(d.sales / max) * 100}%` }}
                    />
                  </div>
                  <div className="text-xs text-slate-500 font-medium">{d.month}</div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Top products */}
        <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-3">
            {storeStats.topProducts.map((p, i) => (
              <div key={i} className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center text-white font-bold text-sm shrink-0">
                  {toFa(i + 1)}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-bold text-slate-900 dark:text-white truncate">{p.name}</div>
                  <div className="text-xs text-slate-400">{faNum(p.sales)} فروش</div>
                </div>
                <div className="text-sm font-bold text-emerald-600">{faMoney(p.revenue)}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Recent orders */}
      <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 hover:underline">
            همه سفارش‌ها
            <ChevronLeft className="w-3.5 h-3.5" />
          </button>
        </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>
              {storeStats.recentOrders.map((o) => (
                <tr key={o.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 text-sm font-bold text-violet-600">#{toFa(o.id)}</td>
                  <td className="p-4 text-sm font-medium text-slate-900 dark:text-white">{o.customer}</td>
                  <td className="p-4 text-sm text-slate-600 dark:text-slate-300">{o.product}</td>
                  <td className="p-4 text-sm font-bold text-slate-900 dark:text-white">{faToman(o.amount)}</td>
                  <td className="p-4 text-xs text-slate-400">{o.date}</td>
                  <td className="p-4">
                    <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${
                      o.status === "completed" ? "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300" :
                      o.status === "processing" ? "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300" :
                      "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300"
                    }`}>
                      {o.status === "completed" ? "تکمیل شده" : o.status === "processing" ? "در حال پردازش" : "در انتظار"}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Domain management
// ============================================================
function UserDomain() {
  const [showAddDomain, setShowAddDomain] = useState(false);
  const [newDomain, setNewDomain] = useState("");

  return (
    <div className="space-y-5">
      {/* Current domain card */}
      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft p-6">
        <div className="flex items-center gap-2 mb-1">
          <Globe className="w-5 h-5 text-violet-600" />
          <h3 className="font-bold text-slate-900 dark:text-white">دامنه فعلی</h3>
        </div>
        <p className="text-xs text-slate-400 mb-4">دامنه پیش‌فرض سایت شما</p>
        <div className="flex items-center justify-between p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-violet-100 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-slate-900 dark:text-white font-mono" dir="ltr">aramishdecor.sitesaz.pro</div>
              <div className="text-xs text-slate-400">ساب‌دامنه رایگان - فعال</div>
            </div>
          </div>
          <span className="text-xs font-bold px-2.5 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300 flex items-center gap-1.5">
            <div className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
            فعال
          </span>
        </div>
      </div>

      {/* Custom domain */}
      <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft p-6">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <Link className="w-5 h-5 text-violet-600" />
            <h3 className="font-bold text-slate-900 dark:text-white">دامنه اختصاصی</h3>
            <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">پلن حرفه‌ای</span>
          </div>
          <button
            onClick={() => setShowAddDomain(!showAddDomain)}
            className="h-9 px-4 rounded-lg bg-violet-600 text-white text-sm font-bold flex items-center gap-2 hover:bg-violet-700 transition-base"
          >
            <Plus className="w-4 h-4" />
            افزودن دامنه
          </button>
        </div>

        {showAddDomain && (
          <div className="mb-4 p-5 rounded-xl bg-violet-50 dark:bg-violet-950/30 border border-violet-100 dark:border-violet-900/50 animate-in fade-in duration-300">
            <label className="block text-sm font-bold text-slate-900 dark:text-white mb-2">دامنه خود را وارد کنید</label>
            <input
              value={newDomain}
              onChange={(e) => setNewDomain(e.target.value)}
              dir="ltr"
              placeholder="example.ir"
              className="w-full h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-violet-500 outline-none mb-4"
            />
            <div className="rounded-xl bg-white dark:bg-slate-800 p-4 border border-slate-100 dark:border-slate-700">
              <div className="text-xs font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-1.5">
                <Server className="w-3.5 h-3.5" />
                دستورالعمل تنظیم DNS
              </div>
              <div className="space-y-2 text-xs text-slate-600 dark:text-slate-300">
                <div className="flex items-center justify-between p-2 rounded-lg bg-slate-50 dark:bg-slate-900/50">
                  <span>رکورد A</span>
                  <code className="font-mono text-violet-600" dir="ltr">185.143.220.10</code>
                  <button className="text-slate-400 hover:text-violet-600">
                    <Copy className="w-3.5 h-3.5" />
                  </button>
                </div>
                <div className="flex items-center justify-between p-2 rounded-lg bg-slate-50 dark:bg-slate-900/50">
                  <span>رکورد CNAME (www)</span>
                  <code className="font-mono text-violet-600" dir="ltr">sitesaz.pro</code>
                  <button className="text-slate-400 hover:text-violet-600">
                    <Copy className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
              <p className="text-xs text-slate-400 mt-3">پس از تنظیم DNS، تا ۲۴ ساعت طول می‌کشد تا دامنه فعال شود. گواهی SSL به‌صورت خودکار صادر می‌شود.</p>
            </div>
            <div className="flex items-center gap-2 mt-4">
              <button className="h-10 px-4 rounded-lg bg-violet-600 text-white text-sm font-bold hover:bg-violet-700">تأیید و افزودن</button>
              <button onClick={() => setShowAddDomain(false)} className="h-10 px-4 rounded-lg text-slate-600 dark:text-slate-300 text-sm font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">انصراف</button>
            </div>
          </div>
        )}

        {/* Existing custom domains */}
        <div className="space-y-3">
          {pendingDomains.slice(0, 3).map((d) => (
            <div key={d.id} className="flex items-center gap-3 p-3 rounded-xl border border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-base">
              <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 className="flex-1">
                <div className="font-bold text-sm text-slate-900 dark:text-white font-mono" dir="ltr">{d.domain}</div>
                <div className="text-xs text-slate-400">افزوده شد {d.createdAt}</div>
              </div>
              <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${
                d.status === "active" ? "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300" :
                d.status === "failed" ? "bg-rose-100 dark:bg-rose-900/40 text-rose-700 dark:text-rose-300" :
                "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300"
              }`}>
                {d.status === "active" ? "فعال" : d.status === "failed" ? "خطا" : "در انتظار"}
              </span>
              <button className="text-slate-400 hover:text-violet-600">
                <RefreshCw className="w-4 h-4" />
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* SSL info */}
      <div className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 rounded-2xl border border-emerald-100 dark:border-emerald-900/50 p-6">
        <div className="flex items-center gap-3 mb-3">
          <div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center">
            <Lock className="w-6 h-6 text-emerald-600" />
          </div>
          <div>
            <h3 className="font-bold text-slate-900 dark:text-white">گواهی SSL فعال</h3>
            <p className="text-xs text-slate-500">تمام ارتباطات سایت شما رمزنگاری شده است</p>
          </div>
        </div>
        <div className="grid sm:grid-cols-3 gap-3 text-sm">
          <div className="p-3 rounded-xl bg-white dark:bg-slate-900/50">
            <div className="text-xs text-slate-500">نوع گواهی</div>
            <div className="font-bold text-slate-900 dark:text-white">Let's Encrypt</div>
          </div>
          <div className="p-3 rounded-xl bg-white dark:bg-slate-900/50">
            <div className="text-xs text-slate-500">انقضا</div>
            <div className="font-bold text-slate-900 dark:text-white">۹۰ روز آینده</div>
          </div>
          <div className="p-3 rounded-xl bg-white dark:bg-slate-900/50">
            <div className="text-xs text-slate-500">تمدید خودکار</div>
            <div className="font-bold text-emerald-600">فعال</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Subscription & Wallet
// ============================================================
function ChargeWalletButton() {
  const [charging, setCharging] = useState(false);
  const [amount, setAmount] = useState(500000);

  const handleCharge = async () => {
    setCharging(true);
    const result = await apiPost("/api/user/wallet", { amount });
    setCharging(false);
    if (result.success) {
      alert("کیف پول با موفقیت شارژ شد! 🎉");
      setTimeout(() => window.location.reload(), 500);
    } else {
      alert("خطا: " + (result.error || "نامشخص"));
    }
  };

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(parseInt(e.target.value) || 50000)}
          className="flex-1 h-11 px-3 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"
        />
        <span className="text-xs text-slate-500">تومان</span>
      </div>
      <button
        onClick={handleCharge}
        disabled={charging}
        className="w-full h-11 rounded-xl bg-violet-600 text-white font-bold text-sm hover:bg-violet-700 transition-base flex items-center justify-center gap-2 disabled:opacity-50"
      >
        {charging ? <RefreshCw className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
        {charging ? "در حال شارژ..." : "شارژ کیف پول"}
      </button>
    </div>
  );
}

function UserSubscription() {
  const { data: dashboard } = useUserDashboard();
  const { data: walletData, refetch } = useUserWallet();
  const { data: plansData } = usePlans();
  const user = dashboard?.user;
  const transactions = walletData?.transactions || [];
  const allPlans = plansData || plans;

  return (
    <div className="space-y-5">
      {/* Current plan */}
      <div className="bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-2xl p-6 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-dotted opacity-20" />
        <div className="absolute -top-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl" />
        <div className="relative flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2 mb-2">
              <Crown className="w-5 h-5 text-amber-300" />
              <span className="text-sm font-bold">پلن فعلی شما</span>
            </div>
            <h3 className="text-3xl font-black mb-1">{user?.planName || "حرفه‌ای"}</h3>
            <p className="text-white/80 text-sm">{faNum(user?.planPrice || 490000)} تومان در ماه</p>
          </div>
          <div className="text-center sm:text-left">
            <div className="text-2xl font-black mb-1">{toFa(user?.daysRemaining || 60)} روز</div>
            <div className="text-sm text-white/80">تا پایان اشتراک</div>
          </div>
          <div className="flex gap-2">
            <button className="h-11 px-5 rounded-xl bg-white text-violet-700 font-bold text-sm hover:bg-violet-50 transition-base">ارتقا</button>
            <button className="h-11 px-5 rounded-xl bg-white/20 text-white font-bold text-sm hover:bg-white/30 transition-base">تمدید</button>
          </div>
        </div>
      </div>

      <div className="grid lg:grid-cols-3 gap-5">
        {/* Wallet */}
        <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-soft p-6">
          <div className="flex items-center gap-2 mb-4">
            <Wallet className="w-5 h-5 text-violet-600" />
            <h3 className="font-bold text-slate-900 dark:text-white">کیف پول</h3>
          </div>
          <div className="text-4xl font-black text-slate-900 dark:text-white mb-1">{faMoney(walletData?.balance || user?.walletBalance || 0)}</div>
          <div className="text-xs text-slate-400 mb-5">موجودی فعلی (از دیتابیس)</div>
          <ChargeWalletButton />
        </div>

        {/* Plan features */}
        <div className="lg:col-span-2 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">امکانات پلن {user?.planName || "حرفه‌ای"}</h3>
          <div className="grid sm:grid-cols-2 gap-3">
            {(allPlans.find((p:any) => p.planKey === user?.currentPlan)?.features || [
              { label: "۳ سایت وردپرسی", included: true },
              { label: "۲۰ گیگابایت فضای ذخیره‌سازی", included: true },
              { label: "۱۰۰ گیگابایت پهنای باند", included: true },
              { label: "دامنه اختصاصی", included: true },
              { label: "بکاپ روزانه خودکار", included: true },
              { label: "گواهی SSL رایگان", included: true },
              { label: "قالب‌های پرمیوم", included: true },
              { label: "پشتیبانی اولویت‌دار", included: true },
            ]).filter((f:any) => f.included).map((f:any, i:number) => (
              <div key={i} className="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                <Check className="w-4 h-4 text-emerald-500" />
                {f.label}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Transactions */}
      <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="divide-y divide-slate-50 dark:divide-slate-800/50">
          {transactions.length === 0 ? (
            <div className="p-8 text-center text-sm text-slate-400">هنوز تراکنشی ثبت نشده</div>
          ) : (
            transactions.map((t:any) => (
              <div key={t.id} className="p-4 flex items-center gap-3 hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-base">
                <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
                  t.amount > 0 ? "bg-emerald-100 dark:bg-emerald-900/40" : "bg-rose-100 dark:bg-rose-900/40"
                }`}>
                  {t.amount > 0 ? (
                    <ArrowDown className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
                  ) : (
                    <ArrowUp className="w-5 h-5 text-rose-600 dark:text-rose-400" />
                  )}
                </div>
                <div className="flex-1">
                  <div className="text-sm font-bold text-slate-900 dark:text-white">{t.title}</div>
                  <div className="text-xs text-slate-400">{t.date}</div>
                </div>
                <div className={`text-sm font-bold ${t.amount > 0 ? "text-emerald-600" : "text-rose-600"}`}>
                  {t.amount > 0 ? "+" : ""}{faToman(Math.abs(t.amount))}
                </div>
              </div>
            ))
          )}
        </div>
      </div>

      {/* Compare plans */}
      <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-5">سایر پلن‌ها</h3>
        <div className="grid sm:grid-cols-3 gap-4">
          {plans.filter((p) => p.id !== "pro").slice(0, 3).map((p) => (
            <div key={p.id} className={`rounded-2xl p-5 border-2 ${p.highlighted ? "border-violet-500" : "border-slate-100 dark:border-slate-800"}`}>
              <div className="flex items-center gap-2 mb-1">
                <div className="w-3 h-3 rounded-full" style={{ background: p.color }} />
                <h4 className="font-black text-lg text-slate-900 dark:text-white">{p.name}</h4>
              </div>
              <div className="mb-4">
                {p.price === 0 ? (
                  <div className="text-sm font-bold text-slate-500">{p.period}</div>
                ) : (
                  <div className="flex items-baseline gap-1">
                    <span className="text-2xl font-black text-slate-900 dark:text-white">{faNum(p.price)}</span>
                    <span className="text-xs text-slate-500">ت/ماه</span>
                  </div>
                )}
              </div>
              <button className="w-full h-10 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 text-sm font-bold hover:bg-violet-100 dark:hover:bg-violet-900/40 transition-base">
                ارتقا به {p.name}
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// User settings
// ============================================================
function UserSettings() {
  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-5">اطلاعات شخصی</h3>
          <div className="grid sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">نام و نام خانوادگی</label>
              <input defaultValue="سارا احمدی" className="w-full h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-violet-500 outline-none" />
            </div>
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">موبایل</label>
              <input defaultValue="09123456789" dir="ltr" className="w-full h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-violet-500 outline-none" />
            </div>
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">ایمیل</label>
              <input defaultValue="sara@example.com" dir="ltr" className="w-full h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-violet-500 outline-none" />
            </div>
            <div>
              <label className="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">شهر</label>
              <input defaultValue="تهران" className="w-full h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-violet-500 outline-none" />
            </div>
          </div>
          <button className="mt-5 h-11 px-5 rounded-xl bg-violet-600 text-white font-bold text-sm hover:bg-violet-700 transition-base">ذخیره تغییرات</button>
        </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-5">تنظیمات اعلان‌ها</h3>
          <div className="space-y-3">
            {[
              "اعلان سفارش جدید (ایمیل)",
              "اعلان سفارش جدید (پیامک)",
              "یادآوری تمدید اشتراک",
              "گزارش ماهانه فروش",
              "اعلان آپدیت افزونه‌ها",
            ].map((n, i) => (
              <label key={i} className="flex items-center justify-between p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800/30 cursor-pointer">
                <span className="text-sm text-slate-700 dark:text-slate-200">{n}</span>
                <input type="checkbox" defaultChecked={i < 4} className="w-5 h-5 accent-violet-600" />
              </label>
            ))}
          </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">
            <button className="w-full h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 text-sm font-bold flex items-center justify-between hover:bg-slate-50 dark:hover:bg-slate-800 transition-base">
              تغییر رمز عبور
              <Lock className="w-4 h-4" />
            </button>
            <button className="w-full h-11 px-4 rounded-xl border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 text-sm font-bold flex items-center justify-between hover:bg-slate-50 dark:hover:bg-slate-800 transition-base">
              تأیید دو مرحله‌ای
              <Check className="w-4 h-4 text-emerald-500" />
            </button>
            <button className="w-full h-11 px-4 rounded-xl border border-rose-200 dark:border-rose-900 text-rose-600 text-sm font-bold flex items-center justify-between hover:bg-rose-50 dark:hover:bg-rose-950/30 transition-base">
              حذف حساب کاربری
              <AlertCircle className="w-4 h-4" />
            </button>
          </div>
        </div>

        <div className="bg-gradient-to-br from-violet-500 to-fuchsia-500 rounded-2xl p-5 text-white">
          <Zap className="w-8 h-8 mb-2" />
          <h3 className="font-bold mb-1">نکته امنیتی</h3>
          <p className="text-xs text-white/80">رمز عبور قوی و تأیید دو مرحله‌ای بهترین راه محافظت از حساب شماست.</p>
        </div>
      </div>
    </div>
  );
}