// FinanceHome — Pim Suksamran's landing. Settlements at tier + refunds + invoices + AR aging + FX.

const FIN_KPIS = [
  { lbl: "Settlements · pending",  val: "8",      trend: [14, 12, 11, 10, 9, 9, 8, 8],            tone: "warning", foot: "$2.4M USD value" },
  { lbl: "Refunds · my tier",      val: "4",      trend: [6, 5, 5, 4, 4, 4, 4, 4],                tone: "success", foot: "1 awaiting approval" },
  { lbl: "AR · over 60d",          val: "$84K",   trend: [120, 110, 100, 92, 88, 86, 85, 84],     tone: "success", foot: "−5% vs last close" },
  { lbl: "FX exposure · CNY",      val: "¥4.2M",  trend: [3.2, 3.4, 3.6, 3.8, 3.9, 4.0, 4.1, 4.2],tone: "warning", foot: "Locked tomorrow 17:00 ICT" },
];

const SETTLEMENTS = [
  { id: "ST-2026-W2",  producer: "Khao Hom Thai", amount: "¥262K",  amountUsd: "$36.5K", state: "awaiting_finance", tier: "L1",  sla: "today 17:00" },
  { id: "ST-2026-W2",  producer: "Siam Cosmetic", amount: "¥412K",  amountUsd: "$57.4K", state: "awaiting_finance", tier: "L1",  sla: "today 17:00" },
  { id: "ST-2026-W2",  producer: "Krua Phuket",   amount: "¥184K",  amountUsd: "$25.6K", state: "awaiting_finance", tier: "L1",  sla: "today 17:00" },
  { id: "ST-2026-W2",  producer: "Bangkok Beauty",amount: "¥48K",   amountUsd:  "$6.7K", state: "awaiting_l2",      tier: "L2",  sla: "tomorrow" },
  { id: "ST-2026-W1",  producer: "Northern Silk", amount: "¥22K",   amountUsd:  "$3.1K", state: "approved",         tier: "—",   sla: "—" },
];

const STATE = {
  awaiting_finance: { label: "Awaiting · L1", tone: "warning" },
  awaiting_l2:      { label: "Awaiting · L2", tone: "info" },
  approved:         { label: "Approved",      tone: "success" },
};

const REFUNDS = [
  { id: "RF-2026-0421", producer: "Bangkok Beauty", amount: "¥18,400 CNY", reason: "Customer · packaging damaged",   awaiting: "Producer ack" },
  { id: "RF-2026-0418", producer: "Khao Hom Thai", amount: "¥4,200 CNY",   reason: "KOL · wrong product attribution", awaiting: "My approval" },
  { id: "RF-2026-0415", producer: "Siam Cosmetic", amount: "¥1,850 CNY",   reason: "Customer · changed mind",         awaiting: "My approval" },
  { id: "RF-2026-0411", producer: "Lanna Tea",     amount: "¥980 CNY",     reason: "System · double charge",          awaiting: "Auto-processing" },
];

