// ═══════════════════════════════════════════════════════════════
//  document.jsx — the invoice sheet (4 styles) + standalone export
//  One markup builder feeds both the live preview and the export.
// ═══════════════════════════════════════════════════════════════

// ─── Document i18n ───
const DL = {
  original:  { bg: "ОРИГИНАЛ", en: "ORIGINAL" },
  num:       { bg: "№", en: "No." },
  issue:     { bg: "Дата на издаване", en: "Issue date" },
  supply:    { bg: "Дата на данъчно събитие", en: "Date of supply" },
  due:       { bg: "Срок за плащане", en: "Due date" },
  supplier:  { bg: "ДОСТАВЧИК", en: "SUPPLIER" },
  recipient: { bg: "ПОЛУЧАТЕЛ", en: "RECIPIENT" },
  eik:       { bg: "ЕИК", en: "Company No." },
  vat:       { bg: "ИН по ДДС", en: "VAT No." },
  mol:       { bg: "МОЛ", en: "Contact" },
  cNo:       { bg: "№", en: "#" },
  desc:      { bg: "Описание", en: "Description" },
  qty:       { bg: "Кол.", en: "Qty" },
  unit:      { bg: "Мярка", en: "Unit" },
  price:     { bg: "Ед. цена", en: "Unit price" },
  disc:      { bg: "Отстъпка", en: "Disc." },
  vatP:      { bg: "ДДС", en: "VAT" },
  amount:    { bg: "Стойност", en: "Amount" },
  base:      { bg: "Данъчна основа", en: "Tax base" },
  vatAmt:    { bg: "ДДС", en: "VAT" },
  total:     { bg: "Сума за плащане", en: "Total due" },
  words:     { bg: "Словом", en: "In words" },
  ground:    { bg: "Основание за неначисляване на ДДС", en: "Grounds for VAT exemption" },
  pay:       { bg: "Начин на плащане", en: "Payment method" },
  bank:      { bg: "Банка", en: "Bank" },
  iban:      { bg: "IBAN", en: "IBAN" },
  bic:       { bg: "BIC/SWIFT", en: "BIC/SWIFT" },
  received:  { bg: "Получил", en: "Received by" },
  issued:    { bg: "Съставил", en: "Issued by" },
  rate:      { bg: "Курс", en: "Rate" },
  ref:       { bg: "Към документ", en: "Re: document" },
  refDate:   { bg: "от", en: "dated" },
};

// ─── Style tokens per design variant ───
function tokens(style) {
  const base = {
    studio:  { sheet: "#F4F1EA", ink: "#0B1F2A", accent: "#2D5BFF", sub: "#5E6B72", faint: "#97A0A5",
               line: "rgba(11,31,42,0.16)", soft: "rgba(11,31,42,0.045)", band: false, gridded: false,
               totalBg: "#0B1F2A", totalInk: "#F4F1EA", radius: 6 },
    minimal: { sheet: "#FFFFFF", ink: "#16181B", accent: "#16181B", sub: "#6A7075", faint: "#A6ACB0",
               line: "rgba(0,0,0,0.12)", soft: "rgba(0,0,0,0.025)", band: false, gridded: false,
               totalBg: "transparent", totalInk: "#16181B", radius: 0 },
    ledger:  { sheet: "#FFFFFF", ink: "#0B1F2A", accent: "#3B5F49", sub: "#5E6B72", faint: "#97A0A5",
               line: "rgba(11,31,42,0.30)", soft: "rgba(123,170,138,0.10)", band: false, gridded: true,
               totalBg: "#3B5F49", totalInk: "#FFFFFF", radius: 0 },
    band:    { sheet: "#FFFFFF", ink: "#0B1F2A", accent: "#2D5BFF", sub: "#5E6B72", faint: "#97A0A5",
               line: "rgba(11,31,42,0.14)", soft: "rgba(11,31,42,0.04)", band: true, gridded: false,
               totalBg: "#0B1F2A", totalInk: "#F4F1EA", radius: 6 },
  };
  return base[style] || base.studio;
}

// bracket mark as inline SVG string
function markSVG(size, color, accent) {
  return `<svg width="${size}" height="${size}" viewBox="0 0 64 64" fill="none" style="display:block">
    <path d="M22 14 H 14 V 50 H 22" stroke="${color}" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M28 22 L 42 32 L 28 42" stroke="${accent}" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>`;
}

