// Nurse / care team interface — tablet form factor

const CARE_TEAM_PATIENTS = [
  {
    id: '1042', name: 'Chest discomfort · 54M', location: 'Zone B · Chair 12',
    status: 'change', priority: 1,
    waited: '1h 14m', lastPing: '12:52 AM',
    headline: 'Pain 5 → 8 · New: dizziness',
    changes: [
      { label: 'Pain', from: '5', to: '8' },
      { label: 'Symptom', from: null, to: 'Dizziness', isNew: true },
    ],
    reason: 'Configured threshold: ≥2-point pain increase OR new symptom',
  },
  {
    id: '1045', name: 'Abdominal pain · 31F', location: 'Zone A · Chair 04',
    status: 'change', priority: 2,
    waited: '48m', lastPing: '12:47 AM',
    headline: 'Considering leaving · elopement risk',
    changes: [
      { label: 'Intent', from: 'Staying', to: 'Considering leaving', isNew: false },
    ],
    reason: 'Configured trigger: LWBS intent signal',
  },
  {
    id: '1043', name: 'Laceration · 42M', location: 'Zone A · Chair 07',
    status: 'followup', priority: 3,
    waited: '52m', lastPing: '12:12 AM',
    headline: 'Follow-up overdue · 42 min since last check-in',
    reason: 'Configured cadence: 30 min for ESI 3 waiting > 45 min',
  },
  {
    id: '1047', name: 'Fever, cough · 28F', location: 'Zone B · Chair 15',
    status: 'followup', priority: 4,
    waited: '39m', lastPing: '12:18 AM',
    headline: 'Follow-up due in the next 5 min',
    reason: 'Configured cadence: 30 min for ESI 4',
  },
  {
    id: '1044', name: 'Ankle injury · 19M', location: 'Zone B · Chair 09',
    status: 'stable', priority: 5,
    waited: '22m', lastPing: '12:42 AM',
    headline: 'No meaningful change · reported "about the same"',
  },
  {
    id: '1046', name: 'Migraine · 36F', location: 'Zone A · Chair 02',
    status: 'stable', priority: 6,
    waited: '18m', lastPing: '12:38 AM',
    headline: 'No meaningful change · pain stable at 6',
  },
  {
    id: '1048', name: 'Wrist pain · 47M', location: 'Zone A · Chair 11',
    status: 'new', priority: 7,
    waited: '4m', lastPing: 'just now',
    headline: 'Just checked in · initial state captured',
  },
];

function CareTeam({ onOpenPatient }) {
  const [filter, setFilter] = React.useState('all');
  const [selected, setSelected] = React.useState('1042');

  const filtered = CARE_TEAM_PATIENTS.filter(p =>
    filter === 'all' ? true :
    filter === 'change' ? p.status === 'change' :
    filter === 'followup' ? p.status === 'followup' :
    p.status === 'stable'
  );

  return (
    <section id="care" className="section section--warm" data-screen-label="03 Care Team Dashboard">
      <div className="section__eyebrow">
        <span className="section__eyebrow-dot"></span>
        <span>Care team interface · A priority layer, not another dashboard</span>
      </div>

      <h2 className="section__title serif">
        Where does my attention need to go?
      </h2>

      <p className="section__lede">
        The care team never reads a conversation. Jessie surfaces only meaningful change — quantified, timestamped, and explained. Everything else stays quiet.
      </p>

      <div className="tablet">
        {/* Tablet toolbar */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '18px 28px',
          borderBottom: '1px solid var(--line-1)',
          background: 'var(--bg-elevated)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 26, height: 26, borderRadius: 6, background: 'var(--accent)', display: 'grid', placeItems: 'center', color: 'var(--ink-1)', fontFamily: 'var(--serif)', fontSize: 16, fontStyle: 'italic' }}>J</div>
            <div>
              <div className="serif" style={{ fontSize: 20, lineHeight: 1, letterSpacing: '-0.01em' }}>Jessie Care</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginTop: 3, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Emergency Department · Night shift 21:00–05:00</div>
            </div>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 18, fontSize: 12, color: 'var(--ink-3)' }}>
            <StatLine value="7" label="Active" />
            <StatLine value="2" label="Change detected" tone="red"/>
            <StatLine value="2" label="Follow-up due" tone="amber"/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingLeft: 18, borderLeft: '1px solid var(--line-1)' }}>
              <div style={{ width: 28, height: 28, borderRadius: 999, background: 'var(--ink-1)', color: 'white', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600 }}>MR</div>
              <div style={{ fontSize: 12 }}>
                <div style={{ fontWeight: 600, color: 'var(--ink-1)' }}>M. Rodríguez, RN</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>Charge · Zone A + B</div>
              </div>
            </div>
          </div>
        </div>

        {/* Filter row */}
        <div style={{
          display: 'flex', gap: 8, padding: '14px 28px',
          borderBottom: '1px solid var(--line-1)',
          background: 'var(--bg-card)',
        }}>
          <FilterChip active={filter === 'all'} onClick={() => setFilter('all')}>All patients · 7</FilterChip>
          <FilterChip active={filter === 'change'} onClick={() => setFilter('change')} tone="red">
            <span className="pill__dot" style={{ background: 'var(--sig-red)', width: 6, height: 6, borderRadius: 999, marginRight: 6, display: 'inline-block' }}></span>
            Change detected · 2
          </FilterChip>
          <FilterChip active={filter === 'followup'} onClick={() => setFilter('followup')} tone="amber">
            <span className="pill__dot" style={{ background: 'var(--sig-amber)', width: 6, height: 6, borderRadius: 999, marginRight: 6, display: 'inline-block' }}></span>
            Follow-up due · 2
          </FilterChip>
          <FilterChip active={filter === 'stable'} onClick={() => setFilter('stable')} tone="green">
            <span className="pill__dot" style={{ background: 'var(--sig-green)', width: 6, height: 6, borderRadius: 999, marginRight: 6, display: 'inline-block' }}></span>
            Stable · 2
          </FilterChip>

          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
            <button style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 12px', background: 'transparent',
              border: '1px solid var(--line-2)', borderRadius: 999,
              fontFamily: 'inherit', fontSize: 12, color: 'var(--ink-3)', cursor: 'pointer',
            }}>Configure workflow ⚙</button>
          </div>
        </div>

        {/* Queue */}
        <div style={{ padding: '8px 12px 20px', flex: 1, overflow: 'auto', background: 'var(--bg-card)' }}>
          {filtered.map(p => (
            <PatientRow
              key={p.id}
              p={p}
              selected={selected === p.id}
              onClick={() => { setSelected(p.id); onOpenPatient && onOpenPatient(p.id); }}
            />
          ))}
        </div>
      </div>

      {/* Deep-link note */}
      <div style={{ marginTop: 24, fontSize: 13, color: 'var(--ink-4)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Tip</span>
        <span>Tap any row to open the longitudinal patient view below.</span>
      </div>
    </section>
  );
}

