"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import toast, { Toaster } from "react-hot-toast";
import { TablePagination } from "./TablePagination";
import { CertificateDisplay, type CertificateData } from "@/components/CertificateDisplay";

const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api";
const PAGE_SIZE = 10;

type Person = { id: number; name: string; phone: string; email: string; approval_status: string };
type ViewTarget = { type: "member" | "volunteer"; id: number; name: string };

function certLabel(type: "member" | "volunteer", id: number) {
  return `SKSF-${type === "member" ? "CM" : "CV"}-${String(id).padStart(5, "0")}-${new Date().getFullYear()}`;
}

export function AdminCertificates() {
  const [members, setMembers] = useState<Person[]>([]);
  const [volunteers, setVolunteers] = useState<Person[]>([]);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState("");
  const [tab, setTab] = useState<"members" | "volunteers">("members");
  const [shareModal, setShareModal] = useState<{ type: "member" | "volunteer"; id: number; name: string; email: string } | null>(null);
  const [shareEmail, setShareEmail] = useState("");
  const [sending, setSending] = useState(false);
  const [sentCerts, setSentCerts] = useState<Record<string, boolean>>({});
  const [viewModal, setViewModal] = useState<ViewTarget | null>(null);
  const [certData, setCertData] = useState<CertificateData | null>(null);
  const [viewLoading, setViewLoading] = useState(false);
  const [viewError, setViewError] = useState("");
  const [viewPublicUrl, setViewPublicUrl] = useState("");
  const [printing, setPrinting] = useState(false);
  const [memberPage, setMemberPage] = useState(1);
  const [volunteerPage, setVolunteerPage] = useState(1);

  const token = useMemo(() => {
    if (typeof window === "undefined") return "";
    return localStorage.getItem("ngo_admin_token") || "";
  }, []);

  const headers = useMemo(() => ({ Authorization: "Bearer " + token }), [token]);

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const [membersRes, volunteersRes] = await Promise.all([
        fetch(API + "/admin/members", { headers: headers }),
        fetch(API + "/admin/volunteers", { headers: headers }),
      ]);
      if (membersRes.ok) {
        const all = await membersRes.json();
        setMembers(all.filter((m: Person) => m.approval_status === "approved"));
      }
      if (volunteersRes.ok) {
        const all = await volunteersRes.json();
        setVolunteers(all.filter((v: Person) => v.approval_status === "approved"));
      }
    } catch {
      setMessage("Failed to load data");
    }
    setLoading(false);
  }, [headers]);

  useEffect(() => {
    const t = window.setTimeout(() => loadData(), 0);
    return () => window.clearTimeout(t);
  }, [loadData]);

  useEffect(() => {
    if (!members.length && !volunteers.length) return;
    const all = [
      ...members.map(m => fetch(API + "/admin/certificates/members/" + m.id + "/share-status", { headers }).then(r => r.json()).then(d => { if (d.sent) setSentCerts(p => ({ ...p, ["member-" + m.id]: true })); }).catch(() => {})),
      ...volunteers.map(v => fetch(API + "/admin/certificates/volunteers/" + v.id + "/share-status", { headers }).then(r => r.json()).then(d => { if (d.sent) setSentCerts(p => ({ ...p, ["volunteer-" + v.id]: true })); }).catch(() => {})),
    ];
    Promise.all(all);
  }, [members, volunteers, headers]);

  const switchTab = (next: "members" | "volunteers") => {
    setTab(next);
    if (next === "members") setMemberPage(1);
    else setVolunteerPage(1);
  };

  const openViewCert = async (type: "member" | "volunteer", id: number, name: string) => {
    setViewModal({ type, id, name });
    setCertData(null);
    setViewError("");
    setViewPublicUrl("");
    setViewLoading(true);
    try {
      const base = type === "member" ? "members" : "volunteers";
      const [certRes, linkRes] = await Promise.all([
        fetch(API + "/admin/certificates/" + base + "/" + id + "/view", { headers }),
        fetch(API + "/admin/certificates/" + base + "/" + id + "/share-link", { headers }),
      ]);
      const json = await certRes.json().catch(() => ({}));
      if (!certRes.ok) {
        setViewError(json.message || "Could not load the certificate.");
        setViewLoading(false);
        return;
      }
      setCertData(json);
      if (linkRes.ok) {
        const link = await linkRes.json().catch(() => null);
        if (link && link.url) setViewPublicUrl(link.url);
      }
    } catch {
      setViewError("Network error. Please try again.");
    }
    setViewLoading(false);
  };

  const shareCert = async () => {
    if (!shareModal) return;
    if (!shareEmail.trim()) {
      toast.error("Email is required");
      return;
    }
    setMessage("");
    setSending(true);
    const loadingToast = toast.loading("Sending certificate link...", { duration: Infinity });
    try {
      const base = shareModal.type === "member" ? "members" : "volunteers";
      const res = await fetch(API + "/admin/certificates/" + base + "/" + shareModal.id + "/share", {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: "Bearer " + token },
        body: JSON.stringify({ email: shareEmail }),
      });
      toast.dismiss(loadingToast);
      if (!res.ok) {
        const err = await res.json();
        toast.error(err.message || "Failed to send");
        return;
      }
      toast.success("Certificate link sent to " + shareEmail);
      setSentCerts(prev => ({ ...prev, [shareModal.type + "-" + shareModal.id]: true }));
      setShareModal(null);
      setShareEmail("");
    } catch {
      toast.dismiss(loadingToast);
      toast.error("Failed to send email");
    } finally {
      setSending(false);
    }
  };

  const handlePrint = () => {
    if (!viewPublicUrl) return;
    setPrinting(true);
    const w = window.open(viewPublicUrl, "_blank");
    if (w) {
      window.setTimeout(() => {
        try {
          w.print();
        } catch {
          /* ignore */
        }
        setPrinting(false);
      }, 5000);
    } else {
      setPrinting(false);
      toast.error("Popup blocked. Allow popups and try again.");
    }
  };

  if (loading) {
    return (
      <div className="mx-auto max-w-7xl">
        <div className="flex items-center gap-2.5 rounded-md border border-[var(--color-hairline)] bg-white p-3 text-[11.5px] font-black text-[var(--color-ink)] shadow-sm">
          <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-[var(--color-hairline)] border-t-[var(--color-primary)]" />
          Loading approved members and volunteers...
        </div>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-7xl">
      <div className="mb-5 flex flex-wrap items-end justify-between gap-3">
        <div>
          <p className="text-[10px] font-black uppercase tracking-[0.14em] text-[var(--color-primary)]">Documents</p>
          <h1 className="mt-0.5 text-xl font-black text-[var(--color-ink)] md:text-2xl">Certificates</h1>
          <p className="mt-1 max-w-2xl text-[11.5px] font-medium text-[var(--color-ink-mute)]">
            Certificates are rendered as a stylish, printable HTML page on the public website. View, print, download (via Save as PDF) and share certificates for approved members and volunteers.
          </p>
        </div>
        <a
          href="/certificate"
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-1.5 rounded-md bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-deep)] px-3.5 py-2 text-[11.5px] font-black text-white shadow-[0_8px_18px_rgba(91,98,240,0.3)] transition hover:brightness-105"
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
            <polyline points="15 3 21 3 21 9" />
            <line x1="10" y1="14" x2="21" y2="3" />
          </svg>
          Open Public Certificate Page
        </a>
      </div>

      {message ? <p className="mb-4 rounded-md border border-[var(--color-hairline)] bg-[var(--color-canvas-soft)] p-3 text-[11.5px] font-bold text-[var(--color-ink)]">{message}</p> : null}

      {/* ── Tabs ───────────────────────────────────────── */}
      <div className="mb-4 inline-flex rounded-lg border border-[var(--color-hairline)] bg-white p-1 shadow-sm">
        <button
          onClick={() => switchTab("members")}
          className={"flex items-center gap-2 rounded-md px-4 py-2 text-[12px] font-black transition " + (tab === "members" ? "bg-gradient-to-r from-[var(--color-primary-deep)] to-[var(--color-primary-deep)] text-white shadow-[0_6px_14px_rgba(26,107,74,0.28)]" : "text-[var(--color-ink-mute)] hover:bg-[var(--color-canvas-soft)] hover:text-[var(--color-ink)]")}
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
          </svg>
          Members
          <span className={"rounded-full px-1.5 py-0.5 text-[10px] font-black " + (tab === "members" ? "bg-white/20 text-white" : "bg-[var(--color-canvas-soft)] text-[var(--color-primary)]")}>{members.length}</span>
        </button>
        <button
          onClick={() => switchTab("volunteers")}
          className={"flex items-center gap-2 rounded-md px-4 py-2 text-[12px] font-black transition " + (tab === "volunteers" ? "bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-deep)] text-white shadow-[0_6px_14px_rgba(91,98,240,0.3)]" : "text-[var(--color-ink-mute)] hover:bg-[var(--color-canvas-soft)] hover:text-[var(--color-ink)]")}
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
          </svg>
          Volunteers
          <span className={"rounded-full px-1.5 py-0.5 text-[10px] font-black " + (tab === "volunteers" ? "bg-white/20 text-white" : "bg-[var(--color-canvas-soft)] text-[var(--color-primary)]")}>{volunteers.length}</span>
        </button>
      </div>

      {tab === "members" ? (
        <section className="mb-6 overflow-hidden rounded-xl border border-[var(--color-hairline)] bg-white shadow-sm">
        <div className="flex items-center gap-2.5 border-b border-[var(--color-hairline)] bg-gradient-to-r from-[var(--color-canvas-soft)] to-[var(--color-canvas-soft)] px-4 py-3">
          <span className="grid h-7 w-7 place-items-center rounded-md bg-gradient-to-br from-[var(--color-primary-deep)] to-[var(--color-primary-deep)] text-[12px] font-black text-white shadow-[0_4px_10px_rgba(36,165,118,0.3)]">M</span>
          <div>
            <h2 className="text-[13.5px] font-black text-[var(--color-ink)]">Members ({members.length})</h2>
            <p className="text-[10px] font-semibold text-[var(--color-ink-mute)]">View the printable certificate, then print or share</p>
          </div>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[800px] border-collapse text-left text-[12px]">
            <thead>
              <tr className="border-b border-[var(--color-hairline)] bg-[var(--color-canvas-soft)]">
                <th className="px-4 py-3 text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Cert No</th>
                <th className="px-4 py-3 text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Name</th>
                <th className="px-4 py-3 text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Phone</th>
                <th className="px-4 py-3 text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Email</th>
                <th className="px-4 py-3 text-right text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Actions</th>
              </tr>
            </thead>
            <tbody>
              {members.length === 0 ? (
                <tr><td className="px-4 py-6 text-[12px] font-bold text-[var(--color-ink-mute)]" colSpan={5}>No approved members found.</td></tr>
              ) : members.slice((Math.min(memberPage, Math.max(1, Math.ceil(members.length / PAGE_SIZE))) - 1) * PAGE_SIZE, Math.min(memberPage, Math.max(1, Math.ceil(members.length / PAGE_SIZE))) * PAGE_SIZE).map((m) => (
                <tr key={m.id} className="border-b border-[var(--color-hairline)] bg-white align-middle transition last:border-b-0 hover:bg-[var(--color-canvas-soft)]">
                  <td className="px-4 py-3 font-mono text-[11px] font-bold text-[var(--color-ink)]">{certLabel("member", m.id)}</td>
                  <td className="px-4 py-3 text-[12px] font-medium text-[var(--color-ink)]">{m.name}</td>
                  <td className="px-4 py-3 text-[12px] text-[var(--color-ink-mute)]">{m.phone || "-"}</td>
                  <td className="px-4 py-3 text-[12px] text-[var(--color-ink-mute)]">{m.email || "-"}</td>
                  <td className="px-4 py-3">
                    <div className="flex justify-end gap-1.5">
                      <button
                        onClick={() => openViewCert("member", m.id, m.name)}
                        className="flex items-center gap-1.5 rounded-md bg-[var(--color-primary-deep)] px-3 py-1.5 text-[11px] font-black text-white shadow-[0_4px_10px_rgba(15,107,79,0.2)] transition hover:bg-[var(--color-canvas-night)]"
                      >
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                          <circle cx="12" cy="12" r="3" />
                        </svg>
                        View
                      </button>
                      <button
                        onClick={async () => {
                          setShareModal({ type: "member", id: m.id, name: m.name, email: m.email || "" });
                          setShareEmail(m.email || "");
                          try {
                            const r = await fetch(API + "/admin/certificates/members/" + m.id + "/share-status", { headers });
                            const d = await r.json();
                            setSentCerts(p => ({ ...p, ["member-" + m.id]: d.sent }));
                          } catch {}
                        }} className={"rounded-md border px-2.5 py-1.5 text-[11px] font-black transition " + (sentCerts["member-" + m.id] ? "border-[#d97706] bg-[#d97706] text-black hover:bg-[#b45309]" : "border-[var(--color-hairline)] bg-white text-[var(--color-ink)] hover:border-[var(--color-primary-deep)] hover:bg-[var(--color-canvas-soft)] hover:text-[var(--color-primary-deep)]")}>{sentCerts["member-" + m.id] ? "Share Again" : "Share"}</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <TablePagination total={members.length} page={memberPage} pageSize={PAGE_SIZE} onChange={setMemberPage} label="members" />
      </section>
      ) : (
        <section className="mb-6 overflow-hidden rounded-xl border border-[var(--color-hairline)] bg-white shadow-sm">
        <div className="flex items-center gap-2.5 border-b border-[var(--color-hairline)] bg-gradient-to-r from-[var(--color-canvas-soft)] to-[var(--color-canvas-soft)] px-4 py-3">
          <span className="grid h-7 w-7 place-items-center rounded-md bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-deep)] text-[12px] font-black text-white shadow-[0_4px_10px_rgba(91,98,240,0.3)]">V</span>
          <div>
            <h2 className="text-[13.5px] font-black text-[var(--color-ink)]">Volunteers ({volunteers.length})</h2>
            <p className="text-[10px] font-semibold text-[var(--color-ink-mute)]">View the printable certificate, then print or share</p>
          </div>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[800px] border-collapse text-left text-[12px]">
            <thead>
              <tr className="border-b border-[var(--color-hairline)] bg-[var(--color-canvas-soft)]">
                <th className="px-4 py-3 text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Cert No</th>
                <th className="px-4 py-3 text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Name</th>
                <th className="px-4 py-3 text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Phone</th>
                <th className="px-4 py-3 text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Email</th>
                <th className="px-4 py-3 text-right text-[10px] font-black uppercase tracking-[0.08em] text-[var(--color-ink-mute)]">Actions</th>
              </tr>
            </thead>
            <tbody>
              {volunteers.length === 0 ? (
                <tr><td className="px-4 py-6 text-[12px] font-bold text-[var(--color-ink-mute)]" colSpan={5}>No approved volunteers found.</td></tr>
              ) : volunteers.slice((Math.min(volunteerPage, Math.max(1, Math.ceil(volunteers.length / PAGE_SIZE))) - 1) * PAGE_SIZE, Math.min(volunteerPage, Math.max(1, Math.ceil(volunteers.length / PAGE_SIZE))) * PAGE_SIZE).map((v) => (
                <tr key={v.id} className="border-b border-[var(--color-hairline)] bg-white align-middle transition last:border-b-0 hover:bg-[var(--color-canvas-soft)]">
                  <td className="px-4 py-3 font-mono text-[11px] font-bold text-[var(--color-ink)]">{certLabel("volunteer", v.id)}</td>
                  <td className="px-4 py-3 text-[12px] font-medium text-[var(--color-ink)]">{v.name}</td>
                  <td className="px-4 py-3 text-[12px] text-[var(--color-ink-mute)]">{v.phone || "-"}</td>
                  <td className="px-4 py-3 text-[12px] text-[var(--color-ink-mute)]">{v.email || "-"}</td>
                  <td className="px-4 py-3">
                    <div className="flex justify-end gap-1.5">
                      <button
                        onClick={() => openViewCert("volunteer", v.id, v.name)}
                        className="flex items-center gap-1.5 rounded-md bg-[var(--color-primary-deep)] px-3 py-1.5 text-[11px] font-black text-white shadow-[0_4px_10px_rgba(93,111,241,0.25)] transition hover:bg-[var(--color-primary-deep)]"
                      >
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                          <circle cx="12" cy="12" r="3" />
                        </svg>
                        View
                      </button>
                      <button
                        onClick={async () => {
                          setShareModal({ type: "volunteer", id: v.id, name: v.name, email: v.email || "" });
                          setShareEmail(v.email || "");
                          try {
                            const r = await fetch(API + "/admin/certificates/volunteers/" + v.id + "/share-status", { headers });
                            const d = await r.json();
                            setSentCerts(p => ({ ...p, ["volunteer-" + v.id]: d.sent }));
                          } catch {}
                        }} className={"rounded-md border px-2.5 py-1.5 text-[11px] font-black transition " + (sentCerts["volunteer-" + v.id] ? "border-[#d97706] bg-[#d97706] text-black hover:bg-[#b45309]" : "border-[var(--color-hairline)] bg-white text-[var(--color-ink)] hover:border-[var(--color-primary-deep)] hover:bg-[var(--color-canvas-soft)] hover:text-[var(--color-primary-deep)]")}>{sentCerts["volunteer-" + v.id] ? "Share Again" : "Share"}</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <TablePagination total={volunteers.length} page={volunteerPage} pageSize={PAGE_SIZE} onChange={setVolunteerPage} label="volunteers" />
      </section>
      )}

      {viewModal ? (
        <div className="fixed inset-0 z-[80] grid place-items-center overflow-y-auto bg-black/45 p-4 backdrop-blur-sm" onClick={() => { setPrinting(false); setViewModal(null); }}>
          <section className="w-full max-w-5xl rounded-md bg-[var(--color-canvas-soft)] p-4 shadow-2xl" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between gap-3">
              <div>
                <h2 className="text-[13.5px] font-black text-[var(--color-ink)]">Certificate — {viewModal.name}</h2>
                <p className="text-[11.5px] font-semibold text-[var(--color-ink-mute)]">{certLabel(viewModal.type, viewModal.id)}</p>
              </div>
              <div className="flex items-center gap-2">
                <a
                  href={viewPublicUrl || ("/certificate?type=" + viewModal.type + "&id=" + viewModal.id)}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="rounded-md border border-[var(--color-hairline)] bg-white px-3 py-2 text-[11.5px] font-black text-[var(--color-ink)] transition hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]"
                >
                  Open Direct Link
                </a>
                <button
                  onClick={handlePrint}
                  disabled={!certData || !viewPublicUrl || printing}
                  className="flex items-center gap-2 rounded-md bg-gradient-to-r from-[var(--color-primary-deep)] to-[var(--color-primary-deep)] px-4 py-2 text-[11.5px] font-black text-white shadow-[0_8px_18px_rgba(26,107,74,0.28)] transition hover:brightness-105 disabled:opacity-60"
                  title="Opens the certificate page, waits for it to load, then prints it on A4 landscape"
                >
                  {printing ? (
                    <>
                      <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-white/40 border-t-white" />
                      Preparing for print...
                    </>
                  ) : (
                    "Print"
                  )}
                </button>
                <button onClick={() => { setPrinting(false); setViewModal(null); }} className="rounded-md border border-[var(--color-hairline)] bg-white px-3 py-2 text-[11.5px] font-black text-[var(--color-ink)] transition hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]">Close</button>
              </div>
            </div>

            <div className="mt-4">
              {viewLoading ? (
                <div className="flex items-center justify-center gap-2.5 rounded-md border border-[var(--color-hairline)] bg-white p-8 text-[11.5px] font-black text-[var(--color-ink)] shadow-sm">
                  <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-[var(--color-hairline)] border-t-[var(--color-primary)]" />
                  Loading certificate...
                </div>
              ) : viewError ? (
                <p className="rounded-md border border-[var(--color-hairline)] bg-[var(--color-canvas-soft)] p-4 text-[12px] font-bold text-[var(--color-ink)]">{viewError}</p>
              ) : certData ? (
                <CertificateDisplay data={certData} />
              ) : null}
            </div>
          </section>
        </div>
      ) : null}

      {shareModal ? (
        <div className="fixed inset-0 z-[80] grid place-items-center bg-black/45 p-4 backdrop-blur-sm" onClick={() => setShareModal(null)}>
          <section className="w-full max-w-md rounded-md bg-white p-4 shadow-2xl" onClick={(e) => e.stopPropagation()}>
            <h2 className="text-[13.5px] font-black text-[var(--color-ink)]">Share Certificate</h2>
            <p className="mt-1 text-[12px] text-[var(--color-ink-mute)]">{"Send the public certificate link for " + shareModal.name + " via email"}</p>
            <div className="mt-3">
              <label className="mb-1 block text-[11.5px] font-black text-[var(--color-ink)]">Email Address</label>
              <input type="email" value={shareEmail} onChange={(e) => setShareEmail(e.target.value)} placeholder="Enter email address" className="w-full rounded-md border border-[var(--color-hairline)] bg-[var(--color-canvas-soft)] px-2.5 py-2 text-[12px] font-medium outline-none focus:border-[var(--color-primary)]" />
            </div>
            <p className="mt-3 rounded-md bg-[var(--color-canvas-soft)] px-3 py-2 text-[11px] font-semibold text-[var(--color-ink-mute)]">
              The member opens the link and verifies with their date of birth to view and print the certificate.
            </p>
            <div className="mt-4 flex justify-end gap-2">
              <button onClick={() => setShareModal(null)} className="rounded-md border border-[var(--color-hairline)] px-3 py-2 text-[11.5px] font-black text-[var(--color-ink)] transition hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]">Cancel</button>
              <button onClick={shareCert} disabled={sending} className="rounded-md bg-gradient-to-r from-[var(--color-primary-deep)] to-[var(--color-primary-deep)] px-4 py-2 text-[11.5px] font-black text-white shadow-[0_8px_18px_rgba(26,107,74,0.28)] transition hover:brightness-105 disabled:opacity-60">
                {sending ? "Sending..." : shareModal && sentCerts[shareModal.type + "-" + shareModal.id] ? "Send Again" : "Send Email"}
              </button>
            </div>
          </section>
        </div>
      ) : null}

      <Toaster position="top-center" toastOptions={{ duration: 4000, style: { background: "#333", color: "#fff", fontSize: "14px", fontWeight: "600" } }} />
    </div>
  );
}