"use client";

import { resolveImageUrl } from "@/lib/api";

export type CertificateData = {
  type: "member" | "volunteer";
  id: number;
  certNumber: string;
  certUrl: string;
  name: string;
  orgName: string;
  orgDisplayName: string;
  issueDate: string;
  displayDate: string;
  description: string;
  settings: {
    site_name?: string;
    short_name?: string;
    tagline?: string;
    logo_url?: string;
    signature_url?: string;
    primary_color?: string;
    secondary_color?: string;
    accent_color?: string;
    address?: string;
    phone?: string;
    email?: string;
  };
};

export function CertificateDisplay({ data }: { data: CertificateData }) {
  const isMember = data.type === "member";
  const primary = isMember ? data.settings.primary_color || "#0f6b4f" : data.settings.secondary_color || "#5d6ff1";
  const accent = isMember ? data.settings.accent_color || "#d4af37" : data.settings.accent_color || "#f2c14e";
  const gradient = `linear-gradient(115deg, ${primary} 0%, ${accent} 50%, ${primary} 100%)`;
  const logoUrl = data.settings.logo_url ? resolveImageUrl(data.settings.logo_url) : "/logo2.png";
  const signatureUrl = data.settings.signature_url ? resolveImageUrl(data.settings.signature_url) : "";
  const title = isMember ? "CERTIFICATE OF MEMBERSHIP" : "CERTIFICATE OF VOLUNTEERSHIP";
  const verifyUrl = typeof window !== "undefined" ? window.location.origin : "";

  return (
    <>
      <div className="cert-print-area">
        <figure className="cert-print-page">
          <div className="cert-zoom">
            <div className="cert-doc" style={{ "--cert-primary": primary, "--cert-accent": accent } as React.CSSProperties}>
              <div className="cert-border" style={{ background: gradient }}>
                <div className="cert-inner">
                  <div className="cert-topline" style={{ background: primary }} />
                  <div className="cert-corner cert-corner-tl" style={{ borderColor: accent }} />
                  <div className="cert-corner cert-corner-tr" style={{ borderColor: accent }} />
                  <div className="cert-corner cert-corner-bl" style={{ borderColor: accent }} />
                  <div className="cert-corner cert-corner-br" style={{ borderColor: accent }} />

                  <div className="cert-logo">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img src={logoUrl} alt="" />
                  </div>

                  <p className="cert-org">{data.orgName}</p>
                  <p className="cert-est">ESTABLISHED 2020</p>

                  <div className="cert-rule">
                    <span style={{ background: gradient }} />
                    <i style={{ background: accent }} />
                    <span style={{ background: gradient }} />
                  </div>

                  <h1 className="cert-title" style={{ backgroundImage: `linear-gradient(90deg, ${primary}, ${isMember ? "#0a4d39" : "#3b4bc9"})`, WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>
                    {title}
                  </h1>

                  <p className="cert-certify">THIS IS TO CERTIFY THAT</p>
                  <p className="cert-name">{data.name}</p>
                  <div className="cert-name-rule" style={{ background: accent }} />

                  <p className="cert-line1">Has been awarded this certificate in recognition of their valuable</p>
                  <p className="cert-line2">
                    contribution and dedication towards the mission of {data.orgDisplayName}.
                  </p>
                  <p className="cert-quote">“{data.description}”</p>

                  <div className="cert-sign">
                    {signatureUrl ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img src={signatureUrl} alt="" className="cert-sig-img" />
                    ) : (
                      <div className="cert-sign-line" style={{ background: "#1a1a2e" }} />
                    )}
                    <span>AUTHORISED SIGNATORY</span>
                  </div>
                  <div className="cert-date">
                    <div className="cert-sign-line" style={{ background: "#1a1a2e" }} />
                    <span>DATE</span>
                    <strong>{data.displayDate}</strong>
                  </div>

                  <p className="cert-no">Cert. No: {data.certNumber}</p>
                  <p className="cert-verify">This is a digitally generated certificate. Verify authenticity at {verifyUrl || data.orgDisplayName}</p>
                </div>
              </div>
            </div>
          </div>
        </figure>
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        .cert-doc {
          width: 842px;
          height: 595px;
          position: relative;
        }
        .cert-print-area, .cert-print-area * {
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }
        .cert-zoom { zoom: 1.15; }

        .cert-border {
          position: absolute; inset: 0;
          border-radius: 12px;
          padding: 12px;
        }
        .cert-inner {
          position: relative;
          width: 100%; height: 100%;
          background: #fdfcf0;
          border-radius: 8px;
          border: 1px dashed var(--cert-primary);
          overflow: hidden;
        }

        .cert-corner { position: absolute; width: 36px; height: 36px; border-style: solid; border-width: 3px; }
        .cert-corner-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; border-top-left-radius: 10px; }
        .cert-corner-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; border-top-right-radius: 10px; }
        .cert-corner-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; border-bottom-left-radius: 10px; }
        .cert-corner-br { bottom: 12px; right: 12px; border-left: none; border-top: none; border-bottom-right-radius: 10px; }

        .cert-topline {
          position: absolute; top: 43px; left: 200px; right: 200px; height: 0.5px;
        }

        .cert-logo {
          position: absolute; top: 48px; left: 50%;
          transform: translateX(-50%);
          width: 50px; height: 50px; border-radius: 8px; overflow: hidden;
          background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,0.12);
        }
        .cert-logo img { width: 100%; height: 100%; object-fit: contain; }

        .cert-org {
          position: absolute; top: 118px; left: 0; right: 0;
          text-align: center;
          font-family: Georgia, 'Times New Roman', serif;
          font-weight: 700; font-size: 18px;
          letter-spacing: 3px; color: var(--cert-primary);
          margin: 0; padding: 0 80px;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .cert-est {
          position: absolute; top: 143px; left: 0; right: 0;
          text-align: center;
          font-family: Georgia, 'Times New Roman', serif;
          font-size: 11px; letter-spacing: 5px; color: #667085;
          margin: 0;
        }

        .cert-rule {
          position: absolute; top: 160px; left: 0; right: 0;
          display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .cert-rule span { display: block; width: 120px; height: 1.5px; }
        .cert-rule i { display: block; width: 6px; height: 6px; border-radius: 50%; }

        .cert-title {
          position: absolute; top: 185px; left: 0; right: 0;
          margin: 0; text-align: center;
          font-family: Georgia, 'Times New Roman', serif;
          font-size: 32px; font-weight: 700; letter-spacing: 2px;
          color: transparent; -webkit-text-fill-color: transparent;
          -webkit-background-clip: text; background-clip: text;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
          padding: 0 40px;
        }

        .cert-certify {
          position: absolute; top: 246px; left: 0; right: 0;
          margin: 0; text-align: center;
          font-family: Georgia, 'Times New Roman', serif;
          font-size: 14px; letter-spacing: 1px; color: #667085;
        }

        .cert-name {
          position: absolute; top: 282px; left: 0; right: 0;
          margin: 0; text-align: center;
          font-family: Georgia, 'Times New Roman', serif;
          font-weight: 700; font-size: 40px; letter-spacing: 2px; color: #1a1a2e;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
          padding: 0 60px;
        }
        .cert-name-rule {
          position: absolute; top: 330px; left: 50%;
          transform: translateX(-50%);
          width: 360px; height: 0.8px;
        }

        .cert-line1, .cert-line2 {
          position: absolute; left: 0; right: 0;
          margin: 0; text-align: center;
          font-family: Georgia, 'Times New Roman', serif;
          font-size: 13px; color: #344054;
        }
        .cert-line1 { top: 355px; }
        .cert-line2 { top: 377px; }
        .cert-quote {
          position: absolute; top: 420px; left: 0; right: 0;
          margin: 0; text-align: center;
          font-family: Georgia, 'Times New Roman', serif;
          font-style: italic; font-size: 12px; color: #667085;
          padding: 0 60px;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

        .cert-sign, .cert-date {
          position: absolute; top: 460px;
          width: 200px; text-align: center;
        }
        .cert-sign { left: 50%; transform: translateX(-50%) translateX(-150px); }
        .cert-date { left: 50%; transform: translateX(-50%) translateX(150px); }
        .cert-sign-line { height: 0.8px; background: #1a1a2e; }
        .cert-sig-img {
          height: 42px; width: 150px; object-fit: contain; object-position: center;
          margin: 0 auto; display: block;
        }
        .cert-sign span, .cert-date span {
          display: block; margin-top: 8px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 10px; letter-spacing: 0.05em; color: #667085;
        }
        .cert-date strong {
          display: block; margin-top: 4px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 11px; font-weight: 600; color: #1a1a2e;
        }

        .cert-no {
          position: absolute; right: 110px; bottom: 40px;
          margin: 0;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 8px; color: #98a2b3;
        }
        .cert-verify {
          position: absolute; left: 50%; bottom: 40px;
          transform: translateX(-50%);
          margin: 0; width: max-content; max-width: 90%;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 8px; color: #98a2b3;
          text-align: center;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }

        .cert-print-area { display: flex; flex-direction: column; align-items: center; gap: 44px; }
        .cert-print-page { display: flex; flex-direction: column; align-items: center; margin: 0; }

        @media print {
          @page { size: A4 landscape; margin: 0; }
          html, body { background: #ffffff !important; margin: 0; padding: 0; }
          body * { visibility: hidden; }
          .cert-print-area, .cert-print-area * { visibility: visible; }
          .cert-page {
            position: relative;
            height: 100vh;
            overflow: hidden;
            margin: 0 !important;
            padding: 0 !important;
          }
          .cert-page main,
          .cert-page main > div {
            margin: 0 !important;
            padding: 0 !important;
            position: static !important;
            overflow: visible !important;
          }
          .cert-print-area {
            position: absolute;
            inset: 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            margin: 0; padding: 0;
          }
          .cert-print-page {
            display: flex; align-items: center; justify-content: center;
            margin: 0; padding: 0;
            page-break-inside: avoid; break-inside: avoid;
          }
          .cert-zoom { zoom: 1; }
          .cert-doc { box-shadow: none; }
          .no-print { display: none !important; }
        }
      `}} />
    </>
  );
}