function StatLine({ value, label, tone }) {
  const color = tone === 'red' ? 'var(--sig-red)' :
                tone === 'amber' ? 'var(--sig-amber)' :
                tone === 'green' ? 'var(--sig-green)' :
                'var(--ink-1)';
  return (
    <div>
      <span className="serif" style={{ fontSize: 22, color, letterSpacing: '-0.01em', fontWeight: 500, marginRight: 6 }}>{value}</span>
      <span style={{ fontSize: 12, color: 'var(--ink-4)' }}>{label}</span>
    </div>
  );
}

function FilterChip({ active, onClick, children, tone }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: 'inline-flex', alignItems: 'center',
        padding: '7px 14px', borderRadius: 999,
        border: `1px solid ${active ? 'var(--ink-1)' : 'var(--line-2)'}`,
        background: active ? 'var(--ink-1)' : 'transparent',
        color: active ? 'white' : 'var(--ink-2)',
        cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, fontWeight: 500,
      }}
    >
      {children}
    </button>
  );
}

function PatientRow({ p, selected, onClick }) {
  const tone = p.status === 'change' ? 'red' :
               p.status === 'followup' ? 'amber' :
               p.status === 'new' ? 'accent' :
               'green';
  const border = selected ? `2px solid var(--accent)` : `1px solid var(--line-1)`;

  return (
    <div
      onClick={onClick}
      style={{
        display: 'grid',
        gridTemplateColumns: '52px 200px 1fr 240px 120px 100px',
        gap: 20,
        alignItems: 'center',
        padding: '18px 20px',
        margin: '6px 0',
        background: selected ? 'var(--accent-tint)' : 'var(--bg-elevated)',
        border,
        borderRadius: 14,
        cursor: 'pointer',
        transition: 'all 120ms ease',
      }}
    >
      {/* Priority marker */}
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
      }}>
        <div style={{
          width: 8, height: 8, borderRadius: 999,
          background: tone === 'red' ? 'var(--sig-red)' :
                       tone === 'amber' ? 'var(--sig-amber)' :
                       tone === 'accent' ? 'var(--accent)' :
                       'var(--sig-green)',
          boxShadow: tone === 'red' ? '0 0 0 4px var(--sig-red-tint)' :
                     tone === 'amber' ? '0 0 0 4px var(--sig-amber-tint)' :
                     tone === 'accent' ? '0 0 0 4px var(--accent-tint)' :
                     '0 0 0 4px var(--sig-green-tint)',
        }}></div>
        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>#{p.priority}</span>
      </div>

      {/* Patient */}
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span className="serif" style={{ fontSize: 22, letterSpacing: '-0.01em' }}>Patient {p.id}</span>
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 2, letterSpacing: '0.02em' }}>
          {p.name}
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-5)', marginTop: 2, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
          {p.location}
        </div>
      </div>

      {/* The delta / change */}
      <div>
        {p.status === 'change' && p.changes ? (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, alignItems: 'center' }}>
            {p.changes.map((c, i) => (
              <div key={i}>
                <div className="uc" style={{ fontSize: 9, color: 'var(--ink-4)', marginBottom: 4 }}>{c.label}</div>
                {c.isNew ? (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className="chip-new" style={{ fontSize: 9, padding: '3px 8px' }}>New</span>
                    <span className="serif" style={{ fontSize: 22, color: 'var(--ink-1)' }}>{c.to}</span>
                  </div>
                ) : c.from ? (
                  <div className="delta delta--sm" style={{ fontSize: 26 }}>
                    <span className="delta__from">{c.from}</span>
                    <span className="delta__arrow">→</span>
                    <span className="delta__to">{c.to}</span>
                  </div>
                ) : (
                  <span className="serif" style={{ fontSize: 20, color: 'var(--ink-1)' }}>{c.to}</span>
                )}
              </div>
            ))}
          </div>
        ) : (
          <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.45 }}>
            {p.headline}
          </div>
        )}
      </div>

      {/* Why surfaced */}
      <div style={{ fontSize: 11, color: 'var(--ink-4)', lineHeight: 1.5 }}>
        {p.reason ? (
          <>
            <div className="uc" style={{ fontSize: 9, marginBottom: 3 }}>Why surfaced</div>
            {p.reason}
          </>
        ) : (
          <>
            <div className="uc" style={{ fontSize: 9, marginBottom: 3 }}>Signal</div>
            No workflow trigger
          </>
        )}
      </div>

      {/* Waited / last ping */}
      <div>
        <div style={{ fontSize: 12, color: 'var(--ink-2)' }}>
          Waited <strong style={{ color: 'var(--ink-1)' }}>{p.waited}</strong>
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginTop: 2 }}>
          Last: {p.lastPing}
        </div>
      </div>

      {/* Action */}
      <div>
        {p.status === 'change' && (
          <button className="btn btn--accent" style={{ padding: '10px 14px', fontSize: 12, width: '100%' }}>Review</button>
        )}
        {p.status === 'followup' && (
          <button className="btn btn--ghost" style={{ padding: '10px 14px', fontSize: 12, width: '100%' }}>Send check-in</button>
        )}
        {p.status === 'stable' && (
          <button className="btn btn--ghost" style={{ padding: '10px 14px', fontSize: 12, width: '100%', color: 'var(--ink-4)' }}>Open</button>
        )}
        {p.status === 'new' && (
          <button className="btn btn--ghost" style={{ padding: '10px 14px', fontSize: 12, width: '100%' }}>Open</button>
        )}
      </div>
    </div>
  );
}

