"use client";

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

interface Campaign {
  id: string;
  name: string;
  channel: string;
  audience: string;
  subject?: string | null;
  body_html?: string | null;
  template_code?: string | null;
  status: string;
  total_count: number;
  sent_count: number;
  failed_count: number;
  created_at: string;
}

const card = "rounded-xl border border-[#1e2235] bg-[#0f1120] p-5";
const btn = "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-50";
const ghost = "rounded-lg border border-[#262b40] px-3 py-1.5 text-xs text-gray-300 hover:bg-[#161a2e] disabled:opacity-50";
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";

const empty = { name: "", channel: "email", audience: "all", subject: "", body_html: "", template_code: "" };

export function MarketingAdmin() {
  const [rows, setRows] = useState<Campaign[]>([]);
  const [form, setForm] = useState({ ...empty });
  const [saving, setSaving] = useState(false);
  const [busy, setBusy] = useState<string | null>(null);
  const [msg, setMsg] = useState<string | null>(null);

  const reload = useCallback(async () => {
    const r = await fetch("/api/admin/resource/campaigns", { cache: "no-store" }).then((x) => x.json()).catch(() => null);
    setRows(r?.data ?? (Array.isArray(r) ? r : []));
  }, []);
  useEffect(() => { reload(); }, [reload]);

  const create = async () => {
    setSaving(true); setMsg(null);
    const res = await fetch("/api/admin/resource/campaigns", {
      method: "POST", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: form.name, channel: form.channel, audience: form.audience,
        subject: form.subject || null, body_html: form.body_html || null,
        template_code: form.template_code || null,
      }),
    });
    const d = await res.json().catch(() => null);
    setMsg(res.ok ? "کمپین ساخته شد ✓" : (d?.error ?? "خطا"));
    setSaving(false);
    if (res.ok) { setForm({ ...empty }); reload(); }
  };

  const send = async (camp: Campaign) => {
    if (!confirm(`ارسال کمپین «${camp.name}» به مخاطبان؟`)) return;
    setBusy(camp.id); setMsg(null);
    const res = await fetch(`/api/admin/resource/campaigns/${camp.id}/send`, { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" });
    const d = await res.json().catch(() => null);
    setMsg(res.ok ? `ارسال شد: ${d.sent}/${d.total} (ناموفق ${d.failed})` : (d?.error ?? "ارسال ناموفق"));
    setBusy(null); reload();
  };

  const remove = async (camp: Campaign) => {
    if (!confirm(`حذف کمپین «${camp.name}»؟`)) return;
    const res = await fetch(`/api/admin/resource/campaigns/${camp.id}`, { method: "DELETE" });
    if (res.ok) reload();
  };

  const statusBadge = (s: string) => {
    const map: Record<string, string> = {
      Sent: "bg-emerald-500/15 text-emerald-300",
      Sending: "bg-amber-500/15 text-amber-300",
      Failed: "bg-red-500/15 text-red-300",
      Draft: "bg-gray-500/15 text-gray-400",
    };
    return <span className={`rounded px-1.5 py-0.5 text-[11px] ${map[s] ?? map.Draft}`}>{s}</span>;
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-semibold text-white">Marketing — Campaigns</h1>
        <p className="mt-1 text-sm text-gray-400">ارسال پیامک/ایمیل به گروهی از کاربران از طریق کانال‌های پیکربندی‌شده.</p>
      </div>
      {msg && <p className="rounded-lg bg-[#12152a] px-3 py-2 text-sm text-gray-300">{msg}</p>}

      <section className={card}>
        <h2 className="text-sm font-semibold text-white">کمپین جدید</h2>
        <div className="mt-4 grid gap-3 sm:grid-cols-2">
          <div><label className={lbl}>نام کمپین</label><input className={inp} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></div>
          <div>
            <label className={lbl}>کانال</label>
            <select className={inp} value={form.channel} onChange={(e) => setForm({ ...form, channel: e.target.value })}>
              <option value="email">ایمیل</option><option value="sms">پیامک</option>
            </select>
          </div>
          <div>
            <label className={lbl}>مخاطبان</label>
            <select className={inp} value={form.audience} onChange={(e) => setForm({ ...form, audience: e.target.value })}>
              <option value="all">همه کاربران</option>
              <option value="verified">کاربران تأییدشده</option>
              <option value="with_plan">دارای پلن فعال</option>
            </select>
          </div>
          {form.channel === "email" && (
            <div><label className={lbl}>قالب ایمیل (اختیاری)</label><input className={inp} placeholder="promotion" value={form.template_code} onChange={(e) => setForm({ ...form, template_code: e.target.value })} /></div>
          )}
          {form.channel === "email" && (
            <div className="sm:col-span-2"><label className={lbl}>موضوع (اگر قالب انتخاب نشده)</label><input className={inp} value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} /></div>
          )}
          <div className="sm:col-span-2">
            <label className={lbl}>{form.channel === "sms" ? "متن پیامک" : "بدنه HTML (اگر قالب انتخاب نشده)"}</label>
            <textarea className={`${inp} min-h-[90px]`} value={form.body_html} onChange={(e) => setForm({ ...form, body_html: e.target.value })} />
          </div>
        </div>
        <div className="mt-3"><button className={btn} onClick={create} disabled={saving || !form.name}>{saving ? "..." : "ساخت کمپین"}</button></div>
      </section>

      <div className={`${card} !p-0 overflow-hidden`}>
        <table className="w-full text-sm">
          <thead><tr className="border-b border-[#1e2235] text-left text-xs text-gray-500">
            <th className="px-4 py-3">نام</th><th className="px-4 py-3">کانال</th><th className="px-4 py-3">مخاطب</th><th className="px-4 py-3">وضعیت</th><th className="px-4 py-3">ارسال</th><th className="px-4 py-3 text-right">عملیات</th>
          </tr></thead>
          <tbody>
            {rows.length === 0 ? (
              <tr><td colSpan={6} className="px-4 py-8 text-center text-gray-500">کمپینی وجود ندارد.</td></tr>
            ) : rows.map((c) => (
              <tr key={c.id} className="border-b border-[#161a2e] hover:bg-[#12152a]">
                <td className="px-4 py-3 text-gray-200">{c.name}</td>
                <td className="px-4 py-3 text-gray-400">{c.channel === "sms" ? "پیامک" : "ایمیل"}</td>
                <td className="px-4 py-3 text-gray-400">{c.audience}</td>
                <td className="px-4 py-3">{statusBadge(c.status)}</td>
                <td className="px-4 py-3 text-gray-400">{c.sent_count}/{c.total_count}</td>
                <td className="px-4 py-3">
                  <div className="flex items-center justify-end gap-2">
                    <button className={ghost} disabled={busy === c.id} onClick={() => send(c)}>{busy === c.id ? "در حال ارسال…" : "ارسال"}</button>
                    <button className="rounded-lg border border-red-500/30 px-3 py-1.5 text-xs text-red-300 hover:bg-red-500/10" onClick={() => remove(c)}>حذف</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}