// Contra · 01 Unified Comms Hub — editorial light theme
// Screen 1A: Inbox · Screen 1B: Thread

const COMMS_ACCENT = K.yellow;

const MESSAGES = [
  { sender: 'Sarah Johnson', job: 'Johnson Kitchen', channel: 'SMS',
    preview: "Hi Marcus — can we also add the pergola while you're here? Willing to pay extra obviously.",
    time: '2m', intent: 'CHANGE', draft: true, unread: true },
  { sender: 'ABC Supply · Ron', job: 'Harborview Blk B', channel: 'EMAIL',
    preview: 'Rebar #4 order ready for pickup, 40 bundles. Please confirm delivery window for Friday AM.',
    time: '14m', intent: 'SCHEDULE', draft: true, unread: true },
  { sender: 'David Pike', job: 'Pike Bath', channel: 'VOICE',
    preview: '[1:24] "Hey Marcus, checking on the tile eta, guests coming Saturday so…"',
    time: '47m', intent: 'QUESTION', draft: true, unread: true },
  { sender: 'Calloway Co', job: 'Calloway Office TI', channel: 'EMAIL',
    preview: 'Wire transfer confirmation — $28,400 · Milestone 2 paid · Ref #CW-2209',
    time: '2h', intent: 'PAYMENT', draft: false },
  { sender: 'Mike Torres · Tile', job: 'Smith Bath', channel: 'SMS',
    preview: 'Running about 20min late to Smith, dropping my kid at school. On site by 7:50.',
    time: '3h', intent: 'SCHEDULE', draft: false },
  { sender: 'Jen Marsh', job: 'Marsh Addition', channel: 'SMS',
    preview: "When are you pouring the footings? My neighbor keeps asking when the noise starts lol",
    time: '5h', intent: 'QUESTION', draft: true },
  { sender: 'City Permits', job: 'Harborview Blk B', channel: 'EMAIL',
    preview: 'Permit #HB-4412 inspection scheduled for Thursday Apr 29, 10:00 AM. Reply Y to confirm.',
    time: '8h', intent: 'SCHEDULE', draft: true },
];

const INTENT_LABEL = {
  CHANGE:   'change request',
  PAYMENT:  'payment',
  SCHEDULE: 'schedule',
  QUESTION: 'question',
};

