import { formatDate, formatTime, type Locale } from "@/lib/utils";
import { brandFooter, esc, instLogoChip, themeShades, type InstBranding } from "@/lib/print";

/* Exam admit card builder — same HTML the institution portal prints
   (Certificates → Admit Card), reused for the student-facing print so the
   designs can never drift apart. */

export type AdmitVariant = "minimal" | "detailed";

export interface AdmitCardExam {
  name: string;
  className: string | null;
  sectionName: string | null;
  startDate: string;
  endDate: string | null;
}

export interface AdmitCardPaper {
  subjectName: string | null;
  subjectNameBn: string | null;
  date: string;
  startTime: string;
  endTime: string;
  roomName: string | null;
  roomNameBn: string | null;
  fullMarks: number;
  totalPassMarks: number | null;
}

export interface AdmitCardStudent {
  id: number;
  roll: string;
  name: string;
  nameBn: string | null;
  /** profile photo shown on the card (may be null) */
  photoUrl?: string | null;
  /** formatted verification code printed under the QR (EMS-XXXX-XXXX) */
  verifyCode?: string | null;
}

export interface AdmitCardLabels {
  admitCard: string;
  variantMinimal: string;
  variantDetailed: string;
  fRoll: string;
  fName: string;
  /** dashed placeholder caption when no photo exists */
  fPhoto: string;
  fClass: string;
  fSection: string;
  fId: string;
  dateLabel: string;
  subjectLabel: string;
  timeLabel: string;
  roomLabel: string;
  marksLabel: string;
  instructions: string;
  ins1: string;
  ins2: string;
  ins3: string;
  signature: string;
  /** caption under the QR code */
  verifyScan: string;
}

export interface AdmitCardOptions {
  inst: InstBranding | null;
  exam: AdmitCardExam | null;
  papers: AdmitCardPaper[];
  student: AdmitCardStudent;
  variant: AdmitVariant;
  primary?: string;
  /** data-URL of the verification QR (scannable → /verify) — optional */
  qrDataUrl?: string | null;
  labels: AdmitCardLabels;
  locale: Locale;
  poweredBy: string;
}

