// Contra · 02 Change Orders — editorial light theme
const CO_ACCENT = K.orange;

function ChangeOrderCreatePage() {
  return (
    <KShell accent={CO_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 420px', gap: 48, height: '100%' }}>

        <div style={{ display: 'flex', flexDirection: 'column', overflow: 'auto', paddingRight: 8 }}>
          <KCrumb accent={CO_ACCENT}>Change Order · CO-003 · Johnson Kitchen</KCrumb>
          <KHeadline>
            Contro priced the subfloor repair at <span style={{ color: CO_ACCENT }}>$864.</span>
          </KHeadline>
          <div style={{ fontSize: 14, color: K.body, marginTop: 14, maxWidth: 560, lineHeight: 1.6 }}>
            You said: <em>"Found rot under the bathroom subfloor, need to replace about forty square feet."</em> I matched it to three past subfloor repairs and drafted the CO. Review, send for signature.
          </div>

          <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
            <KPill dark icon="↑">Send for e-signature</KPill>
            <KPill>Preview PDF</KPill>
            <KPill>Re-record</KPill>
          </div>

          {/* Draft table */}
          <div style={{ marginTop: 30 }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.14em', marginBottom: 10 }}>DRAFT · EDITABLE</div>
            <div style={{ borderTop: `1px solid ${K.line}`, borderBottom: `1px solid ${K.line}` }}>
              {[
                ['Description', 'Replace rot-damaged subfloor in master bathroom prior to tile installation. Remove compromised plywood, remediate moisture, install ¾" T&G subfloor per code.'],
                ['Quantity', '40 sqft'],
                ['Unit cost', <span><span style={{ fontFamily: K.serif, fontSize: 18 }}>$18.00</span> <span style={{ fontSize: 11, color: K.mute, fontStyle: 'italic' }}>from 3 past jobs</span></span>],
                ['Markup', '20%'],
                ['Photo attached', 'rot_bathroom_01.jpg · 2.4 MB'],
              ].map(([k, v], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 20, padding: '14px 0', borderTop: i ? `1px solid ${K.line2}` : 'none' }}>
                  <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.1em', textTransform: 'uppercase', paddingTop: 3 }}>{k}</div>
                  <div style={{ fontSize: 14, color: K.ink2, lineHeight: 1.55 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Total */}
          <div style={{ marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontSize: 13, color: K.mute }}>$720 + 20% markup</div>
            <div style={{ fontFamily: K.serif, fontSize: 52, color: K.ink, letterSpacing: '-0.02em', lineHeight: 1 }}>$864.00</div>
          </div>
        </div>

        {/* Side: voice capture */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 6 }}>
          <KCard pad={22}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 14 }}>Voice capture</div>
            <div style={{ display: 'grid', placeItems: 'center', padding: '10px 0 18px' }}>
              <div style={{
                width: 96, height: 96, borderRadius: '50%', background: CO_ACCENT, color: '#fff',
                display: 'grid', placeItems: 'center', fontSize: 28,
                boxShadow: `0 0 0 10px ${CO_ACCENT}1A`,
              }}>🎤</div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 3, height: 26, marginBottom: 8 }}>
              {[4,9,14,22,28,20,14,24,30,18,10,18,24,20,14,8].map((h,i) => (
                <div key={i} style={{ width: 2, height: h, background: CO_ACCENT, borderRadius: 1, opacity: 0.3 + i * 0.04 }} />
              ))}
            </div>
            <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, textAlign: 'center', letterSpacing: '0.08em' }}>00:14 · TRANSCRIBED</div>
          </KCard>

          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 10 }}>Price references</div>
            {[
              ['Carter subfloor · ¾ T&G', '$17.50'],
              ['Webb bathroom sub', '$18.25'],
              ['Olsen kitchen sub', '$18.00'],
            ].map(([n, v], i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderTop: i ? `1px solid ${K.line2}` : 'none', fontSize: 12.5 }}>
                <span style={{ color: K.body }}>{n}</span>
                <span style={{ fontFamily: K.mono, color: K.ink }}>{v}</span>
              </div>
            ))}
          </KCard>

          <KAICard accent={CO_ACCENT}>
            Sarah's CO-001 and CO-002 both signed within 24h. Expect the same on this one. I'll send a reminder if nothing by Friday.
          </KAICard>
        </div>
      </div>
    </KShell>
  );
}

