"use client";

import { FormEvent, useCallback, useEffect, useState } from "react";
import {
  Archive,
  ArrowRight,
  Copy,
  CreditCard,
  Loader2,
  Pencil,
  Plus,
  Save,
  ShieldAlert,
  Tags,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { toast, Toaster } from "sonner";
import "./pricing-admin.css";

type R = Record<string, unknown>;
type Data = {
  settings: R;
  plans: R[];
  features: R[];
  entitlements: R[];
  addons: R[];
  coupons: R[];
  audit: R[];
};
const blank = (features: R[]) => ({
  id: undefined as string | undefined,
  slug: "",
  nameAr: "",
  nameEn: "",
  descriptionAr: "",
  descriptionEn: "",
  monthlyPriceMinor: null as number | null,
  yearlyPriceMinor: null as number | null,
  currency: "SAR",
  pricingMode: "fixed",
  ctaKind: "contact_sales",
  popular: false,
  trialEnabled: false,
  status: "hidden",
  sortOrder: 0,
  entitlements: features.map((f) => ({
    featureKey: String(f.key),
    enabled: false,
    limitValue: null as number | null,
    limitUnit: null as string | null,
    noteAr: "",
    noteEn: "",
  })),
});

export default function PricingAdmin({ user }: { user: { email: string } }) {
  const [data, setData] = useState<Data | null>(null);
  const [loading, setLoading] = useState(true);
  const [forbidden, setForbidden] = useState(false);
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState<ReturnType<typeof blank> | null>(null);
  const load = useCallback(async () => {
    setLoading(true);
    const r = await fetch("/api/pricing/admin", { cache: "no-store" });
    if (r.status === 403) {
      setForbidden(true);
      setLoading(false);
      return;
    }
    if (!r.ok) {
      toast.error("تعذر تحميل إدارة الأسعار");
      setLoading(false);
      return;
    }
    setData(await r.json());
    setLoading(false);
  }, []);
  useEffect(() => {
    queueMicrotask(() => void load());
  }, [load]);
  async function post(payload: R) {
    const r = await fetch("/api/pricing/admin", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    const body = (await r.json()) as R;
    if (!r.ok) throw new Error(String(body.error ?? "failed"));
    await load();
    return body;
  }
  function edit(plan?: R) {
    if (!data) return;
    const base = blank(data.features);
    if (plan) {
      base.id = String(plan.id);
      base.slug = String(plan.slug);
      base.nameAr = String(plan.name_ar);
      base.nameEn = String(plan.name_en);
      base.descriptionAr = String(plan.description_ar);
      base.descriptionEn = String(plan.description_en);
      base.monthlyPriceMinor =
        plan.monthly_price_minor === null
          ? null
          : Number(plan.monthly_price_minor);
      base.yearlyPriceMinor =
        plan.yearly_price_minor === null
          ? null
          : Number(plan.yearly_price_minor);
      base.currency = String(plan.currency);
      base.pricingMode = String(plan.pricing_mode);
      base.ctaKind = String(plan.cta_kind);
      base.popular = Boolean(plan.popular);
      base.trialEnabled = Boolean(plan.trial_enabled);
      base.status = String(plan.status);
      base.sortOrder = Number(plan.sort_order);
      base.entitlements = base.entitlements.map((e) => {
        const saved = data.entitlements.find(
          (x) => x.plan_id === plan.id && x.feature_key === e.featureKey,
        );
        return saved
          ? {
              ...e,
              enabled: Boolean(saved.enabled),
              limitValue:
                saved.limit_value === null ? null : Number(saved.limit_value),
              limitUnit: saved.limit_unit ? String(saved.limit_unit) : null,
              noteAr: String(saved.note_ar ?? ""),
              noteEn: String(saved.note_en ?? ""),
            }
          : e;
      });
    }
    setForm(base);
    setOpen(true);
  }
  async function save(e: FormEvent) {
    e.preventDefault();
    if (!form) return;
    try {
      await post({ action: "save_plan", plan: form });
      toast.success("تم حفظ الخطة وإنشاء نسخة سعر عند الحاجة");
      setOpen(false);
    } catch {
      toast.error("تعذر حفظ الخطة. تحقق من الحقول والـSlug.");
    }
  }
  if (loading)
    return (
      <main className="pa-state">
        <Loader2 />
        <p>جارٍ تحميل إدارة الأسعار…</p>
      </main>
    );
  if (forbidden)
    return (
      <main className="pa-state">
        <ShieldAlert />
        <h1>هذه الصفحة مخصصة لإدارة NEXORA</h1>
        <p>حساب {user.email} غير موجود في قائمة Super Admin الحالية.</p>
        <a href="/dashboard">
          <ArrowRight />
          العودة
        </a>
      </main>
    );
  return (
    <main className="pricing-admin" dir="rtl">
      <Toaster position="top-center" />
      <header>
        <div>
          <a href="/dashboard">
            <ArrowRight />
            المنصة
          </a>
          <h1>إدارة الأسعار والاشتراكات</h1>
          <p>
            الخطط غير المنشورة لا تظهر للزوار، وتغيير السعر ينشئ نسخة جديدة.
          </p>
        </div>
        <Button onClick={() => edit()}>
          <Plus />
          إضافة خطة
        </Button>
      </header>
      <Tabs defaultValue="plans" className="pa-tabs">
        <TabsList>
          <TabsTrigger value="plans">الخطط</TabsTrigger>
          <TabsTrigger value="settings">الإعدادات</TabsTrigger>
          <TabsTrigger value="features">الميزات</TabsTrigger>
          <TabsTrigger value="addons">الإضافات</TabsTrigger>
          <TabsTrigger value="coupons">الكوبونات</TabsTrigger>
          <TabsTrigger value="audit">السجل</TabsTrigger>
        </TabsList>
        <TabsContent value="plans">
          <div className="pa-plan-grid">
            {data?.plans.map((plan) => (
              <article key={String(plan.id)}>
                <div>
                  <span className={`pa-status ${String(plan.status)}`}>
                    {status(String(plan.status))}
                  </span>
                  {Boolean(plan.popular) && <b>الأكثر اختيارًا</b>}
                </div>
                <h2>{String(plan.name_ar)}</h2>
                <small>
                  {String(plan.name_en)} · v{String(plan.current_version)}
                </small>
                <p>{String(plan.description_ar)}</p>
                <dl>
                  <div>
                    <dt>شهري</dt>
                    <dd>{money(plan.monthly_price_minor, plan.currency)}</dd>
                  </div>
                  <div>
                    <dt>سنوي</dt>
                    <dd>{money(plan.yearly_price_minor, plan.currency)}</dd>
                  </div>
                </dl>
                <footer>
                  <Button variant="outline" onClick={() => edit(plan)}>
                    <Pencil />
                    تعديل
                  </Button>
                  <Button
                    variant="outline"
                    onClick={() =>
                      void post({ action: "duplicate_plan", planId: plan.id })
                        .then(() => toast.success("تم إنشاء نسخة مخفية"))
                        .catch(() => toast.error("تعذر النسخ"))
                    }
                  >
                    <Copy />
                    نسخ
                  </Button>
                  <Button
                    variant="ghost"
                    onClick={() =>
                      void post({
                        action: "set_plan_status",
                        planId: plan.id,
                        status: plan.status === "active" ? "hidden" : "active",
                      }).then(() => toast.success("تم تحديث حالة النشر"))
                    }
                  >
                    {plan.status === "active" ? "إخفاء" : "نشر"}
                  </Button>
                  <Button
                    variant="ghost"
                    onClick={() =>
                      void post({
                        action: "set_plan_status",
                        planId: plan.id,
                        status: "archived",
                      }).then(() => toast.success("تمت الأرشفة"))
                    }
                  >
                    <Archive />
                  </Button>
                </footer>
              </article>
            ))}
          </div>
        </TabsContent>
        <TabsContent value="settings">
          <SettingsPanel data={data!} save={post} />
        </TabsContent>
        <TabsContent value="features">
          <FeaturePanel data={data!} save={post} />
        </TabsContent>
        <TabsContent value="addons">
          <SimpleEmpty
            icon={CreditCard}
            title="الإضافات مستقلة عن الخطط"
            text={`يوجد ${data?.addons.length ?? 0} إضافات محفوظة. واجهة البيانات تدعم السعر والكمية ونوع الفوترة والخطط المطبقة؛ لا تظهر الإضافة للعميل إلا عند تفعيلها.`}
          />
        </TabsContent>
        <TabsContent value="coupons">
          <SimpleEmpty
            icon={Tags}
            title="الكوبونات محكومة بقواعد"
            text={`يوجد ${data?.coupons.length ?? 0} كوبونات محفوظة. التحقق يتم على الخادم بالتاريخ والحد الأدنى والدورة والخطة، ولا يثق بسعر الواجهة.`}
          />
        </TabsContent>
        <TabsContent value="audit">
          <div className="pa-audit">
            {data?.audit.map((a, i) => (
              <div key={i}>
                <span>{String(a.action)}</span>
                <b>
                  {String(a.entity_type)} · {String(a.entity_id)}
                </b>
                <time>
                  {new Date(String(a.created_at)).toLocaleString("ar-SA")}
                </time>
              </div>
            ))}
          </div>
        </TabsContent>
      </Tabs>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent dir="rtl" className="pa-dialog">
          <DialogHeader>
            <DialogTitle>{form?.id ? "تعديل الخطة" : "إضافة خطة"}</DialogTitle>
            <DialogDescription>
              لا تنشر الخطة قبل اعتماد السعر والحدود والضريبة.
            </DialogDescription>
          </DialogHeader>
          {form && (
            <form onSubmit={save}>
              <div className="pa-form-grid">
                <label>
                  الاسم بالعربية
                  <Input
                    required
                    value={form.nameAr}
                    onChange={(e) =>
                      setForm({ ...form, nameAr: e.target.value })
                    }
                  />
                </label>
                <label>
                  الاسم بالإنجليزية
                  <Input
                    required
                    dir="ltr"
                    value={form.nameEn}
                    onChange={(e) =>
                      setForm({ ...form, nameEn: e.target.value })
                    }
                  />
                </label>
                <label>
                  Slug
                  <Input
                    required
                    dir="ltr"
                    pattern="[a-z0-9-]+"
                    value={form.slug}
                    onChange={(e) => setForm({ ...form, slug: e.target.value })}
                  />
                </label>
                <label>
                  العملة
                  <NativeSelect
                    value={form.currency}
                    onChange={(e) =>
                      setForm({ ...form, currency: e.target.value })
                    }
                  >
                    {["SAR", "USD", "AED", "EUR"].map((x) => (
                      <NativeSelectOption key={x}>{x}</NativeSelectOption>
                    ))}
                  </NativeSelect>
                </label>
                <label>
                  السعر الشهري (هللة)
                  <Input
                    type="number"
                    min="0"
                    value={form.monthlyPriceMinor ?? ""}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        monthlyPriceMinor:
                          e.target.value === "" ? null : Number(e.target.value),
                      })
                    }
                  />
                </label>
                <label>
                  السعر السنوي (هللة)
                  <Input
                    type="number"
                    min="0"
                    value={form.yearlyPriceMinor ?? ""}
                    onChange={(e) =>
                      setForm({
                        ...form,
                        yearlyPriceMinor:
                          e.target.value === "" ? null : Number(e.target.value),
                      })
                    }
                  />
                </label>
                <label>
                  طريقة التسعير
                  <NativeSelect
                    value={form.pricingMode}
                    onChange={(e) =>
                      setForm({ ...form, pricingMode: e.target.value })
                    }
                  >
                    <NativeSelectOption value="fixed">ثابت</NativeSelectOption>
                    <NativeSelectOption value="custom">مخصص</NativeSelectOption>
                  </NativeSelect>
                </label>
                <label>
                  الإجراء
                  <NativeSelect
                    value={form.ctaKind}
                    onChange={(e) =>
                      setForm({ ...form, ctaKind: e.target.value })
                    }
                  >
                    <NativeSelectOption value="contact_sales">
                      تواصل مع المبيعات
                    </NativeSelectOption>
                    <NativeSelectOption value="create_account">
                      إنشاء حساب
                    </NativeSelectOption>
                    <NativeSelectOption value="start_trial">
                      بدء تجربة
                    </NativeSelectOption>
                  </NativeSelect>
                </label>
                <label>
                  الحالة
                  <NativeSelect
                    value={form.status}
                    onChange={(e) =>
                      setForm({ ...form, status: e.target.value })
                    }
                  >
                    <NativeSelectOption value="active">
                      منشورة
                    </NativeSelectOption>
                    <NativeSelectOption value="hidden">
                      مخفية
                    </NativeSelectOption>
                    <NativeSelectOption value="legacy">
                      قديمة
                    </NativeSelectOption>
                    <NativeSelectOption value="archived">
                      مؤرشفة
                    </NativeSelectOption>
                  </NativeSelect>
                </label>
                <label>
                  الترتيب
                  <Input
                    type="number"
                    min="0"
                    value={form.sortOrder}
                    onChange={(e) =>
                      setForm({ ...form, sortOrder: Number(e.target.value) })
                    }
                  />
                </label>
                <label className="wide">
                  الوصف العربي
                  <Input
                    value={form.descriptionAr}
                    onChange={(e) =>
                      setForm({ ...form, descriptionAr: e.target.value })
                    }
                  />
                </label>
                <label className="wide">
                  الوصف الإنجليزي
                  <Input
                    dir="ltr"
                    value={form.descriptionEn}
                    onChange={(e) =>
                      setForm({ ...form, descriptionEn: e.target.value })
                    }
                  />
                </label>
              </div>
              <div className="pa-switches">
                <label>
                  <Switch
                    checked={form.popular}
                    onCheckedChange={(v) => setForm({ ...form, popular: v })}
                  />
                  الأكثر اختيارًا
                </label>
                <label>
                  <Switch
                    checked={form.trialEnabled}
                    onCheckedChange={(v) =>
                      setForm({ ...form, trialEnabled: v })
                    }
                  />
                  تجربة متاحة
                </label>
              </div>
              <h3>الميزات والحدود</h3>
              <div className="pa-entitlements">
                {form.entitlements.map((e, i) => {
                  const feature = data?.features.find(
                    (f) => f.key === e.featureKey,
                  );
                  return (
                    <div key={e.featureKey}>
                      <Switch
                        checked={e.enabled}
                        onCheckedChange={(v) =>
                          setForm({
                            ...form,
                            entitlements: form.entitlements.map((x, j) =>
                              j === i ? { ...x, enabled: v } : x,
                            ),
                          })
                        }
                      />
                      <span>{String(feature?.name_ar ?? e.featureKey)}</span>
                      <Input
                        aria-label={`حد ${String(feature?.name_ar)}`}
                        type="number"
                        min="0"
                        placeholder="بدون حد"
                        value={e.limitValue ?? ""}
                        onChange={(ev) =>
                          setForm({
                            ...form,
                            entitlements: form.entitlements.map((x, j) =>
                              j === i
                                ? {
                                    ...x,
                                    limitValue:
                                      ev.target.value === ""
                                        ? null
                                        : Number(ev.target.value),
                                  }
                                : x,
                            ),
                          })
                        }
                      />
                    </div>
                  );
                })}
              </div>
              <Button type="submit">
                <Save />
                حفظ الخطة
              </Button>
            </form>
          )}
        </DialogContent>
      </Dialog>
    </main>
  );
}

