/* global React, Ic, Chip, KPI, Panel, AiBand, Sparkline */

function Accounting() {
  const [tab, setTab] = React.useState("ar");
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Accounting</div>
          <div className="page-sub">AR · AP · Settlement · Credit — QuickBooks + NetSuite sync · Apex factoring</div>
        </div>
        <div className="page-actions">
          <span className="chip ok"><span className="dot" /> QB SYNCED 13:01</span>
          <button className="btn ghost">Reconcile</button>
          <button className="btn primary">Run settlement</button>
        </div>
      </div>

      <div className="grid cols-4 pad" style={{ paddingBottom: 0 }}>
        <KPI label="AR Outstanding" value="$842k" delta="14d avg" spark={[800,810,820,815,830,840,838,842,840,842,841,842]} />
        <KPI label="AP Due This Wk" value="$314k" delta="142 carriers" />
        <KPI label="Past Due >30d" value="$48k" delta="8 invoices" deltaKind="down" />
        <KPI label="Avg DSO" value="32 days" delta="3d" deltaKind="down" spark={[42,40,38,37,36,35,34,33,33,32,32,32]} />
      </div>

      <AiBand
        confidence={92}
        text={<><b>Keelway</b> auto-filed 4 detention claims yesterday · recovered <b>$1,840</b>. 8 customer invoices past 30 days — collection follow-ups drafted, awaiting your approval.</>}
        actions={<>
          <button className="btn ghost sm">Review</button>
          <button className="btn primary sm">Send all</button>
        </>}
      />

      <div className="tabs" style={{ marginTop: 16 }}>
        <div className={`tab ${tab === "ar" ? "active" : ""}`} onClick={() => setTab("ar")}>Accounts Receivable <span className="count">142</span></div>
        <div className={`tab ${tab === "ap" ? "active" : ""}`} onClick={() => setTab("ap")}>Carrier Settlement <span className="count">98</span></div>
        <div className={`tab ${tab === "credit" ? "active" : ""}`} onClick={() => setTab("credit")}>Credit Management <span className="count">24</span></div>
        <div className={`tab ${tab === "advances" ? "active" : ""}`} onClick={() => setTab("advances")}>Advances & Fuel <span className="count">11</span></div>
      </div>

      {tab === "ar" && <ARView />}
      {tab === "ap" && <APView />}
      {tab === "credit" && <CreditView />}
      {tab === "advances" && <AdvancesView />}
    </div>
  );
}

function ARView() {
  return (
    <div style={{ padding: 16 }}>
      <div className="grid cols-4" style={{ marginBottom: 16 }}>
        <AgingTile label="CURRENT" value="$418k" pct={50} count={84} color="var(--ok)" />
        <AgingTile label="1-30 DAYS" value="$294k" pct={35} count={42} color="var(--accent)" />
        <AgingTile label="31-60 DAYS" value="$84k"  pct={10} count={12} color="var(--warn)" />
        <AgingTile label="60+ DAYS"   value="$46k"  pct={5}  count={4}  color="var(--danger)" />
      </div>

      <Panel title="OUTSTANDING INVOICES · 142 OPEN">
        <table className="tbl">
          <thead>
            <tr>
              <th>Customer</th><th>Invoice</th><th>Load</th><th>Issued</th><th>Due</th><th className="num">Amount</th><th>Age</th><th>Status</th><th>AI Action</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Walmart</td><td className="mono">INV-241102</td><td className="mono">KW-48191</td><td className="mono dim">05/24</td><td className="mono">06/23</td><td className="num">$2,480</td><td>1d</td><td><Chip kind="info">SENT</Chip></td><td className="dim">—</td></tr>
            <tr><td>Target</td><td className="mono">INV-241098</td><td className="mono">KW-48188</td><td className="mono dim">05/22</td><td className="mono">06/21</td><td className="num">$3,850</td><td>3d</td><td><Chip kind="info">SENT</Chip></td><td className="dim">—</td></tr>
            <tr><td>Home Depot</td><td className="mono">INV-241094</td><td className="mono">KW-48184</td><td className="mono dim">05/21</td><td className="mono">06/20</td><td className="num">$2,200</td><td>4d</td><td><Chip kind="info">SENT</Chip></td><td className="dim">—</td></tr>
            <tr style={{ background: "var(--warn-bg)" }}><td>Sprouts</td><td className="mono">INV-241032</td><td className="mono">KW-48118</td><td className="mono dim">04/12</td><td className="mono">05/12</td><td className="num">$1,450</td><td><span className="warn">43d</span></td><td><Chip kind="warn">PAST DUE</Chip></td><td><Chip kind="accent">REMINDER DRAFTED</Chip></td></tr>
            <tr style={{ background: "var(--warn-bg)" }}><td>Meijer</td><td className="mono">INV-241028</td><td className="mono">KW-48114</td><td className="mono dim">04/08</td><td className="mono">05/08</td><td className="num">$2,940</td><td><span className="warn">47d</span></td><td><Chip kind="warn">PAST DUE</Chip></td><td><Chip kind="accent">REMINDER DRAFTED</Chip></td></tr>
            <tr style={{ background: "var(--danger-bg)" }}><td>Albertsons</td><td className="mono">INV-240988</td><td className="mono">KW-48081</td><td className="mono dim">03/18</td><td className="mono">04/17</td><td className="num">$4,120</td><td><span className="down">68d</span></td><td><Chip kind="danger">COLLECTIONS</Chip></td><td><Chip kind="accent">ESCALATED</Chip></td></tr>
            <tr><td>Costco</td><td className="mono">INV-241068</td><td className="mono">KW-48158</td><td className="mono dim">05/14</td><td className="mono">06/13</td><td className="num">$2,140</td><td>11d</td><td><Chip kind="ok">PAID</Chip></td><td className="dim">$2,140 received 05/22</td></tr>
            <tr><td>Publix</td><td className="mono">INV-241055</td><td className="mono">KW-48141</td><td className="mono dim">05/12</td><td className="mono">06/11</td><td className="num">$1,840</td><td>13d</td><td><Chip kind="info">SENT</Chip></td><td className="dim">—</td></tr>
          </tbody>
        </table>
      </Panel>
    </div>
  );
}

