"use client";

import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { Activity, BadgePercent, Boxes, Brush, ChevronDown, ChevronUp, CircleDollarSign, ClipboardList, CloudUpload, FileSpreadsheet, GalleryVerticalEnd, Gift, Headphones, LayoutDashboard, Menu, MessageSquareText, Package, PanelTop, Plus, RefreshCw, RotateCcw, Save, Search, Settings, ShieldCheck, ShoppingBag, Store, Tags, Trash2, Truck, Upload, UserCog, Users, WalletCards } from "lucide-react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { Separator } from "@/components/ui/separator";
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { Switch } from "@/components/ui/switch";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";
import { DEFAULT_SITE_SETTINGS, MODULE_LABELS, type HomeSection, type SiteSettings } from "@/data/site-defaults";
import { formatPrice, ORDER_STATUS_LABELS, type Order, type Product } from "@/lib/commerce";

type User = { displayName: string; email: string };
type Customer = { id: string; email: string; fullName: string; phone: string; tier: string; walletBalance: number; loyaltyPoints: number; active: boolean; createdAt: string };
type Coupon = { code: string; title: string; type: string; value: number; minPurchase: number; maxDiscount: number; usageLimit: number; usedCount: number; active: boolean };
type Category = { id: string; name: string; slug: string; icon: string; color: string; active: boolean; sortOrder: number };
type AdminRecord = { email: string; name: string; role: string; permissionsJson: string; createdAt: string };
type ViewId = "dashboard" | "products" | "import" | "orders" | "customers" | "categories" | "coupons" | "page" | "navigation" | "modules" | "reviews" | "returns" | "shipping" | "payments" | "sellers" | "support" | "reports" | "users" | "settings";

const NAV: Array<{ group: string; items: Array<{ id: ViewId; label: string; icon: typeof Activity }> }> = [
  { group: "مرکز مدیریت", items: [{ id: "dashboard", label: "نمای کلی", icon: LayoutDashboard }, { id: "reports", label: "گزارش فروش", icon: Activity }] },
  { group: "فروش و کالا", items: [{ id: "products", label: "کالا و موجودی", icon: Package }, { id: "import", label: "ورود از اکسل", icon: FileSpreadsheet }, { id: "orders", label: "سفارش‌ها", icon: ClipboardList }, { id: "customers", label: "مشتریان", icon: Users }, { id: "categories", label: "دسته‌بندی", icon: Tags }, { id: "coupons", label: "تخفیف و کمپین", icon: BadgePercent }] },
  { group: "ظاهر و محتوا", items: [{ id: "page", label: "صفحه‌ساز", icon: PanelTop }, { id: "navigation", label: "منو و بنر", icon: Menu }, { id: "modules", label: "امکانات سایت", icon: Boxes }, { id: "settings", label: "هویت و سئو", icon: Brush }] },
  { group: "عملیات", items: [{ id: "reviews", label: "نظرات و پرسش‌ها", icon: MessageSquareText }, { id: "returns", label: "مرجوعی‌ها", icon: RotateCcw }, { id: "shipping", label: "روش‌های ارسال", icon: Truck }, { id: "payments", label: "پرداخت و کیف پول", icon: WalletCards }, { id: "sellers", label: "فروشندگان", icon: Store }, { id: "support", label: "پشتیبانی", icon: Headphones }, { id: "users", label: "مدیران و دسترسی", icon: UserCog }] },
];

export function AdminDashboard({ user }: { user: User }) {
  const [view, setView] = useState<ViewId>("dashboard");
  const [ready, setReady] = useState(false);
  const [error, setError] = useState("");
  const [products, setProducts] = useState<Product[]>([]);
  const [orders, setOrders] = useState<Order[]>([]);
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [coupons, setCoupons] = useState<Coupon[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [admins, setAdmins] = useState<AdminRecord[]>([]);
  const [settings, setSettings] = useState<SiteSettings>(DEFAULT_SITE_SETTINGS);

  const reload = useCallback(async () => {
    const responses = await Promise.all([
      fetch("/api/products?mode=admin&limit=5000"), fetch("/api/orders?scope=all"), fetch("/api/customers"),
      fetch("/api/coupons?mode=admin"), fetch("/api/categories"), fetch("/api/settings"), fetch("/api/admin/users"),
    ]);
    const [catalog, orderData, customerData, couponData, categoryData, settingData, adminData] = await Promise.all(responses.map((response) => response.json()));
    if (catalog.products) setProducts(catalog.products);
    if (orderData.orders) setOrders(orderData.orders);
    if (customerData.customers) setCustomers(customerData.customers);
    if (couponData.coupons) setCoupons(couponData.coupons);
    if (categoryData.categories) setCategories(categoryData.categories);
    if (settingData.settings) setSettings(settingData.settings);
    if (adminData.admins) setAdmins(adminData.admins);
  }, []);

  useEffect(() => {
    fetch("/api/admin/bootstrap", { method: "POST" }).then(async (response) => {
      const payload = await response.json();
      if (!response.ok) throw new Error(payload.error || "دسترسی مدیریت تأیید نشد");
      await reload();
      setReady(true);
    }).catch((reason) => { setError(reason instanceof Error ? reason.message : "خطای دسترسی"); setReady(true); });
  }, [reload]);

  async function saveSettings(next: SiteSettings = settings) {
    const response = await fetch("/api/settings", { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ settings: next }) });
    const payload = await response.json();
    if (!response.ok) return toast.error(payload.error || "ذخیره انجام نشد");
    setSettings(payload.settings);
    toast.success("تغییرات سایت ذخیره شد");
  }

  if (!ready) return <div className="grid min-h-screen place-items-center bg-slate-100"><div className="text-center"><RefreshCw className="mx-auto h-10 w-10 animate-spin text-emerald-600" /><p className="mt-4 font-bold">در حال آماده‌سازی پنل مدیریت…</p></div></div>;
  if (error) return <div className="grid min-h-screen place-items-center bg-slate-100 p-6"><div className="max-w-md rounded-3xl bg-white p-8 text-center shadow-xl"><ShieldCheck className="mx-auto h-14 w-14 text-emerald-600" /><h1 className="mt-5 text-xl font-black">ورود به مدیریت ممکن نیست</h1><p className="mt-3 text-sm leading-7 text-slate-500">{error}</p><Button asChild className="mt-6"><Link href="/">بازگشت به فروشگاه</Link></Button></div></div>;

  return (
    <SidebarProvider style={{ "--sidebar-width": "18rem" } as React.CSSProperties}>
      <Sidebar side="right" collapsible="offcanvas" className="border-l-0">
        <SidebarHeader className="border-b border-white/10 p-4"><Link href="/" className="flex items-center gap-3"><span className="grid h-11 w-11 place-items-center rounded-2xl bg-emerald-500 text-xl font-black lowercase text-white">b</span><div><div className="text-lg font-black">مدیریت barzinmarket</div><div className="text-xs text-slate-300">مرکز کنترل فروشگاه</div></div></Link></SidebarHeader>
        <SidebarContent className="px-2 py-3">{NAV.map((group) => <SidebarGroup key={group.group}><SidebarGroupLabel className="text-slate-400">{group.group}</SidebarGroupLabel><SidebarGroupContent><SidebarMenu>{group.items.map(({ id, label, icon: Icon }) => <SidebarMenuItem key={id}><SidebarMenuButton isActive={view === id} onClick={() => setView(id)} className="h-10 justify-start text-right"><Icon /><span>{label}</span></SidebarMenuButton></SidebarMenuItem>)}</SidebarMenu></SidebarGroupContent></SidebarGroup>)}</SidebarContent>
        <SidebarFooter className="border-t border-white/10 p-4"><div className="rounded-2xl bg-white/5 p-3"><div className="truncate text-sm font-bold">{user.displayName}</div><div className="mt-1 truncate text-xs text-slate-400">{user.email}</div></div></SidebarFooter>
      </Sidebar>
      <SidebarInset className="min-w-0 bg-[#f4f6f9] dark:bg-slate-950">
        <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-white/95 px-4 backdrop-blur md:px-6 dark:bg-slate-900/95"><div className="flex items-center gap-3"><SidebarTrigger /><div><h1 className="font-black">{NAV.flatMap((group) => group.items).find((item) => item.id === view)?.label}</h1><p className="hidden text-xs text-slate-500 sm:block">همه تغییرات این بخش از همین‌جا قابل مدیریت است</p></div></div><div className="flex gap-2"><Button variant="outline" size="sm" asChild><Link href="/" target="_blank">دیدن فروشگاه</Link></Button><Button size="sm" onClick={() => reload()}><RefreshCw className="ml-2 h-4 w-4" />به‌روزرسانی</Button></div></header>
        <div className="p-4 md:p-6 xl:p-8">
          {view === "dashboard" && <DashboardView products={products} orders={orders} customers={customers} onNavigate={setView} />}
          {view === "products" && <ProductsView products={products} categories={categories} reload={reload} />}
          {view === "import" && <ImportView reload={reload} />}
          {view === "orders" && <OrdersView orders={orders} reload={reload} />}
          {view === "customers" && <CustomersView customers={customers} />}
          {view === "categories" && <CategoriesView categories={categories} reload={reload} />}
          {view === "coupons" && <CouponsView coupons={coupons} reload={reload} />}
          {view === "page" && <PageBuilder settings={settings} setSettings={setSettings} save={() => saveSettings()} />}
          {view === "navigation" && <NavigationEditor settings={settings} setSettings={setSettings} save={() => saveSettings()} />}
          {view === "modules" && <ModulesEditor settings={settings} setSettings={setSettings} save={() => saveSettings()} />}
          {view === "shipping" && <ShippingEditor settings={settings} setSettings={setSettings} save={() => saveSettings()} />}
          {view === "payments" && <PaymentsEditor settings={settings} setSettings={setSettings} save={() => saveSettings()} />}
          {view === "settings" && <IdentityEditor settings={settings} setSettings={setSettings} save={() => saveSettings()} />}
          {view === "reports" && <ReportsView products={products} orders={orders} />}
          {view === "users" && <AdminsView admins={admins} currentEmail={user.email} reload={reload} />}
          {["reviews", "returns", "sellers", "support"].includes(view) && <WorkflowView view={view} settings={settings} setSettings={setSettings} save={() => saveSettings()} user={user} />}
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}

