/* Finance — invoice workspace.
 * Click a row to expand: line items vs PO.
 */

const finTheme = {
  bg:    "#111110",
  card:  "#171715",
  cardHi:"#1f1c19",
  line:  "#242420",
  ink:   "#f0ece4",
  ink2:  "#a8a49b",
  ink3:  "#6b6862",
  ink4:  "#4a4842",
  amber: "#d99350",
  green: "#6aa37d",
  red:   "#d35a4a",
};

const INVOICES = [
  {
    id: "INV-104382", supplier: "Brevard Logistics SARL", inv: 12480.00, po: 12480.00,
    status: "matched",  to: "auto-approve", po_id: "PO-7741",
    lines: [
      ["Container haulage · 20ft × 6",   "2 080.00", "2 080.00", 0],
      ["Crane handling · 40ft × 12",      "9 600.00", "9 600.00", 0],
      ["Customs documentation",              "800.00",   "800.00", 0],
    ],
  },
  {
    id: "INV-104381", supplier: "Norlex Industrial", inv: 8412.40, po: 8200.00,
    status: "variance", to: "P. Khoury · operations", po_id: "PO-7740",
    lines: [
      ["Hydraulic cylinder · 80 bar",     "4 200.00", "4 200.00", 0],
      ["Replacement seals · pack",          "1 280.00", "1 280.00", 0],
      ["Express freight (un-quoted)",          "212.40",      "0.00", 212.40],
      ["Site visit · 2 hours",               "2 720.00", "2 720.00", 0],
    ],
    note: "Express freight not on PO — supplier added at dispatch. P. Khoury needs to confirm.",
  },
  {
    id: "INV-104380", supplier: "Halcyon Print Services", inv: 486.00, po: 486.00,
    status: "matched", to: "auto-approve", po_id: "PO-7738",
    lines: [
      ["Brochures · 1000 units",            "320.00",   "320.00", 0],
      ["Posters A2 · 50 units",              "166.00",   "166.00", 0],
    ],
  },
  {
    id: "INV-104379", supplier: "Maritime Brokers GmbH", inv: 34200.00, po: 34200.00,
    status: "matched", to: "auto-approve", po_id: "PO-7736",
    lines: [
      ["Vessel chartering · 5 days",      "28 500.00", "28 500.00", 0],
      ["Bunker fuel surcharge",              "3 200.00",  "3 200.00", 0],
      ["Insurance · cargo",                  "2 500.00",  "2 500.00", 0],
    ],
  },
  {
    id: "INV-104378", supplier: "Ortega Maintenance", inv: 2940.00, po: 2740.00,
    status: "variance", to: "S. Petersen · facilities", po_id: "PO-7735",
    lines: [
      ["HVAC routine service",             "1 800.00", "1 800.00", 0],
      ["Filter replacement × 12",            "  940.00",   "940.00", 0],
      ["Overtime · weekend (un-quoted)",      "  200.00",      "0.00", 200.00],
    ],
    note: "Weekend overtime added on-site. Within Petersen's signing authority.",
  },
  {
    id: "INV-104377", supplier: "Hwang Foods Ltd", inv: 18420.50, po: 18420.50,
    status: "matched", to: "auto-approve", po_id: "PO-7733",
  },
  {
    id: "INV-104376", supplier: "Aurum Office Supplies", inv: 312.80, po: 312.80,
    status: "matched", to: "auto-approve", po_id: "PO-7732",
  },
];