function APView() {
  return (
    <div style={{ padding: 16 }}>
      <div className="grid cols-3" style={{ marginBottom: 16 }}>
        <Panel title="CARRIER SETTLEMENT BATCH · FRIDAY 05/29">
          <div style={{ fontSize: 26, fontFamily: "var(--font-mono)" }}>$182,448</div>
          <div className="dim" style={{ fontSize: 12, marginTop: 4 }}>142 loads · 38 carriers</div>
          <div style={{ marginTop: 12, display: "flex", gap: 6 }}>
            <button className="btn ghost" style={{ flex: 1 }}>Preview</button>
            <button className="btn primary" style={{ flex: 1 }}>Approve batch</button>
          </div>
        </Panel>
        <Panel title="QUICKPAY ELIGIBLE">
          <div style={{ fontSize: 26, fontFamily: "var(--font-mono)" }}>22</div>
          <div className="dim" style={{ fontSize: 12, marginTop: 4 }}>Carriers opted in · 1.5% fee</div>
          <div style={{ marginTop: 8, fontSize: 11, color: "var(--accent)" }}>+$684 fee revenue this week</div>
        </Panel>
        <Panel title="FACTORING PAYOUTS">
          <div style={{ fontSize: 26, fontFamily: "var(--font-mono)" }}>$94k</div>
          <div className="dim" style={{ fontSize: 12, marginTop: 4 }}>To Apex · TBS · OTR Capital</div>
          <div style={{ marginTop: 8, fontSize: 11 }}><Chip kind="ok">NOAs current</Chip></div>
        </Panel>
      </div>

      <Panel title="CARRIER PAYMENTS · DUE THIS WEEK">
        <table className="tbl">
          <thead>
            <tr><th>Carrier</th><th>Loads</th><th>Terms</th><th>Factor</th><th className="num">Gross</th><th className="num">Deductions</th><th className="num">Net</th><th>Method</th><th>Status</th></tr>
          </thead>
          <tbody>
            {[
              ["Western Mountain", 14, "Net 30", "—", 31480, 0, 31480, "ACH", "ok", "QUEUED"],
              ["BluePeak Carriers", 12, "QuickPay 1.5%", "Apex Capital", 24180, 363, 23817, "Factor wire", "ok", "QUEUED"],
              ["Coastal Freight", 9, "Net 7", "—", 19840, 240, 19600, "ACH", "ok", "QUEUED"],
              ["Hidalgo Logistics", 11, "QuickPay 1.5%", "OTR Capital", 22440, 337, 22103, "Factor wire", "ok", "QUEUED"],
              ["Heartland Hauling", 7, "Net 30", "—", 14820, 142, 14678, "ACH", "ok", "QUEUED"],
              ["Pinecone Hauling", 4, "Net 30", "TBS", 8480, 1240, 7240, "Factor wire", "warn", "DEDUCTION HOLD"],
              ["Eastern Star", 8, "Net 15", "—", 17240, 0, 17240, "Check", "ok", "QUEUED"],
            ].map((r, i) => (
              <tr key={i}>
                <td>{r[0]}</td>
                <td className="num">{r[1]}</td>
                <td className="mono dim" style={{ fontSize: 11 }}>{r[2]}</td>
                <td className="dim">{r[3]}</td>
                <td className="num dim">${r[4].toLocaleString()}</td>
                <td className="num" style={{ color: r[5] > 0 ? "var(--warn)" : "var(--text-dim)" }}>${r[5]}</td>
                <td className="num"><b>${r[6].toLocaleString()}</b></td>
                <td className="mono dim" style={{ fontSize: 11 }}>{r[7]}</td>
                <td><Chip kind={r[8]}>{r[9]}</Chip></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Panel>
    </div>
  );
}

function CreditView() {
  return (
    <div style={{ padding: 16 }}>
      <Panel title="CUSTOMER CREDIT · DnB + ANSONIA SYNCED">
        <table className="tbl">
          <thead>
            <tr><th>Customer</th><th className="num">Credit Limit</th><th className="num">Utilized</th><th className="num">Available</th><th>DnB</th><th>Days-to-Pay</th><th>Status</th><th>AI Recommendation</th></tr>
          </thead>
          <tbody>
            {[
              ["Walmart", 500000, 318000, 182000, "82", "28d", "ok", "ACTIVE", "Increase to $750k · pay history excellent"],
              ["Target", 300000, 184000, 116000, "76", "32d", "ok", "ACTIVE", "Hold · pace normal"],
              ["Home Depot", 250000, 198000, 52000, "78", "29d", "warn", "NEAR LIMIT", "Increase to $325k · safe to extend"],
              ["Costco", 200000, 92000, 108000, "80", "26d", "ok", "ACTIVE", "Hold"],
              ["Sprouts", 80000, 48000, 32000, "62", "44d", "warn", "WATCH", "Reduce to $60k · slow pay trend"],
              ["Albertsons", 150000, 152000, -2000, "58", "68d", "danger", "OVER LIMIT", "STOP loads · 60d past due"],
              ["Publix", 120000, 64000, 56000, "84", "24d", "ok", "ACTIVE", "Increase to $160k"],
            ].map((r, i) => (
              <tr key={i}>
                <td>{r[0]}</td>
                <td className="num">${(r[1] / 1000).toFixed(0)}k</td>
                <td className="num">${(r[2] / 1000).toFixed(0)}k</td>
                <td className="num" style={{ color: r[3] < 0 ? "var(--danger)" : r[3] < 30000 ? "var(--warn)" : "var(--ok)" }}>${(r[3] / 1000).toFixed(0)}k</td>
                <td className="mono">{r[4]}</td>
                <td className="mono dim">{r[5]}</td>
                <td><Chip kind={r[6]}>{r[7]}</Chip></td>
                <td style={{ fontSize: 11, color: "var(--text-mid)" }}>{r[8]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Panel>
    </div>
  );
}

function AdvancesView() {
  return (
    <div style={{ padding: 16 }}>
      <div className="grid cols-2" style={{ marginBottom: 16 }}>
        <Panel title="DRIVER ADVANCES · 11 OPEN">
          <table className="tbl">
            <thead><tr><th>Driver</th><th>Load</th><th>Type</th><th className="num">Amount</th><th>Status</th></tr></thead>
            <tbody>
              <tr><td>C. Mendez</td><td className="mono">KW-48217</td><td>Fuel · Comdata</td><td className="num">$400</td><td><Chip kind="ok">ISSUED</Chip></td></tr>
              <tr><td>R. Singh</td><td className="mono">KW-48216</td><td>Lumper</td><td className="num">$220</td><td><Chip kind="ok">ISSUED</Chip></td></tr>
              <tr><td>T. Petrov</td><td className="mono">KW-48211</td><td>Cash advance · EFS</td><td className="num">$150</td><td><Chip kind="warn">PENDING</Chip></td></tr>
              <tr><td>J. Reyes</td><td className="mono">KW-48210</td><td>Detention recovery</td><td className="num">$240</td><td><Chip kind="ok">ISSUED</Chip></td></tr>
              <tr><td>K. Walker</td><td className="mono">KW-48207</td><td>TONU</td><td className="num">$150</td><td><Chip kind="info">DRAFTED BY AI</Chip></td></tr>
            </tbody>
          </table>
        </Panel>
        <Panel title="FUEL CARD ACTIVITY">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div><div className="kpi-label">TODAY SPEND</div><div className="mono" style={{ fontSize: 22 }}>$4,820</div></div>
            <div><div className="kpi-label">CARDS ACTIVE</div><div className="mono" style={{ fontSize: 22 }}>22</div></div>
            <div><div className="kpi-label">DISCOUNT EARNED</div><div className="mono up" style={{ fontSize: 22, color: "var(--ok)" }}>$148</div></div>
            <div><div className="kpi-label">EXCEPTIONS</div><div className="mono" style={{ fontSize: 22, color: "var(--warn)" }}>2</div></div>
          </div>
          <div className="dim" style={{ fontSize: 11, marginTop: 12, lineHeight: 1.6 }}>
            ⚠ C. Mendez · Comdata declined at TA Cotulla TX · 11:42<br/>
            ⚠ A. Kowalski · $80 over single-fill limit · approved by AI
          </div>
        </Panel>
      </div>
    </div>
  );
}

function AgingTile({ label, value, pct, count, color }) {
  return (
    <div className="panel" style={{ padding: 14, borderLeft: `2px solid ${color}` }}>
      <div className="kpi-label">{label}</div>
      <div className="mono" style={{ fontSize: 22 }}>{value}</div>
      <div className="dim" style={{ fontSize: 11 }}>{count} invoices · {pct}% of AR</div>
      <div style={{ marginTop: 10, height: 3, background: "var(--bg-3)", borderRadius: 1 }}>
        <div style={{ width: `${pct}%`, height: "100%", background: color, borderRadius: 1 }} />
      </div>
    </div>
  );
}

window.Accounting = Accounting;