"use client";

import { useEffect, useState } from "react";
import { useLang } from "@/context/LanguageContext";
import { Alert, Button, Input, Modal, Select, Spinner } from "@/components/ui";
import { api, useApi } from "@/lib/client";
import {
  IconChevronDown,
  IconMail,
  IconMessageCircle,
  IconPhone,
  IconSend,
  IconSettings,
  IconShield,
} from "@/components/icons";

/* Email (SMTP) + SMS gateway + WhatsApp credentials for message delivery,
   plus the central premium email-template previews.
   scope="INSTITUTION" → institution Control Panel (per-institution rows);
   scope="CENTRAL"     → central panel platform rows (fallback + central users). */

interface MailRow {
  host: string;
  port: number;
  secure: boolean;
  username: string;
  fromEmail: string;
  fromName: string;
  active: boolean;
  hasPassword: boolean;
}

interface SmsRow {
  apiUrl: string;
  method: string;
  senderId: string | null;
  authUsername: string | null;
  bodyTemplate: string | null;
  headersRaw: string | null;
  active: boolean;
  hasPassword: boolean;
}

interface WhatsappRow {
  apiUrl: string;
  method: string;
  senderId: string | null;
  bodyTemplate: string | null;
  headersRaw: string | null;
  active: boolean;
  hasToken: boolean;
}

interface NotifyData {
  mail: MailRow | null;
  sms: SmsRow | null;
  whatsapp?: WhatsappRow | null;
  effective?: { mail: string | null; sms: string | null } | null;
  verification?: {
    result?: boolean;
    examSchedule?: boolean;
    inventory?: boolean;
    source?: "INSTITUTION" | "CENTRAL" | "DEFAULT";
    configured?: boolean;
    stats?: { codes: number; scans: number };
  };
}

const emptyMail: MailRow = {
  host: "", port: 587, secure: true, username: "", fromEmail: "", fromName: "Increlog EMS",
  active: true, hasPassword: false,
};
const emptySms: SmsRow = {
  apiUrl: "", method: "POST", senderId: "", authUsername: "", bodyTemplate: "",
  headersRaw: "", active: true, hasPassword: false,
};
const emptyWhatsapp: WhatsappRow = {
  apiUrl: "", method: "POST", senderId: "", bodyTemplate: "",
  headersRaw: "", active: true, hasToken: false,
};