function FinanceHome() {
  return (
    <div>
      <div className="page-head">
        <h1>Finance · Accounting</h1>
        <span className="count">Mar 18, 2026 · Approval tier L1 · close in 12 days</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-download"></i>Trial balance</button>
          <button className="btn secondary"><i className="ti ti-history"></i>Audit log</button>
          <button className="btn primary"><i className="ti ti-receipt-2"></i>Open close checklist</button>
        </div>
      </div>

      <div className="kpi-row" style={{marginBottom: 16}}>
        {FIN_KPIS.map((k, i) => (
          <div key={i} className="kpi">
            <div className="head"><span className="lbl">{k.lbl}</span></div>
            <div className="val">{k.val}</div>
            <Sparkline data={k.trend} width={240} height={28} tone={k.tone} />
            <div className="foot">{k.foot}</div>
          </div>
        ))}
      </div>

      <div className="dash-grid">
        <div className="dash-left">
          <div className="panel">
            <div className="panel-head">
              <h3>Settlement queue · my tier</h3>
              <span className="label-caps">{SETTLEMENTS.filter(s => s.state === "awaiting_finance").length} awaiting · D7 reason gate active</span>
            </div>
            <table>
              <thead>
                <tr>
                  <th style={{width:140}}>Settlement</th>
                  <th>Producer</th>
                  <th style={{width:140, textAlign:"right"}}>Amount</th>
                  <th style={{width:100, textAlign:"right"}}>USD</th>
                  <th style={{width:140}}>State</th>
                  <th style={{width:120}}>SLA</th>
                </tr>
              </thead>
              <tbody>
                {SETTLEMENTS.map(s => (
                  <tr key={s.id + s.producer}>
                    <td className="data-mono">{s.id}</td>
                    <td>{s.producer}</td>
                    <td className="num">{s.amount}</td>
                    <td className="num" style={{color:"var(--on-surface-variant)"}}>{s.amountUsd}</td>
                    <td><span className={"pill " + STATE[s.state].tone}>{STATE[s.state].label}</span></td>
                    <td className="data-mono" style={{fontSize:12}}>{s.sla}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="panel">
            <div className="panel-head"><h3>Monthly close · Mar 2026</h3><span className="label-caps">Day 18 of 30 · 60% complete</span></div>
            <div className="pipe-dist">
              <div className="pipe-row"><div className="pname">AR reconciliation</div><div className="track"><div className="fill success" style={{width:"100%"}}></div></div><div className="pval">Done</div></div>
              <div className="pipe-row"><div className="pname">Settlement batches</div><div className="track"><div className="fill success" style={{width:"80%"}}></div></div><div className="pval">80%</div></div>
              <div className="pipe-row"><div className="pname">FX lock</div><div className="track"><div className="fill warning" style={{width:"40%"}}></div></div><div className="pval">40%</div></div>
              <div className="pipe-row"><div className="pname">Tax withholding</div><div className="track"><div className="fill info" style={{width:"20%"}}></div></div><div className="pval">20%</div></div>
              <div className="pipe-row"><div className="pname">Statement generation</div><div className="track"><div className="fill" style={{width:"0%", background:"var(--surface-container)"}}></div></div><div className="pval">—</div></div>
            </div>
          </div>
        </div>

        <div className="dash-right">
          <div className="panel">
            <div className="panel-head"><h3>Refund queue</h3><span className="label-caps">{REFUNDS.length} active</span></div>
            <div className="activity">
              {REFUNDS.map(r => (
                <div key={r.id} className="activity-row">
                  <div className="av warning"><i className="ti ti-arrow-back-up" style={{fontSize:11}}></i></div>
                  <div>
                    <div className="what" style={{fontFamily:"var(--font-mono)", fontSize:12}}>{r.amount}</div>
                    <div className="when" style={{fontFamily:"var(--font-sans)", color:"var(--on-surface-variant)"}}>{r.producer} · {r.reason}</div>
                  </div>
                  <div className="when" style={{maxWidth:90, textAlign:"right"}}>{r.awaiting}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="panel">
            <div className="panel-head"><h3>FX exposure</h3><span className="label-caps">Locked tomorrow</span></div>
            <div className="pipe-dist">
              <div className="pipe-row"><div className="pname">CNY → THB</div><div className="track"><div className="fill primary" style={{width:"72%"}}></div></div><div className="pval">¥3.0M</div></div>
              <div className="pipe-row"><div className="pname">CNY → USD</div><div className="track"><div className="fill info" style={{width:"42%"}}></div></div><div className="pval">¥1.2M</div></div>
            </div>
            <div className="body-sm" style={{color:"var(--on-surface-variant)", fontSize:12, marginTop:8}}>fx_ref 1:4.75 · fx_exec locks at Mar 19, 17:00 ICT</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.FinanceHome = FinanceHome;