// Payments — client payments + subcontractor payouts + lien waivers.
// Split pane: left is the flow (draw request → approval → payout),
// right is the ledger.

function PaymentsPage() {
  return (
    <div style={{
      width: '100%', height: '100%', background: C.bg, color: C.ink,
      fontFamily: C.sans, fontSize: 13, display: 'grid',
      gridTemplateColumns: '220px 1fr', letterSpacing: '-0.005em',
    }}>
      <CSidebar active="Accounting" />
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <CHead
          crumb="Operate / Payments"
          title="Payments"
          sub="Owner draws in · subcontractor payouts out · lien waivers auto-collected"
          right={<div style={{ display: 'flex', gap: 8 }}>
            <CButton icon="↺">Bank sync · 3m ago</CButton>
            <CButton primary icon="↗">New draw request</CButton>
          </div>}
        />

        {/* stat strip */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 1, background: C.line, borderBottom: `1px solid ${C.line}` }}>
          {[
            ['Incoming this week','$684K','Draw 12 · Harborview','blue'],
            ['Ready to pay out','$412K','12 subs · 2 auto-approved'],
            ['Held in retainage','$1.18M','10% across 6 projects','amber'],
            ['Lien waivers','11 pending','2 overdue','amber'],
            ['Float','$2.34M','operating'],
          ].map(([k,v,s,t],i) => (
            <div key={i} style={{ background: C.panel, padding: '14px 18px' }}>
              <div style={{ fontSize: 11, color: C.ink2, marginBottom: 5 }}>{k}</div>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', color: t === 'blue' ? C.blueDeep : C.ink }}>{v}</div>
              <div style={{ fontSize: 11, color: t === 'amber' ? C.amber : C.ink3, marginTop: 4 }}>{s}</div>
            </div>
          ))}
        </div>

        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 0, overflow: 'hidden' }}>
          {/* Flow column */}
          <div style={{ background: C.panel, borderRight: `1px solid ${C.line}`, padding: '16px 22px', overflow: 'auto' }}>
            <div style={{ fontSize: 11, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 10 }}>
              Active draw · Harborview Blk B
            </div>

            {/* draw amount */}
            <div style={{ padding: '14px 16px', border: `1px solid ${C.line}`, borderRadius: 10, background: C.bg, marginBottom: 16 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>$684,214</div>
                <div style={{ fontSize: 12, color: C.ink3 }}>Draw 12 · period Apr 1 – Apr 20</div>
              </div>
              <div style={{ fontSize: 11, color: C.ink3, marginTop: 4, fontFamily: C.mono }}>G702 / G703 · prepared by Contro · reviewed by M. Reyes</div>
            </div>

            {/* flow steps */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {[
                { k: 'Draw prepared',     t: 'Apr 20 · 4:12 PM', s: 'Contro pulled 47 invoices + labor + % complete', done: true },
                { k: 'GC review',         t: 'Apr 20 · 5:40 PM', s: 'Marcus approved 12 line items · 0 edits',        done: true },
                { k: 'Owner review',      t: 'Apr 21 · 9:02 AM', s: 'Calloway Co — pending signature',                active: true },
                { k: 'Bank funded',       t: 'ETA Apr 23',       s: 'Chase · auto-routed on signature',               future: true },
                { k: 'Subcontractor payouts', t: 'Apr 23 → 24',  s: '12 subs · waivers auto-collected',               future: true },
              ].map((x, i, a) => (
                <div key={i} style={{ display: 'flex', gap: 14, paddingBottom: i === a.length - 1 ? 0 : 14, position: 'relative' }}>
                  <div style={{ width: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                    <div style={{
                      width: 16, height: 16, borderRadius: '50%',
                      background: x.done ? C.mint : x.active ? C.blue : C.line,
                      border: `2px solid ${x.active ? C.blue : x.done ? C.mint : C.line}`,
                      display: 'grid', placeItems: 'center',
                      color: '#fff', fontSize: 9, fontWeight: 700,
                      animation: x.active ? 'pulse 1.6s ease-in-out infinite' : 'none',
                    }}>{x.done ? '✓' : ''}</div>
                    {i < a.length - 1 && (
                      <div style={{ flex: 1, width: 2, background: x.done ? C.mint : C.line, marginTop: 2 }} />
                    )}
                  </div>
                  <div style={{ flex: 1, paddingBottom: 4 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                      <span style={{ fontSize: 13, fontWeight: 500, color: x.future ? C.ink3 : C.ink }}>{x.k}</span>
                      <span style={{ fontSize: 10, color: C.ink3, fontFamily: C.mono }}>{x.t}</span>
                    </div>
                    <div style={{ fontSize: 11, color: C.ink2, marginTop: 3 }}>{x.s}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* AI assist card */}
            <div style={{ marginTop: 18, padding: 12, background: C.blueSoft, borderRadius: 8, display: 'flex', gap: 10 }}>
              <span style={{ width: 22, height: 22, borderRadius: 6, background: `linear-gradient(135deg, ${C.blue}, ${C.indigo})`, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: C.mono, fontSize: 11, fontWeight: 600, flexShrink: 0 }}>C</span>
              <div style={{ fontSize: 12, lineHeight: 1.55 }}>
                I queued <b>12 sub payouts</b> to auto-release the moment Calloway signs. 2 waivers still missing — I emailed Brannigan + Pine Ridge last night. Also drafted the AIA G702 cover letter. <b style={{ color: C.blueDeep }}>Preview →</b>
              </div>
            </div>
          </div>

          {/* Payouts ledger */}
          <div style={{ background: C.panel, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ padding: '10px 22px', fontSize: 11, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, borderBottom: `1px solid ${C.line}`, display: 'flex', gap: 22, background: C.bg }}>
              <span style={{ color: C.ink, borderBottom: `2px solid ${C.blue}`, paddingBottom: 6 }}>Payouts · 12</span>
              <span>Retainage · $1.18M</span>
              <span>Lien waivers · 11</span>
              <span>Payment history</span>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 100px 80px 120px 30px', padding: '9px 22px', fontSize: 10, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, borderBottom: `1px solid ${C.line}`, background: C.bg }}>
              <span>Subcontractor</span><span>Scope</span>
              <span style={{ textAlign: 'right' }}>Payout</span>
              <span style={{ textAlign: 'right' }}>Retain</span>
              <span>Waiver</span><span></span>
            </div>

            <div style={{ flex: 1, overflow: 'auto' }}>
              {[
                ['Brannigan Concrete','Foundation + slabs', '$184,220','$20,468','pending','amber'],
                ['Atlantic Steel','Rebar + structural',    '$92,140', '$10,238','collected','mint'],
                ['Pine Ridge Lumber','Framing lumber',      '$64,820', '$7,202', 'pending','amber'],
                ['Simpson Strong-Tie','Connectors',         '$12,640', '$1,404', 'collected','mint'],
                ['Uponor PEX','Rough plumbing',             '$28,410', '$3,157', 'collected','mint'],
                ['Atlas Electric','Rough electric',          '$48,920','$5,436', 'collected','mint'],
                ['Rockwool NE','Insulation',                 '$18,150','$2,017', 'collected','mint'],
                ['Northern Roofing','TPO · deposit',         '$32,680','$3,631', 'on-file','mint'],
                ['Clearline Glazing','Low-E IGU · deposit',  '$24,000','$2,667', 'pending','amber'],
                ['USG Drywall','Phase 1',                    '$52,080','$5,786', 'collected','mint'],
                ['Meridian Tile','Finish tile · deposit',    '$11,540','$1,282', 'on-file','mint'],
                ['Marley Freight','Haul + debris',           '$8,214', '—',      'n/a','default'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 100px 80px 120px 30px', padding: '12px 22px', fontSize: 12, borderBottom: `1px solid ${C.line2}`, alignItems: 'center' }}>
                  <span style={{ fontWeight: 500 }}>{r[0]}</span>
                  <span style={{ color: C.ink2 }}>{r[1]}</span>
                  <span style={{ textAlign: 'right', fontFamily: C.mono, fontWeight: 500 }}>{r[2]}</span>
                  <span style={{ textAlign: 'right', fontFamily: C.mono, color: C.ink3 }}>{r[3]}</span>
                  <span><CPill tone={r[5]}>{r[4]}</CPill></span>
                  <span style={{ textAlign: 'right', color: C.ink3 }}>⋯</span>
                </div>
              ))}
            </div>

            <div style={{ padding: '12px 22px', borderTop: `1px solid ${C.line}`, background: C.bg, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ fontSize: 12, color: C.ink2 }}>
                <span style={{ fontFamily: C.mono }}>$577,814</span> total payouts · <span style={{ fontFamily: C.mono }}>$63,288</span> held in retainage
              </div>
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
                <CButton>Export · G703</CButton>
                <CButton primary icon="↗">Release on signature</CButton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PaymentsPage });