flatrender/src/components/admin/PaymentsAdmin.tsx

"use client";

import { useCallback, useEffect, useState } from "react";

const card = "rounded-xl border border-[#1e2235] bg-[#0f1120]";
const btn = "rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50";
const btnGhost = "rounded-lg border border-[#262b40] px-3 py-1.5 text-xs font-medium text-gray-300 hover:border-indigo-500";
const inp = "w-full rounded-lg border border-[#262b40] bg-[#0c0e1a] px-3 py-2 text-sm text-gray-100 outline-none focus:border-indigo-500";
const lbl = "mb-1 block text-xs font-medium text-gray-400";

interface ClientApp {
  id: string;
  name: string;
  slug: string;
  api_key: string;
  secret?: string;
  zarinpal_merchant_id?: string | null;
  zarinpal_sandbox?: boolean | null;
  allowed_return_origins: string[];
  webhook_url?: string | null;
  is_active: boolean;
  created_at: string;
}

interface Txn {
  id: string;
  client_slug?: string;
  status: string;
  amount_rial: number;
  currency: string;
  client_ref?: string | null;
  ref_id?: string | null;
  created_at: string;
}

const toman = (rial: number) => (rial / 10).toLocaleString("fa-IR") + " تومان";

function statusBadge(s: string) {
  const map: Record<string, string> = {
    Paid: "bg-emerald-500/15 text-emerald-300",
    Pending: "bg-amber-500/15 text-amber-300",
    Created: "bg-amber-500/15 text-amber-300",
    Failed: "bg-red-500/15 text-red-300",
    Cancelled: "bg-red-500/15 text-red-300",
    Expired: "bg-gray-500/15 text-gray-300",
  };
  return map[s] ?? "bg-gray-500/15 text-gray-300";
}

export function PaymentsAdmin() {
  const [tab, setTab] = useState<"apps" | "txns">("apps");
  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-xl font-semibold text-white">درگاه پرداخت (ZarinPal)</h1>
        <p className="mt-1 text-sm text-gray-400">
          سرویس پرداخت مشترک روی <span dir="ltr" className="font-mono">pay.flatrender.ir</span>. هر سایت
          (فلت‌رندر، میزی، برگ وصلت) یک اپلیکیشن با کلید اختصاصی می‌گیرد و پرداخت‌ها را از این درگاه عبور می‌دهد.
        </p>
      </div>

      <div className="flex gap-2">
        <button className={tab === "apps" ? btn : btnGhost} onClick={() => setTab("apps")}>
          اپلیکیشن‌ها
        </button>
        <button className={tab === "txns" ? btn : btnGhost} onClick={() => setTab("txns")}>
          تراکنش‌ها
        </button>
      </div>

      {tab === "apps" ? <ClientApps /> : <Transactions />}
    </div>
  );
}

// ── Client apps tab ────────────────────────────────────────────────────────────