// ═══════════════════════════════════════════════════════════════
//  invoiceInner — returns the inner HTML of the sheet (shared)
// ═══════════════════════════════════════════════════════════════
function invoiceInner(d, lang, style) {
  const T = tokens(style);
  const L = (k) => lang === "en" ? DL[k].en : (lang === "both" ? `${DL[k].bg} / ${DL[k].en}` : DL[k].bg);
  // bilingual value: prefer field per lang, "both" joins if different
  const gv = (o, f) => {
    if (!o) return "";
    const bg = o[f] || "", en = o[f + "En"] || o[f] || "";
    if (lang === "en") return en;
    if (lang === "both") return en && en !== bg ? `${bg} / ${en}` : bg;
    return bg;
  };
  const dt = DOC_TYPES.find(x => x.v === d.docType) || DOC_TYPES[0];
  const title = lang === "en" ? dt.en : (lang === "both" ? `${dt.bg} / ${dt.en}` : dt.bg);

  const cur = d.currency;
  const groundActive = !!d.groundText;
  const calcs = d.items.map(it => lineCalc(it, groundActive, d.defaultVat));
  const base = calcs.reduce((s, c) => s + c.net, 0);
  const vat = calcs.reduce((s, c) => s + c.vat, 0);
  const total = base + vat;
  const hasDisc = calcs.some(c => c.disc > 0);

  // currency cell — primary + peg underneath
  const dual = (v) => {
    const peg = pegOf(v, cur);
    const primary = `<span class="m">${money(v, cur)}</span>`;
    if (!peg) return primary;
    return `${primary}<span class="peg">${money(peg.value, peg.code)}</span>`;
  };

  // — table rows —
  const rows = d.items.map((it, i) => {
    const c = calcs[i];
    const descMain = gv(it, "desc") || "—";
    const unit = lang === "en" ? (it.unitEn || it.unit) : it.unit;
    const discCell = hasDisc
      ? (c.disc > 0 ? `<td class="r m" style="color:${T.accent}">−${fmtNum(c.disc)}</td>` : `<td class="r" style="color:${T.faint}">—</td>`)
      : "";
    return `<tr>
      <td class="c" style="color:${T.faint};width:30px">${i + 1}</td>
      <td>${descMain}</td>
      <td class="c m" style="width:52px">${fmtNum(it.qty).replace(/\.00$/, "")}</td>
      <td class="c" style="width:60px">${unit}</td>
      <td class="r m" style="width:84px">${fmtNum(it.price)}</td>
      ${discCell}
      <td class="c m" style="width:46px">${c.rate}%</td>
      <td class="r m" style="width:92px;font-weight:600">${fmtNum(c.net)}</td>
    </tr>`;
  }).join("");

  const colCount = 7 + (hasDisc ? 1 : 0);

  // — header block (band vs plain) —
  const datesHTML = `
    <div class="dates">
      <div><span>${L("issue")}</span><b class="m">${fmtDate(d.issueDate)}</b></div>
      <div><span>${L("supply")}</span><b class="m">${fmtDate(d.supplyDate)}</b></div>
      ${d.dueDate ? `<div><span>${L("due")}</span><b class="m">${fmtDate(d.dueDate)}</b></div>` : ""}
    </div>`;

  const refHTML = (d.docType === "credit" || d.docType === "debit") && d.refNum
    ? `<div class="ref">${L("ref")} ${L("num")} <b class="m">${d.refNum}</b>${d.refDate ? ` ${L("refDate")} ${fmtDate(d.refDate)}` : ""}</div>` : "";

  let header;
  if (T.band) {
    header = `<div class="band">
      <div class="band-l">${markSVG(34, "#fff", T.accent)}
        <div class="wm">shortcut<span style="opacity:.45">/</span>studio</div></div>
      <div class="band-r">
        <div class="title">${title}</div>
        <div class="orig">${L("original")} · ${L("num")} <b class="m">${d.num}</b></div>
      </div>
    </div>
    <div class="meta-row">${datesHTML}${refHTML}</div>`;
  } else {
    header = `<div class="head">
      <div class="head-l">
        ${markSVG(30, T.ink, T.accent)}
        <div>
          <div class="wm">shortcut<span style="opacity:.45">/</span>studio</div>
          <div class="title">${title}</div>
          <div class="orig">${L("original")}</div>
        </div>
      </div>
      <div class="head-r">
        <div class="num-k">${L("num")}</div>
        <div class="num m">${d.num}</div>
        ${datesHTML}${refHTML}
      </div>
    </div>`;
  }

  // — parties —
  const party = (who, o) => `<div class="party">
    <div class="party-k">${who}</div>
    <div class="party-name">${gv(o, "name") || "—"}</div>
    <div class="party-lines">
      ${gv(o, "address") ? `<div>${gv(o, "address")}</div>` : ""}
      ${o.eik ? `<div>${L("eik")}: <span class="m">${o.eik}</span></div>` : ""}
      ${o.vatId ? `<div>${L("vat")}: <span class="m">${o.vatId}</span></div>` : ""}
      ${gv(o, "mol") ? `<div>${L("mol")}: ${gv(o, "mol")}</div>` : ""}
    </div>
  </div>`;

  // — totals —
  const rateNote = (cur === "EUR" || cur === "BGN")
    ? `<div class="rate">${L("rate")}: 1 EUR = ${BGN_PER_EUR} BGN</div>` : "";

  const totals = `<div class="totals">
    <div class="tline"><span>${L("base")}</span><div class="tval">${dual(base)}</div></div>
    <div class="tline"><span>${L("vatAmt")}${vat > 0 || !groundActive ? ` (${d.defaultVat}%)` : ""}</span><div class="tval">${dual(vat)}</div></div>
    <div class="tgrand"><span>${L("total")}</span><div class="tval">${dual(total)}</div></div>
    ${rateNote}
  </div>`;

  const wordsHTML = `<div class="words"><span>${L("words")}:</span> ${amountWords(total, cur, lang === "en" ? "en" : "bg")}</div>`;

  const groundHTML = d.groundText
    ? `<div class="ground"><b>${L("ground")}:</b> ${d.groundText}</div>` : "";

  // — footer: payment + signatures —
  const payLabel = (() => {
    const p = PAY_METHODS.find(x => x.v === d.payMethod);
    return p ? (lang === "en" ? p.en : p.bg) : d.payMethod;
  })();
  const bankName = lang === "en" ? (d.company.bankEn || d.company.bank) : d.company.bank;

  const footer = `<div class="foot">
    <div class="pay">
      <div class="party-k">${L("pay")}</div>
      <div class="pay-line"><b>${payLabel}</b></div>
      ${d.company.bank ? `<div class="pay-line">${L("bank")}: ${bankName}</div>` : ""}
      ${d.company.iban ? `<div class="pay-line m">${L("iban")}: ${d.company.iban}</div>` : ""}
      ${d.company.bic ? `<div class="pay-line m">${L("bic")}: ${d.company.bic}</div>` : ""}
      ${d.notes ? `<div class="notes">${d.notes.replace(/</g, "&lt;").replace(/\n/g, "<br>")}</div>` : ""}
    </div>
    <div class="sign">
      <div class="sig"><div class="sig-line"></div><span>${L("received")}</span></div>
      <div class="sig"><div class="sig-line"></div><span>${L("issued")}: ${gv(d.company, "mol")}</span></div>
    </div>
  </div>`;

  return `${header}
  <div class="parties">${party(L("supplier"), d.company)}${party(L("recipient"), d.client)}</div>
  <table class="items"><thead><tr>
    <th class="c">${L("cNo")}</th>
    <th>${L("desc")}</th>
    <th class="c">${L("qty")}</th>
    <th class="c">${L("unit")}</th>
    <th class="r">${L("price")}</th>
    ${hasDisc ? `<th class="r">${L("disc")}</th>` : ""}
    <th class="c">${L("vatP")}</th>
    <th class="r">${L("amount")}</th>
  </tr></thead><tbody>${rows}</tbody></table>
  <div class="below">
    <div class="below-l">${wordsHTML}${groundHTML}</div>
    ${totals}
  </div>
  ${footer}`;
}

