/* doc-paper.jsx — formal printable document (GRN note / Payment Voucher) for evidence + email. */

function SignBlock({ label, name, signed, drawn }) {
  return (
    <div className="pp-sign">
      <div className="pp-sign-mark">
        {drawn
          ? <img src={drawn} alt="" />
          : signed
            ? <span className="pp-script">{signed}</span>
            : <span className="pp-sign-empty">…………………</span>}
      </div>
      <div className="pp-sign-line"></div>
      <div className="pp-sign-label">{label}</div>
      {name && <div className="pp-sign-name">{name}</div>}
    </div>
  );
}

function DocPaper({ doc, company, lang, approverSigned }) {
  const isFGR = doc.type === "FGR";
  const isSelfService = !isFGR && doc.evidenceMode === "selfservice";
  const rows = isFGR ? (doc.items || doc.lines || []) : (doc.lines || []);
  const creator = (window.__data && window.__data.users.find((u) => u.id === doc.creatorId)) || null;
  const total = doc.total != null ? doc.total : rows.reduce((s, r) => s + (parseFloat(r.gross) || 0), 0);
  const whtTotal = doc.whtTotal != null ? doc.whtTotal : rows.reduce((s, r) => s + (r.wht && r.wht.deduct ? r.wht.amount : 0), 0);
  const net = isFGR ? total : (doc.netTotal != null ? doc.netTotal : total - whtTotal);
  const headerKey = isFGR ? "grnHeader" : isSelfService ? "opClaimHeader" : "opexHeader";
  const showCert = isFGR || isSelfService;
  const showSeller = !isFGR && !isSelfService;

  return (
    <div className="paper">
      <div className="pp-head">
        <div className="pp-title">{window.t(lang, headerKey)}</div>
        <div className="pp-no mono">{doc.no}</div>
      </div>
      <div className="pp-meta">
        <div className="pp-co">
          <div className="pp-co-name">{company.name}</div>
          <div className="pp-co-line">{company.address}</div>
          <div className="pp-co-line mono">TAX ID {company.taxId}</div>
          <div className="pp-co-line mono">{window.t(lang, "branch")} {company.branchCode ? company.branchCode + " · " : ""}{company.branch}</div>
        </div>
        <div className="pp-date">
          <span className="pp-k">{window.t(lang, "issueDate")}</span>
          <span className="num">{window.fmtDate(doc.date)}</span>
        </div>
      </div>

      <div className="pp-rows">
        <div className={`pp-row pp-row-h ${isFGR ? "fgr" : isSelfService ? "simple" : "opx"}`}>
          <span>#</span>
          <span>{window.t(lang, isFGR ? "itemDesc" : "expenseDesc")}</span>
          {isFGR ? <React.Fragment><span className="r">{window.t(lang, "weight")}</span><span className="r">{window.t(lang, "grossPrice")}</span><span className="r">/{window.t(lang, "unit")}</span></React.Fragment>
            : isSelfService ? <span className="r">{window.t(lang, "grossPrice")}</span>
            : <React.Fragment><span className="r">{window.t(lang, "grossPrice")}</span><span className="r">WHT</span><span className="r">{window.t(lang, "netPay")}</span></React.Fragment>}
        </div>
        {rows.map((r, i) => (
          <div className={`pp-row ${isFGR ? "fgr" : isSelfService ? "simple" : "opx"}`} key={i}>
            <span className="mono pp-ix">{i + 1}</span>
            <span className="pp-desc">{r.desc}{r.qty ? <em> · {r.qty}</em> : null}{r.photo && <img className="pp-line-photo" src={r.photo.dataUrl} alt="" />}</span>
            {isFGR ? (
              <React.Fragment>
                <span className="r num">{r.weight} {(r.unit || "").split("/")[0].trim()}</span>
                <span className="r num">{window.fmtMoney(r.gross)}</span>
                <span className="r num">{r.pricePerUnit != null ? window.fmtMoney(r.pricePerUnit) : (r.weight ? window.fmtMoney(r.gross / r.weight) : "—")}</span>
              </React.Fragment>
            ) : isSelfService ? (
              <span className="r num">{window.fmtMoney(r.gross)}</span>
            ) : (
              <React.Fragment>
                <span className="r num">{window.fmtMoney(r.gross)}</span>
                <span className="r num">{r.wht && r.wht.deduct ? `${r.wht.rate}%` : "—"}</span>
                <span className="r num">{window.fmtMoney(r.wht && r.wht.deduct ? r.gross - r.wht.amount : r.gross)}</span>
              </React.Fragment>
            )}
          </div>
        ))}
      </div>

      <div className="pp-totals">
        {!isFGR && whtTotal > 0 && (
          <React.Fragment>
            <div className="pp-tl"><span>{window.t(lang, "total")}</span><span className="num">฿{window.fmtMoney(total)}</span></div>
            <div className="pp-tl"><span>{window.t(lang, "whtAmount")}</span><span className="num">− ฿{window.fmtMoney(whtTotal)}</span></div>
          </React.Fragment>
        )}
        <div className="pp-tl pp-grand"><span>{window.t(lang, "grandTotal")}</span><span className="num">฿{window.fmtMoney(net)}</span></div>
      </div>

      {showCert && (
        <p className="pp-cert">
          {window.t(lang, "certification", { company: company.name.split("·")[0].trim() })}
        </p>
      )}

      {/* evidence photos — supplier OPEX (seller ID + work photo). GRN item photos show inline per line. */}
      {(doc.sellerId || doc.workPhoto) && (
        <div className="pp-photos">
          <div className="pp-sec">{window.t(lang, "photoEvidence")}</div>
          <div className="pp-photo-grid">
            {doc.sellerId && <figure><img src={doc.sellerId.dataUrl} alt="" /><figcaption>{window.t(lang, "sellerIdPhoto")}</figcaption></figure>}
            {doc.workPhoto && <figure><img src={doc.workPhoto.dataUrl} alt="" /><figcaption>{window.t(lang, "workPhoto")}</figcaption></figure>}
          </div>
        </div>
      )}

      {/* signatures */}
      <div className="pp-signs">
        {showSeller && <SignBlock label={window.t(lang, "sellerSign")} drawn={doc.sellerSign} />}
        <SignBlock label={window.t(lang, "creatorSign")} name={creator ? creator.name : null} signed={doc.creatorSign || (creator ? creator.signature : "")} />
        <SignBlock label={window.t(lang, "approverSign")} name={approverSigned ? (doc.approverName || company.approver) : (company.approver || null)}
          signed={approverSigned ? (doc.approverSign || "Approved") : null} />
      </div>
    </div>
  );
}

Object.assign(window, { DocPaper });