function DashboardView({ products, orders, customers, onNavigate }: { products: Product[]; orders: Order[]; customers: Customer[]; onNavigate: (view: ViewId) => void }) {
  const revenue = orders.filter((order) => order.status !== "cancelled").reduce((sum, order) => sum + order.total, 0);
  const lowStock = products.filter((product) => product.stock <= 5).length;
  return <div className="space-y-6"><div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4"><StatCard icon={<CircleDollarSign />} label="فروش کل" value={`${formatPrice(revenue)} تومان`} color="bg-emerald-100 text-emerald-700" /><StatCard icon={<ShoppingBag />} label="سفارش‌ها" value={new Intl.NumberFormat("fa-IR").format(orders.length)} color="bg-blue-100 text-blue-700" /><StatCard icon={<Package />} label="کالاها" value={new Intl.NumberFormat("fa-IR").format(products.length)} color="bg-violet-100 text-violet-700" /><StatCard icon={<Users />} label="مشتریان" value={new Intl.NumberFormat("fa-IR").format(customers.length)} color="bg-amber-100 text-amber-700" /></div><div className="grid gap-5 xl:grid-cols-[1.25fr_.75fr]"><Card><CardHeader><CardTitle>سفارش‌های اخیر</CardTitle></CardHeader><CardContent><MiniOrders orders={orders.slice(0, 6)} /></CardContent></Card><Card><CardHeader><CardTitle>کارهای مهم</CardTitle></CardHeader><CardContent className="space-y-3"><ActionRow label="کالاهای کم‌موجود" value={lowStock} onClick={() => onNavigate("products")} /><ActionRow label="سفارش در حال پردازش" value={orders.filter((order) => order.status === "processing").length} onClick={() => onNavigate("orders")} /><ActionRow label="کالاهای بدون تصویر" value={products.filter((product) => !product.imageKey && !product.imageUrl).length} onClick={() => onNavigate("products")} /><ActionRow label="بخش‌های فعال صفحه" value={DEFAULT_SITE_SETTINGS.homeSections.filter((section) => section.enabled).length} onClick={() => onNavigate("page")} /></CardContent></Card></div></div>;
}

function ProductsView({ products, categories, reload }: { products: Product[]; categories: Category[]; reload: () => Promise<void> }) {
  const pageSize = 80;
  const [query, setQuery] = useState("");
  const [page, setPage] = useState(1);
  const [editing, setEditing] = useState<Partial<Product> | null>(null);
  const normalizedQuery = query.trim().toLocaleLowerCase("fa");
  const filtered = products.filter((product) => `${product.name} ${product.barcode} ${product.category}`.toLocaleLowerCase("fa").includes(normalizedQuery));
  const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
  const safePage = Math.min(page, pageCount);
  const rows = filtered.slice((safePage - 1) * pageSize, safePage * pageSize);
  useEffect(() => setPage(1), [query]);

  return <Card><CardHeader className="gap-4 md:flex-row md:items-center md:justify-between"><div><CardTitle>کالاها و موجودی</CardTitle><p className="mt-2 text-sm text-slate-500">{new Intl.NumberFormat("fa-IR").format(products.length)} کالا؛ آماده مدیریت کاتالوگ تا ۵۰۰۰ قلم</p></div><div className="flex flex-wrap gap-2"><Button variant="outline" asChild><a href="/api/admin/export"><FileSpreadsheet className="ml-2 h-4 w-4" />خروجی CSV</a></Button><Button onClick={() => setEditing({ active: true, featured: false, stock: 0, salePrice: 0, consumerPrice: 0, purchasePrice: 0, wholesalePrice: 0 })}><Plus className="ml-2 h-4 w-4" />کالای جدید</Button></div></CardHeader><CardContent><div className="relative mb-4"><Search className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" /><Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="جست‌وجو در نام، بارکد یا دسته…" className="pr-10" /></div><div className="overflow-x-auto rounded-xl border"><Table><TableHeader><TableRow><TableHead>کالا</TableHead><TableHead>بارکد</TableHead><TableHead>دسته</TableHead><TableHead>فروش</TableHead><TableHead>مصرف‌کننده</TableHead><TableHead>موجودی</TableHead><TableHead>وضعیت</TableHead><TableHead /></TableRow></TableHeader><TableBody>{rows.map((product) => <TableRow key={product.id}><TableCell className="max-w-64 font-bold">{product.name}</TableCell><TableCell dir="ltr" className="text-right">{product.barcode}</TableCell><TableCell>{product.category}</TableCell><TableCell>{formatPrice(product.salePrice)}</TableCell><TableCell>{formatPrice(product.consumerPrice)}</TableCell><TableCell><Badge variant={product.stock <= 5 ? "destructive" : "secondary"}>{new Intl.NumberFormat("fa-IR").format(product.stock)}</Badge></TableCell><TableCell>{product.active ? <span className="text-emerald-600">فعال</span> : <span className="text-slate-400">غیرفعال</span>}</TableCell><TableCell><Button size="sm" variant="outline" onClick={() => setEditing(product)}>ویرایش</Button></TableCell></TableRow>)}</TableBody></Table></div><div className="mt-4 flex flex-wrap items-center justify-between gap-3 text-sm text-slate-500"><span>{new Intl.NumberFormat("fa-IR").format(filtered.length)} نتیجه · صفحه {new Intl.NumberFormat("fa-IR").format(safePage)} از {new Intl.NumberFormat("fa-IR").format(pageCount)}</span><div className="flex gap-2"><Button size="sm" variant="outline" disabled={safePage <= 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>قبلی</Button><Button size="sm" variant="outline" disabled={safePage >= pageCount} onClick={() => setPage((current) => Math.min(pageCount, current + 1))}>بعدی</Button></div></div></CardContent><ProductDialog product={editing} categories={categories.map((item) => item.name)} onClose={() => setEditing(null)} onSaved={async () => { setEditing(null); await reload(); }} /></Card>;
}