// ═══════════════════════════════════════════════════════════════
//  Sheet CSS (shared by preview + export). Scoped under .sheet.
// ═══════════════════════════════════════════════════════════════
function sheetCSS(style) {
  const T = tokens(style);
  return `
  .sheet { width:794px; min-height:1123px; background:${T.sheet}; color:${T.ink};
    font-family:${MONO}; font-size:12.5px; line-height:1.5; padding:54px 56px 46px;
    box-sizing:border-box; position:relative; display:flex; flex-direction:column;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .sheet .m { font-variant-numeric:tabular-nums; letter-spacing:0; }
  .sheet .c { text-align:center; } .sheet .r { text-align:right; }

  /* header — plain */
  .sheet .head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:30px; }
  .sheet .head-l { display:flex; gap:14px; align-items:flex-start; }
  .sheet .wm { font-size:15px; font-weight:600; letter-spacing:-0.02em; }
  .sheet .head-l .title { font-size:23px; font-weight:600; letter-spacing:-0.02em; margin-top:7px; color:${T.accent}; }
  .sheet .orig { font-size:9px; letter-spacing:0.18em; color:${T.faint}; margin-top:3px; }
  .sheet .head-r { text-align:right; }
  .sheet .num-k { font-size:9px; letter-spacing:0.14em; color:${T.faint}; text-transform:uppercase; }
  .sheet .num { font-size:21px; font-weight:700; letter-spacing:0.02em; }
  .sheet .dates { margin-top:12px; display:flex; flex-direction:column; gap:3px; font-size:10.5px; }
  .sheet .dates > div { display:flex; justify-content:flex-end; gap:8px; }
  .sheet .dates span { color:${T.sub}; }
  .sheet .ref { margin-top:7px; font-size:10px; color:${T.sub}; }

  /* header — band */
  .sheet .band { display:flex; justify-content:space-between; align-items:center;
    background:${T.ink}; color:#fff; margin:-54px -56px 0; padding:30px 56px; }
  .sheet .band-l { display:flex; gap:13px; align-items:center; }
  .sheet .band .wm { font-size:18px; color:#fff; }
  .sheet .band-r { text-align:right; }
  .sheet .band .title { font-size:24px; font-weight:600; letter-spacing:-0.02em; }
  .sheet .band .orig { font-size:10px; letter-spacing:0.1em; color:rgba(255,255,255,0.6); margin-top:4px; }
  .sheet .meta-row { display:flex; justify-content:flex-end; padding:16px 0 4px; margin-bottom:18px; border-bottom:1px solid ${T.line}; }
  .sheet .meta-row .dates { margin-top:0; }

  /* parties */
  .sheet .parties { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px; }
  .sheet .party { padding:16px 18px; background:${T.soft}; border-radius:${T.radius}px;
    ${T.gridded ? `border:1px solid ${T.line};` : ""} }
  .sheet .party-k { font-size:9px; font-weight:600; letter-spacing:0.14em; color:${T.accent}; margin-bottom:7px; }
  .sheet .party-name { font-size:14px; font-weight:600; letter-spacing:-0.01em; margin-bottom:6px; }
  .sheet .party-lines { font-size:11px; color:${T.sub}; line-height:1.65; }

  /* items */
  .sheet table.items { width:100%; border-collapse:collapse; margin-bottom:18px; }
  .sheet table.items th { font-size:9px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    color:${T.accent}; padding:0 8px 8px; text-align:left; border-bottom:1.5px solid ${T.accent}; }
  .sheet table.items th.c { text-align:center; } .sheet table.items th.r { text-align:right; }
  .sheet table.items td { padding:9px 8px; font-size:11.5px; border-bottom:1px solid ${T.line};
    ${T.gridded ? `border-right:1px solid ${T.line};` : ""} vertical-align:top; }
  ${T.gridded ? `.sheet table.items td:first-child, .sheet table.items th:first-child { border-left:1px solid ${T.line}; }
    .sheet table.items th { border-top:1px solid ${T.line}; }` : ""}

  /* below: words/ground + totals */
  .sheet .below { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; margin-bottom:20px; }
  .sheet .below-l { flex:1; padding-top:4px; }
  .sheet .words { font-size:11px; color:${T.sub}; font-style:italic; margin-bottom:10px; }
  .sheet .words span { font-style:normal; font-weight:600; color:${T.ink}; }
  .sheet .ground { font-size:10.5px; color:${T.sub}; padding:9px 12px; background:${T.soft};
    border-left:2px solid ${T.accent}; border-radius:3px; max-width:340px; }
  .sheet .totals { width:280px; flex-shrink:0; }
  .sheet .tline { display:flex; justify-content:space-between; align-items:flex-start; padding:7px 2px;
    border-bottom:1px solid ${T.line}; font-size:11.5px; }
  .sheet .tline span { color:${T.sub}; padding-top:1px; }
  .sheet .tval { text-align:right; }
  .sheet .tval .m { display:block; font-weight:600; font-size:13px; }
  .sheet .tval .peg { display:block; font-size:10px; color:${T.faint}; margin-top:1px; font-variant-numeric:tabular-nums; }
  .sheet .tgrand { display:flex; justify-content:space-between; align-items:flex-start; margin-top:9px;
    padding:13px 16px; background:${T.totalBg}; color:${T.totalInk}; border-radius:${T.radius}px;
    ${style === "minimal" ? `border-top:2px solid ${T.ink}; border-radius:0; padding:13px 2px;` : ""} }
  .sheet .tgrand span { font-weight:600; font-size:13px; padding-top:2px; ${style === "minimal" ? "" : `color:${T.totalInk}`}; }
  .sheet .tgrand .tval .m { font-size:17px; font-weight:700; ${style === "minimal" ? "" : `color:${T.totalInk}`}; }
  .sheet .tgrand .tval .peg { ${style === "minimal" ? `color:${T.faint}` : "color:rgba(255,255,255,0.6)"}; font-size:11px; }
  .sheet .rate { text-align:right; font-size:9.5px; color:${T.faint}; margin-top:7px; letter-spacing:0.02em; }

  /* footer */
  .sheet .foot { display:grid; grid-template-columns:1.4fr 1fr; gap:30px; margin-top:auto;
    padding-top:18px; border-top:1px solid ${T.line}; }
  .sheet .pay-line { font-size:11px; color:${T.sub}; margin-top:2px; }
  .sheet .pay-line b, .sheet .pay-line:first-of-type { color:${T.ink}; }
  .sheet .notes { margin-top:9px; font-size:10.5px; color:${T.sub}; line-height:1.55;
    padding-top:8px; border-top:1px dashed ${T.line}; }
  .sheet .sign { display:flex; flex-direction:column; justify-content:flex-end; gap:16px; }
  .sheet .sig { font-size:10px; color:${T.sub}; }
  .sheet .sig-line { height:30px; border-bottom:1px solid ${T.lineStrong || T.line}; margin-bottom:6px; }
  `;
}