/* ============================================
   Patient detail view for care team
   ============================================ */

function PatientDetail() {
  return (
    <section id="detail" className="section" data-screen-label="04 Patient Detail (Care Team)">
      <div className="section__eyebrow">
        <span className="section__eyebrow-dot"></span>
        <span>Patient detail · Care team view</span>
      </div>

      <h2 className="section__title serif">
        The patient's words, and the shape of what changed.
      </h2>

      <p className="section__lede">
        Two columns, never merged: the patient's original language on one side, the structured signal Jessie extracted on the other. The clinician sees both — and decides.
      </p>

      <div className="tablet" style={{ aspectRatio: '4 / 3.05' }}>
        {/* Detail header */}
        <div style={{
          padding: '22px 32px',
          borderBottom: '1px solid var(--line-1)',
          background: 'var(--bg-elevated)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
            <button style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 10px', background: 'transparent',
              border: '1px solid var(--line-2)', borderRadius: 8,
              fontFamily: 'inherit', fontSize: 12, color: 'var(--ink-3)', cursor: 'pointer',
            }}>← Queue</button>
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                <span className="serif" style={{ fontSize: 32, letterSpacing: '-0.02em' }}>Patient 1042</span>
                <span className="pill pill--red">
                  <span className="pill__dot"></span>
                  Change detected
                </span>
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 3, letterSpacing: '0.04em' }}>
                Chest discomfort · 54M · ESI 3 · Zone B · Chair 12 · Waited 1h 14m
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn--ghost" style={{ padding: '10px 16px', fontSize: 13 }}>Acknowledge</button>
            <button className="btn btn--ghost" style={{ padding: '10px 16px', fontSize: 13 }}>Document review</button>
            <button className="btn btn--accent" style={{ padding: '10px 18px', fontSize: 13 }}>Route per workflow →</button>
          </div>
        </div>

        {/* Detail body — two columns */}
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, minHeight: 0, background: 'var(--bg-card)' }}>
          {/* LEFT — patient's words */}
          <div style={{ padding: '32px 36px', borderRight: '1px solid var(--line-1)', overflow: 'auto' }}>
            <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 20 }}>
              Patient's words · original transcript
            </div>

            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--bg-inset)', flexShrink: 0, display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)' }}>P</div>
              <div style={{ flex: 1 }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginBottom: 4 }}>Patient · 12:52 AM · voice input</div>
                <div className="serif" style={{ fontSize: 26, lineHeight: 1.35, color: 'var(--ink-1)', fontStyle: 'italic', letterSpacing: '-0.005em' }}>
                  "My chest hurts more than before and now I'm feeling dizzy."
                </div>
              </div>
            </div>

            <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px dashed var(--line-2)' }}>
              <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 14 }}>
                Prior interactions
              </div>

              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 20 }}>
                <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--bg-inset)', flexShrink: 0, display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)' }}>P</div>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginBottom: 4 }}>Patient · 11:04 PM · tap</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.5 }}>
                    Selected <em style={{ color: 'var(--ink-2)', fontStyle: 'normal' }}>"About the same"</em> in check-in prompt.
                  </div>
                </div>
              </div>

              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 20 }}>
                <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--bg-inset)', flexShrink: 0, display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600, color: 'var(--ink-3)' }}>P</div>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginBottom: 4 }}>Patient · 10:18 PM · tap</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.5 }}>
                    Selected <em style={{ color: 'var(--ink-2)', fontStyle: 'normal' }}>"About the same"</em> in check-in prompt.
                  </div>
                </div>
              </div>

              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 32, height: 32, borderRadius: 999, background: 'var(--ink-1)', flexShrink: 0, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600, color: 'white' }}>T</div>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginBottom: 4 }}>Triage RN · 9:42 PM</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                    54M presents with intermittent central chest discomfort, onset ~2 hours ago. Denies radiation, SOB, dizziness, or diaphoresis. Vitals within normal range. <strong style={{ color: 'var(--ink-1)' }}>Pain 5/10.</strong>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* RIGHT — structured signal */}
          <div style={{ padding: '32px 36px', overflow: 'auto', background: 'var(--bg-elevated)' }}>
            <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 20 }}>
              Structured signal · what Jessie extracted
            </div>

            {/* Big delta */}
            <div style={{
              padding: '24px 24px',
              background: 'var(--bg-card)',
              border: '1px solid var(--line-1)',
              borderRadius: 16,
              marginBottom: 12,
            }}>
              <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 8 }}>Pain</div>
              <div className="delta delta--lg" style={{ fontSize: 84 }}>
                <span className="delta__from">5</span>
                <span className="delta__arrow">→</span>
                <span className="delta__to">8</span>
              </div>
              <div style={{ marginTop: 12, fontSize: 12, color: 'var(--ink-4)' }}>
                +3 points · configured threshold ≥ 2
              </div>
            </div>

            <div style={{
              padding: '20px 24px',
              background: 'var(--bg-card)',
              border: '1px solid var(--line-1)',
              borderRadius: 16,
              marginBottom: 12,
            }}>
              <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 12 }}>New symptom</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span className="chip-new">New</span>
                <span className="serif" style={{ fontSize: 32, letterSpacing: '-0.01em' }}>Dizziness</span>
              </div>
              <div style={{ marginTop: 10, fontSize: 12, color: 'var(--ink-4)' }}>
                Not present at triage or in any prior check-in
              </div>
            </div>

            <div style={{
              padding: '16px 24px',
              background: 'var(--bg-card)',
              border: '1px solid var(--line-1)',
              borderRadius: 16,
              marginBottom: 20,
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 20,
            }}>
              <div>
                <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 4 }}>Time since triage</div>
                <div className="serif" style={{ fontSize: 22 }}>70 min</div>
              </div>
              <div>
                <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 4 }}>Reported</div>
                <div className="serif" style={{ fontSize: 22 }}>12:52 AM</div>
              </div>
            </div>

            <div style={{
              padding: 16,
              borderRadius: 12,
              background: 'var(--accent-tint)',
              display: 'flex',
              gap: 12,
              alignItems: 'flex-start',
            }}>
              <div style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--accent)', marginTop: 6, flexShrink: 0 }}></div>
              <div style={{ fontSize: 12, color: 'var(--accent-ink)', lineHeight: 1.55 }}>
                <strong>Routed via</strong> the ED chest-pain reassessment workflow · Notifies charge RN + assigned provider · Escalates after 10 min unacknowledged.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CareTeam = CareTeam;
window.PatientDetail = PatientDetail;