function ProductDialog({ product, categories, onClose, onSaved }: { product: Partial<Product> | null; categories: string[]; onClose: () => void; onSaved: () => Promise<void> }) {
  const [form, setForm] = useState<Partial<Product>>({}); const [saving, setSaving] = useState(false);
  useEffect(() => { if (product) setForm(product); }, [product]);
  const update = (key: keyof Product, value: unknown) => setForm((current) => ({ ...current, [key]: value }));
  async function save() { setSaving(true); try { const method = product?.id ? "PATCH" : "POST"; const url = product?.id ? `/api/products/${encodeURIComponent(product.id)}` : "/api/products"; const response = await fetch(url, { method, headers: { "content-type": "application/json" }, body: JSON.stringify(form) }); const payload = await response.json(); if (!response.ok) throw new Error(payload.error); toast.success("کالا ذخیره شد"); await onSaved(); } catch (error) { toast.error(error instanceof Error ? error.message : "ذخیره انجام نشد"); } finally { setSaving(false); } }
  async function uploadImage(file?: File) { if (!file) return; const body = new FormData(); body.append("file", file); const response = await fetch("/api/admin/upload", { method: "POST", body }); const payload = await response.json(); if (!response.ok) return toast.error(payload.error); update("imageKey", payload.key); update("imageUrl", null); toast.success("تصویر بارگذاری شد"); }
  return <Dialog open={Boolean(product)} onOpenChange={(open) => !open && onClose()}><DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-3xl" dir="rtl"><DialogHeader><DialogTitle>{product?.id ? "ویرایش کالا" : "کالای جدید"}</DialogTitle><DialogDescription>تمام اطلاعات کارت و صفحه کالا از این فرم تغییر می‌کند.</DialogDescription></DialogHeader><div className="grid gap-4 py-3 md:grid-cols-2"><Field label="نام کالا"><Input value={form.name ?? ""} onChange={(event) => update("name", event.target.value)} /></Field><Field label="بارکد"><Input dir="ltr" className="text-right" value={form.barcode ?? ""} onChange={(event) => update("barcode", event.target.value)} /></Field><Field label="دسته‌بندی"><Input list="product-categories" value={form.category ?? ""} onChange={(event) => update("category", event.target.value)} /><datalist id="product-categories">{categories.map((item) => <option key={item} value={item} />)}</datalist></Field><Field label="موجودی"><Input type="number" value={form.stock ?? 0} onChange={(event) => update("stock", Number(event.target.value))} /></Field><Field label="قیمت خرید"><Input type="number" value={form.purchasePrice ?? 0} onChange={(event) => update("purchasePrice", Number(event.target.value))} /></Field><Field label="قیمت فروش"><Input type="number" value={form.salePrice ?? 0} onChange={(event) => update("salePrice", Number(event.target.value))} /></Field><Field label="قیمت مصرف‌کننده"><Input type="number" value={form.consumerPrice ?? 0} onChange={(event) => update("consumerPrice", Number(event.target.value))} /></Field><Field label="قیمت عمده"><Input type="number" value={form.wholesalePrice ?? 0} onChange={(event) => update("wholesalePrice", Number(event.target.value))} /></Field><Field label="تاریخ انقضا"><Input value={form.expiryDate ?? ""} onChange={(event) => update("expiryDate", event.target.value)} /></Field><Field label="تصویر کالا"><Input type="file" accept="image/*" onChange={(event) => uploadImage(event.target.files?.[0])} />{form.imageKey && <p className="mt-1 text-xs text-emerald-600">تصویر جدید آماده ذخیره است</p>}</Field><div className="md:col-span-2"><Field label="توضیحات"><Textarea className="min-h-24" value={form.description ?? ""} onChange={(event) => update("description", event.target.value)} /></Field></div><label className="flex items-center gap-3"><Switch checked={form.active !== false} onCheckedChange={(value) => update("active", value)} />نمایش کالا در فروشگاه</label><label className="flex items-center gap-3"><Switch checked={form.featured === true} onCheckedChange={(value) => update("featured", value)} />نمایش در پیشنهادهای ویژه</label></div><DialogFooter><Button variant="outline" onClick={onClose}>انصراف</Button><Button disabled={saving} onClick={save}><Save className="ml-2 h-4 w-4" />{saving ? "در حال ذخیره…" : "ذخیره کالا"}</Button></DialogFooter></DialogContent></Dialog>;
}

function ImportView({ reload }: { reload: () => Promise<void> }) {
  const input = useRef<HTMLInputElement>(null); const [file, setFile] = useState<File | null>(null); const [busy, setBusy] = useState(false);
  async function upload() { if (!file) return toast.error("فایل اکسل را انتخاب کنید"); setBusy(true); const body = new FormData(); body.append("file", file); try { const response = await fetch("/api/admin/import", { method: "POST", body }); const payload = await response.json(); if (!response.ok) throw new Error(payload.error); toast.success(`${new Intl.NumberFormat("fa-IR").format(payload.imported)} کالا وارد یا به‌روزرسانی شد`); await reload(); } catch (error) { toast.error(error instanceof Error ? error.message : "ورود فایل انجام نشد"); } finally { setBusy(false); } }
  return <div className="grid gap-5 xl:grid-cols-[1fr_380px]"><Card><CardHeader><CardTitle>ورود و به‌روزرسانی با اکسل</CardTitle><p className="text-sm leading-7 text-slate-500">همان ساختار فایل قیمت شما پشتیبانی می‌شود و تا ۵۰۰۰ کالا در یک بار به‌صورت گروهی پردازش می‌گردد. بارکد، کلید تشخیص کالای تکراری است.</p></CardHeader><CardContent><button type="button" onClick={() => input.current?.click()} className="grid min-h-72 w-full place-items-center rounded-[24px] border-2 border-dashed border-slate-300 bg-slate-50 p-8 text-center transition hover:border-emerald-500 hover:bg-emerald-50 dark:bg-slate-800"><div><span className="mx-auto grid h-20 w-20 place-items-center rounded-full bg-white text-emerald-600 shadow-sm dark:bg-slate-900"><CloudUpload className="h-9 w-9" /></span><h2 className="mt-5 text-lg font-black">فایل Excel یا CSV را انتخاب کنید</h2><p className="mt-2 text-sm text-slate-500">تا ۵۰۰۰ ردیف کالا · حداکثر حجم ۲۵ مگابایت</p>{file && <Badge className="mt-4">{file.name}</Badge>}</div></button><input ref={input} type="file" accept=".xlsx,.csv" hidden onChange={(event) => setFile(event.target.files?.[0] ?? null)} /><Button disabled={!file || busy} onClick={upload} className="mt-5 h-12 w-full"><Upload className="ml-2 h-5 w-5" />{busy ? "در حال پردازش گروهی کالاها…" : "شروع ورود اطلاعات"}</Button></CardContent></Card><Card><CardHeader><CardTitle>ستون‌های قابل تشخیص</CardTitle></CardHeader><CardContent className="space-y-3 text-sm">{["بارکد (الزامی)", "نام کالا (الزامی)", "دسته", "قیمت خرید", "قیمت فروش (الزامی)", "قیمت مصرف‌کننده", "قیمت عمده", "موجودی", "تاریخ انقضا"].map((item) => <div key={item} className="flex items-center gap-2 rounded-xl bg-slate-50 px-3 py-2.5 dark:bg-slate-800"><Checkbox checked disabled />{item}</div>)}<p className="pt-3 text-xs leading-6 text-slate-500">اگر بارکدی از قبل وجود داشته باشد، قیمت‌ها و موجودی همان کالا به‌روزرسانی می‌شود؛ تصویر، توضیحات و تنظیمات کارت آن حفظ می‌گردد.</p></CardContent></Card></div>;
}

function OrdersView({ orders, reload }: { orders: Order[]; reload: () => Promise<void> }) {
  async function change(order: Order, status: string) { const response = await fetch(`/api/orders/${encodeURIComponent(order.id)}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ status, paymentStatus: order.paymentStatus, trackingCode: order.trackingCode }) }); if (!response.ok) return toast.error("تغییر وضعیت انجام نشد"); toast.success("وضعیت سفارش تغییر کرد"); await reload(); }
  return <Card><CardHeader><CardTitle>مدیریت سفارش‌ها</CardTitle></CardHeader><CardContent><div className="overflow-x-auto rounded-xl border"><Table><TableHeader><TableRow><TableHead>شماره</TableHead><TableHead>مشتری</TableHead><TableHead>تاریخ</TableHead><TableHead>مبلغ</TableHead><TableHead>پرداخت</TableHead><TableHead>وضعیت</TableHead></TableRow></TableHeader><TableBody>{orders.map((order) => <TableRow key={order.id}><TableCell dir="ltr" className="text-right font-bold">{order.orderNumber}</TableCell><TableCell><div className="font-bold">{order.customerName}</div><div className="text-xs text-slate-500">{order.customerPhone}</div></TableCell><TableCell>{new Date(order.createdAt).toLocaleDateString("fa-IR")}</TableCell><TableCell>{formatPrice(order.total)}</TableCell><TableCell>{order.paymentStatus === "paid" ? "پرداخت‌شده" : "در انتظار"}</TableCell><TableCell><NativeSelect value={order.status} onChange={(event) => change(order, event.target.value)}>{Object.entries(ORDER_STATUS_LABELS).map(([value, label]) => <NativeSelectOption key={value} value={value}>{label}</NativeSelectOption>)}</NativeSelect></TableCell></TableRow>)}</TableBody></Table></div>{!orders.length && <Empty text="هنوز سفارشی ثبت نشده است" />}</CardContent></Card>;
}

function CustomersView({ customers }: { customers: Customer[] }) { return <Card><CardHeader><CardTitle>مشتریان</CardTitle></CardHeader><CardContent><div className="overflow-x-auto rounded-xl border"><Table><TableHeader><TableRow><TableHead>نام</TableHead><TableHead>ایمیل</TableHead><TableHead>موبایل</TableHead><TableHead>سطح</TableHead><TableHead>امتیاز</TableHead><TableHead>عضویت</TableHead></TableRow></TableHeader><TableBody>{customers.map((customer) => <TableRow key={customer.id}><TableCell className="font-bold">{customer.fullName || "—"}</TableCell><TableCell dir="ltr" className="text-right">{customer.email}</TableCell><TableCell>{customer.phone || "—"}</TableCell><TableCell><Badge variant="secondary">{customer.tier === "regular" ? "عادی" : customer.tier}</Badge></TableCell><TableCell>{new Intl.NumberFormat("fa-IR").format(customer.loyaltyPoints)}</TableCell><TableCell>{new Date(customer.createdAt).toLocaleDateString("fa-IR")}</TableCell></TableRow>)}</TableBody></Table></div>{!customers.length && <Empty text="با ثبت اولین سفارش، مشتری اینجا نمایش داده می‌شود" />}</CardContent></Card>; }

function CategoriesView({ categories, reload }: { categories: Category[]; reload: () => Promise<void> }) {
  const [name, setName] = useState(""); async function add() { if (!name.trim()) return; const response = await fetch("/api/categories", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ name, color: "#eef2ff", sortOrder: categories.length }) }); if (!response.ok) return toast.error("ثبت دسته انجام نشد"); setName(""); toast.success("دسته افزوده شد"); await reload(); }
  return <div className="grid gap-5 xl:grid-cols-[1fr_340px]"><Card><CardHeader><CardTitle>دسته‌بندی‌ها</CardTitle></CardHeader><CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">{categories.map((category) => <div key={category.id} className="flex items-center justify-between rounded-2xl border p-4"><div className="flex items-center gap-3"><span className="h-10 w-10 rounded-full" style={{ background: category.color }} /><div><b>{category.name}</b><div className="mt-1 text-xs text-slate-500">ترتیب {new Intl.NumberFormat("fa-IR").format(category.sortOrder + 1)}</div></div></div><Switch checked={category.active} onCheckedChange={async (active) => { await fetch("/api/categories", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...category, active }) }); await reload(); }} /></div>)}</CardContent></Card><Card><CardHeader><CardTitle>دسته جدید</CardTitle></CardHeader><CardContent><Field label="نام دسته"><Input value={name} onChange={(event) => setName(event.target.value)} /></Field><Button className="mt-4 w-full" onClick={add}><Plus className="ml-2 h-4 w-4" />افزودن دسته</Button></CardContent></Card></div>;
}

function CouponsView({ coupons, reload }: { coupons: Coupon[]; reload: () => Promise<void> }) {
  const [form, setForm] = useState({ code: "", title: "", type: "percent", value: 10, minPurchase: 0, maxDiscount: 0, usageLimit: 0 });
  async function save(event: FormEvent) { event.preventDefault(); const response = await fetch("/api/coupons", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(form) }); const payload = await response.json(); if (!response.ok) return toast.error(payload.error); toast.success("کد تخفیف ذخیره شد"); setForm({ ...form, code: "", title: "" }); await reload(); }
  return <div className="grid gap-5 xl:grid-cols-[1fr_380px]"><Card><CardHeader><CardTitle>کدهای تخفیف و کمپین‌ها</CardTitle></CardHeader><CardContent><div className="space-y-3">{coupons.map((coupon) => <div key={coupon.code} className="flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-4"><div><div className="font-black" dir="ltr">{coupon.code}</div><div className="mt-1 text-sm text-slate-500">{coupon.title}</div></div><div className="text-sm font-black text-fuchsia-600">{coupon.type === "percent" ? `٪${new Intl.NumberFormat("fa-IR").format(coupon.value)}` : `${formatPrice(coupon.value)} تومان`}</div><div className="text-xs text-slate-500">{new Intl.NumberFormat("fa-IR").format(coupon.usedCount)} بار استفاده</div><Badge variant={coupon.active ? "secondary" : "outline"}>{coupon.active ? "فعال" : "غیرفعال"}</Badge></div>)}{!coupons.length && <Empty text="هنوز کد تخفیفی ساخته نشده است" />}</div></CardContent></Card><Card><CardHeader><CardTitle>ساخت کد تخفیف</CardTitle></CardHeader><CardContent><form onSubmit={save} className="space-y-4"><Field label="کد"><Input dir="ltr" value={form.code} onChange={(event) => setForm({ ...form, code: event.target.value.toUpperCase() })} /></Field><Field label="عنوان"><Input value={form.title} onChange={(event) => setForm({ ...form, title: event.target.value })} /></Field><Field label="نوع"><NativeSelect className="w-full" value={form.type} onChange={(event) => setForm({ ...form, type: event.target.value })}><NativeSelectOption value="percent">درصدی</NativeSelectOption><NativeSelectOption value="fixed">مبلغ ثابت</NativeSelectOption></NativeSelect></Field><Field label="مقدار"><Input type="number" value={form.value} onChange={(event) => setForm({ ...form, value: Number(event.target.value) })} /></Field><Field label="حداقل خرید"><Input type="number" value={form.minPurchase} onChange={(event) => setForm({ ...form, minPurchase: Number(event.target.value) })} /></Field><Button className="w-full" type="submit"><Gift className="ml-2 h-4 w-4" />ذخیره کد</Button></form></CardContent></Card></div>;
}

function PageBuilder({ settings, setSettings, save }: SettingsProps) {
  function move(index: number, direction: number) { const sections = [...settings.homeSections]; const target = index + direction; if (target < 0 || target >= sections.length) return; [sections[index], sections[target]] = [sections[target], sections[index]]; setSettings({ ...settings, homeSections: sections }); }
  function updateSection(id: string, patch: Partial<HomeSection>) { setSettings({ ...settings, homeSections: settings.homeSections.map((item) => item.id === id ? { ...item, ...patch } : item) }); }
  function addSection() { setSettings({ ...settings, homeSections: [...settings.homeSections, { id: `section-${Date.now()}`, title: "بخش جدید", subtitle: "توضیح این بخش", type: "products", enabled: true, source: "latest", limit: 10 }] }); }
  function removeSection(id: string) { setSettings({ ...settings, homeSections: settings.homeSections.filter((item) => item.id !== id) }); }

  return <div className="space-y-5">
    <Card><CardHeader><CardTitle>بنر اصلی صفحه</CardTitle><p className="text-sm text-slate-500">متن، تصویر، دکمه و نمایش کادر اصلی از همین بخش تغییر می‌کند.</p></CardHeader><CardContent className="grid gap-4 md:grid-cols-2"><Field label="متن بالای عنوان"><Input value={settings.hero.eyebrow} onChange={(event) => setSettings({ ...settings, hero: { ...settings.hero, eyebrow: event.target.value } })} /></Field><Field label="عنوان اصلی"><Input value={settings.hero.title} onChange={(event) => setSettings({ ...settings, hero: { ...settings.hero, title: event.target.value } })} /></Field><div className="md:col-span-2"><Field label="توضیح"><Textarea value={settings.hero.subtitle} onChange={(event) => setSettings({ ...settings, hero: { ...settings.hero, subtitle: event.target.value } })} /></Field></div><Field label="متن دکمه"><Input value={settings.hero.buttonLabel} onChange={(event) => setSettings({ ...settings, hero: { ...settings.hero, buttonLabel: event.target.value } })} /></Field><Field label="لینک دکمه"><Input dir="ltr" value={settings.hero.buttonHref} onChange={(event) => setSettings({ ...settings, hero: { ...settings.hero, buttonHref: event.target.value } })} /></Field><div className="md:col-span-2"><Field label="نشانی تصویر بنر"><Input dir="ltr" value={settings.hero.imageUrl} onChange={(event) => setSettings({ ...settings, hero: { ...settings.hero, imageUrl: event.target.value } })} /></Field></div><Toggle label="نمایش بنر اصلی" checked={settings.hero.enabled} onChange={(enabled) => setSettings({ ...settings, hero: { ...settings.hero, enabled } })} /></CardContent></Card>

    <Card><CardHeader><CardTitle>چیدمان و کادرهای فروشگاه</CardTitle><p className="text-sm text-slate-500">عرض سایت، تراکم کارت‌ها، گوشه‌ها و جزئیات کارت کالا قابل تنظیم است.</p></CardHeader><CardContent className="grid gap-4 md:grid-cols-2 xl:grid-cols-3"><Field label="حداکثر عرض سایت (پیکسل)"><Input type="number" min={960} max={1800} value={settings.layout.maxWidth} onChange={(event) => setSettings({ ...settings, layout: { ...settings.layout, maxWidth: Math.max(960, Number(event.target.value)) } })} /></Field><Field label="تعداد ستون کالا در دسکتاپ"><NativeSelect className="w-full" value={String(settings.layout.productColumns)} onChange={(event) => setSettings({ ...settings, layout: { ...settings.layout, productColumns: Number(event.target.value) } })}>{[4,5,6].map((value) => <NativeSelectOption key={value} value={String(value)}>{new Intl.NumberFormat("fa-IR").format(value)} ستون</NativeSelectOption>)}</NativeSelect></Field><Field label="تراکم کارت کالا"><NativeSelect className="w-full" value={settings.layout.cardDensity} onChange={(event) => setSettings({ ...settings, layout: { ...settings.layout, cardDensity: event.target.value as SiteSettings["layout"]["cardDensity"] } })}><NativeSelectOption value="compact">فشرده</NativeSelectOption><NativeSelectOption value="comfortable">راحت</NativeSelectOption></NativeSelect></Field><Field label="فرم دسته‌بندی"><NativeSelect className="w-full" value={settings.layout.categoryShape} onChange={(event) => setSettings({ ...settings, layout: { ...settings.layout, categoryShape: event.target.value as SiteSettings["layout"]["categoryShape"] } })}><NativeSelectOption value="circle">دایره‌ای</NativeSelectOption><NativeSelectOption value="rounded">گوشه‌گرد</NativeSelectOption></NativeSelect></Field><Field label="گردی کادرهای اصلی"><Input type="number" min={0} max={40} value={settings.theme.radius} onChange={(event) => setSettings({ ...settings, theme: { ...settings.theme, radius: Number(event.target.value) } })} /></Field><Field label="گردی کارت کالا"><Input type="number" min={0} max={40} value={settings.theme.productCardRadius} onChange={(event) => setSettings({ ...settings, theme: { ...settings.theme, productCardRadius: Number(event.target.value) } })} /></Field><Toggle label="هدر چسبان" checked={settings.layout.stickyHeader} onChange={(stickyHeader) => setSettings({ ...settings, layout: { ...settings.layout, stickyHeader } })} /><Toggle label="نمایش دسته روی کارت" checked={settings.productCard.showCategory} onChange={(showCategory) => setSettings({ ...settings, productCard: { ...settings.productCard, showCategory } })} /><Toggle label="نمایش امتیاز" checked={settings.productCard.showRating} onChange={(showRating) => setSettings({ ...settings, productCard: { ...settings.productCard, showRating } })} /><Toggle label="نمایش موجودی کم" checked={settings.productCard.showStock} onChange={(showStock) => setSettings({ ...settings, productCard: { ...settings.productCard, showStock } })} /><Toggle label="نمایش درصد تخفیف" checked={settings.productCard.showDiscountBadge} onChange={(showDiscountBadge) => setSettings({ ...settings, productCard: { ...settings.productCard, showDiscountBadge } })} /><Toggle label="نمایش قیمت مصرف‌کننده" checked={settings.productCard.showConsumerPrice} onChange={(showConsumerPrice) => setSettings({ ...settings, productCard: { ...settings.productCard, showConsumerPrice } })} /><Toggle label="دکمه علاقه‌مندی" checked={settings.productCard.showFavorite} onChange={(showFavorite) => setSettings({ ...settings, productCard: { ...settings.productCard, showFavorite } })} /><Toggle label="دکمه مقایسه" checked={settings.productCard.showCompare} onChange={(showCompare) => setSettings({ ...settings, productCard: { ...settings.productCard, showCompare } })} /></CardContent></Card>

    <Card><CardHeader className="gap-4 md:flex-row md:items-center md:justify-between"><div><CardTitle>بخش‌های صفحه اصلی</CardTitle><p className="mt-2 text-sm text-slate-500">هر کادر را اضافه، حذف، مرتب و ویرایش کنید.</p></div><Button variant="outline" onClick={addSection}><Plus className="ml-2 h-4 w-4" />افزودن کادر</Button></CardHeader><CardContent className="space-y-3">{settings.homeSections.map((section, index) => <div key={section.id} className="rounded-2xl border p-4"><div className="grid items-end gap-3 md:grid-cols-[auto_1fr_1fr_170px]"><Switch checked={section.enabled} onCheckedChange={(enabled) => updateSection(section.id, { enabled })} /><Field label="عنوان"><Input value={section.title} onChange={(event) => updateSection(section.id, { title: event.target.value })} /></Field><Field label="زیرعنوان"><Input value={section.subtitle} onChange={(event) => updateSection(section.id, { subtitle: event.target.value })} /></Field><Field label="نوع کادر"><NativeSelect className="w-full" value={section.type} onChange={(event) => updateSection(section.id, { type: event.target.value as HomeSection["type"] })}><NativeSelectOption value="categories">دسته‌بندی</NativeSelectOption><NativeSelectOption value="offers">تخفیف‌ها</NativeSelectOption><NativeSelectOption value="products">کالاها</NativeSelectOption><NativeSelectOption value="services">خدمات</NativeSelectOption></NativeSelect></Field></div><div className="mt-3 grid items-end gap-3 md:grid-cols-[1fr_140px_auto]"><Field label="منبع کالا"><NativeSelect className="w-full" value={section.source} onChange={(event) => updateSection(section.id, { source: event.target.value })}><NativeSelectOption value="all">همه</NativeSelectOption><NativeSelectOption value="discounted">تخفیف‌دار</NativeSelectOption><NativeSelectOption value="featured">ویژه</NativeSelectOption><NativeSelectOption value="latest">جدیدترین</NativeSelectOption></NativeSelect></Field><Field label="تعداد"><Input type="number" min={1} max={30} value={section.limit} onChange={(event) => updateSection(section.id, { limit: Math.min(30, Math.max(1, Number(event.target.value))) })} /></Field><div className="flex"><Button size="icon" variant="ghost" aria-label="انتقال به بالا" onClick={() => move(index, -1)}><ChevronUp /></Button><Button size="icon" variant="ghost" aria-label="انتقال به پایین" onClick={() => move(index, 1)}><ChevronDown /></Button><Button size="icon" variant="ghost" aria-label="حذف کادر" className="text-red-600" onClick={() => removeSection(section.id)}><Trash2 /></Button></div></div></div>)}</CardContent></Card>
    <SaveBar onSave={save} />
  </div>;
}

function NavigationEditor({ settings, setSettings, save }: SettingsProps) {
  function updateNav(id: string, patch: Partial<SiteSettings["navigation"][number]>) { setSettings({ ...settings, navigation: settings.navigation.map((item) => item.id === id ? { ...item, ...patch } : item) }); }
  function moveNav(index: number, direction: number) { const items = [...settings.navigation]; const target = index + direction; if (target < 0 || target >= items.length) return; [items[index], items[target]] = [items[target], items[index]]; setSettings({ ...settings, navigation: items }); }
  function addNav() { setSettings({ ...settings, navigation: [...settings.navigation, { id: `nav-${Date.now()}`, label: "لینک جدید", href: "/", enabled: true }] }); }
  return <div className="space-y-5"><Card><CardHeader><CardTitle>نوار اطلاع‌رسانی</CardTitle></CardHeader><CardContent className="grid gap-4 md:grid-cols-2"><Toggle label="نمایش نوار بالای سایت" checked={settings.announcement.enabled} onChange={(enabled) => setSettings({ ...settings, announcement: { ...settings.announcement, enabled } })} /><span /><Field label="متن نوار"><Input value={settings.announcement.text} onChange={(event) => setSettings({ ...settings, announcement: { ...settings.announcement, text: event.target.value } })} /></Field><Field label="متن لینک"><Input value={settings.announcement.linkLabel} onChange={(event) => setSettings({ ...settings, announcement: { ...settings.announcement, linkLabel: event.target.value } })} /></Field><div className="md:col-span-2"><Field label="آدرس لینک"><Input dir="ltr" value={settings.announcement.linkHref} onChange={(event) => setSettings({ ...settings, announcement: { ...settings.announcement, linkHref: event.target.value } })} /></Field></div></CardContent></Card>
    <Card><CardHeader><CardTitle>متن‌های رابط فروشگاه</CardTitle><p className="text-sm text-slate-500">متن جست‌وجو، آدرس، ورود، سبد و پیام‌های کارت کالا را تغییر دهید.</p></CardHeader><CardContent className="grid gap-4 md:grid-cols-2"><Field label="متن داخل جست‌وجو"><Input value={settings.labels.searchPlaceholder} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, searchPlaceholder: event.target.value } })} /></Field><Field label="متن انتخاب آدرس"><Input value={settings.labels.locationPrompt} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, locationPrompt: event.target.value } })} /></Field><Field label="متن ورود"><Input value={settings.labels.loginLabel} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, loginLabel: event.target.value } })} /></Field><Field label="متن سبد"><Input value={settings.labels.cartLabel} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, cartLabel: event.target.value } })} /></Field><Field label="عنوان منوی دسته‌ها"><Input value={settings.labels.categoryMenu} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, categoryMenu: event.target.value } })} /></Field><Field label="متن همه کالاها"><Input value={settings.labels.allProducts} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, allProducts: event.target.value } })} /></Field><Field label="متن افزودن به سبد"><Input value={settings.labels.addToCart} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, addToCart: event.target.value } })} /></Field><Field label="متن ناموجود"><Input value={settings.labels.unavailable} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, unavailable: event.target.value } })} /></Field><Field label="پیام ارسال سریع"><Input value={settings.labels.deliveryBadge} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, deliveryBadge: event.target.value } })} /></Field><Field label="عنوان بنر موبایل"><Input value={settings.labels.mobileBannerTitle} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, mobileBannerTitle: event.target.value } })} /></Field><div className="md:col-span-2"><Field label="توضیح بنر موبایل"><Input value={settings.labels.mobileBannerText} onChange={(event) => setSettings({ ...settings, labels: { ...settings.labels, mobileBannerText: event.target.value } })} /></Field></div></CardContent></Card>
    <Card><CardHeader className="gap-4 md:flex-row md:items-center md:justify-between"><div><CardTitle>منوی اصلی</CardTitle><p className="mt-2 text-sm text-slate-500">عنوان، مقصد، ترتیب و نمایش هر لینک قابل ویرایش است.</p></div><Button variant="outline" onClick={addNav}><Plus className="ml-2 h-4 w-4" />افزودن لینک</Button></CardHeader><CardContent className="space-y-3">{settings.navigation.map((item, index) => <div key={item.id} className="grid items-center gap-3 rounded-2xl border p-3 md:grid-cols-[auto_1fr_1fr_auto]"><Switch checked={item.enabled} onCheckedChange={(enabled) => updateNav(item.id, { enabled })} /><Input value={item.label} onChange={(event) => updateNav(item.id, { label: event.target.value })} /><Input dir="ltr" value={item.href} onChange={(event) => updateNav(item.id, { href: event.target.value })} /><div className="flex"><Button size="icon" variant="ghost" onClick={() => moveNav(index, -1)}><ChevronUp /></Button><Button size="icon" variant="ghost" onClick={() => moveNav(index, 1)}><ChevronDown /></Button><Button size="icon" variant="ghost" className="text-red-600" onClick={() => setSettings({ ...settings, navigation: settings.navigation.filter((nav) => nav.id !== item.id) })}><Trash2 /></Button></div></div>)}</CardContent></Card><SaveBar onSave={save} /></div>;
}

function ModulesEditor({ settings, setSettings, save }: SettingsProps) { return <Card><CardHeader><CardTitle>امکانات و ماژول‌های فروشگاه</CardTitle><p className="text-sm leading-7 text-slate-500">هر قابلیت را می‌توانید مستقل فعال یا غیرفعال کنید.</p></CardHeader><CardContent><div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">{Object.entries(MODULE_LABELS).map(([key, label]) => <label key={key} className="flex cursor-pointer items-center justify-between rounded-2xl border p-4"><div><b>{label}</b><p className="mt-1 text-xs text-slate-500">نمایش در فروشگاه و پنل‌ها</p></div><Switch checked={settings.modules[key] !== false} onCheckedChange={(value) => setSettings({ ...settings, modules: { ...settings.modules, [key]: value } })} /></label>)}</div><SaveBar onSave={save} /></CardContent></Card>; }

function ShippingEditor({ settings, setSettings, save }: SettingsProps) { return <Card><CardHeader><CardTitle>روش‌ها و هزینه ارسال</CardTitle></CardHeader><CardContent className="grid gap-4 md:grid-cols-2"><Field label="هزینه ارسال عادی (تومان)"><Input type="number" value={settings.checkout.shippingCost} onChange={(event) => setSettings({ ...settings, checkout: { ...settings.checkout, shippingCost: Number(event.target.value) } })} /></Field><Field label="حداقل خرید برای ارسال رایگان"><Input type="number" value={settings.checkout.freeShippingThreshold} onChange={(event) => setSettings({ ...settings, checkout: { ...settings.checkout, freeShippingThreshold: Number(event.target.value) } })} /></Field><Toggle label="تحویل حضوری" checked={settings.checkout.storePickupEnabled} onChange={(storePickupEnabled) => setSettings({ ...settings, checkout: { ...settings.checkout, storePickupEnabled } })} /><Toggle label="ارسال سریع" checked={settings.modules.expressDelivery} onChange={(expressDelivery) => setSettings({ ...settings, modules: { ...settings.modules, expressDelivery } })} /><div className="md:col-span-2"><SaveBar onSave={save} /></div></CardContent></Card>; }
function PaymentsEditor({ settings, setSettings, save }: SettingsProps) { return <Card><CardHeader><CardTitle>پرداخت و اعتبار</CardTitle></CardHeader><CardContent className="space-y-3"><Toggle label="پرداخت در محل" checked={settings.checkout.codEnabled} onChange={(codEnabled) => setSettings({ ...settings, checkout: { ...settings.checkout, codEnabled } })} /><Toggle label="درگاه پرداخت اینترنتی" checked={settings.checkout.onlinePaymentEnabled} onChange={(onlinePaymentEnabled) => setSettings({ ...settings, checkout: { ...settings.checkout, onlinePaymentEnabled } })} /><Toggle label="کیف پول مشتریان" checked={settings.modules.wallet} onChange={(wallet) => setSettings({ ...settings, modules: { ...settings.modules, wallet } })} /><Toggle label="خرید اقساطی" checked={settings.modules.installment} onChange={(installment) => setSettings({ ...settings, modules: { ...settings.modules, installment } })} /><div className="rounded-2xl bg-amber-50 p-4 text-sm leading-7 text-amber-900">برای دریافت وجه واقعی، اطلاعات درگاه بانکی یا پرداخت‌یار باید در زمان راه‌اندازی تجاری متصل شود. پرداخت در محل همین حالا قابل استفاده است.</div><SaveBar onSave={save} /></CardContent></Card>; }

function IdentityEditor({ settings, setSettings, save }: SettingsProps) {
  return <div className="space-y-5"><Card><CardHeader><CardTitle>هویت فروشگاه</CardTitle><p className="text-sm text-slate-500">نام، دامنه، واحد پول و اطلاعات پشتیبانی سایت را تغییر دهید.</p></CardHeader><CardContent className="grid gap-4 md:grid-cols-2"><Field label="نام کامل فروشگاه"><Input value={settings.storeName} onChange={(event) => setSettings({ ...settings, storeName: event.target.value })} /></Field><Field label="نام کوتاه لوگو"><Input value={settings.storeShortName} onChange={(event) => setSettings({ ...settings, storeShortName: event.target.value })} /></Field><Field label="دامنه اصلی"><Input dir="ltr" value={settings.domain} onChange={(event) => setSettings({ ...settings, domain: event.target.value.replace(/^https?:\/\//, "") })} /></Field><Field label="واحد پول"><Input value={settings.currency} onChange={(event) => setSettings({ ...settings, currency: event.target.value })} /></Field><Field label="شماره پشتیبانی"><Input value={settings.supportPhone} onChange={(event) => setSettings({ ...settings, supportPhone: event.target.value })} /></Field><Field label="ساعات پاسخ‌گویی"><Input value={settings.supportHours} onChange={(event) => setSettings({ ...settings, supportHours: event.target.value })} /></Field></CardContent></Card>
    <Card><CardHeader><CardTitle>تم و رنگ‌های سایت</CardTitle><p className="text-sm text-slate-500">رنگ همه سطح‌های اصلی فروشگاه از اینجا کنترل می‌شود.</p></CardHeader><CardContent className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3"><ColorField label="رنگ اصلی و دکمه‌ها" value={settings.theme.primary} onChange={(primary) => setSettings({ ...settings, theme: { ...settings.theme, primary } })} /><ColorField label="رنگ تیره برند" value={settings.theme.navy} onChange={(navy) => setSettings({ ...settings, theme: { ...settings.theme, navy } })} /><ColorField label="رنگ تأکیدی و تخفیف" value={settings.theme.accent} onChange={(accent) => setSettings({ ...settings, theme: { ...settings.theme, accent } })} /><ColorField label="پس‌زمینه سایت" value={settings.theme.background} onChange={(background) => setSettings({ ...settings, theme: { ...settings.theme, background } })} /><ColorField label="سطح کادرها" value={settings.theme.surface} onChange={(surface) => setSettings({ ...settings, theme: { ...settings.theme, surface } })} /><ColorField label="رنگ متن" value={settings.theme.text} onChange={(text) => setSettings({ ...settings, theme: { ...settings.theme, text } })} /></CardContent></Card>
    <Card><CardHeader><CardTitle>فوتر و اطلاعات تماس</CardTitle></CardHeader><CardContent className="grid gap-4 md:grid-cols-2"><div className="md:col-span-2"><Field label="معرفی کوتاه"><Textarea value={settings.footer.description} onChange={(event) => setSettings({ ...settings, footer: { ...settings.footer, description: event.target.value } })} /></Field></div><Field label="نشانی"><Input value={settings.footer.address} onChange={(event) => setSettings({ ...settings, footer: { ...settings.footer, address: event.target.value } })} /></Field><Field label="ایمیل"><Input value={settings.footer.email} onChange={(event) => setSettings({ ...settings, footer: { ...settings.footer, email: event.target.value } })} /></Field><div className="md:col-span-2"><Field label="متن اعتماد و ضمانت"><Input value={settings.footer.trustText} onChange={(event) => setSettings({ ...settings, footer: { ...settings.footer, trustText: event.target.value } })} /></Field></div></CardContent></Card>
    <Card><CardHeader><CardTitle>تنظیمات سئو</CardTitle><p className="text-sm text-slate-500">این اطلاعات در عنوان مرورگر و موتورهای جست‌وجو استفاده می‌شود.</p></CardHeader><CardContent className="grid gap-4"><Field label="عنوان سایت"><Input value={settings.seo.title} onChange={(event) => setSettings({ ...settings, seo: { ...settings.seo, title: event.target.value } })} /></Field><Field label="توضیح موتور جست‌وجو"><Textarea value={settings.seo.description} onChange={(event) => setSettings({ ...settings, seo: { ...settings.seo, description: event.target.value } })} /></Field><Field label="کلمات کلیدی"><Input value={settings.seo.keywords} onChange={(event) => setSettings({ ...settings, seo: { ...settings.seo, keywords: event.target.value } })} /></Field></CardContent></Card><SaveBar onSave={save} /></div>;
}

function ReportsView({ products, orders }: { products: Product[]; orders: Order[] }) { const categoryTotals = [...new Set(products.map((item) => item.category))].map((name) => ({ name, count: products.filter((item) => item.category === name).length, stock: products.filter((item) => item.category === name).reduce((sum, item) => sum + item.stock, 0) })).sort((a, b) => b.count - a.count); const max = Math.max(...categoryTotals.map((item) => item.count), 1); return <div className="grid gap-5 xl:grid-cols-2"><Card><CardHeader><CardTitle>ترکیب کالاها بر اساس دسته</CardTitle></CardHeader><CardContent className="space-y-4">{categoryTotals.map((item) => <div key={item.name}><div className="mb-2 flex justify-between text-sm"><b>{item.name}</b><span>{new Intl.NumberFormat("fa-IR").format(item.count)} کالا</span></div><div className="h-3 rounded-full bg-slate-100"><div className="h-full rounded-full bg-emerald-500" style={{ width: `${item.count / max * 100}%` }} /></div></div>)}</CardContent></Card><Card><CardHeader><CardTitle>خلاصه مالی سفارش‌ها</CardTitle></CardHeader><CardContent className="space-y-4"><ReportRow label="فروش ناخالص" value={`${formatPrice(orders.reduce((sum, item) => sum + item.subtotal, 0))} تومان`} /><ReportRow label="تخفیف داده‌شده" value={`${formatPrice(orders.reduce((sum, item) => sum + item.discount, 0))} تومان`} /><ReportRow label="هزینه ارسال" value={`${formatPrice(orders.reduce((sum, item) => sum + item.shippingCost, 0))} تومان`} /><ReportRow label="مبلغ نهایی" value={`${formatPrice(orders.reduce((sum, item) => sum + item.total, 0))} تومان`} /></CardContent></Card></div>; }

function AdminsView({ admins, currentEmail, reload }: { admins: AdminRecord[]; currentEmail: string; reload: () => Promise<void> }) {
  const [form, setForm] = useState({ email: "", name: "", role: "manager" });
  async function save(event: FormEvent) { event.preventDefault(); const response = await fetch("/api/admin/users", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(form) }); const payload = await response.json(); if (!response.ok) return toast.error(payload.error); toast.success("دسترسی مدیر ذخیره شد"); setForm({ email: "", name: "", role: "manager" }); await reload(); }
  async function remove(email: string) { const response = await fetch(`/api/admin/users?email=${encodeURIComponent(email)}`, { method: "DELETE" }); const payload = await response.json(); if (!response.ok) return toast.error(payload.error); toast.success("دسترسی حذف شد"); await reload(); }
  const roleLabels: Record<string, string> = { owner: "مدیر اصلی", manager: "مدیر فروشگاه", catalog: "مدیر کالا", orders: "مدیر سفارش", support: "پشتیبان" };
  return <div className="grid gap-5 xl:grid-cols-[1fr_380px]"><Card><CardHeader><CardTitle>مدیران و سطح دسترسی</CardTitle></CardHeader><CardContent className="space-y-3">{admins.map((admin) => <div key={admin.email} className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border p-4"><div><b>{admin.name || admin.email}</b><div className="mt-1 text-xs text-slate-500" dir="ltr">{admin.email}</div></div><Badge variant="secondary">{roleLabels[admin.role] || admin.role}</Badge><Button disabled={admin.email === currentEmail || admin.role === "owner"} variant="outline" size="sm" onClick={() => remove(admin.email)}>حذف دسترسی</Button></div>)}</CardContent></Card><Card><CardHeader><CardTitle>افزودن مدیر</CardTitle></CardHeader><CardContent><form onSubmit={save} className="space-y-4"><Field label="نام"><Input value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} /></Field><Field label="ایمیل حساب"><Input type="email" dir="ltr" value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} /></Field><Field label="نقش"><NativeSelect className="w-full" value={form.role} onChange={(event) => setForm({ ...form, role: event.target.value })}>{Object.entries(roleLabels).filter(([key]) => key !== "owner").map(([key, label]) => <NativeSelectOption key={key} value={key}>{label}</NativeSelectOption>)}</NativeSelect></Field><Button className="w-full" type="submit"><UserCog className="ml-2 h-4 w-4" />ذخیره دسترسی</Button></form></CardContent></Card></div>;
}

function WorkflowView({ view, settings, setSettings, save, user }: SettingsProps & { view: ViewId; user: User }) { const configs: Partial<Record<ViewId, { title: string; text: string; module?: string }>> = { reviews: { title: "مدیریت نظرات و پرسش‌های کاربران", text: "تأیید، رد، پاسخ و گزارش محتوای کاربران از این بخش انجام می‌شود.", module: "reviews" }, returns: { title: "درخواست‌های مرجوعی", text: "چرخه بررسی درخواست، دریافت کالا و بازپرداخت در این بخش مدیریت می‌شود.", module: "returns" }, sellers: { title: "فروشندگان و مارکت‌پلیس", text: "تأیید فروشنده، کمیسیون، تسویه و موجودی فروشندگان از این بخش کنترل می‌شود.", module: "sellerPanel" }, support: { title: "مرکز پشتیبانی", text: "تیکت‌های مشتریان، اولویت و پاسخ‌گویی تیم پشتیبانی در این بخش قرار می‌گیرد.", module: "supportTickets" }, users: { title: "مدیران و سطح دسترسی", text: `مدیر اصلی فعلی: ${user.email}` } }; const config = configs[view]!; return <Card><CardHeader><CardTitle>{config.title}</CardTitle><p className="text-sm leading-7 text-slate-500">{config.text}</p></CardHeader><CardContent>{config.module && <Toggle label="فعال بودن این قابلیت در سایت" checked={settings.modules[config.module] !== false} onChange={(value) => setSettings({ ...settings, modules: { ...settings.modules, [config.module!]: value } })} />}<div className="mt-5 rounded-2xl border border-dashed p-10 text-center"><GalleryVerticalEnd className="mx-auto h-12 w-12 text-slate-300" /><h3 className="mt-4 font-black">رکوردی برای نمایش نیست</h3><p className="mt-2 text-sm text-slate-500">با ثبت اولین مورد، جزئیات و عملیات آن همین‌جا نمایش داده می‌شود.</p></div>{config.module && <SaveBar onSave={save} />}</CardContent></Card>; }

type SettingsProps = { settings: SiteSettings; setSettings: (settings: SiteSettings) => void; save: () => void };
function Field({ label, children }: { label: string; children: React.ReactNode }) { return <div><Label className="mb-2 block">{label}</Label>{children}</div>; }
function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) { const [draft, setDraft] = useState(value); useEffect(() => setDraft(value), [value]); return <Field label={label}><div className="flex gap-2"><Input type="color" value={value} onChange={(event) => { setDraft(event.target.value); onChange(event.target.value); }} className="h-10 w-14 shrink-0 p-1" /><Input dir="ltr" value={draft} onChange={(event) => setDraft(event.target.value)} onBlur={() => { if (/^#[0-9a-f]{6}$/i.test(draft)) onChange(draft); else setDraft(value); }} /></div></Field>; }
function Toggle({ label, checked, onChange }: { label: string; checked: boolean; onChange: (checked: boolean) => void }) { return <label className="flex items-center justify-between rounded-2xl border p-4"><span className="font-bold">{label}</span><Switch checked={checked} onCheckedChange={onChange} /></label>; }
function SaveBar({ onSave }: { onSave: () => void }) { return <div className="mt-6 flex justify-end"><Button onClick={onSave}><Save className="ml-2 h-4 w-4" />ذخیره همه تغییرات</Button></div>; }
function StatCard({ icon, label, value, color }: { icon: React.ReactNode; label: string; value: string; color: string }) { return <Card><CardContent className="flex items-center gap-4 p-5"><span className={`grid h-12 w-12 place-items-center rounded-2xl [&_svg]:h-6 [&_svg]:w-6 ${color}`}>{icon}</span><div><p className="text-sm text-slate-500">{label}</p><div className="mt-1 text-xl font-black">{value}</div></div></CardContent></Card>; }
function ActionRow({ label, value, onClick }: { label: string; value: number; onClick: () => void }) { return <button onClick={onClick} className="flex w-full items-center justify-between rounded-xl bg-slate-50 px-4 py-3 text-sm hover:bg-slate-100 dark:bg-slate-800"><span>{label}</span><Badge>{new Intl.NumberFormat("fa-IR").format(value)}</Badge></button>; }
function MiniOrders({ orders }: { orders: Order[] }) { return orders.length ? <div className="space-y-2">{orders.map((order) => <div key={order.id} className="flex flex-wrap items-center justify-between gap-3 rounded-xl border p-3"><div><b dir="ltr">{order.orderNumber}</b><div className="mt-1 text-xs text-slate-500">{order.customerName}</div></div><span className="text-sm font-black">{formatPrice(order.total)} تومان</span><Badge variant="secondary">{ORDER_STATUS_LABELS[order.status] || order.status}</Badge></div>)}</div> : <Empty text="هنوز سفارشی ثبت نشده است" />; }
function ReportRow({ label, value }: { label: string; value: string }) { return <div className="flex items-center justify-between rounded-2xl bg-slate-50 p-4 dark:bg-slate-800"><span className="text-slate-500">{label}</span><b>{value}</b></div>; }
function Empty({ text }: { text: string }) { return <div className="py-10 text-center text-sm text-slate-500">{text}</div>; }