"use client";

import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Copy, ExternalLink, FileImage, KeyRound, LoaderCircle, Pencil, RefreshCw, Save, Search, Trash2, Upload } from "lucide-react";

import {
  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import type { CmsItem, ConsultationRequest, MediaAsset } from "@/lib/cms";

type AdminData = { settings: Record<string, string>; items: CmsItem[]; consultations: ConsultationRequest[]; media: MediaAsset[] };
type ItemDraft = Pick<CmsItem, "type" | "slug" | "title" | "subtitle" | "summary" | "body" | "imageUrl" | "status" | "sortOrder"> & { id?: number };

const emptyItem: ItemDraft = { type: "course", slug: "", title: "", subtitle: "", summary: "", body: "", imageUrl: "", status: "draft", sortOrder: 0 };
const labels: Record<string, string> = { course: "دوره", article: "مقاله", tool: "ابزار", team: "عضو تیم", faq: "پرسش متداول" };
const statusLabels: Record<string, string> = { new: "جدید", contacted: "پیگیری‌شده", closed: "بسته‌شده" };
const fontOptions = [
  ["vazirmatn", "وزیرمتن — خوانا و رسمی"],
  ["estedad", "استعداد — مدرن و متمایز"],
  ["noto-sans-arabic", "نوتو سنس — ساده و بین‌المللی"],
  ["tahoma", "تاهوما — کلاسیک"],
] as const;
const defaultSettings: Record<string, string> = {
  brand_name: "مرکز معاملات آل عصفور",
  brand_description: "آموزش، کوچینگ و ابزارهای کاربردی برای ساختن یک مسیر حرفه‌ای و منظم در بازارهای مالی.",
  home_badge: "دانش، تمرین و بازخورد در یک مسیر منظم",
  home_title: "معامله‌گر حرفه‌ای",
  home_accent: "ساخته می‌شود.",
  home_description: "مرکز معاملات آل عصفور کنار شماست تا به‌جای تصمیم‌های پراکنده، با آموزش اصولی، کوچینگ و ابزارهای کاربردی مسیر معاملاتی خودتان را بسازید.",
  phone: "09358069949", email: "info@alstc.co", whatsapp: "+989358069949",
  instagram: "alstc.co", booking_url: "https://portal.alstc.co/appointly/appointments_public/form",
  portal_url: "https://portal.alstc.co/", founder_name: "مهندس امیر آل عصفور",
  founder_role: "مدیر و مؤسس مرکز معاملات آل عصفور", site_font: "vazirmatn",
};

async function api(url: string, apiToken: string, init?: RequestInit) {
  const response = await fetch(url, {
    ...init,
    credentials: "include",
    headers: {
      "content-type": "application/json",
      authorization: `Bearer ${apiToken}`,
      ...(init?.headers ?? {}),
    },
  });
  const data = await response.json() as { error?: string };
  if (response.status === 401) {
    window.localStorage.removeItem("alstc_admin_api_token");
    window.location.assign("/admin/login?expired=1");
    throw new Error("نشست مدیریت پایان یافته است.");
  }
  if (!response.ok) throw new Error(data.error || "خطای نامشخص");
  return data;
}

export function AdminSessionGate({ initialToken }: { initialToken: string }) {
  const [token, setToken] = useState(initialToken);

  useEffect(() => {
    const storedToken = window.localStorage.getItem("alstc_admin_api_token") ?? "";
    const nextToken = initialToken || storedToken;
    if (initialToken) window.localStorage.setItem("alstc_admin_api_token", initialToken);
    if (!nextToken) {
      window.location.replace("/admin/login?expired=1");
      return;
    }
    setToken(nextToken);
  }, [initialToken]);

  if (!token) {
    return <div className="rounded-3xl border border-emerald-950/10 bg-white p-8 text-center text-sm text-[#60766e]">در حال بررسی نشست مدیریت…</div>;
  }
  return <AdminDashboard apiToken={token} />;
}

function SettingsField({ name, label, multiline = false, settings, onChange }: {
  name: string;
  label: string;
  multiline?: boolean;
  settings: Record<string, string>;
  onChange: (name: string, value: string) => void;
}) {
  return (
    <label className="grid gap-2 text-sm font-bold text-[#294c3f]">{label}
      {multiline
        ? <Textarea className="min-h-28 bg-white" value={settings[name] ?? ""} onChange={(event) => onChange(name, event.target.value)} />
        : <Input className="h-11 bg-white" value={settings[name] ?? ""} onChange={(event) => onChange(name, event.target.value)} />}
    </label>
  );
}

export function AdminDashboard({ apiToken }: { apiToken: string }) {
  const [data, setData] = useState<AdminData | null>(null);
  const [settings, setSettings] = useState(defaultSettings);
  const [draft, setDraft] = useState<ItemDraft>(emptyItem);
  const [filter, setFilter] = useState("all");
  const [statusFilter, setStatusFilter] = useState("all");
  const [query, setQuery] = useState("");
  const [busy, setBusy] = useState(false);
  const [notice, setNotice] = useState("");
  const [error, setError] = useState("");
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const editorRef = useRef<HTMLFormElement>(null);

  const load = useCallback(async () => {
    setBusy(true); setError("");
    try {
      const next = await api("/api/admin/data", apiToken, { cache: "no-store" }) as unknown as AdminData;
      setData(next); setSettings({ ...defaultSettings, ...next.settings });
    } catch (cause) { setError(cause instanceof Error ? cause.message : "دریافت اطلاعات ممکن نشد."); }
    finally { setBusy(false); }
  }, [apiToken]);

  // Loading remote admin state is the synchronization purpose of this effect.
  // eslint-disable-next-line react-hooks/set-state-in-effect
  useEffect(() => { void load(); }, [load]);
  const visibleItems = useMemo(() => {
    const normalizedQuery = query.trim().toLocaleLowerCase("fa");
    return (data?.items ?? []).filter((item) => {
      const matchesType = filter === "all" || item.type === filter;
      const matchesStatus = statusFilter === "all" || item.status === statusFilter;
      const haystack = `${item.title} ${item.subtitle} ${item.summary} ${item.slug}`.toLocaleLowerCase("fa");
      return matchesType && matchesStatus && (!normalizedQuery || haystack.includes(normalizedQuery));
    });
  }, [data, filter, query, statusFilter]);

  function startEdit(item: CmsItem) {
    setDraft(item);
    requestAnimationFrame(() => editorRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }));
  }

  function duplicateItem(item: CmsItem) {
    setDraft({
      ...item,
      id: undefined,
      title: `${item.title} — کپی`,
      slug: `${item.slug}-copy`,
      status: "draft",
    });
    setNotice("یک نسخهٔ پیش‌نویس برای ویرایش آماده شد.");
    requestAnimationFrame(() => editorRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }));
  }

  async function togglePublish(item: CmsItem) {
    setBusy(true); setError(""); setNotice("");
    const nextStatus = item.status === "published" ? "draft" : "published";
    try {
      await api("/api/admin/items", apiToken, {
        method: "POST",
        body: JSON.stringify({ ...item, status: nextStatus }),
      });
      setNotice(nextStatus === "published" ? "محتوا منتشر شد." : "محتوا به پیش‌نویس منتقل شد.");
      await load();
    } catch (cause) { setError(cause instanceof Error ? cause.message : "تغییر وضعیت محتوا ممکن نشد."); }
    finally { setBusy(false); }
  }

  function publicHref(item: CmsItem) {
    if (item.type === "course" || item.type === "article" || item.type === "tool") return `/read/${item.slug}`;
    if (item.type === "team") return "/about";
    return "/contact";
  }

  async function saveSettings(event: FormEvent) {
    event.preventDefault(); setBusy(true); setError(""); setNotice("");
    try { await api("/api/admin/settings", apiToken, { method: "POST", body: JSON.stringify({ settings }) }); setNotice("تنظیمات سایت ذخیره شد."); await load(); }
    catch (cause) { setError(cause instanceof Error ? cause.message : "ذخیره تنظیمات ممکن نشد."); }
    finally { setBusy(false); }
  }

  async function saveItem(event: FormEvent) {
    event.preventDefault(); setBusy(true); setError(""); setNotice("");
    try { await api("/api/admin/items", apiToken, { method: "POST", body: JSON.stringify(draft) }); setDraft(emptyItem); setNotice("محتوا ذخیره شد."); await load(); }
    catch (cause) { setError(cause instanceof Error ? cause.message : "ذخیره محتوا ممکن نشد."); }
    finally { setBusy(false); }
  }

  async function removeItem(id: number) {
    setBusy(true); setError("");
    try { await api("/api/admin/items", apiToken, { method: "DELETE", body: JSON.stringify({ id }) }); setNotice("محتوا حذف شد."); await load(); }
    catch (cause) { setError(cause instanceof Error ? cause.message : "حذف محتوا ممکن نشد."); }
    finally { setBusy(false); }
  }

  async function setRequestStatus(id: number, status: string) {
    setBusy(true); setError("");
    try { await api("/api/admin/consultations", apiToken, { method: "PATCH", body: JSON.stringify({ id, status }) }); await load(); }
    catch (cause) { setError(cause instanceof Error ? cause.message : "به‌روزرسانی درخواست ممکن نشد."); }
    finally { setBusy(false); }
  }

  async function uploadMedia(event: FormEvent<HTMLFormElement>) {
    event.preventDefault(); setBusy(true); setError(""); setNotice("");
    const form = event.currentTarget;
    try {
      const response = await fetch("/api/admin/media", {
        method: "POST",
        credentials: "include",
        headers: { authorization: `Bearer ${apiToken}` },
        body: new FormData(form),
      });
      const result = await response.json() as { error?: string };
      if (response.status === 401) {
        window.localStorage.removeItem("alstc_admin_api_token");
        window.location.assign("/admin/login?expired=1");
        throw new Error("نشست مدیریت پایان یافته است.");
      }
      if (!response.ok) throw new Error(result.error || "بارگذاری تصویر ممکن نشد.");
      form.reset(); setNotice("تصویر با موفقیت بارگذاری شد."); await load();
    } catch (cause) { setError(cause instanceof Error ? cause.message : "بارگذاری تصویر ممکن نشد."); }
    finally { setBusy(false); }
  }

  async function removeMedia(id: number) {
    setBusy(true); setError("");
    try { await api("/api/admin/media", apiToken, { method: "DELETE", body: JSON.stringify({ id }) }); setNotice("تصویر حذف شد."); await load(); }
    catch (cause) { setError(cause instanceof Error ? cause.message : "حذف تصویر ممکن نشد."); }
    finally { setBusy(false); }
  }

  const updateSetting = useCallback((name: string, value: string) => {
    setSettings((current) => ({ ...current, [name]: value }));
  }, []);

  async function changePassword(event: FormEvent) {
    event.preventDefault(); setError(""); setNotice("");
    if (newPassword !== confirmPassword) {
      setError("تکرار رمز عبور با رمز جدید یکسان نیست.");
      return;
    }
    setBusy(true);
    try {
      await api("/api/admin/password", apiToken, {
        method: "POST",
        body: JSON.stringify({ currentPassword, newPassword }),
      });
      window.location.assign("/admin/login?changed=1");
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "تغییر رمز عبور ممکن نشد.");
    } finally { setBusy(false); }
  }

  return (
    <div>
      {(error || notice) && <div role="status" className={`mb-5 rounded-2xl border p-4 text-sm ${error ? "border-red-200 bg-red-50 text-red-800" : "border-emerald-200 bg-emerald-50 text-emerald-800"}`}>{error || notice}</div>}
      <Tabs defaultValue="overview" dir="rtl">
        <TabsList className="h-auto w-full flex-wrap justify-start gap-1 bg-white p-2 shadow-sm">
          <TabsTrigger value="overview" className="px-4 py-2">نمای کلی</TabsTrigger>
          <TabsTrigger value="content" className="px-4 py-2">محتوا</TabsTrigger>
          <TabsTrigger value="media" className="px-4 py-2">رسانه‌ها</TabsTrigger>
          <TabsTrigger value="settings" className="px-4 py-2">تنظیمات سایت</TabsTrigger>
          <TabsTrigger value="security" className="px-4 py-2">امنیت</TabsTrigger>
          <TabsTrigger value="requests" className="px-4 py-2">درخواست‌های مشاوره</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="mt-6">
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            {[["کل محتوا", data?.items.length ?? 0], ["منتشرشده", data?.items.filter((i) => i.status === "published").length ?? 0], ["رسانه‌ها", data?.media.length ?? 0], ["درخواست جدید", data?.consultations.filter((r) => r.status === "new").length ?? 0]].map(([label, value]) => <article key={label} className="rounded-3xl border border-emerald-950/10 bg-white p-6"><p className="text-sm text-[#60766e]">{label}</p><strong className="mt-3 block text-4xl font-black text-[#0a5a3c]">{value}</strong></article>)}
          </div>
          <div className="mt-5 rounded-3xl bg-[#073c2b] p-7 text-white"><h3 className="text-xl font-black">آماده برای توسعه مرحله‌ای</h3><p className="mt-3 max-w-3xl text-sm leading-8 text-emerald-50/65">ساختار محتوایی این پنل برای اتصال رزرو اختصاصی، پنل دانش‌پذیر و فروش در فازهای بعدی آماده شده است.</p></div>
        </TabsContent>

        <TabsContent value="content" className="mt-6">
          <div className="grid gap-6 xl:grid-cols-[.88fr_1.12fr]">
            <form ref={editorRef} onSubmit={saveItem} className="scroll-mt-6 self-start rounded-3xl border border-emerald-950/10 bg-white p-6 shadow-sm">
              <div className="flex items-center justify-between"><h3 className="text-xl font-black">{draft.id ? "ویرایش محتوا" : "محتوای جدید"}</h3>{draft.id && <Button type="button" variant="ghost" onClick={() => setDraft(emptyItem)}>انصراف</Button>}</div>
              <div className="mt-6 grid gap-4 sm:grid-cols-2">
                <label className="grid gap-2 text-sm font-bold">نوع محتوا<NativeSelect className="h-11 w-full" value={draft.type} onChange={(e) => setDraft((d) => ({ ...d, type: e.target.value }))}>{Object.entries(labels).map(([value, label]) => <NativeSelectOption key={value} value={value}>{label}</NativeSelectOption>)}</NativeSelect></label>
                <label className="grid gap-2 text-sm font-bold">وضعیت<NativeSelect className="h-11 w-full" value={draft.status} onChange={(e) => setDraft((d) => ({ ...d, status: e.target.value }))}><NativeSelectOption value="draft">پیش‌نویس</NativeSelectOption><NativeSelectOption value="published">منتشرشده</NativeSelectOption></NativeSelect></label>
              </div>
              <label className="mt-4 grid gap-2 text-sm font-bold">عنوان<Input required className="h-11" value={draft.title} onChange={(e) => setDraft((d) => ({ ...d, title: e.target.value }))} /></label>
              <label className="mt-4 grid gap-2 text-sm font-bold">نامک انگلیسی<Input required dir="ltr" className="h-11 text-left" placeholder="forex-course" value={draft.slug} onChange={(e) => setDraft((d) => ({ ...d, slug: e.target.value }))} /></label>
              <label className="mt-4 grid gap-2 text-sm font-bold">برچسب یا زیرعنوان<Input className="h-11" value={draft.subtitle} onChange={(e) => setDraft((d) => ({ ...d, subtitle: e.target.value }))} /></label>
              <label className="mt-4 grid gap-2 text-sm font-bold">خلاصه<Textarea className="min-h-24" value={draft.summary} onChange={(e) => setDraft((d) => ({ ...d, summary: e.target.value }))} /></label>
              <label className="mt-4 grid gap-2 text-sm font-bold">متن کامل<Textarea className="min-h-36" value={draft.body} onChange={(e) => setDraft((d) => ({ ...d, body: e.target.value }))} /></label>
              <div className="mt-4 grid gap-4 sm:grid-cols-[1fr_110px]"><label className="grid gap-2 text-sm font-bold">نشانی تصویر<Input dir="ltr" className="h-11 text-left" placeholder="از بخش رسانه‌ها انتخاب کنید" value={draft.imageUrl} onChange={(e) => setDraft((d) => ({ ...d, imageUrl: e.target.value }))} /></label><label className="grid gap-2 text-sm font-bold">ترتیب<Input type="number" className="h-11" value={draft.sortOrder} onChange={(e) => setDraft((d) => ({ ...d, sortOrder: Number(e.target.value) }))} /></label></div>
              {draft.imageUrl && <img src={draft.imageUrl} alt="پیش‌نمایش تصویر محتوا" className="mt-4 aspect-[16/8] w-full rounded-2xl object-cover" />}
              <Button disabled={busy} className="mt-6 h-12 w-full rounded-full bg-[#0a5a3c] text-white hover:bg-[#084c33]"><Save /> ذخیره محتوا</Button>
            </form>

            <section className="rounded-3xl border border-emerald-950/10 bg-white p-6 shadow-sm">
              <div className="flex flex-wrap items-center justify-between gap-3"><div><h3 className="text-xl font-black">فهرست محتوا</h3><p className="mt-1 text-xs text-[#71847c]">{visibleItems.length} مورد از {data?.items.length ?? 0} محتوا</p></div><div className="flex flex-wrap gap-2"><NativeSelect value={filter} onChange={(e) => setFilter(e.target.value)}><NativeSelectOption value="all">همه انواع</NativeSelectOption>{Object.entries(labels).map(([value, label]) => <NativeSelectOption key={value} value={value}>{label}</NativeSelectOption>)}</NativeSelect><NativeSelect value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}><NativeSelectOption value="all">همه وضعیت‌ها</NativeSelectOption><NativeSelectOption value="published">منتشرشده</NativeSelectOption><NativeSelectOption value="draft">پیش‌نویس</NativeSelectOption></NativeSelect></div></div>
              <label className="relative mt-4 block"><Search className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#71847c]" /><Input value={query} onChange={(event) => setQuery(event.target.value)} className="h-11 pr-10" placeholder="جست‌وجو در عنوان، نامک، خلاصه یا برچسب" aria-label="جست‌وجوی محتوا" /></label>
              <div className="mt-5 grid gap-3">
                {visibleItems.length === 0 && <p className="rounded-2xl bg-[#f4f7f5] p-7 text-center text-sm text-[#60766e]">محتوایی مطابق جست‌وجو و فیلترها پیدا نشد.</p>}
                {visibleItems.map((item) => <article key={`${item.type}-${item.slug}`} className="rounded-2xl border border-emerald-950/10 p-4"><div className="flex flex-wrap items-start justify-between gap-3"><div><div className="flex flex-wrap gap-2"><span className="status-badge">{labels[item.type]}</span><button type="button" disabled={busy} onClick={() => void togglePublish(item)} className={`rounded-full px-3 py-1 text-xs font-bold transition hover:ring-2 hover:ring-emerald-800/20 disabled:opacity-60 ${item.status === "published" ? "bg-emerald-100 text-emerald-800" : "bg-slate-100 text-slate-600"}`} title="برای تغییر وضعیت کلیک کنید">{item.status === "published" ? "منتشرشده" : "پیش‌نویس"}</button>{item.id < 0 && <span className="rounded-full bg-amber-100 px-3 py-1 text-xs font-bold text-amber-800">منتقل‌شده از سایت قبلی</span>}</div><h4 className="mt-3 font-black">{item.title}</h4><p className="mt-1 text-xs text-[#71847c]" dir="ltr">{item.slug}</p></div><div className="flex gap-1"><Button asChild size="icon" variant="ghost" title="مشاهده در سایت"><a href={publicHref(item)} target="_blank" rel="noreferrer" aria-label={`مشاهده ${item.title} در سایت`}><ExternalLink /></a></Button><Button type="button" size="icon" variant="ghost" aria-label={`ساخت کپی از ${item.title}`} title="ساخت کپی" onClick={() => duplicateItem(item)}><Copy /></Button><Button type="button" size="icon" variant="ghost" aria-label={`ویرایش ${item.title}`} onClick={() => startEdit(item)}><Pencil /></Button><AlertDialog><AlertDialogTrigger asChild><Button type="button" size="icon" variant="ghost" className="text-red-700" aria-label={`حذف ${item.title}`}><Trash2 /></Button></AlertDialogTrigger><AlertDialogContent dir="rtl"><AlertDialogHeader><AlertDialogTitle>حذف «{item.title}»؟</AlertDialogTitle><AlertDialogDescription>این محتوا از پنل و سایت حذف می‌شود. در صورت نیاز می‌توانید دوباره آن را ایجاد کنید.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>انصراف</AlertDialogCancel><AlertDialogAction variant="destructive" onClick={() => void removeItem(item.id)}>حذف شود</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog></div></div></article>)}
              </div>
            </section>
          </div>
        </TabsContent>

        <TabsContent value="media" className="mt-6">
          <div className="grid gap-6 lg:grid-cols-[.7fr_1.3fr]">
            <form onSubmit={uploadMedia} className="self-start rounded-3xl border border-emerald-950/10 bg-white p-6 shadow-sm">
              <div className="flex size-14 items-center justify-center rounded-2xl bg-emerald-50 text-[#0a5a3c]"><Upload /></div>
              <h3 className="mt-5 text-xl font-black">بارگذاری تصویر</h3>
              <p className="mt-2 text-sm leading-7 text-[#60766e]">فرمت‌های JPG، PNG، WebP و GIF تا حجم ۵ مگابایت پذیرفته می‌شوند.</p>
              <label className="mt-5 grid gap-2 text-sm font-bold">فایل تصویر<Input required name="file" type="file" accept="image/jpeg,image/png,image/webp,image/gif" className="h-12 bg-white" /></label>
              <label className="mt-4 grid gap-2 text-sm font-bold">متن جایگزین<Input name="altText" className="h-11" placeholder="توضیح کوتاه تصویر برای دسترس‌پذیری و سئو" /></label>
              <Button disabled={busy} className="mt-6 h-12 w-full rounded-full bg-[#0a5a3c] text-white hover:bg-[#084c33]"><Upload /> بارگذاری تصویر</Button>
            </form>
            <section className="rounded-3xl border border-emerald-950/10 bg-white p-6 shadow-sm">
              <div className="flex items-center justify-between"><h3 className="text-xl font-black">کتابخانه رسانه</h3><span className="text-sm text-[#60766e]">{data?.media.length ?? 0} تصویر</span></div>
              {(data?.media.length ?? 0) === 0 ? <div className="mt-5 flex min-h-56 flex-col items-center justify-center rounded-2xl bg-[#f4f7f5] text-[#60766e]"><FileImage className="size-10" /><p className="mt-3 text-sm">هنوز تصویری بارگذاری نشده است.</p></div> : <div className="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">{data?.media.map((asset) => <article key={asset.id} className="overflow-hidden rounded-2xl border border-emerald-950/10"><img src={asset.url} alt={asset.altText || asset.fileName} className="aspect-[4/3] w-full bg-[#eef3ef] object-cover" /><div className="p-3"><p className="truncate text-sm font-bold">{asset.fileName}</p><p className="mt-1 text-xs text-[#71847c]">{Math.max(1, Math.round(asset.size / 1024))} کیلوبایت</p><div className="mt-3 flex gap-2"><Button type="button" size="sm" variant="outline" className="flex-1" onClick={() => { setDraft((d) => ({ ...d, imageUrl: asset.url })); setNotice("تصویر برای محتوای در حال ویرایش انتخاب شد."); }}>استفاده در محتوا</Button><AlertDialog><AlertDialogTrigger asChild><Button type="button" size="icon" variant="ghost" className="text-red-700" aria-label={`حذف ${asset.fileName}`}><Trash2 /></Button></AlertDialogTrigger><AlertDialogContent dir="rtl"><AlertDialogHeader><AlertDialogTitle>حذف این تصویر؟</AlertDialogTitle><AlertDialogDescription>اگر تصویر در محتوایی استفاده شده باشد، نمایش آن نیز متوقف می‌شود.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>انصراف</AlertDialogCancel><AlertDialogAction variant="destructive" onClick={() => void removeMedia(asset.id)}>حذف شود</AlertDialogAction></AlertDialogFooter></AlertDialogContent></AlertDialog></div></div></article>)}</div>}
            </section>
          </div>
        </TabsContent>

        <TabsContent value="settings" className="mt-6">
          <form onSubmit={saveSettings} className="rounded-3xl border border-emerald-950/10 bg-white p-6 shadow-sm sm:p-8">
            <h3 className="text-xl font-black">هویت و صفحه اصلی</h3><div className="mt-6 grid gap-5 md:grid-cols-2"><SettingsField name="brand_name" label="نام مرکز" settings={settings} onChange={updateSetting} /><label className="grid gap-2 text-sm font-bold text-[#294c3f]">فونت سایت<NativeSelect className="h-11 w-full bg-white" value={settings.site_font || "vazirmatn"} onChange={(event) => updateSetting("site_font", event.target.value)}>{fontOptions.map(([value, label]) => <NativeSelectOption key={value} value={value}>{label}</NativeSelectOption>)}</NativeSelect></label><SettingsField name="home_badge" label="متن بالای عنوان" settings={settings} onChange={updateSetting} /><SettingsField name="home_title" label="عنوان اصلی" settings={settings} onChange={updateSetting} /><SettingsField name="home_accent" label="بخش طلایی عنوان" settings={settings} onChange={updateSetting} /><div className="md:col-span-2"><SettingsField name="home_description" label="معرفی صفحه اصلی" multiline settings={settings} onChange={updateSetting} /></div><div className="md:col-span-2"><SettingsField name="brand_description" label="توضیح کوتاه مرکز" multiline settings={settings} onChange={updateSetting} /></div></div>
            <h3 className="mt-9 border-t pt-8 text-xl font-black">ارتباط و لینک‌ها</h3><div className="mt-6 grid gap-5 md:grid-cols-2"><SettingsField name="phone" label="شماره تماس" settings={settings} onChange={updateSetting} /><SettingsField name="whatsapp" label="شماره واتساپ" settings={settings} onChange={updateSetting} /><SettingsField name="email" label="ایمیل" settings={settings} onChange={updateSetting} /><SettingsField name="instagram" label="شناسه اینستاگرام" settings={settings} onChange={updateSetting} /><SettingsField name="booking_url" label="لینک سامانه رزرو" settings={settings} onChange={updateSetting} /><SettingsField name="portal_url" label="لینک پورتال" settings={settings} onChange={updateSetting} /></div>
            <h3 className="mt-9 border-t pt-8 text-xl font-black">مدیر و مؤسس</h3><div className="mt-6 grid gap-5 md:grid-cols-2"><SettingsField name="founder_name" label="نام" settings={settings} onChange={updateSetting} /><SettingsField name="founder_role" label="سمت" settings={settings} onChange={updateSetting} /></div>
            <Button disabled={busy} className="mt-8 h-12 rounded-full bg-[#0a5a3c] px-7 text-white hover:bg-[#084c33]"><Save /> ذخیره تنظیمات</Button>
          </form>
        </TabsContent>

        <TabsContent value="security" className="mt-6">
          <form onSubmit={changePassword} className="max-w-2xl rounded-3xl border border-emerald-950/10 bg-white p-6 shadow-sm sm:p-8">
            <div className="flex size-14 items-center justify-center rounded-2xl bg-emerald-50 text-[#0a5a3c]"><KeyRound /></div>
            <h3 className="mt-5 text-xl font-black">تغییر رمز عبور مدیریت</h3>
            <p className="mt-2 text-sm leading-7 text-[#60766e]">پس از تغییر رمز، برای امنیت بیشتر از پنل خارج می‌شوید و باید با رمز جدید وارد شوید.</p>
            <label className="mt-6 grid gap-2 text-sm font-bold">رمز فعلی<Input required type="password" autoComplete="current-password" dir="ltr" className="h-11 text-left" value={currentPassword} onChange={(event) => setCurrentPassword(event.target.value)} /></label>
            <label className="mt-4 grid gap-2 text-sm font-bold">رمز جدید<Input required type="password" minLength={12} maxLength={200} autoComplete="new-password" dir="ltr" className="h-11 text-left" value={newPassword} onChange={(event) => setNewPassword(event.target.value)} /></label>
            <label className="mt-4 grid gap-2 text-sm font-bold">تکرار رمز جدید<Input required type="password" minLength={12} maxLength={200} autoComplete="new-password" dir="ltr" className="h-11 text-left" value={confirmPassword} onChange={(event) => setConfirmPassword(event.target.value)} /></label>
            <p className="mt-3 text-xs leading-6 text-[#71847c]">رمز جدید باید حداقل ۱۲ نویسه باشد و بهتر است شامل حروف بزرگ و کوچک، عدد و نماد باشد.</p>
            <Button disabled={busy} className="mt-6 h-12 rounded-full bg-[#0a5a3c] px-7 text-white hover:bg-[#084c33]"><KeyRound /> تغییر رمز عبور</Button>
          </form>
        </TabsContent>

        <TabsContent value="requests" className="mt-6">
          <section className="rounded-3xl border border-emerald-950/10 bg-white p-6 shadow-sm"><div className="flex items-center justify-between"><h3 className="text-xl font-black">درخواست‌های مشاوره</h3><Button size="icon" variant="ghost" onClick={() => void load()} aria-label="تازه‌سازی"><RefreshCw /></Button></div><div className="mt-5 grid gap-3">{(data?.consultations ?? []).length === 0 && <p className="rounded-2xl bg-[#f4f7f5] p-7 text-center text-sm text-[#60766e]">هنوز درخواستی ثبت نشده است.</p>}{data?.consultations.map((request) => <article key={request.id} className="rounded-2xl border border-emerald-950/10 p-5"><div className="flex flex-wrap items-start justify-between gap-4"><div><h4 className="font-black">{request.name}</h4><a className="mt-2 block text-sm text-[#0a5a3c]" href={`tel:${request.phone}`} dir="ltr">{request.phone}</a><p className="mt-2 text-xs text-[#71847c]">{request.experience || "سطح تجربه ثبت نشده"} • {new Date(request.createdAt).toLocaleString("fa-IR")}</p></div><NativeSelect value={request.status} onChange={(e) => void setRequestStatus(request.id, e.target.value)}>{Object.entries(statusLabels).map(([value, label]) => <NativeSelectOption key={value} value={value}>{label}</NativeSelectOption>)}</NativeSelect></div>{request.message && <p className="mt-4 rounded-xl bg-[#f4f7f5] p-4 text-sm leading-7 text-[#425f54]">{request.message}</p>}</article>)}</div></section>
        </TabsContent>
      </Tabs>
      {busy && <div className="fixed bottom-5 left-5 flex items-center gap-2 rounded-full bg-[#073c2b] px-4 py-3 text-sm text-white shadow-xl"><LoaderCircle className="size-4 animate-spin" /> در حال انجام…</div>}
    </div>
  );
}