/** Build one admit card (same layout as the portal print). */
export function admitCardHtml(o: AdmitCardOptions): string {
  const { inst, exam, papers, student: st, variant, labels: L, locale, poweredBy } = o;
  if (!exam || !inst) return "";
  const primary = o.primary ?? "#24695c";
  const { dark, tint } = themeShades(primary, "#c9a227");
  const subj = (p: AdmitCardPaper) => (locale === "bn" && p.subjectNameBn ? p.subjectNameBn : p.subjectName ?? "—");
  const nm = locale === "bn" && st.nameBn ? st.nameBn : st.name;
  const paperRow = (p: AdmitCardPaper) => `<tr>
      <td style="border:1px solid #d9e1ec;padding:5px 9px">${esc(subj(p))}</td>
      <td style="border:1px solid #d9e1ec;padding:5px 9px">${formatDate(p.date, locale)}</td>
      <td style="border:1px solid #d9e1ec;padding:5px 9px">${formatTime(p.startTime, locale)} – ${formatTime(p.endTime, locale)}</td>
      <td style="border:1px solid #d9e1ec;padding:5px 9px">${esc(locale === "bn" && p.roomNameBn ? p.roomNameBn : p.roomName ?? "—")}</td>
      ${variant === "detailed" ? `<td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center">${p.fullMarks}${p.totalPassMarks != null ? ` / ${p.totalPassMarks}` : ""}</td>` : ""}
    </tr>`;
  const info = (k: string, v: string) => `<div style="flex:1"><p style="margin:0;font-size:10.5px;color:#718096">${esc(k)}</p><p style="margin:0;font-size:13px;font-weight:700">${esc(v) || "—"}</p></div>`;
  const photo = st.photoUrl
    ? `<img src="${esc(st.photoUrl)}" alt="" style="width:64px;height:78px;object-fit:cover;border-radius:6px;border:2px solid ${primary}55;background:#fff"/>`
    : `<div style="width:64px;height:78px;border:1.5px dashed #b9c6c2;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9.5px;color:#8b99a6">${esc(L.fPhoto)}</div>`;
  const qrBlock = o.qrDataUrl
    ? `<div style="flex:0 0 auto;text-align:center">
        <img src="${esc(o.qrDataUrl)}" alt="" style="width:84px;height:84px;display:block;margin:0 auto"/>
        <p style="margin:3px 0 0;font-size:9.5px;font-weight:700;letter-spacing:.4px;color:${dark}">${esc(o.student.verifyCode ?? "")}</p>
        <p style="margin:1px 0 0;font-size:8.5px;color:#718096">${esc(L.verifyScan)}</p>
      </div>`
    : "";
  return `
<div class="doc" style="border:2px solid ${primary};border-radius:10px;overflow:hidden">
  <div style="background:${tint};border-bottom:2px solid ${primary};padding:12px 22px;display:flex;align-items:center;gap:12px">
    ${instLogoChip(inst.logo, 44)}
    <div>
      <p style="margin:0;font-size:17px;font-weight:700;color:${dark}">${esc(inst.name)}</p>
      <p style="margin:0;font-size:11px;color:#5b6b79">${esc(inst.address)} · ${esc(inst.phone)}</p>
    </div>
    <span style="margin-left:auto;text-align:right">
      <span style="display:block;font-size:12px;font-weight:700;color:${dark}">${esc(L.admitCard)}</span>
      <span style="display:block;font-size:10px;color:${primary}">${variant === "detailed" ? esc(L.variantDetailed) : esc(L.variantMinimal)}</span>
    </span>
  </div>
  <div style="padding:16px 22px">
    <p style="margin:0 0 10px;font-size:15px;font-weight:700;color:${primary}">${esc(exam.name)}${exam.className ? ` — ${esc(exam.className)}` : ""}${exam.sectionName ? ` · ${esc(exam.sectionName)}` : ""}</p>
    <div style="display:flex;gap:14px;border:1px solid #e6edef;border-radius:10px;padding:12px 14px;background:#fafcfd;align-items:center">
      ${photo}
      <div style="flex:1;display:flex;flex-wrap:wrap;gap:12px 18px;min-width:0">
        ${info(L.fRoll, st.roll)}
        ${info(L.fName, nm)}
        ${info(L.fClass, exam.className ?? "")}
        ${info(L.fSection, exam.sectionName ?? "")}
        ${info(L.fId, String(st.id))}
      </div>
      ${qrBlock}
    </div>
    <p style="margin:12px 0 6px;font-size:12px"><b>${esc(L.dateLabel)}:</b> ${formatDate(exam.startDate, locale)}${exam.endDate ? ` → ${formatDate(exam.endDate, locale)}` : ""}</p>
    ${variant === "detailed" ? `
    <table style="width:100%;font-size:11.5px;margin-top:8px">
      <thead><tr style="background:${tint}">
        <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(L.subjectLabel)}</th>
        <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(L.dateLabel)}</th>
        <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(L.timeLabel)}</th>
        <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(L.roomLabel)}</th>
        <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(L.marksLabel)}</th>
      </tr></thead>
      <tbody>${papers.map(paperRow).join("")}</tbody>
    </table>
    <div style="margin-top:10px;font-size:10.5px;color:#718096;border:1px dashed #c3d4cf;border-radius:8px;padding:8px 12px">
      <b>${esc(L.instructions)}:</b>
      <ol style="margin:4px 0 0;padding-left:18px">
        <li>${esc(L.ins1)}</li><li>${esc(L.ins2)}</li><li>${esc(L.ins3)}</li>
      </ol>
    </div>` : ""}
    <div style="display:flex;justify-content:space-between;margin-top:22px;font-size:11px;color:#718096">
      <span>${esc(L.signature)} (Student): ____________________</span>
      <span>${esc(L.signature)} (Invigilator): ____________________</span>
    </div>
  </div>
  ${brandFooter(poweredBy)}
</div>`;
}