function CommsInboxPage() {
  return (
    <KShell accent={COMMS_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 40, height: '100%' }}>

        {/* Main column */}
        <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          <KCrumb accent={COMMS_ACCENT}>Messages · all jobs</KCrumb>
          <KHeadline>
            12 unread, <span style={{ color: COMMS_ACCENT }}>6 replies drafted.</span>
          </KHeadline>
          <div style={{ fontSize: 14, color: K.body, marginTop: 14, maxWidth: 520, lineHeight: 1.55 }}>
            Contro read every SMS, email, and voicemail since this morning, tagged each to a job, and wrote replies you can send as-is or edit. The rest is quiet.
          </div>

          <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
            <KPill active>All · 23</KPill>
            <KPill>Clients · 9</KPill>
            <KPill>Subs · 7</KPill>
            <KPill>Vendors · 7</KPill>
          </div>

          <div style={{ marginTop: 26, flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 2 }}>
            {MESSAGES.map((m, i) => <InboxRow key={i} m={m} />)}
          </div>
        </div>

        {/* Side column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 6 }}>
          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 6 }}>Unread to triage</div>
            <div style={{ fontFamily: K.serif, fontSize: 36, color: K.ink, lineHeight: 1 }}>
              12 <span style={{ color: K.mute }}>/ 23 total</span>
            </div>
            <div style={{ height: 4, background: K.line2, borderRadius: 2, marginTop: 14, overflow: 'hidden' }}>
              <div style={{ width: '52%', height: '100%', background: COMMS_ACCENT }} />
            </div>
          </KCard>

          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 10 }}>Drafts ready to send</div>
            {[
              ['Sarah Johnson · Pergola quote', true],
              ['ABC Supply · Friday delivery Y', false],
              ['David Pike · Tile ETA Sat AM', false],
              ['Jen Marsh · Footings May 5', false],
              ['City Permits · Confirm Thu 10a', false],
              ['Sarah Johnson · Backsplash Friday', false],
            ].map(([n, hot], i) => (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between', padding: '10px 0',
                borderTop: i ? `1px solid ${K.line2}` : 'none', fontSize: 12.5, color: K.ink2,
              }}>
                <span>{n}</span>
                <span style={{ color: hot ? COMMS_ACCENT : K.mute, fontSize: 14 }}>→</span>
              </div>
            ))}
          </KCard>

          <KAICard accent={COMMS_ACCENT}>
            One of Sarah's messages is a scope change — the pergola. I've drafted a ballpark ($4,200–$6,800) and a Change Order is queued in drafts.
          </KAICard>
        </div>
      </div>
    </KShell>
  );
}

function InboxRow({ m }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '180px 1fr 110px 80px',
      gap: 20, padding: '16px 0', alignItems: 'baseline',
      borderTop: `1px solid ${K.line2}`,
    }}>
      <div>
        <div style={{ fontSize: 14, color: K.ink, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8 }}>
          {m.unread && <span style={{ width: 6, height: 6, borderRadius: '50%', background: COMMS_ACCENT }} />}
          {m.sender}
        </div>
        <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.08em', marginTop: 3, textTransform: 'uppercase' }}>
          {m.job} · {m.channel}
        </div>
      </div>
      <div style={{ fontSize: 13, color: K.body, lineHeight: 1.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {m.preview}
      </div>
      <div style={{ fontSize: 11.5, color: K.mute, fontStyle: 'italic' }}>
        {INTENT_LABEL[m.intent]}
      </div>
      <div style={{ textAlign: 'right', fontFamily: K.mono, fontSize: 11, color: K.mute }}>
        {m.draft ? <span style={{ color: K.ink, fontStyle: 'italic', fontFamily: K.serif, fontSize: 13 }}>reply →</span> : m.time}
      </div>
    </div>
  );
}

// ── Screen 1B: Thread ───────────────────────────────────
function CommsThreadPage() {
  return (
    <KShell accent={COMMS_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 40, height: '100%' }}>

        <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          <KCrumb accent={COMMS_ACCENT}>Messages · Sarah Johnson</KCrumb>
          <KHeadline style={{ fontSize: 36 }}>
            Sarah wants to add <span style={{ color: COMMS_ACCENT, fontStyle: 'italic' }}>a pergola.</span>
          </KHeadline>
          <div style={{ fontSize: 14, color: K.body, marginTop: 12, maxWidth: 480, lineHeight: 1.55 }}>
            Johnson Kitchen Remodel · 142 Oak St · $84,200 contract · 67% complete. She's already paid the first two milestones on time.
          </div>

          <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
            <KPill dark icon="+">Start Change Order</KPill>
            <KPill>Reply with AI draft</KPill>
            <KPill>Call Sarah</KPill>
          </div>

          {/* Thread */}
          <div style={{ marginTop: 28, flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 18 }}>
            <Bubble who="Sarah" time="Mon 4:12 PM">Cabinets are in! Color is absolutely perfect. Mike was super nice too.</Bubble>
            <Bubble who="You" time="Mon 4:28 PM" mine>So glad you love them. Backsplash arrives Thurs — we'll set it Friday.</Bubble>
            <Bubble who="Sarah" time="Tue 9:41 AM">Quick q — any way to match the outlet covers to the cabinets? White looks off.</Bubble>
            <Bubble who="You" time="Tue 9:55 AM" mine>Yep, brushed brass covers will blend nicely — I'll grab them.</Bubble>
            <Bubble who="Sarah" time="Today 10:42 AM" fresh>
              Hi Marcus — can we also add the pergola while you're here? Willing to pay extra obviously.
            </Bubble>
          </div>

          {/* AI draft box */}
          <div style={{
            marginTop: 18, background: K.paper, border: `1px solid ${K.line}`, borderRadius: 14,
            padding: 18,
          }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, color: COMMS_ACCENT, letterSpacing: '0.14em', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: COMMS_ACCENT }} />
              AI REPLY · READY TO SEND
            </div>
            <div style={{ fontSize: 14, color: K.ink2, lineHeight: 1.6 }}>
              Happy to take a look! Pergolas typically run $4,200–$6,800 depending on materials. Want me to send over a change order with a firm number by tomorrow?
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 14, alignItems: 'center' }}>
              <KPill>Edit</KPill>
              <KPill>Try different tone</KPill>
              <div style={{ flex: 1 }} />
              <KPill dark>Send ↑</KPill>
            </div>
          </div>
        </div>

        {/* Side */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 6 }}>
          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 6 }}>Johnson Kitchen · contract</div>
            <div style={{ fontFamily: K.serif, fontSize: 34, color: K.ink, lineHeight: 1 }}>
              $84.2k <span style={{ color: K.mute, fontSize: 20 }}>· 67%</span>
            </div>
            <div style={{ height: 4, background: K.line2, borderRadius: 2, marginTop: 14, overflow: 'hidden' }}>
              <div style={{ width: '67%', height: '100%', background: K.ink }} />
            </div>
            <div style={{ marginTop: 14, fontSize: 12, color: K.body, lineHeight: 1.6 }}>
              INV #3 · <span style={{ color: K.ink }}>$12,400 pending</span><br />
              CO-002 · approved Apr 21<br />
              Client since March 3, 2026
            </div>
          </KCard>

          <div style={{
            background: `${K.orange}14`, border: `1px solid ${K.orange}55`,
            borderRadius: 14, padding: 18,
          }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, color: K.orange, letterSpacing: '0.14em', marginBottom: 8 }}>
              ● SCOPE CHANGE DETECTED
            </div>
            <div style={{ fontSize: 14, color: K.ink, fontFamily: K.serif, lineHeight: 1.35, marginBottom: 10 }}>
              "pergola" isn't in the Johnson scope. Draft a Change Order?
            </div>
            <KPill dark>+ Create CO-003</KPill>
          </div>

          <KAICard accent={COMMS_ACCENT}>
            Reply tone matches your past 8 messages to Sarah — warm, brief, action-oriented. Price range pulled from 4 similar pergola jobs.
          </KAICard>
        </div>
      </div>
    </KShell>
  );
}

function Bubble({ who, time, children, mine, fresh }) {
  return (
    <div>
      <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.08em', marginBottom: 6 }}>
        {who} · {time}{fresh && <span style={{ color: COMMS_ACCENT }}> · NEW</span>}
      </div>
      <div style={{
        background: mine ? K.ink : K.paper,
        color: mine ? '#fff' : K.ink2,
        border: mine ? 'none' : `1px solid ${fresh ? COMMS_ACCENT + 'aa' : K.line}`,
        padding: '12px 16px', borderRadius: 14,
        maxWidth: '76%', fontSize: 14, lineHeight: 1.5,
        display: 'inline-block',
      }}>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { CommsInboxPage, CommsThreadPage });