// Billing & Tax Invoice
function BillingPage({ lang }) {
  const [selected, setSelected] = useState(null);
  const [projectFilter, setProjectFilter] = useState("all");
  const filtered = projectFilter === "all" ? INVOICES : INVOICES.filter(i => i.project === projectFilter);
  const sort = useSort(filtered, "date", "desc");
  const data = sort.sorted;
  const totalIssued = INVOICES.filter(i => i.status !== "draft").reduce((a, i) => a + i.net, 0);
  const totalPaid = INVOICES.filter(i => i.status === "paid").reduce((a, i) => a + i.net, 0);
  const outstanding = totalIssued - totalPaid;
  const vatTotal = INVOICES.reduce((a, i) => a + i.vat, 0);

  return (
    <div className="anim-fadein">
      <PageHeader
        title={lang === "th" ? "วางบิล & ใบกำกับภาษี" : "Billing & Tax Invoice"}
        subtitle={lang === "th" ? "ใบแจ้งหนี้ ใบกำกับภาษี VAT 7% หัก ณ ที่จ่าย 3% และเงินประกัน 5%" : "Invoice, VAT 7%, WHT 3%, Retention 5%"}
        actions={<>
          <button className="btn btn-sm"><I.print /> {lang==="th"?"พิมพ์ภาษีซื้อขาย":"Tax report"}</button>
          <button className="btn btn-sm btn-primary"><I.plus /> {lang==="th"?"ออกใบแจ้งหนี้":"New invoice"}</button>
        </>}
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 12, marginBottom: 14 }}>
        <StatCard label={lang==="th"?"วางบิลรวม":"Total billed"} value={fmtTHB(totalIssued)} icon="receipt" accent="rgba(40,72,255,0.22)" />
        <StatCard label={lang==="th"?"รับชำระแล้ว":"Paid"} value={fmtTHB(totalPaid)} icon="cash" accent="rgba(74,222,128,0.22)" />
        <StatCard label={lang==="th"?"รอเก็บเงิน":"Outstanding"} value={fmtTHB(outstanding)} hint="14 วันเฉลี่ย" icon="bell" accent="rgba(255,184,77,0.22)" />
        <StatCard label={lang==="th"?"VAT ขายเดือนนี้":"Output VAT"} value={fmtTHB(vatTotal)} icon="bolt" accent="rgba(246,201,124,0.22)" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: selected != null ? "1.4fr 1fr" : "1fr", gap: 14 }}>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ padding: 12, borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "flex-end", gap: 10 }}>
            <ProjectFilter value={projectFilter} onChange={setProjectFilter} lang={lang} />
          </div>
          <table className="table">
            <thead><tr>
              <SortTH label={lang==="th"?"เลขที่":"Code"} k="id" sort={sort} />
              <SortTH label={lang==="th"?"โครงการ":"Project"} k="project" sort={sort} />
              <SortTH label={lang==="th"?"งวด":"Period"} k="period" sort={sort} />
              <SortTH label={lang==="th"?"วันที่":"Date"} k="date" sort={sort} />
              <SortTH label={lang==="th"?"ก่อนภาษี":"Subtotal"} k="subtotal" sort={sort} align="right" />
              <SortTH label="VAT" k="vat" sort={sort} align="right" />
              <SortTH label={lang==="th"?"หัก ณ ที่จ่าย":"WHT"} k="wht" sort={sort} align="right" />
              <SortTH label={lang==="th"?"ประกัน":"Ret."} k="retention" sort={sort} align="right" />
              <SortTH label={lang==="th"?"สุทธิ":"Net"} k="net" sort={sort} align="right" />
              <SortTH label="Status" k="status" sort={sort} />
            </tr></thead>
            <tbody>
              {data.map((inv, i) => (
                <tr key={inv.id} className="row-int" style={{ cursor: "pointer", background: selected === inv.id ? "var(--glass-2)" : "transparent" }} onClick={() => setSelected(selected === inv.id ? null : inv.id)}>
                  <td className="mono" style={{ fontSize: 12, color: "var(--syk-blue-soft)" }}>{inv.id}</td>
                  <td className="mono ink-soft" style={{ fontSize: 12 }}>{inv.project}</td>
                  <td>{inv.period}</td>
                  <td className="mono ink-soft" style={{ fontSize: 12 }}>{inv.date}</td>
                  <td className="mono" style={{ textAlign: "right" }}>{fmtTHB(inv.subtotal)}</td>
                  <td className="mono" style={{ textAlign: "right", color: "var(--gold)" }}>{fmtTHB(inv.vat)}</td>
                  <td className="mono" style={{ textAlign: "right", color: "var(--rose)" }}>−{fmtTHB(inv.wht)}</td>
                  <td className="mono" style={{ textAlign: "right", color: "var(--ink-mute)" }}>−{fmtTHB(inv.retention)}</td>
                  <td className="mono" style={{ textAlign: "right", fontWeight: 700 }}>{fmtTHB(inv.net)}</td>
                  <td><StatusBadge status={inv.status} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {selected && <InvoicePreview inv={INVOICES.find(x => x.id === selected)} lang={lang} onClose={() => setSelected(null)} />}
      </div>
    </div>
  );
}

function InvoicePreview({ inv, lang, onClose }) {
  return (
    <div className="card anim-fadein" style={{ position: "sticky", top: 80, maxHeight: "calc(100vh - 100px)", overflowY: "auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14 }}>
        <div className="micro">{lang==="th"?"ใบกำกับภาษี / ใบแจ้งหนี้":"Tax Invoice"}</div>
        <button className="btn btn-sm btn-ghost" onClick={onClose} style={{ padding: 0, width: 28, justifyContent: "center" }}><I.x /></button>
      </div>

      <div style={{ borderBottom: "2px solid var(--syk-blue-soft)", paddingBottom: 12, marginBottom: 14 }}>
        <div style={{ fontSize: 14, fontWeight: 700 }}>{COMPANY.nameTH}</div>
        <div style={{ fontSize: 10.5, color: "var(--ink-mute)", marginTop: 4, lineHeight: 1.5 }}>{COMPANY.addressTH}<br />เลขประจำตัวผู้เสียภาษี {COMPANY.taxId}</div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10 }}>
          <div><div className="mono" style={{ fontWeight: 700, fontSize: 14, color: "var(--syk-blue-soft)" }}>{inv.id}</div></div>
          <div style={{ textAlign: "right", fontSize: 11 }}>
            <div className="ink-mute">วันที่ออก</div>
            <div className="mono">{inv.date}</div>
          </div>
        </div>
      </div>

      <div style={{ fontSize: 12, marginBottom: 10 }}>
        <div className="ink-mute">{lang==="th"?"โครงการ":"Project"}</div>
        <div style={{ fontWeight: 600, marginTop: 2 }}>{inv.project}</div>
        <div style={{ marginTop: 8 }}><span className="ink-mute">{lang==="th"?"งวดงาน":"Period"}: </span>{inv.period}</div>
      </div>

      <table style={{ width: "100%", marginTop: 14, fontSize: 12, borderCollapse: "collapse" }}>
        <tbody>
          {[
            ["มูลค่างานก่อนภาษี", fmtTHB(inv.subtotal), false],
            ["+ ภาษีมูลค่าเพิ่ม 7%", fmtTHB(inv.vat), false, "var(--gold)"],
            ["รวมทั้งสิ้น", fmtTHB(inv.subtotal + inv.vat), true],
            ["− หัก ณ ที่จ่าย 3%", "−" + fmtTHB(inv.wht), false, "var(--rose)"],
            ["− หักเงินประกัน 5%", "−" + fmtTHB(inv.retention), false, "var(--ink-mute)"],
            [lang==="th"?"ยอดสุทธิที่ต้องรับ":"Net to receive", fmtTHB(inv.net), true, "var(--emerald)"],
          ].map(([l, v, b, c], i) => (
            <tr key={i} style={{ borderTop: b ? "1px solid var(--line-strong)" : "none" }}>
              <td style={{ padding: "8px 0", color: "var(--ink-soft)", fontWeight: b ? 600 : 400 }}>{l}</td>
              <td className="mono" style={{ padding: "8px 0", textAlign: "right", fontWeight: b ? 700 : 500, fontSize: b ? 14 : 12, color: c || "var(--ink)" }}>{v}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <div style={{ marginTop: 16, padding: 12, background: "var(--glass-2)", borderRadius: 10, fontSize: 11.5 }}>
        <div className="micro" style={{ marginBottom: 6 }}>{lang==="th"?"หมายเหตุภาษี":"Tax notes"}</div>
        <ul style={{ margin: 0, paddingLeft: 16, color: "var(--ink-soft)", lineHeight: 1.6 }}>
          <li>เงินประกันผลงานจะคืนเมื่อหมดประกัน 1 ปี</li>
          <li>กรุณานำใบหัก ณ ที่จ่าย มาแลกเช็คสุทธิ</li>
          <li>เงื่อนไขการชำระ: 7 วันนับจากวันที่ออกใบแจ้งหนี้</li>
        </ul>
      </div>

      <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
        <button className="btn" style={{ flex: 1, justifyContent: "center" }}><I.print /> Print</button>
        <button className="btn btn-primary" style={{ flex: 1, justifyContent: "center" }}><I.send /> Send</button>
      </div>
    </div>
  );
}

window.BillingPage = BillingPage;