// Contra · 03 Invoicing — editorial light theme
const INV_ACCENT = K.teal;

function InvoiceCreatePage() {
  return (
    <KShell accent={INV_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 440px', gap: 48, height: '100%' }}>
        <div style={{ display: 'flex', flexDirection: 'column', overflow: 'auto', paddingRight: 8 }}>
          <KCrumb accent={INV_ACCENT}>Invoice · #JOH-003 · Johnson Kitchen</KCrumb>
          <KHeadline>
            Rough-in is done. Send Sarah <span style={{ color: INV_ACCENT }}>$12,400?</span>
          </KHeadline>
          <div style={{ fontSize: 14, color: K.body, marginTop: 14, maxWidth: 560, lineHeight: 1.6 }}>
            The rough-in milestone was marked complete 7 minutes ago. I pulled in the base contract amount and the two approved COs, and drafted a Net-14 invoice ready for Sarah's signature.
          </div>

          <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
            <KPill dark icon="↑">Send invoice</KPill>
            <KPill>Preview PDF</KPill>
            <KPill>Schedule send</KPill>
          </div>

          {/* Milestones */}
          <div style={{ marginTop: 30 }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.14em', marginBottom: 12 }}>MILESTONES</div>
            <KPhases items={['Deposit', 'Rough-in', 'Cabinets', 'Final']} active={1} />
          </div>

          {/* Line items */}
          <div style={{ marginTop: 30 }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.14em', marginBottom: 12 }}>LINE ITEMS</div>
            <div style={{ borderTop: `1px solid ${K.line}` }}>
              {[
                ['Rough-in milestone · base contract', '$10,500.00'],
                ['CO-001 · Upgrade to copper supply lines', '$1,240.00'],
                ['CO-002 · Relocate gas line for range', '$660.00'],
              ].map(([n, v], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', borderBottom: `1px solid ${K.line2}`, fontSize: 13.5, color: K.ink2 }}>
                  <span>{n}</span>
                  <span style={{ fontFamily: K.mono, color: K.ink }}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Total */}
          <div style={{ marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontSize: 13, color: K.mute }}>Total due · Net 14 · May 8</div>
            <div style={{ fontFamily: K.serif, fontSize: 52, color: K.ink, letterSpacing: '-0.02em', lineHeight: 1 }}>$12,400.00</div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 6 }}>
          <KCard pad={22}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 4 }}>Sarah Johnson · since Mar 3</div>
            <div style={{ fontFamily: K.serif, fontSize: 26, color: K.ink, letterSpacing: '-0.01em' }}>Paid on time · 2/2</div>
            <div style={{ height: 4, background: K.line2, borderRadius: 2, marginTop: 14 }}>
              <div style={{ width: '100%', height: '100%', background: K.green, borderRadius: 2 }} />
            </div>
            <div style={{ marginTop: 14, fontSize: 12, color: K.body, lineHeight: 1.6 }}>
              Deposit · paid day-of<br />
              Demo milestone · paid in 3 days<br />
              Avg pay latency · 1.4 days
            </div>
          </KCard>

          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 10 }}>Accept</div>
            {['Credit card', 'ACH', 'Check'].map((m, i) => (
              <div key={m} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderTop: i ? `1px solid ${K.line2}` : 'none', fontSize: 12.5, color: K.ink2 }}>
                <span>{m}</span>
                <span style={{ color: i < 2 ? INV_ACCENT : K.mute }}>{i < 2 ? 'on' : 'off'}</span>
              </div>
            ))}
          </KCard>

          <KAICard accent={INV_ACCENT}>
            I'll auto-send this the second you mark rough-in complete. Sarah always reads invoices inside 10 minutes of receipt.
          </KAICard>
        </div>
      </div>
    </KShell>
  );
}