// ── 2B Dashboard ──
function ChangeOrderDashboardPage() {
  const rows = [
    { job: 'Johnson Kitchen', n: 'CO-003', d: 'Subfloor rot — 40 sqft replacement', amt: '$864',   sent: '2h',  status: 'pending' },
    { job: 'Harborview Blk B', n: 'CO-014', d: 'Rebar upsize #4 → #5 per engineer note', amt: '$3,240',  sent: '1d', status: 'pending' },
    { job: 'Marsh Addition', n: 'CO-008', d: 'Add pergola 12×10 pressure-treated', amt: '$5,600', sent: '3d', status: 'pending', reminder: true },
    { job: 'Smith Bath', n: 'CO-002', d: 'Upgrade vanity to walnut slab', amt: '$1,420', sent: 'Apr 21', status: 'approved' },
    { job: 'Pike Bath', n: 'CO-005', d: 'Glass enclosure to frameless', amt: '$2,800', sent: 'Apr 19', status: 'approved' },
    { job: 'Calloway TI', n: 'CO-011', d: 'Remove demo scope, wall B-12', amt: '-$1,100', sent: 'Apr 18', status: 'declined' },
    { job: 'Calloway TI', n: 'CO-010', d: 'Additional outlets, conference room', amt: '$1,950', sent: 'Apr 15', status: 'approved' },
  ];
  return (
    <KShell accent={CO_ACCENT}>
      <KCrumb accent={CO_ACCENT}>Change Orders · all jobs</KCrumb>
      <KHeadline>
        <span style={{ color: CO_ACCENT }}>$9,704</span> is waiting on a signature.
      </KHeadline>
      <div style={{ fontSize: 14, color: K.body, marginTop: 14, maxWidth: 640, lineHeight: 1.55 }}>
        Three COs sent, three signed, one declined — year to date, change orders have added <strong>$48,210</strong> to billed work. Contro auto-reminds at 48 hours.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 30 }}>
        <Stat label="Pending signature" value="$9,704" sub="3 COs · avg age 2d" accent={CO_ACCENT} />
        <Stat label="Approved YTD" value="$48,210" sub="12 COs" accent={K.green} />
        <Stat label="Billed via COs · April" value="$14,890" sub="this month" accent={K.ink} />
      </div>

      <div style={{ marginTop: 32 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 14 }}>
          <div style={{ fontFamily: K.serif, fontSize: 22, color: K.ink }}>Activity</div>
          <div style={{ marginLeft: 'auto', fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.12em' }}>SORTED BY MOST RECENT</div>
        </div>
        <div style={{ borderTop: `1px solid ${K.line}` }}>
          {rows.map(r => (
            <div key={r.n} style={{ display: 'grid', gridTemplateColumns: '160px 80px 1fr 120px 90px 140px', gap: 18, padding: '14px 0', borderBottom: `1px solid ${K.line2}`, alignItems: 'center' }}>
              <span style={{ fontSize: 13.5, color: K.ink }}>{r.job}</span>
              <span style={{ fontFamily: K.mono, fontSize: 11, color: K.mute }}>{r.n}</span>
              <span style={{ fontSize: 13, color: K.body, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.d}</span>
              <span style={{ fontFamily: K.serif, fontSize: 18, color: r.amt.startsWith('-') ? K.red : K.ink, textAlign: 'right' }}>{r.amt}</span>
              <span style={{ fontFamily: K.mono, fontSize: 11, color: K.mute }}>{r.sent}</span>
              <span style={{
                fontSize: 11, fontStyle: 'italic',
                color: r.status === 'pending' ? CO_ACCENT : r.status === 'approved' ? K.green : K.mute,
                fontFamily: K.serif, fontSize: 14,
              }}>
                {r.status}{r.reminder && <span style={{ color: CO_ACCENT, fontFamily: K.mono, fontStyle: 'normal', fontSize: 10, letterSpacing: '0.1em', marginLeft: 8 }}>· REMINDED</span>}
              </span>
            </div>
          ))}
        </div>
      </div>

      <KAICard accent={CO_ACCENT} style={{ marginTop: 24 }}>
        Marsh's pergola CO is 72h out with no response. I've drafted a warm follow-up — want to send it now?
      </KAICard>
    </KShell>
  );
}

function Stat({ label, value, sub, accent }) {
  return (
    <KCard pad={20}>
      <div style={{ fontSize: 11, color: K.mute, marginBottom: 10 }}>{label}</div>
      <div style={{ fontFamily: K.serif, fontSize: 36, color: accent, letterSpacing: '-0.02em', lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: 12, color: K.mute, marginTop: 8 }}>{sub}</div>
    </KCard>
  );
}

Object.assign(window, { ChangeOrderCreatePage, ChangeOrderDashboardPage, Stat });