export default function NotifySettingsCard({ scope }: { scope: "INSTITUTION" | "CENTRAL" }) {
  const { t } = useLang();
  const n = t.notify;
  const base = scope === "CENTRAL" ? "/api/central/settings/notify" : "/api/portal/settings/notify";
  const { data, loading } = useApi<NotifyData>(base);

  const [mail, setMail] = useState<MailRow>(emptyMail);
  const [sms, setSms] = useState<SmsRow>(emptySms);
  const [whatsapp, setWhatsapp] = useState<WhatsappRow>(emptyWhatsapp);
  const [mailPassword, setMailPassword] = useState("");
  const [smsPassword, setSmsPassword] = useState("");
  const [waToken, setWaToken] = useState("");
  const [openMail, setOpenMail] = useState(true);
  const [openSms, setOpenSms] = useState(false);
  const [openWhatsapp, setOpenWhatsapp] = useState(false);
  const [openTemplates, setOpenTemplates] = useState(false);
  const [openVerify, setOpenVerify] = useState(false);
  const [verify, setVerify] = useState({ result: true, examSchedule: true, inventory: true });
  const [verifyStats, setVerifyStats] = useState<{ codes: number; scans: number } | null>(null);
  const [verifySource, setVerifySource] = useState<string | null>(null);
  const [savingVerify, setSavingVerify] = useState(false);

  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [savingMail, setSavingMail] = useState(false);
  const [savingSms, setSavingSms] = useState(false);
  const [savingWhatsapp, setSavingWhatsapp] = useState(false);

  const [mailTestTo, setMailTestTo] = useState("");
  const [smsTestTo, setSmsTestTo] = useState("");
  const [waTestTo, setWaTestTo] = useState("");
  const [testingMail, setTestingMail] = useState(false);
  const [testingSms, setTestingSms] = useState(false);
  const [testingWhatsapp, setTestingWhatsapp] = useState(false);

  // premium email-template preview (central only)
  const [preview, setPreview] = useState<{ subject: string; html: string } | null>(null);
  const [previewLoading, setPreviewLoading] = useState(false);

  useEffect(() => {
    if (data) {
      setMail(data.mail ? { ...emptyMail, ...data.mail } : { ...emptyMail });
      setSms(data.sms ? { ...emptySms, ...data.sms } : { ...emptySms });
      setWhatsapp(data.whatsapp ? { ...emptyWhatsapp, ...data.whatsapp } : { ...emptyWhatsapp });
      const v = data.verification;
      if (v) {
        setVerify({
          result: v.result !== false,
          examSchedule: v.examSchedule !== false,
          inventory: v.inventory !== false,
        });
        setVerifyStats(v.stats ?? null);
        setVerifySource(v.source ?? v.configured ? (v.source ?? (v.configured ? "CENTRAL" : null)) : null);
      }
    }
  }, [data]);

  type Channel = "mail" | "sms" | "whatsapp";

  async function save(kind: Channel) {
    setMessage(null);
    if (kind === "mail") setSavingMail(true);
    else if (kind === "sms") setSavingSms(true);
    else setSavingWhatsapp(true);
    try {
      const payload =
        kind === "mail"
          ? { mail: { ...mail, port: Number(mail.port) || 587, password: mailPassword } }
          : kind === "sms"
            ? { sms: { ...sms, authPassword: smsPassword } }
            : { whatsapp: { ...whatsapp, authToken: waToken } };
      await api(base, { method: "PUT", body: JSON.stringify(payload) });
      setMessage({
        type: "success",
        text: kind === "mail" ? n.mailSaved : kind === "sms" ? n.smsSaved : n.waSaved,
      });
      setMailPassword("");
      setSmsPassword("");
      setWaToken("");
    } catch (err) {
      const code = err instanceof Error ? err.message : "";
      setMessage({
        type: "error",
        text:
          code === "MAIL_FIELDS_REQUIRED" || code === "SMS_FIELDS_REQUIRED" || code === "WHATSAPP_FIELDS_REQUIRED"
            ? n.errRequired
            : t.common.tryAgain,
      });
    } finally {
      if (kind === "mail") setSavingMail(false);
      else if (kind === "sms") setSavingSms(false);
      else setSavingWhatsapp(false);
    }
  }

  async function test(kind: Channel) {
    setMessage(null);
    if (kind === "mail") setTestingMail(true);
    else if (kind === "sms") setTestingSms(true);
    else setTestingWhatsapp(true);
    try {
      await api(`${base}/test`, {
        method: "POST",
        body: JSON.stringify({
          channel: kind === "mail" ? "EMAIL" : kind === "sms" ? "SMS" : "WHATSAPP",
          target: kind === "mail" ? mailTestTo : kind === "sms" ? smsTestTo : waTestTo,
        }),
      });
      setMessage({ type: "success", text: n.testSent });
    } catch (err) {
      const code = err instanceof Error ? err.message : "";
      setMessage({
        type: "error",
        text: code === "CHANNEL_NOT_CONFIGURED" ? n.errNotConfigured : code === "TARGET_REQUIRED" ? n.errTarget : n.errSend,
      });
    } finally {
      if (kind === "mail") setTestingMail(false);
      else if (kind === "sms") setTestingSms(false);
      else setTestingWhatsapp(false);
    }
  }

  /** Render a premium platform template with sample data and show it. */
  async function openPreview(type: string) {
    setMessage(null);
    setPreview(null);
    setPreviewLoading(true);
    try {
      const res = await api<{ subject: string; html: string }>(`${base}/preview?type=${type}`);
      setPreview(res);
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setPreviewLoading(false);
    }
  }

  async function saveVerification() {
    setMessage(null);
    setSavingVerify(true);
    try {
      await api(base, {
        method: "PUT",
        body: JSON.stringify({ verification: verify }),
      });
      setMessage({ type: "success", text: n.verificationSaved });
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setSavingVerify(false);
    }
  }

  if (loading) {
    return (
      <div className="card">
        <div className="card-body d-flex justify-content-center py-4">
          <Spinner />
        </div>
      </div>
    );
  }

  const effectiveMail = scope === "INSTITUTION" ? data?.effective?.mail : mail.active ? "CENTRAL" : null;
  const effectiveSms = scope === "INSTITUTION" ? data?.effective?.sms : sms.active ? "CENTRAL" : null;

  return (
    <div className="card">
      <div className="card-header d-flex align-items-center justify-content-between">
        <div>
          <h5 className="mb-0 f-w-700">{scope === "CENTRAL" ? n.centralTitle : n.title}</h5>
          <p className="mb-0 ems-fs-12 text-muted">{scope === "CENTRAL" ? n.centralSubtitle : n.subtitle}</p>
        </div>
        <IconSettings className="svg-20 text-muted" />
      </div>

      {message && (
        <div className="px-3 pt-3">
          <Alert type={message.type} onClose={() => setMessage(null)}>{message.text}</Alert>
        </div>
      )}

      <div className="card-body pt-2">

        {/* ── Email (SMTP) ─────────────────────────────────────────── */}
        <div className={`ems-notify-block ${openMail ? "" : "collapsed"}`}>
          <div className="ems-notify-head" onClick={() => setOpenMail((o) => !o)} role="button" tabIndex={0}
               onKeyDown={(e) => e.key === "Enter" && setOpenMail((o) => !o)}>
            <div className="d-flex align-items-center min-w-0">
              <span className="ic"><IconMail className="svg-18" /></span>
              <div className="min-w-0">
                <div className="f-w-700 ems-fs-14">{n.mailTitle}</div>
                <div className="ems-fs-11 text-muted text-truncate">
                  {mail.host ? `${mail.host}:${mail.port}` : n.mailNotSet}
                  {scope === "INSTITUTION" && (
                    <span className={`badge ${effectiveMail === "INSTITUTION" ? "badge-success" : effectiveMail === "CENTRAL" ? "badge-soft-teal" : "badge-secondary"} ms-2`}>
                      {effectiveMail === "INSTITUTION" ? n.usingOwn : effectiveMail === "CENTRAL" ? n.usingCentral : n.notConfigured}
                    </span>
                  )}
                </div>
              </div>
            </div>
            <IconChevronDown className="svg-16 caret" />
          </div>
          <div className="ems-notify-body">
            <div className="row g-3">
              <div className="col-md-6">
                <Input label={n.smtpHost} value={mail.host} placeholder="smtp.provider.com"
                       onChange={(e) => setMail({ ...mail, host: e.target.value })} />
              </div>
              <div className="col-md-3">
                <Input label={n.smtpPort} type="number" value={String(mail.port)}
                       onChange={(e) => setMail({ ...mail, port: Number(e.target.value) })} />
              </div>
              <div className="col-md-3 d-flex align-items-end pb-1">
                <div className="form-check form-switch">
                  <input className="form-check-input" type="checkbox" role="switch" id="mail-secure"
                         checked={mail.secure} onChange={(e) => setMail({ ...mail, secure: e.target.checked })} />
                  <label className="form-check-label ems-fs-12 f-w-600" htmlFor="mail-secure">TLS/SSL</label>
                </div>
              </div>
              <div className="col-md-6">
                <Input label={n.smtpUser} value={mail.username} placeholder="no-reply@school.com"
                       onChange={(e) => setMail({ ...mail, username: e.target.value })} />
              </div>
              <div className="col-md-6">
                <Input label={n.smtpPass} type="password" value={mailPassword}
                       placeholder={mail.hasPassword ? "•••••••• — leave blank to keep" : "••••••••"}
                       onChange={(e) => setMailPassword(e.target.value)} />
              </div>
              <div className="col-md-6">
                <Input label={n.fromEmail} value={mail.fromEmail} placeholder="no-reply@school.com"
                       onChange={(e) => setMail({ ...mail, fromEmail: e.target.value })} />
              </div>
              <div className="col-md-6">
                <Input label={n.fromName} value={mail.fromName}
                       onChange={(e) => setMail({ ...mail, fromName: e.target.value })} />
              </div>
            </div>
            <div className="d-flex flex-wrap align-items-end justify-content-between gap-2 pt-3">
              <div className="form-check form-switch mb-2">
                <input className="form-check-input" type="checkbox" role="switch" id="mail-active"
                       checked={mail.active} onChange={(e) => setMail({ ...mail, active: e.target.checked })} />
                <label className="form-check-label ems-fs-12 f-w-600" htmlFor="mail-active">{n.activeLabel}</label>
              </div>
              <div className="d-flex gap-2 flex-wrap">
                <input className="form-control form-control-sm" style={{ maxWidth: 220 }} type="email"
                       placeholder={n.testToEmail} value={mailTestTo} onChange={(e) => setMailTestTo(e.target.value)} />
                <Button size="sm" variant="secondary" loading={testingMail} disabled={!mailTestTo}
                        onClick={() => test("mail")}>
                  <IconSend className="svg-14" /><span className="ms-1">{n.testSend}</span>
                </Button>
                <Button size="sm" loading={savingMail} onClick={() => save("mail")}>{t.common.save}</Button>
              </div>
            </div>
          </div>
        </div>

        {/* ── SMS gateway ──────────────────────────────────────────── */}
        <div className={`ems-notify-block ${openSms ? "" : "collapsed"}`}>
          <div className="ems-notify-head" onClick={() => setOpenSms((o) => !o)} role="button" tabIndex={0}
               onKeyDown={(e) => e.key === "Enter" && setOpenSms((o) => !o)}>
            <div className="d-flex align-items-center min-w-0">
              <span className="ic"><IconMessageCircle className="svg-18" /></span>
              <div className="min-w-0">
                <div className="f-w-700 ems-fs-14">{n.smsTitle}</div>
                <div className="ems-fs-11 text-muted text-truncate">
                  {sms.apiUrl ? sms.apiUrl : n.smsNotSet}
                  {scope === "INSTITUTION" && (
                    <span className={`badge ${effectiveSms === "INSTITUTION" ? "badge-success" : effectiveSms === "CENTRAL" ? "badge-soft-teal" : "badge-secondary"} ms-2`}>
                      {effectiveSms === "INSTITUTION" ? n.usingOwn : effectiveSms === "CENTRAL" ? n.usingCentral : n.notConfigured}
                    </span>
                  )}
                </div>
              </div>
            </div>
            <IconChevronDown className="svg-16 caret" />
          </div>
          <div className="ems-notify-body">
            <div className="row g-3">
              <div className="col-md-8">
                <Input label={n.smsApiUrl} value={sms.apiUrl}
                       placeholder="https://sms-provider.com/api/send?to={phone}&text={message}&sender={sender}"
                       onChange={(e) => setSms({ ...sms, apiUrl: e.target.value })} />
              </div>
              <div className="col-md-4">
                <Select label={n.smsMethod} value={sms.method}
                        onChange={(e) => setSms({ ...sms, method: e.target.value })}>
                  <option value="POST">POST</option>
                  <option value="GET">GET</option>
                </Select>
              </div>
              <div className="col-md-6">
                <Input label={n.smsSender} value={sms.senderId ?? ""} placeholder="SCHOOL ID"
                       onChange={(e) => setSms({ ...sms, senderId: e.target.value })} />
              </div>
              <div className="col-md-6">
                <Input label={n.smsAuthUser} value={sms.authUsername ?? ""}
                       onChange={(e) => setSms({ ...sms, authUsername: e.target.value })} />
              </div>
              <div className="col-md-6">
                <Input label={n.smsAuthPass} type="password" value={smsPassword}
                       placeholder={sms.hasPassword ? "•••••••• — leave blank to keep" : "••••••••"}
                       onChange={(e) => setSmsPassword(e.target.value)} />
              </div>
              <div className="col-12">
                <Input label={n.smsBody} value={sms.bodyTemplate ?? ""}
                       placeholder="POST body — supports {phone} {message} {sender}. Leave blank for phone={phone}&message={message}"
                       onChange={(e) => setSms({ ...sms, bodyTemplate: e.target.value })} />
              </div>
              <div className="col-12">
                <Input label={n.smsHeaders} value={sms.headersRaw ?? ""}
                       placeholder={"Content-Type: application/x-www-form-urlencoded\nAuthorization: Bearer key123"}
                       onChange={(e) => setSms({ ...sms, headersRaw: e.target.value })} />
              </div>
            </div>
            <p className="ems-fs-11 text-muted mb-0 mt-1">{n.smsPlaceholderHint}</p>
            <div className="d-flex flex-wrap align-items-end justify-content-between gap-2 pt-3">
              <div className="form-check form-switch mb-2">
                <input className="form-check-input" type="checkbox" role="switch" id="sms-active"
                       checked={sms.active} onChange={(e) => setSms({ ...sms, active: e.target.checked })} />
                <label className="form-check-label ems-fs-12 f-w-600" htmlFor="sms-active">{n.activeLabel}</label>
              </div>
              <div className="d-flex gap-2 flex-wrap">
                <input className="form-control form-control-sm" style={{ maxWidth: 220 }} type="text"
                       placeholder={n.testToPhone} value={smsTestTo} onChange={(e) => setSmsTestTo(e.target.value)} />
                <Button size="sm" variant="secondary" loading={testingSms} disabled={!smsTestTo}
                        onClick={() => test("sms")}>
                  <IconSend className="svg-14" /><span className="ms-1">{n.testSend}</span>
                </Button>
                <Button size="sm" loading={savingSms} onClick={() => save("sms")}>{t.common.save}</Button>
              </div>
            </div>
          </div>
        </div>

        {/* ── WhatsApp integration ─────────────────────────────────── */}
        <div className={`ems-notify-block ${openWhatsapp ? "" : "collapsed"}`}>
          <div className="ems-notify-head" onClick={() => setOpenWhatsapp((o) => !o)} role="button" tabIndex={0}
               onKeyDown={(e) => e.key === "Enter" && setOpenWhatsapp((o) => !o)}>
            <div className="d-flex align-items-center min-w-0">
              <span className="ic"><IconPhone className="svg-18" /></span>
              <div className="min-w-0">
                <div className="f-w-700 ems-fs-14">{n.whatsappTitle}</div>
                <div className="ems-fs-11 text-muted text-truncate">
                  {whatsapp.apiUrl ? whatsapp.apiUrl : n.whatsappNotSet}
                  {scope === "INSTITUTION" && (
                    <span className={`badge ${whatsapp.active ? "badge-success" : "badge-secondary"} ms-2`}>
                      {whatsapp.active ? t.common.active : t.common.inactive}
                    </span>
                  )}
                </div>
              </div>
            </div>
            <IconChevronDown className="svg-16 caret" />
          </div>
          <div className="ems-notify-body">
            <div className="row g-3">
              <div className="col-md-8">
                <Input label={n.waApiUrl} value={whatsapp.apiUrl}
                       placeholder="https://graph.facebook.com/v20.0/{sender}/messages"
                       onChange={(e) => setWhatsapp({ ...whatsapp, apiUrl: e.target.value })} />
              </div>
              <div className="col-md-4">
                <Select label={n.waMethod} value={whatsapp.method}
                        onChange={(e) => setWhatsapp({ ...whatsapp, method: e.target.value })}>
                  <option value="POST">POST</option>
                  <option value="GET">GET</option>
                </Select>
              </div>
              <div className="col-md-6">
                <Input label={n.waSender} value={whatsapp.senderId ?? ""} placeholder="8801XXXXXXXXX"
                       onChange={(e) => setWhatsapp({ ...whatsapp, senderId: e.target.value })} />
              </div>
              <div className="col-md-6">
                <Input label={n.waToken} type="password" value={waToken}
                       placeholder={whatsapp.hasToken ? "•••••••• — leave blank to keep" : "EAAG… / key"}
                       onChange={(e) => setWaToken(e.target.value)} />
              </div>
              <div className="col-12">
                <Input label={n.waBody} value={whatsapp.bodyTemplate ?? ""}
                       placeholder='{"messaging_product":"whatsapp","to":"{phone}","type":"text","text":{"body":"{message}"}}'
                       onChange={(e) => setWhatsapp({ ...whatsapp, bodyTemplate: e.target.value })} />
              </div>
              <div className="col-12">
                <Input label={n.waHeaders} value={whatsapp.headersRaw ?? ""}
                       placeholder={"Content-Type: application/json"}
                       onChange={(e) => setWhatsapp({ ...whatsapp, headersRaw: e.target.value })} />
              </div>
            </div>
            <p className="ems-fs-11 text-muted mb-0 mt-1">{n.waPlaceholderHint}</p>
            <div className="d-flex flex-wrap align-items-end justify-content-between gap-2 pt-3">
              <div className="form-check form-switch mb-2">
                <input className="form-check-input" type="checkbox" role="switch" id="wa-active"
                       checked={whatsapp.active} onChange={(e) => setWhatsapp({ ...whatsapp, active: e.target.checked })} />
                <label className="form-check-label ems-fs-12 f-w-600" htmlFor="wa-active">{n.activeLabel}</label>
              </div>
              <div className="d-flex gap-2 flex-wrap">
                <input className="form-control form-control-sm" style={{ maxWidth: 220 }} type="text"
                       placeholder={n.testToPhone} value={waTestTo} onChange={(e) => setWaTestTo(e.target.value)} />
                <Button size="sm" variant="secondary" loading={testingWhatsapp} disabled={!waTestTo}
                        onClick={() => test("whatsapp")}>
                  <IconSend className="svg-14" /><span className="ms-1">{n.testSend}</span>
                </Button>
                <Button size="sm" loading={savingWhatsapp} onClick={() => save("whatsapp")}>{t.common.save}</Button>
              </div>
            </div>
          </div>
        </div>

        {/* ── Document verification modules ─────────────────────────── */}
        <div className={`ems-notify-block ${openVerify ? "" : "collapsed"}`}>
          <div className="ems-notify-head" onClick={() => setOpenVerify((o) => !o)} role="button" tabIndex={0}
               onKeyDown={(e) => e.key === "Enter" && setOpenVerify((o) => !o)}>
            <div className="d-flex align-items-center min-w-0">
              <span className="ic"><IconShield className="svg-18" /></span>
              <div className="min-w-0">
                <div className="f-w-700 ems-fs-14">{n.verificationTitle}</div>
                <div className="ems-fs-11 text-muted">
                  {scope === "CENTRAL"
                    ? n.verificationCentralHint
                    : verifySource === "INSTITUTION"
                      ? n.usingOwn
                      : verifySource === "CENTRAL"
                        ? n.usingCentral
                        : n.verificationDefault}
                  {verifyStats && (
                    <span className="badge badge-soft-teal ms-2">
                      {n.verificationStats
                        .replace("{codes}", String(verifyStats.codes))
                        .replace("{scans}", String(verifyStats.scans))}
                    </span>
                  )}
                </div>
              </div>
            </div>
            <IconChevronDown className="svg-16 caret" />
          </div>
          <div className="ems-notify-body">
            <div className="d-flex flex-column gap-2">
              {([
                ["result", n.verifyResult],
                ["examSchedule", n.verifySchedule],
                ["inventory", n.verifyInventory],
              ] as const).map(([key, label]) => (
                <button
                  type="button"
                  key={key}
                  className={`ems-module-toggle w-100${verify[key] ? " on" : ""}`}
                  onClick={() => setVerify((v) => ({ ...v, [key]: !v[key] }))}
                >
                  <span className="dot" />
                  <span className="lbl">{label}</span>
                  <span className={`badge ${verify[key] ? "badge-success" : "badge-secondary"}`}>
                    {verify[key] ? t.common.active : t.common.inactive}
                  </span>
                </button>
              ))}
            </div>
            <p className="ems-fs-11 text-muted mb-0 mt-3">{n.verificationIssueHint}</p>
            <div className="d-flex justify-content-end pt-3">
              <Button size="sm" loading={savingVerify} onClick={saveVerification}>{t.common.save}</Button>
            </div>
          </div>
        </div>

        {/* ── Premium email templates (central only) ───────────────── */}
        {scope === "CENTRAL" && (
          <div className={`ems-notify-block ${openTemplates ? "" : "collapsed"}`}>
            <div className="ems-notify-head" onClick={() => setOpenTemplates((o) => !o)} role="button" tabIndex={0}
                 onKeyDown={(e) => e.key === "Enter" && setOpenTemplates((o) => !o)}>
              <div className="d-flex align-items-center min-w-0">
                <span className="ic"><IconMail className="svg-18" /></span>
                <div className="min-w-0">
                  <div className="f-w-700 ems-fs-14">{n.templatesTitle}</div>
                  <div className="ems-fs-11 text-muted text-truncate">{n.templatesSubtitle}</div>
                </div>
              </div>
              <IconChevronDown className="svg-16 caret" />
            </div>
            <div className="ems-notify-body">
              <div className="d-flex flex-column gap-2">
                {([
                  ["demo", n.tplDemoName, n.tplDemoDesc],
                  ["payment", n.tplPaymentName, n.tplPaymentDesc],
                  ["credential", n.tplCredentialName, n.tplCredentialDesc],
                  ["welcome", n.tplWelcomeName, n.tplWelcomeDesc],
                ] as const).map(([type, name, desc]) => (
                  <div key={type} className="d-flex align-items-center justify-content-between gap-3 border rounded-3 px-3 py-2">
                    <div className="min-w-0">
                      <div className="f-w-700 ems-fs-13">{name}</div>
                      <div className="ems-fs-11 text-muted text-truncate">{desc}</div>
                    </div>
                    <Button size="sm" variant="secondary" onClick={() => openPreview(type)}>
                      <IconMail className="svg-14" /><span className="ms-1">{n.tplPreview}</span>
                    </Button>
                  </div>
                ))}
              </div>
              <p className="ems-fs-11 text-muted mb-0 mt-3">
                {scope === "CENTRAL" ? n.templatesSubtitle : ""}
              </p>
            </div>
          </div>
        )}

        {scope === "INSTITUTION" && (
          <p className="ems-fs-11 text-muted mb-0 mt-2">{n.fallbackHint}</p>
        )}
      </div>

      {/* Premium template preview */}
      <Modal open={previewLoading || !!preview} onClose={() => setPreview(null)} title={preview?.subject ?? n.tplPreview} wide>
        {previewLoading ? (
          <div className="text-center py-4">
            <Spinner />
          </div>
        ) : preview ? (
          <iframe
            srcDoc={preview.html}
            title={preview.subject}
            style={{ width: "100%", height: "62vh", border: "none", borderRadius: 10, background: "#e9efec" }}
          />
        ) : null}
      </Modal>
    </div>
  );
}