function SettingsPanel({
  data,
  save,
}: {
  data: Data;
  save: (p: R) => Promise<unknown>;
}) {
  const s = data.settings;
  const [vat, setVat] = useState(Boolean(s.vat_enabled));
  const [rate, setRate] = useState(Number(s.vat_rate_basis_points));
  const [includes, setIncludes] = useState(Boolean(s.price_includes_vat));
  const [trial, setTrial] = useState(Boolean(s.trial_enabled));
  const [days, setDays] = useState(Number(s.trial_days));
  return (
    <form
      className="pa-settings"
      onSubmit={(e) => {
        e.preventDefault();
        void save({
          action: "update_settings",
          baseCurrency: s.base_currency,
          vatEnabled: vat,
          vatRateBasisPoints: rate,
          priceIncludesVat: includes,
          trialEnabled: trial,
          trialDays: days,
          trialRequiresPaymentMethod: Boolean(s.trial_requires_payment_method),
          trialAutoConvert: Boolean(s.trial_auto_convert),
          warningThresholds: JSON.parse(String(s.warning_thresholds)),
          gracePeriodDays: Number(s.grace_period_days),
          retentionPolicyAr: s.retention_policy_ar,
          retentionPolicyEn: s.retention_policy_en,
        }).then(() => toast.success("تم حفظ إعدادات التسعير"));
      }}
    >
      <h2>الضريبة والتجربة والتنبيهات</h2>
      <label>
        <Switch checked={vat} onCheckedChange={setVat} />
        تفعيل ضريبة القيمة المضافة
      </label>
      <label>
        نسبة الضريبة (Basis points)
        <Input
          type="number"
          min="0"
          max="10000"
          value={rate}
          onChange={(e) => setRate(Number(e.target.value))}
        />
      </label>
      <label>
        <Switch checked={includes} onCheckedChange={setIncludes} />
        السعر يشمل الضريبة
      </label>
      <label>
        <Switch checked={trial} onCheckedChange={setTrial} />
        تفعيل التجربة
      </label>
      <label>
        أيام التجربة
        <Input
          type="number"
          min="0"
          max="365"
          value={days}
          onChange={(e) => setDays(Number(e.target.value))}
        />
      </label>
      <Button type="submit">
        <Save />
        حفظ الإعدادات
      </Button>
    </form>
  );
}
function FeaturePanel({
  data,
  save,
}: {
  data: Data;
  save: (p: R) => Promise<unknown>;
}) {
  return (
    <div className="pa-feature-list">
      {data.features.map((f) => (
        <article key={String(f.key)}>
          <div>
            <strong>{String(f.name_ar)}</strong>
            <small>{String(f.key)}</small>
            <p>{String(f.tooltip_ar)}</p>
          </div>
          <span>{String(f.status)}</span>
          <Button
            variant="outline"
            onClick={() =>
              void save({
                action: "save_feature",
                feature: {
                  key: f.key,
                  nameAr: f.name_ar,
                  nameEn: f.name_en,
                  descriptionAr: f.description_ar,
                  descriptionEn: f.description_en,
                  tooltipAr: f.tooltip_ar,
                  tooltipEn: f.tooltip_en,
                  category: f.category,
                  status: f.status,
                  sortOrder: f.sort_order,
                },
              }).then(() => toast.success("الميزة محفوظة"))
            }
          >
            <Save />
            حفظ
          </Button>
        </article>
      ))}
    </div>
  );
}
function SimpleEmpty({
  icon: Icon,
  title,
  text,
}: {
  icon: typeof CreditCard;
  title: string;
  text: string;
}) {
  return (
    <div className="pa-empty">
      <Icon />
      <h2>{title}</h2>
      <p>{text}</p>
    </div>
  );
}
function status(s: string) {
  return (
    (
      {
        active: "منشورة",
        hidden: "مخفية",
        legacy: "قديمة",
        archived: "مؤرشفة",
      } as Record<string, string>
    )[s] ?? s
  );
}
function money(v: unknown, c: unknown) {
  return v === null
    ? "غير محدد"
    : `${(Number(v) / 100).toLocaleString("ar-SA")} ${String(c)}`;
}