function fmtEUR(n) {
  return "€" + n.toLocaleString("en", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function FinancePreview() {
  const [pick, setPick] = React.useState("INV-104381");
  const matched = 753;
  const variance = 47;
  const total = matched + variance;

  return (
    <div style={{
      background: finTheme.bg,
      color: finTheme.ink,
      borderRadius: 14,
      padding: "24px 28px 28px",
      boxShadow: "0 30px 60px -25px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)",
      maxWidth: 800,
      fontFamily: '"Inter", sans-serif',
    }}>
      {/* header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", color: finTheme.ink3, textTransform: "uppercase" }}>Invoice workspace · May</div>
          <div style={{ fontSize: 20, fontWeight: 600, marginTop: 4, letterSpacing: "-0.01em" }}>800 invoices reviewed</div>
        </div>
        <div style={{
          display: "flex",
          background: finTheme.card,
          borderRadius: 8,
          padding: "8px 14px",
          gap: 22,
        }}>
          <div>
            <div style={{ fontSize: 10.5, letterSpacing: "0.14em", color: finTheme.ink3, textTransform: "uppercase" }}>Matched</div>
            <div style={{ fontSize: 22, fontWeight: 600, color: finTheme.green, lineHeight: 1, marginTop: 4, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{matched}</div>
          </div>
          <div style={{ width: 1, background: finTheme.line }} />
          <div>
            <div style={{ fontSize: 10.5, letterSpacing: "0.14em", color: finTheme.ink3, textTransform: "uppercase" }}>Flagged</div>
            <div style={{ fontSize: 22, fontWeight: 600, color: finTheme.amber, lineHeight: 1, marginTop: 4, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{variance}</div>
          </div>
        </div>
      </div>

      {/* Split bar */}
      <div style={{ display: "flex", height: 5, marginTop: 18, borderRadius: 4, overflow: "hidden", background: finTheme.card }}>
        <div style={{ width: (matched / total * 100) + "%", background: finTheme.green }} />
        <div style={{ width: (variance / total * 100) + "%", background: finTheme.amber }} />
      </div>

      {/* list */}
      <div style={{ marginTop: 18 }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "108px 1fr 100px 110px 1fr",
          gap: 12,
          padding: "0 14px 6px",
          fontSize: 10.5, letterSpacing: "0.14em",
          color: finTheme.ink3, textTransform: "uppercase",
        }}>
          <div>Invoice</div>
          <div>Supplier</div>
          <div style={{ textAlign: "right" }}>Amount</div>
          <div style={{ textAlign: "right" }}>vs PO</div>
          <div style={{ paddingLeft: 14 }}>Routed to</div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {INVOICES.map((r) => {
            const isMatched = r.status === "matched";
            const active = r.id === pick;
            return (
              <div key={r.id}>
                <button onClick={() => setPick(active ? null : r.id)} style={{
                  width: "100%",
                  textAlign: "left",
                  display: "grid",
                  gridTemplateColumns: "108px 1fr 100px 110px 1fr",
                  gap: 12,
                  padding: "10px 14px",
                  background: active ? finTheme.cardHi : finTheme.card,
                  borderRadius: active ? "8px 8px 0 0" : "8px",
                  alignItems: "center",
                  boxShadow: isMatched ? "inset 3px 0 0 " + finTheme.green : "inset 3px 0 0 " + finTheme.amber,
                  cursor: "pointer",
                }}>
                  <div className="mono" style={{ fontSize: 11.5, color: isMatched ? finTheme.ink2 : finTheme.amber }}>{r.id}</div>
                  <div style={{ fontSize: 12.5, color: finTheme.ink }}>{r.supplier}</div>
                  <div style={{ fontSize: 12.5, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{fmtEUR(r.inv)}</div>
                  <div style={{ textAlign: "right", fontVariantNumeric: "tabular-nums" }}>
                    {r.inv === r.po
                      ? <span style={{ fontSize: 11.5, color: finTheme.green }}>+€0.00</span>
                      : <span style={{ fontSize: 11.5, color: finTheme.amber, fontWeight: 600 }}>+{fmtEUR(r.inv - r.po).replace("€", "€")}</span>
                    }
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, paddingLeft: 14 }}>
                    <span style={{ color: finTheme.ink3, fontSize: 14 }}>→</span>
                    <span style={{ fontSize: 11.5, color: isMatched ? finTheme.ink2 : finTheme.ink, flex: 1 }}>{r.to}</span>
                    <span style={{
                      fontSize: 10, color: finTheme.ink3,
                      transition: "transform 0.2s ease",
                      transform: active ? "rotate(180deg)" : "rotate(0deg)",
                    }}>▾</span>
                  </div>
                </button>

                {active && (
                  <div style={{
                    background: finTheme.cardHi,
                    borderRadius: "0 0 8px 8px",
                    padding: "10px 16px 14px",
                  }}>
                    <div style={{
                      fontSize: 10.5, letterSpacing: "0.14em",
                      color: finTheme.ink3, textTransform: "uppercase",
                      marginBottom: 6,
                      display: "flex", justifyContent: "space-between",
                    }}>
                      <span>Invoice {r.id} vs <span className="mono" style={{ color: finTheme.ink2 }}>{r.po_id}</span></span>
                      <span style={{ color: finTheme.ink4 }}>matched line by line</span>
                    </div>

                    {r.lines ? (
                      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12, fontVariantNumeric: "tabular-nums" }}>
                        <thead>
                          <tr style={{ color: finTheme.ink3, fontSize: 10.5 }}>
                            <th style={{ textAlign: "left",  padding: "4px 6px", fontWeight: 500 }}>Item</th>
                            <th style={{ textAlign: "right", padding: "4px 6px", fontWeight: 500 }}>Invoice</th>
                            <th style={{ textAlign: "right", padding: "4px 6px", fontWeight: 500 }}>PO</th>
                            <th style={{ textAlign: "right", padding: "4px 6px", fontWeight: 500 }}>Δ</th>
                          </tr>
                        </thead>
                        <tbody>
                          {r.lines.map((l, i) => (
                            <tr key={i} style={{ borderTop: "1px solid " + finTheme.line }}>
                              <td style={{ padding: "5px 6px", color: l[3] > 0 ? finTheme.amber : finTheme.ink }}>{l[0]}</td>
                              <td style={{ padding: "5px 6px", textAlign: "right" }}>€{l[1]}</td>
                              <td style={{ padding: "5px 6px", textAlign: "right", color: finTheme.ink3 }}>€{l[2]}</td>
                              <td style={{ padding: "5px 6px", textAlign: "right", color: l[3] > 0 ? finTheme.amber : finTheme.green, fontWeight: 600 }}>
                                {l[3] > 0 ? "+€" + l[3].toFixed(2) : "—"}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    ) : (
                      <div style={{ fontSize: 12, color: finTheme.ink2 }}>
                        All lines match PO {r.po_id} exactly. Auto-approved.
                      </div>
                    )}

                    {r.note && (
                      <div style={{
                        marginTop: 10,
                        fontSize: 11.5,
                        color: finTheme.amber,
                        background: "rgba(217,147,80,0.06)",
                        padding: "8px 10px",
                        borderRadius: 5,
                        lineHeight: 1.5,
                      }}>↳ {r.note}</div>
                    )}

                    <div style={{ marginTop: 10, display: "flex", gap: 6 }}>
                      <button style={{
                        fontSize: 11, color: "#0a0a0a", fontWeight: 600,
                        background: isMatched ? finTheme.green : finTheme.amber,
                        padding: "6px 12px", borderRadius: 5,
                      }}>{isMatched ? "Approve" : "Send to " + r.to.split("·")[0].trim()}</button>
                      <button style={{
                        fontSize: 11, color: finTheme.ink2,
                        background: "rgba(255,255,255,0.05)",
                        padding: "6px 12px", borderRadius: 5,
                      }}>Open invoice</button>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* footer */}
      <div style={{
        marginTop: 18,
        paddingTop: 14,
        borderTop: "1px solid " + finTheme.line,
        display: "flex", justifyContent: "space-between", fontSize: 11, color: finTheme.ink3,
      }}>
        <span>753 auto-approved · 47 routed to the right approver</span>
        <span>Saved ~96 staff-hours this month</span>
      </div>
    </div>
  );
}

window.FinancePreview = FinancePreview;