function ClientApps() {
  const [clients, setClients] = useState<ClientApp[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [creating, setCreating] = useState(false);
  const [revealed, setRevealed] = useState<ClientApp | null>(null);

  const reload = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/admin/pay/clients", { cache: "no-store" });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error ?? "بارگذاری ناموفق بود");
      setClients(Array.isArray(data?.data) ? data.data : []);
    } catch (e) {
      setError(e instanceof Error ? e.message : "بارگذاری ناموفق بود");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    reload();
  }, [reload]);

  const rotate = async (id: string) => {
    if (!confirm("کلید مخفی جدید ساخته شود؟ کلید قبلی باطل می‌شود.")) return;
    const res = await fetch(`/api/admin/pay/clients/${id}/rotate-secret`, { method: "POST" });
    const data = await res.json();
    if (res.ok) setRevealed(data);
    else setError(data?.error ?? "خطا");
  };

  const remove = async (id: string) => {
    if (!confirm("این اپلیکیشن حذف شود؟")) return;
    const res = await fetch(`/api/admin/pay/clients/${id}`, { method: "DELETE" });
    if (res.ok || res.status === 204) reload();
    else setError("حذف ناموفق بود (ممکن است تراکنش داشته باشد)");
  };

  const toggleActive = async (c: ClientApp) => {
    await fetch(`/api/admin/pay/clients/${c.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: c.name,
        zarinpal_merchant_id: c.zarinpal_merchant_id,
        zarinpal_sandbox: c.zarinpal_sandbox,
        allowed_return_origins: c.allowed_return_origins,
        webhook_url: c.webhook_url,
        is_active: !c.is_active,
      }),
    });
    reload();
  };

  return (
    <div className="space-y-4">
      <div className="flex justify-between">
        <button className={btn} onClick={() => setCreating((v) => !v)}>
          {creating ? "بستن" : "+ افزودن اپلیکیشن"}
        </button>
        <button className={btnGhost} onClick={reload}>
          بارگذاری مجدد
        </button>
      </div>

      {error && <p className="rounded-lg bg-red-500/10 px-3 py-2 text-sm text-red-300">{error}</p>}

      {creating && (
        <CreateClientForm
          onCreated={(c) => {
            setCreating(false);
            setRevealed(c);
            reload();
          }}
          onError={setError}
        />
      )}

      {revealed && <SecretReveal client={revealed} onClose={() => setRevealed(null)} />}

      {loading ? (
        <p className="py-10 text-center text-gray-500">در حال بارگذاری…</p>
      ) : clients.length === 0 ? (
        <p className="py-10 text-center text-gray-500">هنوز اپلیکیشنی ثبت نشده است.</p>
      ) : (
        <div className="space-y-3">
          {clients.map((c) => (
            <div key={c.id} className={`${card} p-4`}>
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-medium text-white">{c.name}</span>
                    <span className="rounded bg-[#1a1d2e] px-2 py-0.5 text-[11px] text-gray-400" dir="ltr">
                      {c.slug}
                    </span>
                    {c.zarinpal_sandbox && (
                      <span className="rounded bg-amber-500/15 px-2 py-0.5 text-[10px] text-amber-300">sandbox</span>
                    )}
                    {!c.is_active && (
                      <span className="rounded bg-red-500/15 px-2 py-0.5 text-[10px] text-red-300">غیرفعال</span>
                    )}
                  </div>
                  <div className="mt-1 flex items-center gap-2 text-xs text-gray-400" dir="ltr">
                    <span className="font-mono">{c.api_key}</span>
                    <CopyBtn text={c.api_key} />
                  </div>
                  {c.webhook_url && (
                    <p className="mt-1 text-[11px] text-gray-500" dir="ltr">
                      webhook: {c.webhook_url}
                    </p>
                  )}
                  {c.allowed_return_origins?.length > 0 && (
                    <p className="mt-1 text-[11px] text-gray-500" dir="ltr">
                      origins: {c.allowed_return_origins.join(", ")}
                    </p>
                  )}
                </div>
                <div className="flex flex-wrap gap-2">
                  <button className={btnGhost} onClick={() => toggleActive(c)}>
                    {c.is_active ? "غیرفعال‌سازی" : "فعال‌سازی"}
                  </button>
                  <button className={btnGhost} onClick={() => rotate(c.id)}>
                    چرخش کلید مخفی
                  </button>
                  <button
                    className="rounded-lg border border-red-500/40 px-3 py-1.5 text-xs text-red-300 hover:bg-red-500/10"
                    onClick={() => remove(c.id)}
                  >
                    حذف
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function CreateClientForm({
  onCreated,
  onError,
}: {
  onCreated: (c: ClientApp) => void;
  onError: (m: string) => void;
}) {
  const [form, setForm] = useState({
    name: "",
    slug: "",
    zarinpal_merchant_id: "",
    zarinpal_sandbox: false,
    allowed_return_origins: "",
    webhook_url: "",
  });
  const [saving, setSaving] = useState(false);

  const submit = async () => {
    setSaving(true);
    try {
      const res = await fetch("/api/admin/pay/clients", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name,
          slug: form.slug || undefined,
          zarinpal_merchant_id: form.zarinpal_merchant_id || null,
          zarinpal_sandbox: form.zarinpal_sandbox || null,
          allowed_return_origins: form.allowed_return_origins
            .split(/[\n,]/)
            .map((s) => s.trim())
            .filter(Boolean),
          webhook_url: form.webhook_url || null,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error ?? "ساخت ناموفق بود");
      onCreated(data);
    } catch (e) {
      onError(e instanceof Error ? e.message : "ساخت ناموفق بود");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className={`${card} space-y-4 p-5`}>
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className={lbl}>نام سایت *</label>
          <input className={inp} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="meezi.ir" />
        </div>
        <div>
          <label className={lbl}>شناسه (اختیاری)</label>
          <input className={inp} dir="ltr" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} placeholder="meezi" />
        </div>
        <div>
          <label className={lbl}>مرچنت زرین‌پال اختصاصی (اختیاری)</label>
          <input className={inp} dir="ltr" value={form.zarinpal_merchant_id} onChange={(e) => setForm({ ...form, zarinpal_merchant_id: e.target.value })} placeholder="خالی = مرچنت مشترک" />
        </div>
        <div>
          <label className={lbl}>آدرس Webhook (اختیاری)</label>
          <input className={inp} dir="ltr" value={form.webhook_url} onChange={(e) => setForm({ ...form, webhook_url: e.target.value })} placeholder="https://meezi.ir/api/flatpay/webhook" />
        </div>
        <div className="sm:col-span-2">
          <label className={lbl}>دامنه‌های مجاز بازگشت (هر کدام در یک خط — خالی = همه)</label>
          <textarea className={`${inp} min-h-[60px]`} dir="ltr" value={form.allowed_return_origins} onChange={(e) => setForm({ ...form, allowed_return_origins: e.target.value })} placeholder="https://meezi.ir" />
        </div>
        <label className="flex items-center gap-2 text-sm text-gray-300">
          <input type="checkbox" checked={form.zarinpal_sandbox} onChange={(e) => setForm({ ...form, zarinpal_sandbox: e.target.checked })} />
          استفاده از حالت تست (sandbox) برای این اپلیکیشن
        </label>
      </div>
      <button className={btn} onClick={submit} disabled={saving || !form.name.trim()}>
        {saving ? "در حال ساخت…" : "ساخت اپلیکیشن"}
      </button>
    </div>
  );
}

function SecretReveal({ client, onClose }: { client: ClientApp; onClose: () => void }) {
  return (
    <div className="rounded-xl border border-amber-500/40 bg-amber-500/5 p-5">
      <div className="flex items-start justify-between">
        <h3 className="font-semibold text-amber-200">کلیدهای «{client.name}»</h3>
        <button className={btnGhost} onClick={onClose}>
          بستن
        </button>
      </div>
      <p className="mt-1 text-xs text-amber-300/80">
        کلید مخفی فقط همین یک‌بار نمایش داده می‌شود — آن را در جای امن ذخیره کنید.
      </p>
      <div className="mt-3 space-y-2">
        <KeyRow label="API Key" value={client.api_key} />
        {client.secret && <KeyRow label="Secret" value={client.secret} />}
      </div>
    </div>
  );
}

function KeyRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center gap-2">
      <span className="w-20 text-xs text-gray-400">{label}</span>
      <code className="flex-1 truncate rounded bg-[#0c0e1a] px-2 py-1.5 text-xs text-gray-100" dir="ltr">
        {value}
      </code>
      <CopyBtn text={value} />
    </div>
  );
}

function CopyBtn({ text }: { text: string }) {
  const [done, setDone] = useState(false);
  return (
    <button
      className="rounded border border-[#262b40] px-2 py-1 text-[11px] text-gray-400 hover:border-indigo-500"
      onClick={() => {
        navigator.clipboard?.writeText(text);
        setDone(true);
        setTimeout(() => setDone(false), 1200);
      }}
    >
      {done ? "✓" : "کپی"}
    </button>
  );
}

// ── Transactions tab ───────────────────────────────────────────────────────────

function Transactions() {
  const [txns, setTxns] = useState<Txn[]>([]);
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState("");
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(false);

  const reload = useCallback(async () => {
    setLoading(true);
    try {
      const qs = new URLSearchParams({ page: String(page), page_size: "20" });
      if (status) qs.set("status", status);
      const res = await fetch(`/api/admin/pay/transactions?${qs}`, { cache: "no-store" });
      const data = await res.json();
      setTxns(Array.isArray(data?.data) ? data.data : []);
      setHasMore(Boolean(data?.meta?.has_more));
    } catch {
      setTxns([]);
    } finally {
      setLoading(false);
    }
  }, [page, status]);

  useEffect(() => {
    reload();
  }, [reload]);

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <select
          className={`${inp} w-auto`}
          value={status}
          onChange={(e) => {
            setPage(1);
            setStatus(e.target.value);
          }}
        >
          <option value="">همه وضعیت‌ها</option>
          <option value="Paid">پرداخت‌شده</option>
          <option value="Pending">در انتظار</option>
          <option value="Failed">ناموفق</option>
          <option value="Cancelled">لغوشده</option>
        </select>
        <button className={btnGhost} onClick={reload}>
          بارگذاری مجدد
        </button>
      </div>

      {loading ? (
        <p className="py-10 text-center text-gray-500">در حال بارگذاری…</p>
      ) : txns.length === 0 ? (
        <p className="py-10 text-center text-gray-500">تراکنشی یافت نشد.</p>
      ) : (
        <div className={`${card} overflow-x-auto`}>
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-[#1e2235] text-right text-xs text-gray-500">
                <th className="px-3 py-2 font-medium">تاریخ</th>
                <th className="px-3 py-2 font-medium">اپلیکیشن</th>
                <th className="px-3 py-2 font-medium">مبلغ</th>
                <th className="px-3 py-2 font-medium">وضعیت</th>
                <th className="px-3 py-2 font-medium">کد پیگیری</th>
                <th className="px-3 py-2 font-medium">مرجع</th>
              </tr>
            </thead>
            <tbody>
              {txns.map((t) => (
                <tr key={t.id} className="border-b border-[#15182a] text-gray-300">
                  <td className="px-3 py-2 text-xs" dir="ltr">
                    {new Date(t.created_at).toLocaleString("fa-IR")}
                  </td>
                  <td className="px-3 py-2 text-xs" dir="ltr">
                    {t.client_slug ?? "—"}
                  </td>
                  <td className="px-3 py-2">{toman(t.amount_rial)}</td>
                  <td className="px-3 py-2">
                    <span className={`rounded px-2 py-0.5 text-[11px] ${statusBadge(t.status)}`}>{t.status}</span>
                  </td>
                  <td className="px-3 py-2 text-xs" dir="ltr">
                    {t.ref_id ?? "—"}
                  </td>
                  <td className="px-3 py-2 text-xs" dir="ltr">
                    {t.client_ref ?? "—"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div className="flex justify-center gap-2">
        <button className={btnGhost} disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
          قبلی
        </button>
        <span className="px-3 py-1.5 text-sm text-gray-400">صفحه {page}</span>
        <button className={btnGhost} disabled={!hasMore} onClick={() => setPage((p) => p + 1)}>
          بعدی
        </button>
      </div>
    </div>
  );
}