// ═══════════════════════════════════════════════════════════════
//  React preview component (scales to fit its container width)
// ═══════════════════════════════════════════════════════════════
function InvoiceDoc({ d, lang, style, scale }) {
  const css = React.useMemo(() => sheetCSS(style), [style]);
  const inner = React.useMemo(() => invoiceInner(d, lang, style), [d, lang, style]);
  return (
    <div style={{ width: 794 * scale, height: 1123 * scale, overflow: "hidden", flexShrink: 0 }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: "top left" }}>
        <style>{css}</style>
        <div className="sheet" style={{ boxShadow: "0 1px 3px rgba(0,0,0,0.08), 0 18px 50px rgba(0,0,0,0.13)" }}
          dangerouslySetInnerHTML={{ __html: inner }} />
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
//  Standalone HTML export (print-ready A4)
// ═══════════════════════════════════════════════════════════════
function buildInvoiceHTML(d, lang, style) {
  const dt = DOC_TYPES.find(x => x.v === d.docType) || DOC_TYPES[0];
  const fname = `${dt.bg} ${d.num}`;
  const T = tokens(style);
  return `<!doctype html><html lang="${lang === "en" ? "en" : "bg"}"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>${fname} — shortcut/studio</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{background:#e9e6df;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{display:flex;justify-content:center;padding:24px;font-family:${MONO}}
  ${sheetCSS(style)}
  .sheet{box-shadow:0 1px 3px rgba(0,0,0,.08),0 18px 50px rgba(0,0,0,.13)}
  @media print{
    html,body{background:${T.sheet};padding:0;margin:0}
    .sheet{box-shadow:none;width:210mm;min-height:296mm;margin:0 auto}
    @page{size:A4;margin:0}
  }
</style></head><body>
<div class="sheet">${invoiceInner(d, lang, style)}</div>
</body></html>`;
}

Object.assign(window, { invoiceInner, sheetCSS, InvoiceDoc, buildInvoiceHTML });