// ── 3B A/R Dashboard ──
function ARDashboardPage() {
  const rows = [
    { c: 'Jen Marsh', j: 'Marsh Addition', n: '#MAR-002', amt: '$18,400', d: 67, zone: K.red, action: 'Final notice drafted — awaiting approval', esc: true },
    { c: 'David Pike', j: 'Pike Bath', n: '#PIK-004', amt: '$6,800',  d: 42, zone: K.orange, action: 'Firm reminder · 12 days ago' },
    { c: 'Calloway Co', j: 'Calloway TI', n: '#CW-003', amt: '$24,100', d: 35, zone: K.orange, action: 'Firm reminder · 5 days ago' },
    { c: 'Sarah Johnson', j: 'Johnson Kitchen', n: '#JOH-002', amt: '$12,400', d: 18, zone: K.amber, action: 'Gentle reminder · 3 days ago' },
    { c: 'Westbrook Mgmt', j: 'Westbrook 4-6', n: '#WB-014', amt: '$9,200', d: 11, zone: K.amber, action: 'Gentle reminder queued · day 14' },
    { c: 'Reyna Ortiz', j: 'Ortiz Deck', n: '#ORT-001', amt: '$4,100', d: 4, zone: K.green, action: 'No action needed' },
  ];
  return (
    <KShell accent={INV_ACCENT}>
      <KCrumb accent={INV_ACCENT}>Accounts receivable · all jobs</KCrumb>
      <KHeadline>
        <span style={{ color: INV_ACCENT }}>$75,000</span> is out there. One invoice is past 60 days.
      </KHeadline>
      <div style={{ fontSize: 14, color: K.body, marginTop: 14, maxWidth: 620, lineHeight: 1.55 }}>
        Contro runs the reminder sequence on a schedule you set once. You approve tone on anything past 45 days before it goes out.
      </div>

      {/* Aging bar */}
      <div style={{ marginTop: 30 }}>
        <div style={{ height: 14, borderRadius: 3, display: 'flex', gap: 2, overflow: 'hidden' }}>
          <div style={{ width: '6%',  background: K.green }} />
          <div style={{ width: '28%', background: K.amber }} />
          <div style={{ width: '42%', background: K.orange }} />
          <div style={{ width: '24%', background: K.red }} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 14 }}>
          {[
            ['Current', '$4,100', '1 inv', K.green],
            ['1–30 days', '$21,600', '2 inv', K.amber],
            ['31–60 days', '$30,900', '2 inv', K.orange],
            ['60+ days', '$18,400', '1 inv', K.red],
          ].map(([l, v, c, tone]) => (
            <div key={l}>
              <div style={{ fontFamily: K.mono, fontSize: 10, color: tone, letterSpacing: '0.1em', marginBottom: 4 }}>● {l.toUpperCase()}</div>
              <div style={{ fontFamily: K.serif, fontSize: 24, color: K.ink, letterSpacing: '-0.01em' }}>{v}</div>
              <div style={{ fontSize: 11, color: K.mute }}>{c}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Invoice list */}
      <div style={{ marginTop: 32 }}>
        <div style={{ fontFamily: K.serif, fontSize: 22, color: K.ink, marginBottom: 14 }}>Open invoices</div>
        <div style={{ borderTop: `1px solid ${K.line}` }}>
          {rows.map(r => (
            <div key={r.n} style={{ display: 'grid', gridTemplateColumns: '180px 110px 110px 80px 1fr 150px', gap: 16, padding: '16px 0', borderBottom: `1px solid ${K.line2}`, alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 13.5, color: K.ink }}>{r.c}</div>
                <div style={{ fontSize: 11, color: K.mute, marginTop: 2 }}>{r.j}</div>
              </div>
              <span style={{ fontFamily: K.mono, fontSize: 11, color: K.mute }}>{r.n}</span>
              <span style={{ fontFamily: K.serif, fontSize: 18, color: K.ink }}>{r.amt}</span>
              <div>
                <div style={{ fontFamily: K.serif, fontSize: 20, color: r.zone, letterSpacing: '-0.01em' }}>{r.d}d</div>
                <div style={{ fontFamily: K.mono, fontSize: 9, color: K.mute, letterSpacing: '0.1em' }}>OVERDUE</div>
              </div>
              <span style={{ fontSize: 12.5, color: K.body, fontStyle: 'italic' }}>{r.action}</span>
              <div style={{ textAlign: 'right' }}>
                {r.esc ? <KPill dark>Approve & send</KPill> : <KPill>Mark paid</KPill>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </KShell>
  );
}

Object.assign(window, { InvoiceCreatePage, ARDashboardPage });