// ─────────────────────────────────────────────────────────────
// Corda · Calendar + Notes direction
// Multi-patient (Nana + Papa) calendar and provider-filterable visit notes
// Six main screens: Today · Calendar · Day · Visit view · Add appointment · Notes
// ─────────────────────────────────────────────────────────────

// Patient color system — sage = Nana, amber = Papa
const CAL_PATIENTS = {
  nana: {
    id: 'nana', name: 'Nana', full: 'Nana Chen', age: 78,
    initials: 'NC',
    pip: 'oklch(0.62 0.07 155)',
    soft: 'var(--sage-tint)',
    deep: 'var(--sage-deep)',
    ink: 'var(--sage-ink)',
    grad: 'linear-gradient(135deg, oklch(0.82 0.06 155), oklch(0.72 0.09 155))'
  },
  papa: {
    id: 'papa', name: 'Papa', full: 'Papa Chen', age: 82,
    initials: 'PC',
    pip: 'oklch(0.66 0.10 75)',
    soft: 'var(--amber-soft)',
    deep: 'oklch(0.42 0.10 65)',
    ink: 'oklch(0.36 0.08 65)',
    grad: 'linear-gradient(135deg, oklch(0.87 0.06 75), oklch(0.78 0.10 75))'
  }
};

// Avatar specifically tinted per patient (used everywhere)
const CalPatientChip = ({ p, size = 28, style }) =>
<div style={{
  width: size, height: size, borderRadius: '50%',
  background: p.grad, flexShrink: 0,
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  fontSize: size * 0.36, fontWeight: 600, color: p.deep,
  fontFamily: 'var(--font-sans)', letterSpacing: '-0.02em',
  ...style
}}>{p.initials}</div>;


// Patient switcher trigger — avatar stack + chevron, opens popover
const CalPatientSwitcherButton = ({ active = 'all', onClick }) => {
  const label = active === 'all' ? 'Both' : CAL_PATIENTS[active].full;
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '4px 12px 4px 4px', borderRadius: 999,
      background: 'var(--surface)', border: '0.5px solid var(--hairline)',
      cursor: 'pointer', fontFamily: 'inherit'
    }}>
      {active === 'all' ?
      <div style={{ display: 'inline-flex' }}>
          <CalPatientChip p={CAL_PATIENTS.nana} size={26} />
          <CalPatientChip p={CAL_PATIENTS.papa} size={26} style={{ marginLeft: -9, border: '2px solid var(--surface)' }} />
        </div> :

      <CalPatientChip p={CAL_PATIENTS[active]} size={26} />
      }
      <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{label}</span>
      <Icon name="chevDown" size={13} color="var(--ink-3)" />
    </button>);

};

// Patient switcher popover — opens below the button
const CalPatientSwitcherPopover = ({ active = 'all' }) => {
  const rows = [
  { id: 'all', label: 'Both', sub: '2 people · 3 appointments this week', p: null },
  { id: 'nana', label: CAL_PATIENTS.nana.full, sub: `${CAL_PATIENTS.nana.age} yrs · 4 providers`, p: CAL_PATIENTS.nana },
  { id: 'papa', label: CAL_PATIENTS.papa.full, sub: `${CAL_PATIENTS.papa.age} yrs · 3 providers`, p: CAL_PATIENTS.papa }];

  return (
    <div style={{
      position: 'absolute', top: 72, left: 14, right: 14,
      background: 'var(--surface)', borderRadius: 18,
      boxShadow: '0 18px 48px rgba(40,30,20,.18), 0 2px 6px rgba(40,30,20,.06)',
      border: '0.5px solid var(--hairline)',
      padding: 6, zIndex: 80
    }}>
      {rows.map((r, i) => {
        const sel = r.id === active;
        return (
          <div key={r.id} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 12px', borderRadius: 12,
            background: sel ? 'var(--sage-tint)' : 'transparent',
            borderBottom: i < rows.length - 1 ? '0.5px solid var(--hairline-soft)' : 'none',
            cursor: 'pointer'
          }}>
            {r.p ?
            <CalPatientChip p={r.p} size={34} /> :

            <div style={{
              width: 34, height: 34, borderRadius: '50%',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative', flexShrink: 0
            }}>
                <CalPatientChip p={CAL_PATIENTS.nana} size={26} style={{ position: 'absolute', left: 0, top: 4 }} />
                <CalPatientChip p={CAL_PATIENTS.papa} size={26} style={{ position: 'absolute', right: 0, top: 4, border: '2px solid var(--surface)' }} />
              </div>
            }
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink)' }}>{r.label}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 1 }}>{r.sub}</div>
            </div>
            {sel && <Icon name="check" size={16} color="var(--sage-deep)" />}
          </div>);

      })}
      <div style={{
        marginTop: 4, borderTop: '0.5px solid var(--hairline-soft)',
        padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10,
        color: 'var(--sage-deep)', fontSize: 13.5, fontWeight: 500, cursor: 'pointer'
      }}>
        <Icon name="plus" size={14} color="var(--sage-deep)" />
        Add another loved one
      </div>
    </div>);

};

// Scrim shown behind the popover
const CalScrim = () =>
<div style={{
  position: 'absolute', inset: 0,
  background: 'rgba(20,20,20,.28)', zIndex: 70
}} />;


// Color-coded patient pip used on rows / calendar bars
const CalPip = ({ p, size = 8 }) =>
<div style={{
  width: size, height: size, borderRadius: '50%',
  background: p.pip, flexShrink: 0
}} />;


// ─────────────────────────────────────────────────────────────
// Shared sample data
// ─────────────────────────────────────────────────────────────

const CAL_PROVIDERS = {
  patel: { id: 'patel', name: 'Dr. Anika Patel', spec: 'Neurology', tone: 'sage' },
  reyes: { id: 'reyes', name: 'Dr. Marco Reyes', spec: 'Cardiology', tone: 'plum' },
  williams: { id: 'williams', name: 'Dr. Sara Williams', spec: 'Primary Care', tone: 'amber' },
  tomas: { id: 'tomas', name: 'Tomás Reyes, PT', spec: 'Physical Therapy', tone: 'sage' },
  yang: { id: 'yang', name: 'Dr. Lily Yang', spec: 'Ophthalmology', tone: 'muted' }
};

// Appointments — date keyed YYYY-MM-DD
const CAL_APPTS = [
{ id: 'a1', date: '2026-05-27', time: '10:00', dur: '45 min', patient: 'nana', provider: 'patel', type: 'Follow-up', loc: 'UCSF · Mission Bay', status: 'today' },
{ id: 'a2', date: '2026-05-27', time: '14:00', dur: '30 min', patient: 'papa', provider: 'reyes', type: 'Follow-up', loc: 'St. Mary\u2019s Cardiology', status: 'today' },
{ id: 'a3', date: '2026-05-28', time: '09:15', dur: '20 min', patient: 'papa', provider: 'williams', type: 'Lab draw', loc: 'Quest · Sunset', status: 'upcoming' },
{ id: 'a4', date: '2026-05-29', time: '11:00', dur: '60 min', patient: 'nana', provider: 'tomas', type: 'Home visit', loc: 'Home', status: 'upcoming' },
{ id: 'a5', date: '2026-06-02', time: '15:30', dur: '30 min', patient: 'nana', provider: 'williams', type: 'Check-up', loc: 'Sutter · Castro', status: 'upcoming' },
{ id: 'a6', date: '2026-06-04', time: '08:30', dur: '45 min', patient: 'papa', provider: 'yang', type: 'Eye exam', loc: 'Pacific Vision', status: 'upcoming' }];


// Visit notes — already happened
const CAL_NOTES = [
{ id: 'n1', date: 'Tue, May 21', dateShort: 'May 21', patient: 'nana', provider: 'patel',
  type: 'Follow-up',
  excerpt: 'Cognition stable since last visit. Reviewed Donepezil 10 mg — Margaret tolerating well, no GI side effects. Sleep improving with the evening dosing schedule.',
  full: 'Dr. Patel saw Nana for her 6-week follow-up.\n\nCognition stable since last visit — MoCA score essentially unchanged. Reviewed Donepezil 10 mg — Nana tolerating well, no GI side effects. Sleep is improving with the evening dosing schedule we moved to in April.\n\nDr. Patel wants to keep current meds steady through the summer and re-evaluate in early September. Asked about any new falls or near-falls — none since the bathroom mat went down.\n\nFollow-ups: Schedule next visit early September. Continue PT with Tomás. Watch for any new evening agitation — call if it returns.'
},
{ id: 'n2', date: 'Thu, May 16', dateShort: 'May 16', patient: 'papa', provider: 'reyes',
  type: 'Follow-up',
  excerpt: 'BP 138/82 — slightly elevated. Adding low-dose lisinopril 5 mg in the morning. Re-check in 6 weeks.',
  full: 'Cardiology follow-up.\n\nBP 138/82 — slightly elevated. EKG unchanged from January. Papa reports occasional ankle swelling by evening, no chest pain or shortness of breath.\n\nAdding low-dose lisinopril 5 mg in the morning. Re-check BP at home weekly — Sarah will log. Re-check in 6 weeks.\n\nDr. Reyes also reminded us about the AFib watch — Papa\u2019s Apple Watch should keep recording. If three or more notifications in a week, call.'
},
{ id: 'n3', date: 'Wed, May 14', dateShort: 'May 14', patient: 'nana', provider: 'tomas',
  type: 'Home visit',
  excerpt: 'Balance hold 22 sec, up from 14 last week. Continue current cadence, try walking practice in mornings.',
  full: 'Tomás came by at 10:30 for the weekly session.\n\nNana was alert and willing — we did seated-to-standing reps (8 ×3), heel-toe walking down the hallway, and the chair balance hold. She managed the balance hold for 22 seconds, up from 14 last week.\n\nContinue current cadence for two more weeks. Try the walking practice in the mornings when she\u2019s freshest. Tomás suggested loose, flat shoes around the house.\n\nNo medication changes. He noted the new Donepezil dose started yesterday and will watch for any dizziness next session.'
},
{ id: 'n4', date: 'Mon, May 12', dateShort: 'May 12', patient: 'papa', provider: 'williams',
  type: 'Annual physical',
  excerpt: 'Overall stable. A1C 6.4 — borderline. Recommend gentle dietary changes; revisit in 3 months.',
  full: 'Annual physical with Dr. Williams.\n\nOverall stable. Weight steady at 168 lb. A1C came back 6.4 — borderline, edging up from 6.1 last fall. Recommend gentle dietary changes — less rice at dinner, more morning walks. Revisit A1C in 3 months.\n\nFlu shot administered. Pneumonia booster scheduled for September. Skin check clean.\n\nPapa asked about the persistent shoulder ache — Dr. Williams referred to ortho if it\u2019s not better in 2 weeks.'
},
{ id: 'n5', date: 'Wed, May 7', dateShort: 'May 7', patient: 'nana', provider: 'patel',
  type: 'Brief check',
  excerpt: 'Med question — switched Donepezil dosing to evening per family request. Calling back in 2 weeks.',
  full: 'Phone-in with Dr. Patel — brief follow-up about Donepezil timing.\n\nNana had been getting nauseous mid-morning after taking it at breakfast. Switched dosing to 7 PM with dinner per family request. Dr. Patel agreed it\u2019s a reasonable change.\n\nWill check in by phone in 2 weeks to see how the new schedule is going.'
},
{ id: 'n6', date: 'Fri, May 2', dateShort: 'May 2', patient: 'nana', provider: 'tomas',
  type: 'Home visit',
  excerpt: 'Balance hold 14 sec. Added one more set of seated-to-standing. Knees feeling good.',
  full: 'Tomás home visit.\n\nNana doing well today. Balance hold 14 seconds. Added one more set of seated-to-standing — now 8 ×3. Knees feeling good, no complaints.\n\nWill continue current routine through May.'
}];


// Quick lookup helpers
const calApptsByDate = CAL_APPTS.reduce((m, a) => {(m[a.date] = m[a.date] || []).push(a);return m;}, {});

// ─────────────────────────────────────────────────────────────
// Small reused bits
// ─────────────────────────────────────────────────────────────

const CalSerifTitle = ({ children, size = 28 }) =>
<div style={{
  fontFamily: 'var(--font-serif)', fontStyle: 'italic',
  fontSize: size, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--ink)'
}}>{children}</div>;


const CalSL = ({ children }) =>
<div style={{
  fontSize: 11.5, fontWeight: 500, color: 'var(--ink-3)',
  textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 10
}}>{children}</div>;


// Appointment row — used on Today and Day detail
const CalApptRow = ({ appt, showPatient = true }) => {
  const p = CAL_PATIENTS[appt.patient];
  const pro = CAL_PROVIDERS[appt.provider];
  return (
    <div style={{
      display: 'flex', alignItems: 'stretch', gap: 12,
      background: 'var(--surface)', border: '0.5px solid var(--hairline)',
      borderRadius: 16, padding: '14px 14px 14px 0'
    }}>
      <div style={{ width: 4, borderRadius: 999, background: p.pip, marginLeft: -1 }} />
      <div style={{ width: 58, flexShrink: 0, paddingLeft: 6 }}>
        <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{appt.time}</div>
        <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>{appt.dur}</div>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
          {showPatient &&
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '2px 8px 2px 3px', borderRadius: 999,
            background: p.soft
          }}>
              <CalPatientChip p={p} size={16} />
              <span style={{ fontSize: 11, fontWeight: 600, color: p.deep, letterSpacing: 0.2 }}>{p.name}</span>
            </div>
          }
          <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>· {appt.type}</span>
        </div>
        <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)', marginBottom: 2 }}>{pro.name}</div>
        <div style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>{pro.spec} · {appt.loc}</div>
      </div>
    </div>);

};

// ─────────────────────────────────────────────────────────────
// 1 · Today
// ─────────────────────────────────────────────────────────────
const ScreenCalToday = () => {
  const today = CAL_APPTS.filter((a) => a.date === '2026-05-27');
  const thisWeek = CAL_APPTS.filter((a) => ['2026-05-28', '2026-05-29'].includes(a.date));

  return (
    <Screen navActive="today">
      <div style={{ overflow: 'auto', height: '100%', paddingBottom: 110 }}>

        {/* Greeting header */}
        <div style={{ padding: '8px 22px 18px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}>
            <CalPatientSwitcherButton active="all" />
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <IconBtn name="search" tone="soft" />
              <IconBtn name="bell" tone="soft" />
            </div>
          </div>
          <div style={{
            fontSize: 11.5, fontWeight: 500, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 4
          }}>Tuesday · May 27</div>
          <CalSerifTitle size={30}>Good morning, Sarah</CalSerifTitle>
          <div style={{ fontSize: 14.5, color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.4 }}>
            Two appointments today — Nana at 10 with Dr. Patel, Papa at 2 with Dr. Reyes.
          </div>
        </div>

        {/* Unassigned events from Google Calendar — needs tagging */}
        <div style={{ padding: '0 22px 18px' }}>
          <div style={{
            background: 'var(--surface)', border: '0.5px solid var(--hairline)',
            borderRadius: 16, padding: '14px 16px',
            display: 'flex', alignItems: 'center', gap: 12
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 11, flexShrink: 0,
              background: 'var(--plum-soft)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative'
            }}>
              <Icon name="calendar" size={18} color="oklch(0.42 0.08 320)" />
              <div style={{
                position: 'absolute', top: -4, right: -4,
                minWidth: 18, height: 18, padding: '0 5px',
                borderRadius: 999, background: 'var(--ink)', color: 'var(--bg)',
                fontSize: 10.5, fontWeight: 700, display: 'flex',
                alignItems: 'center', justifyContent: 'center', border: '1.5px solid var(--bg)'
              }}>3</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>3 new events from Google Calendar</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 1 }}>Tap to assign each one to a patient and provider</div>
            </div>
            <Icon name="chevron" size={14} color="var(--ink-3)" />
          </div>
        </div>

        {/* Today section */}
        <div style={{ padding: '6px 22px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>Today</div>
          <span style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>{today.length} appointments</span>
        </div>
        <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {today.map((a) => <CalApptRow key={a.id} appt={a} />)}
        </div>

        {/* This week */}
        <div style={{ padding: '28px 22px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>Later this week</div>
          <span style={{ fontSize: 13, color: 'var(--sage-deep)', fontWeight: 500 }}>See all</span>
        </div>
        <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {thisWeek.map((a) =>
          <div key={a.id} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            background: 'var(--surface)', border: '0.5px solid var(--hairline)',
            borderRadius: 14, padding: '12px 14px'
          }}>
              <div style={{
              width: 46, textAlign: 'center', padding: '4px 0', borderRadius: 10,
              background: 'var(--surface-2)', flexShrink: 0
            }}>
                <div style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: 0.4, fontWeight: 600 }}>
                  {a.date === '2026-05-28' ? 'Wed' : 'Fri'}
                </div>
                <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--ink)', lineHeight: 1, marginTop: 1 }}>
                  {a.date === '2026-05-28' ? 28 : 29}
                </div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                  <CalPip p={CAL_PATIENTS[a.patient]} />
                  <span style={{ fontSize: 11.5, fontWeight: 600, color: CAL_PATIENTS[a.patient].deep, letterSpacing: 0.2 }}>
                    {CAL_PATIENTS[a.patient].name.toUpperCase()}
                  </span>
                  <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>· {a.time}</span>
                </div>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{CAL_PROVIDERS[a.provider].name}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{a.type} · {a.loc}</div>
              </div>
              <Icon name="chevron" size={14} color="var(--ink-3)" />
            </div>
          )}
        </div>

      </div>
    </Screen>);

};

// ─────────────────────────────────────────────────────────────
// 2 · Calendar — month view with patient-colored bars
// ─────────────────────────────────────────────────────────────
const ScreenCalMonth = () => {
  // May 2026 — week of Sun May 24 → Sat May 30 (May 1 is a Friday)
  const TODAY = 27;
  const SELECTED = 27;
  const WEEK = [24, 25, 26, 27, 28, 29, 30]; // Sun → Sat

  const dateKey = (d) => `2026-05-${String(d).padStart(2, '0')}`;
  const apptsFor = (d) => d ? calApptsByDate[dateKey(d)] || [] : [];

  const selectedAppts = apptsFor(SELECTED);

  return (
    <Screen navActive="calendar">
      <div style={{ overflow: 'auto', height: '100%', paddingBottom: 110 }}>

        {/* Header */}
        <div style={{ padding: '8px 22px 14px' }}>
          {/* Top row: patient switcher + month nav */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <CalPatientSwitcherButton active="all" />
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <button style={{
                background: 'var(--surface)', border: '0.5px solid var(--hairline)', cursor: 'pointer',
                width: 34, height: 34, borderRadius: 999,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <Icon name="back" size={16} color="var(--ink-2)" />
              </button>
              <button style={{
                background: 'var(--surface)', border: '0.5px solid var(--hairline)', cursor: 'pointer',
                width: 34, height: 34, borderRadius: 999,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <Icon name="chevron" size={16} color="var(--ink-2)" />
              </button>
            </div>
          </div>
          {/* Week title */}
          <div style={{
            fontSize: 11.5, fontWeight: 500, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 4
          }}>2026</div>
          <CalSerifTitle size={30}>May 24 – 30</CalSerifTitle>
        </div>

        {/* Weekday header */}
        <div style={{
          padding: '0 22px 4px',
          display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4
        }}>
          {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) =>
          <div key={i} style={{
            fontSize: 10.5, fontWeight: 600, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: 0.6, textAlign: 'center', padding: '2px 0'
          }}>{d}</div>
          )}
        </div>

        {/* Single week row */}
        <div style={{
          padding: '0 22px',
          display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4
        }}>
          {WEEK.map((d) => {
            const isToday = d === TODAY;
            const isSelected = d === SELECTED;
            return (
              <div key={d} style={{ display: 'flex', justifyContent: 'center' }}>
                <div style={{
                  width: 40, height: 52, borderRadius: 14,
                  background: isSelected ? 'var(--ink)' : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  <span style={{
                    fontSize: 17, fontWeight: isToday || isSelected ? 600 : 500,
                    color: isSelected ? 'var(--bg)' : isToday ? 'var(--sage-deep)' : 'var(--ink)',
                    letterSpacing: '-0.01em'
                  }}>{d}</span>
                </div>
              </div>);

          })}
        </div>

        {/* Provider filter pill */}
        <div style={{ padding: '18px 22px 0' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            background: 'var(--ink)', color: 'var(--bg)', borderRadius: 999,
            padding: '8px 14px', fontSize: 13, fontWeight: 500, cursor: 'pointer'
          }}>
            <Icon name="sliders" size={14} color="var(--bg)" />
            All providers
          </div>
        </div>

        {/* Selected day detail */}
        <div style={{ padding: '22px 22px 0' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
            <div>
              <div style={{
                fontSize: 11.5, fontWeight: 500, color: 'var(--ink-3)',
                textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 2
              }}>Wednesday · today</div>
              <CalSerifTitle size={22}>May 27</CalSerifTitle>
            </div>
            <span style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>{selectedAppts.length} appointments</span>
          </div>
          {selectedAppts.length ?
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {selectedAppts.map((a) => <CalApptRow key={a.id} appt={a} />)}
            </div> :

          <div style={{
            background: 'var(--surface)', border: '0.5px solid var(--hairline)',
            borderRadius: 16, padding: '18px', boxShadow: 'var(--sh-1)',
            fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5
          }}>
              Nothing on this day. Tap forward to scan the next week.
            </div>
          }
        </div>
      </div>
    </Screen>);

};

// ─────────────────────────────────────────────────────────────
// 3 · Day detail — full-page view of one date
// ─────────────────────────────────────────────────────────────
const ScreenCalDay = () => {
  const day = CAL_APPTS.filter((a) => a.date === '2026-05-27');

  return (
    <Screen hideNav>
      <div style={{ padding: '4px 22px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', minHeight: 40 }}>
        <IconBtn name="back" />
        <div style={{ fontSize: 14.5, fontWeight: 500 }}>May 2026</div>
        <button style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          padding: 6, display: 'inline-flex'
        }}>
          <Icon name="plus" size={20} color="var(--sage-deep)" />
        </button>
      </div>

      <div style={{ overflow: 'auto', height: 'calc(100% - 40px)', paddingBottom: 40 }}>
        {/* Hero day */}
        <div style={{ padding: '12px 22px 22px' }}>
          <div style={{
            fontSize: 11.5, fontWeight: 500, color: 'var(--sage-deep)',
            textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 4
          }}>Today · Tuesday</div>
          <CalSerifTitle size={44}>May 27</CalSerifTitle>
          <div style={{ fontSize: 14.5, color: 'var(--ink-2)', marginTop: 8, lineHeight: 1.5 }}>
            Two appointments, both in the afternoon window. Drive time between St. Mary's and home is about 20 minutes.
          </div>
        </div>

        {/* Timeline */}
        <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {day.map((a) => {
            const p = CAL_PATIENTS[a.patient];
            const pro = CAL_PROVIDERS[a.provider];
            return (
              <div key={a.id} style={{
                background: 'var(--surface)', border: '0.5px solid var(--hairline)',
                borderRadius: 18, padding: 18,
                display: 'flex', flexDirection: 'column', gap: 14,
                boxShadow: 'var(--sh-1)'
              }}>
                {/* head row */}
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 7,
                    padding: '4px 12px 4px 4px', borderRadius: 999,
                    background: p.soft
                  }}>
                    <CalPatientChip p={p} size={22} />
                    <span style={{ fontSize: 12.5, fontWeight: 600, color: p.deep, letterSpacing: 0.2 }}>
                      {p.full}
                    </span>
                  </div>
                  <span style={{
                    padding: '3px 9px', borderRadius: 999,
                    background: 'var(--surface-2)', fontSize: 11, fontWeight: 500,
                    color: 'var(--ink-3)', letterSpacing: 0.3, textTransform: 'uppercase'
                  }}>{a.type}</span>
                </div>

                {/* time + duration */}
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <div style={{
                    fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                    fontSize: 30, letterSpacing: '-0.02em', color: 'var(--ink)', lineHeight: 1
                  }}>{a.time}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{a.dur}</div>
                </div>

                {/* provider */}
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 14px', background: 'var(--surface-2)', borderRadius: 12
                }}>
                  <Avatar name={pro.name} size={32} tone={pro.tone} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)' }}>{pro.name}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>{pro.spec}</div>
                  </div>
                  <button style={{
                    background: 'var(--surface)', border: '0.5px solid var(--hairline)',
                    width: 34, height: 34, borderRadius: 999, cursor: 'pointer',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    <Icon name="phone" size={15} color="var(--sage-deep)" />
                  </button>
                </div>

                {/* location */}
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  fontSize: 13.5, color: 'var(--ink-2)'
                }}>
                  <Icon name="pin" size={15} color="var(--ink-3)" />
                  {a.loc}
                </div>

                {/* CTAs */}
                <div style={{ display: 'flex', gap: 8 }}>
                  <button style={{
                    flex: 1, padding: '12px', borderRadius: 12,
                    background: 'var(--ink)', color: 'var(--bg)', border: 'none',
                    fontSize: 13.5, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer'
                  }}>Open agenda</button>
                  <button style={{
                    flex: 1, padding: '12px', borderRadius: 12,
                    background: 'transparent', border: '0.5px solid var(--hairline)',
                    color: 'var(--ink)', fontSize: 13.5, fontWeight: 500,
                    fontFamily: 'inherit', cursor: 'pointer'
                  }}>Take notes</button>
                </div>
              </div>);

          })}
        </div>
      </div>
    </Screen>);

};

// ─────────────────────────────────────────────────────────────
// 4 · Visit view — Apple-Notes-inspired: the note IS the page
// Metadata sits at the top as a printed header. No card frames.
// ─────────────────────────────────────────────────────────────
const ScreenCalVisitView = () => {
  const n = CAL_NOTES[0]; // Nana · Dr. Patel · May 21
  const p = CAL_PATIENTS[n.patient];
  const pro = CAL_PROVIDERS[n.provider];

  // Pill button (back chevron) — soft white pill like Apple Notes
  const ChromePill = ({ children, style }) =>
  <div style={{
    background: 'var(--surface)',
    borderRadius: 999,
    boxShadow: '0 1px 2px rgba(40,30,20,.06), 0 4px 12px rgba(40,30,20,.05)',
    display: 'inline-flex', alignItems: 'center',
    ...style
  }}>{children}</div>;


  return (
    <Screen hideNav bg="var(--bg)">

      {/* Top chrome — three pills, Apple-Notes style */}
      <div style={{
        padding: '8px 18px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center'
      }}>
        {/* back — circular */}
        <ChromePill style={{ width: 38, height: 38, justifyContent: 'center' }}>
          <Icon name="back" size={17} color="var(--ink)" />
        </ChromePill>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {/* share + more — wider pill */}
          <ChromePill style={{ padding: '8px 6px', gap: 2 }}>
            <button style={{
              width: 30, height: 30, borderRadius: 999, border: 'none',
              background: 'transparent', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
            }} aria-label="Share">
              <Icon name="send" size={16} color="var(--ink-2)" />
            </button>
            <div style={{ width: 0.5, height: 18, background: 'var(--hairline)' }} />
            <button style={{
              width: 30, height: 30, borderRadius: 999, border: 'none',
              background: 'transparent', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18, color: 'var(--ink-2)', letterSpacing: 1
            }} aria-label="More">···</button>
          </ChromePill>

          {/* primary done/edit — sage filled circle */}
          <div style={{
            width: 38, height: 38, borderRadius: 999,
            background: 'var(--sage-deep)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
            boxShadow: '0 1px 2px rgba(40,30,20,.08), 0 4px 12px rgba(68,89,79,.18)'
          }}>
            <Icon name="edit" size={16} color="var(--bg)" />
          </div>
        </div>
      </div>

      {/* Document — single scrolling page, no cards */}
      <div style={{ overflow: 'auto', height: 'calc(100% - 46px)', paddingBottom: 40 }}>
        <div style={{ padding: '28px 26px 0' }}>

          {/* Eyebrow: specialty · visit type */}
          <div style={{
            fontSize: 11, fontWeight: 600, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: 0.8,
            display: 'flex', alignItems: 'center', gap: 6
          }}>
            <span>{pro.spec}</span>
            <span style={{ color: 'var(--ink-4)' }}>·</span>
            <span>{n.type}</span>
          </div>

          {/* Headline: Date — like the auto-title in Apple Notes */}
          <div style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em',
            color: 'var(--ink)', marginTop: 8
          }}>{pro.name}</div>

          {/* Subhead: time + date on one line */}
          <div style={{
            fontSize: 15, color: 'var(--ink-2)', marginTop: 8,
            display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'
          }}>
            <span style={{ fontVariantNumeric: 'tabular-nums' }}>10:00 AM</span>
            <span style={{ color: 'var(--ink-4)' }}>·</span>
            <span style={{ fontWeight: 500, color: 'var(--ink)' }}>Thursday, May 21</span>
          </div>

          {/* Patient pill + location, on one inline row */}
          <div style={{
            marginTop: 14,
            display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
            fontSize: 13, color: 'var(--ink-2)'
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '3px 11px 3px 3px', borderRadius: 999,
              background: p.soft
            }}>
              <CalPatientChip p={p} size={20} />
              <span style={{ fontSize: 12, fontWeight: 600, color: p.deep, letterSpacing: 0.2 }}>{p.full}</span>
            </div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              <Icon name="pin" size={13} color="var(--ink-3)" />
              UCSF · Mission Bay
            </div>
          </div>

          {/* Subtle accent rule — like the yellow accent in Apple Notes, but sage */}
          <div style={{
            marginTop: 24, marginBottom: 22,
            width: 28, height: 2, borderRadius: 2,
            background: 'var(--sage-deep)'
          }} />

          {/* Notes body — sits directly on the page, no card */}
          <div style={{
            fontSize: 16, lineHeight: 1.7, color: 'var(--ink)',
            whiteSpace: 'pre-wrap', letterSpacing: '-0.005em',
            minHeight: 260
          }}>{n.full}</div>

          {/* Follow-up — a quiet inline footer, not a card */}
          <div style={{
            marginTop: 32, paddingTop: 18,
            borderTop: '0.5px solid var(--hairline-soft)',
            display: 'flex', alignItems: 'center', gap: 10
          }}>
            <Icon name="calendar" size={15} color="var(--sage-deep)" />
            <div style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>
              Next visit on the calendar — <span style={{ fontWeight: 600, color: 'var(--ink)' }}>Sep 4, 10:00 AM</span>
            </div>
          </div>

          <div style={{ height: 32 }} />
        </div>
      </div>
    </Screen>);

};

// ─────────────────────────────────────────────────────────────
// 4b · Visit edit — focused note state
// Same page-as-note layout; metadata becomes inline pickers,
// notes body becomes a live editing surface with caret,
// floating formatting toolbar pinned to the bottom (Apple Notes).
// ─────────────────────────────────────────────────────────────
const ScreenCalVisitEdit = () => {
  const n = CAL_NOTES[0]; // Nana · Dr. Patel · May 21
  const p = CAL_PATIENTS[n.patient];
  const pro = CAL_PROVIDERS[n.provider];

  const ChromePill = ({ children, style }) =>
  <div style={{
    background: 'var(--surface)',
    borderRadius: 999,
    boxShadow: '0 1px 2px rgba(40,30,20,.06), 0 4px 12px rgba(40,30,20,.05)',
    display: 'inline-flex', alignItems: 'center',
    ...style
  }}>{children}</div>;


  // Inline metadata edit affordance — dashed underline + tiny chevron
  const EditableMeta = ({ children, after = true, style }) =>
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 4,
    borderBottom: '1px dashed var(--hairline)', paddingBottom: 1,
    cursor: 'pointer', ...style
  }}>
      {children}
      {after && <Icon name="chevDown" size={11} color="var(--ink-3)" />}
    </span>;


  // Bottom formatting toolbar item
  const ToolBtn = ({ name, label, active }) =>
  <button aria-label={label} style={{
    width: 38, height: 38, borderRadius: 999, border: 'none',
    background: active ? 'var(--surface-2)' : 'transparent', cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'inherit'
  }}>
      <Icon name={name} size={18} color={active ? 'var(--ink)' : 'var(--ink-2)'} />
    </button>;


  // Body text broken at the caret position so the cursor sits inline
  const bodyHead = n.full.slice(0, -1);
  const bodyTail = n.full.slice(-1);

  return (
    <Screen hideNav bg="var(--bg)">

      {/* Top chrome — Cancel · share/more · Done */}
      <div style={{
        padding: '8px 18px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center'
      }}>
        <ChromePill style={{ padding: '0 16px', height: 38 }}>
          <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-2)', cursor: 'pointer' }}>Cancel</span>
        </ChromePill>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <ChromePill style={{ padding: '8px 6px', gap: 2 }}>
            <button style={{
              width: 30, height: 30, borderRadius: 999, border: 'none',
              background: 'transparent', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
            }} aria-label="Share">
              <Icon name="send" size={16} color="var(--ink-2)" />
            </button>
            <div style={{ width: 0.5, height: 18, background: 'var(--hairline)' }} />
            <button style={{
              width: 30, height: 30, borderRadius: 999, border: 'none',
              background: 'transparent', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18, color: 'var(--ink-2)', letterSpacing: 1
            }} aria-label="More">···</button>
          </ChromePill>

          {/* Done — sage filled, checkmark */}
          <div style={{
            width: 38, height: 38, borderRadius: 999,
            background: 'var(--sage-deep)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
            boxShadow: '0 1px 2px rgba(40,30,20,.08), 0 4px 12px rgba(68,89,79,.18)'
          }}>
            <Icon name="check" size={17} color="var(--bg)" />
          </div>
        </div>
      </div>

      {/* Unsaved indicator — tiny pulse-like dot, far right */}
      <div style={{
        padding: '8px 22px 0',
        display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 6,
        fontSize: 11.5, color: 'var(--ink-3)'
      }}>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'oklch(0.66 0.10 75)' }} />
        <span>Editing · unsaved</span>
      </div>

      {/* Document — same page-as-note layout */}
      <div style={{ overflow: 'auto', height: 'calc(100% - 76px)', paddingBottom: 100 }}>
        <div style={{ padding: '14px 26px 0' }}>

          {/* Eyebrow — specialty (locked, from provider record) + type (editable) */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 11, fontWeight: 600, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: 0.8
          }}>
            <span>{pro.spec}</span>
            <span style={{ color: 'var(--ink-4)' }}>·</span>
            <span style={{
              padding: '3px 9px', borderRadius: 6,
              background: 'var(--surface)', border: '0.5px solid var(--hairline)',
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4
            }}>
              {n.type} <Icon name="chevDown" size={10} color="var(--ink-3)" />
            </span>
          </div>

          {/* Headline: Provider — editable */}
          <div style={{
            display: 'inline-flex', alignItems: 'baseline', gap: 6,
            marginTop: 10,
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em',
            color: 'var(--ink)'
          }}>
            <EditableMeta>
              <span>{pro.name}</span>
            </EditableMeta>
          </div>

          {/* Subhead: time + date (both locked from Google Calendar) */}
          <div style={{
            fontSize: 15, color: 'var(--ink-2)', marginTop: 10,
            display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'
          }}>
            <span style={{ fontVariantNumeric: 'tabular-nums' }}>10:00 AM</span>
            <span style={{ color: 'var(--ink-4)' }}>·</span>
            <span style={{ fontWeight: 500, color: 'var(--ink)' }}>Thursday, May 21</span>
          </div>

          {/* Locked-source caption — explains why date/time aren't editable */}
          <div style={{
            marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '3px 9px 3px 5px', borderRadius: 999,
            background: 'var(--surface)', border: '0.5px solid var(--hairline)',
            fontSize: 11, color: 'var(--ink-3)', letterSpacing: 0.1
          }}>
            <img src="assets/google-calendar.png" alt="Google Calendar" width={14} height={14} style={{ display: 'block', flexShrink: 0 }} />
            <Icon name="lock" size={10} color="var(--ink-3)" />
            <span>Date &amp; time from Google Calendar</span>
          </div>

          {/* Patient pill + location */}
          <div style={{
            marginTop: 14,
            display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
            fontSize: 13, color: 'var(--ink-2)'
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '3px 8px 3px 3px', borderRadius: 999,
              background: p.soft, cursor: 'pointer',
              border: '0.5px solid ' + p.pip
            }}>
              <CalPatientChip p={p} size={20} />
              <span style={{ fontSize: 12, fontWeight: 600, color: p.deep, letterSpacing: 0.2 }}>{p.full}</span>
              <Icon name="chevDown" size={11} color={p.deep} style={{ marginLeft: 2, marginRight: 2 }} />
            </div>
            <EditableMeta>
              <Icon name="pin" size={13} color="var(--ink-3)" />
              <span style={{ marginLeft: 4 }}>UCSF · Mission Bay</span>
            </EditableMeta>
          </div>

          {/* Sage accent rule */}
          <div style={{
            marginTop: 24, marginBottom: 22,
            width: 28, height: 2, borderRadius: 2,
            background: 'var(--sage-deep)'
          }} />

          {/* Notes body — live editing surface with caret */}
          <div
            contentEditable
            suppressContentEditableWarning
            style={{
              fontSize: 16, lineHeight: 1.7, color: 'var(--ink)',
              whiteSpace: 'pre-wrap', letterSpacing: '-0.005em',
              minHeight: 280, outline: 'none',
              caretColor: 'var(--sage-deep)', textAlign: "left"
            }}>
            
            {bodyHead}
            {bodyTail}
            <span aria-hidden="true" style={{
              display: 'inline-block',
              width: 2, height: '1.2em',
              background: 'var(--sage-deep)',
              verticalAlign: '-0.2em', marginLeft: 2,
              animation: 'cal-caret 1.05s steps(1) infinite'
            }} />
          </div>

          <style>{`@keyframes cal-caret { 50% { opacity: 0; } }`}</style>

          <div style={{ height: 24 }} />
        </div>
      </div>

      {/* Floating formatting toolbar — Apple-Notes-style pill */}
      <div style={{
        position: 'absolute', left: 16, right: 16, bottom: 22,
        background: 'var(--surface)', borderRadius: 999,
        padding: '5px 8px',
        display: 'flex',
        boxShadow: '0 2px 6px rgba(40,30,20,.06), 0 14px 36px rgba(40,30,20,.10)',
        zIndex: 25, textAlign: "center", gap: "28px", flexDirection: "row", alignItems: "center", justifyContent: "space-around", width: "357px"
      }}>
        {/* Aa formatting toggle */}
        <button aria-label="Format" style={{
          width: 38, height: 38, borderRadius: 999, border: 'none',
          background: 'transparent', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 16,
          color: 'var(--ink-2)', letterSpacing: '-0.04em'
        }}>Aa</button>
        <ToolBtn name="list" label="List" />
        <ToolBtn name="checkCheck" label="Checklist" />
        <ToolBtn name="camera" label="Photo" />
      </div>
    </Screen>);

};

// ─────────────────────────────────────────────────────────────
// 5 · Assign event — incoming Google Calendar event needs tagging
// ─────────────────────────────────────────────────────────────
const ScreenCalAssign = () =>
<Screen hideNav>
    <div style={{ padding: '4px 22px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', minHeight: 40 }}>
      <span style={{ fontSize: 14.5, color: 'var(--ink-2)', cursor: 'pointer' }}>Skip</span>
      <div style={{ fontSize: 14.5, fontWeight: 500 }}>Assign event · 1 of 3</div>
      <span style={{ fontSize: 14.5, color: 'var(--ink-3)', fontWeight: 500 }}>Save</span>
    </div>

    <div style={{ overflow: 'auto', height: 'calc(100% - 40px)', paddingBottom: 140 }}>
      <div style={{ padding: '12px 22px 0' }}>

        {/* Source event from Google Calendar — read-only */}
        <div style={{
        background: 'var(--surface)', border: '0.5px solid var(--hairline)',
        borderRadius: 16, padding: 16, marginBottom: 22,
        boxShadow: 'var(--sh-1)'
      }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            {/* Google calendar mark */}
            <img src="assets/google-calendar.png" alt="Google Calendar" width={22} height={22} style={{ display: 'block', flexShrink: 0 }} />
            <span style={{
            fontSize: 10.5, fontWeight: 600, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: 0.6
          }}>From Google Calendar · Sarah's</span>
            <div style={{ flex: 1 }} />
            <span style={{
            fontSize: 10.5, fontWeight: 600, padding: '2px 8px', borderRadius: 999,
            background: 'var(--clay-soft)', color: 'oklch(0.42 0.10 40)',
            textTransform: 'uppercase', letterSpacing: 0.4
          }}>Unassigned</span>
          </div>

          <div style={{
          fontSize: 18, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em', marginBottom: 8
        }}>Dr. Patel f/up — neurology</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--ink-2)' }}>
              <Icon name="calendar" size={14} color="var(--ink-3)" /> Tue, Sep 4 · 10:00 – 10:45 AM
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--ink-2)' }}>
              <Icon name="pin" size={14} color="var(--ink-3)" /> UCSF Mission Bay, 1855 4th St
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--ink-2)' }}>
              <Icon name="bell" size={14} color="var(--ink-3)" /> 1 day before, 1 hour before
            </div>
          </div>
        </div>

        {/* Patient picker */}
        <div style={{ marginBottom: 22 }}>
          <CalSL>Who is this for?</CalSL>
          <div style={{ display: 'flex', gap: 10 }}>
            {[CAL_PATIENTS.nana, CAL_PATIENTS.papa].map((p) => {
            const sel = p.id === 'nana';
            return (
              <div key={p.id} style={{
                flex: 1, padding: '14px 12px',
                background: sel ? p.soft : 'var(--surface)',
                border: sel ? `1.5px solid ${p.pip}` : '0.5px solid var(--hairline)',
                borderRadius: 16, cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 10
              }}>
                  <CalPatientChip p={p} size={36} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink)' }}>{p.full}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{p.age} yrs</div>
                  </div>
                  {sel && <Icon name="check" size={16} color={p.deep} />}
                </div>);

          })}
          </div>
        </div>

        {/* Provider picker */}
        <div style={{ marginBottom: 22 }}>
          <CalSL>Which provider?</CalSL>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
          { id: 'patel', sel: true, note: 'Match found from event title' },
          { id: 'williams', sel: false, note: null },
          { id: 'tomas', sel: false, note: null }].
          map(({ id, sel, note }) => {
            const pro = CAL_PROVIDERS[id];
            return (
              <div key={id} style={{
                background: 'var(--surface)',
                border: sel ? '1.5px solid var(--sage-deep)' : '0.5px solid var(--hairline)',
                borderRadius: 14, padding: '12px 14px',
                display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer'
              }}>
                  <Avatar name={pro.name} size={32} tone={pro.tone} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 500 }}>{pro.name}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>{pro.spec}</div>
                  </div>
                  {note &&
                <span style={{
                  fontSize: 10.5, fontWeight: 600, padding: '3px 8px', borderRadius: 999,
                  background: 'var(--sage-tint)', color: 'var(--sage-deep)',
                  textTransform: 'uppercase', letterSpacing: 0.4
                }}>Suggested</span>
                }
                  {sel ? <Icon name="check" size={16} color="var(--sage-deep)" /> : <Icon name="chevron" size={14} color="var(--ink-3)" />}
                </div>);

          })}
            <div style={{
            padding: '10px 14px', borderRadius: 12,
            background: 'transparent', border: '0.5px dashed var(--hairline)',
            display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 13.5, color: 'var(--ink-3)', cursor: 'pointer'
          }}>
              <Icon name="plus" size={14} color="var(--ink-3)" /> Search or add a provider
            </div>
          </div>
        </div>

        {/* Event type */}
        <div style={{ marginBottom: 22 }}>
          <CalSL>Type</CalSL>
          <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
            {['Follow-up', 'New consult', 'Lab draw', 'Imaging', 'Home visit', 'Phone'].map((t, i) =>
          <div key={t} style={{
            padding: '7px 14px', borderRadius: 999,
            fontSize: 13, fontWeight: 500, cursor: 'pointer',
            background: i === 0 ? 'var(--ink)' : 'var(--surface)',
            color: i === 0 ? 'var(--bg)' : 'var(--ink-2)',
            border: i === 0 ? 'none' : '0.5px solid var(--hairline)'
          }}>{t}</div>
          )}
          </div>
        </div>

        {/* Optional pre-visit notes */}
        <div style={{ marginBottom: 22 }}>
          <CalSL>Things to bring up <span style={{ textTransform: 'none', letterSpacing: 0, color: 'var(--ink-4)', fontWeight: 400 }}>— optional</span></CalSL>
          <div
          contentEditable
          suppressContentEditableWarning
          style={{
            background: 'var(--surface)', border: '0.5px solid var(--hairline)',
            borderRadius: 14, padding: '14px 16px',
            minHeight: 90, fontSize: 14.5, lineHeight: 1.55,
            color: 'var(--ink-4)', outline: 'none', whiteSpace: 'pre-wrap'
          }}>
          Questions or concerns to discuss at this visit…</div>
        </div>

        {/* Footer guidance */}
        <div style={{
        padding: '10px 14px', background: 'var(--surface-2)',
        borderRadius: 12, fontSize: 12.5, color: 'var(--ink-3)',
        display: 'flex', alignItems: 'flex-start', gap: 8
      }}>
          <Icon name="shield" size={14} color="var(--ink-3)" style={{ flexShrink: 0, marginTop: 1 }} />
          <div>Corda never changes events in Google Calendar — assignments are stored here.</div>
        </div>
      </div>
    </div>

    <div style={{
    position: 'absolute', bottom: 0, left: 0, right: 0,
    padding: '14px 22px 32px',
    background: 'linear-gradient(to top, var(--bg) 70%, transparent)',
    display: 'flex', gap: 10
  }}>
      <button style={{
      flex: 1, height: 54, borderRadius: 16,
      background: 'transparent', border: '0.5px solid var(--hairline)',
      color: 'var(--ink)', fontSize: 14.5, fontWeight: 500,
      fontFamily: 'inherit', cursor: 'pointer'
    }}>Skip for now</button>
      <button style={{
      flex: 1.6, height: 54, borderRadius: 16,
      background: 'var(--ink)', color: 'var(--bg)', border: 'none',
      fontSize: 15, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer'
    }}>Save & next event</button>
    </div>
  </Screen>;


// ─────────────────────────────────────────────────────────────
// 5b · Inbox — Google Calendar events awaiting assignment
// ─────────────────────────────────────────────────────────────
const ScreenCalInbox = () => {
  const incoming = [
  { id: 'i1', title: 'Dr. Patel f/up — neurology', when: 'Tue, Sep 4 · 10:00 AM', loc: 'UCSF Mission Bay', guess: { patient: 'nana', provider: 'patel' } },
  { id: 'i2', title: 'Cardio re-check', when: 'Thu, Jul 2 · 9:30 AM', loc: "St. Mary's", guess: { patient: 'papa', provider: 'reyes' } },
  { id: 'i3', title: 'PT @ home', when: 'Fri, Jun 12 · 11:00 AM', loc: 'Home', guess: { patient: null, provider: 'tomas' } }];


  return (
    <Screen hideNav>
      <div style={{ padding: '4px 22px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', minHeight: 40 }}>
        <IconBtn name="back" />
        <div style={{ fontSize: 14.5, fontWeight: 500 }}>Inbox</div>
        <div style={{ width: 36 }} />
      </div>

      <div style={{ overflow: 'auto', height: 'calc(100% - 40px)', paddingBottom: 120 }}>
        {/* Hero */}
        <div style={{ padding: '14px 22px 18px' }}>
          <div style={{
            fontSize: 11.5, fontWeight: 500, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 4
          }}>From Google Calendar</div>
          <CalSerifTitle size={28}>3 events need assigning</CalSerifTitle>
          <div style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 8, lineHeight: 1.5 }}>
            Tag each with who it's for and which provider, so it shows up in the right place.
          </div>
        </div>

        {/* List */}
        <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {incoming.map((e) => {
            const p = e.guess.patient ? CAL_PATIENTS[e.guess.patient] : null;
            const pro = e.guess.provider ? CAL_PROVIDERS[e.guess.provider] : null;
            return (
              <div key={e.id} style={{
                background: 'var(--surface)', border: '0.5px solid var(--hairline)',
                borderRadius: 16, padding: 16
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <img src="assets/google-calendar.png" alt="Google Calendar" width={18} height={18} style={{ display: 'block', flexShrink: 0 }} />
                  <span style={{
                    fontSize: 10.5, fontWeight: 600, color: 'var(--ink-3)',
                    textTransform: 'uppercase', letterSpacing: 0.6
                  }}>Google Calendar</span>
                  <div style={{ flex: 1 }} />
                  <span style={{
                    fontSize: 10.5, fontWeight: 600, padding: '2px 8px', borderRadius: 999,
                    background: 'var(--clay-soft)', color: 'oklch(0.42 0.10 40)',
                    textTransform: 'uppercase', letterSpacing: 0.4
                  }}>Unassigned</span>
                </div>

                <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--ink)', marginBottom: 4 }}>{e.title}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', marginBottom: 12 }}>{e.when} · {e.loc}</div>

                {/* Suggestion row */}
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
                  background: 'var(--surface-2)', borderRadius: 12, marginBottom: 12
                }}>
                  <Icon name="sparkle" size={14} color="oklch(0.5 0.08 320)" />
                  <div style={{ flex: 1, fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.45 }}>
                    {p && pro ? <>Looks like <strong style={{ color: p.deep }}>{p.full}</strong> with <strong>{pro.name}</strong></> :
                    pro ? <>Looks like a visit with <strong>{pro.name}</strong> — confirm the patient</> :
                    <>No match — choose a patient and provider</>}
                  </div>
                </div>

                <div style={{ display: 'flex', gap: 8 }}>
                  <button style={{
                    flex: 1, padding: '10px', borderRadius: 12,
                    background: 'transparent', border: '0.5px solid var(--hairline)',
                    color: 'var(--ink)', fontSize: 13, fontWeight: 500,
                    fontFamily: 'inherit', cursor: 'pointer'
                  }}>Open</button>
                  <button style={{
                    flex: 1.6, padding: '10px', borderRadius: 12,
                    background: p && pro ? 'var(--ink)' : 'var(--surface-2)',
                    color: p && pro ? 'var(--bg)' : 'var(--ink-3)',
                    border: 'none', fontSize: 13, fontWeight: 500,
                    fontFamily: 'inherit', cursor: p && pro ? 'pointer' : 'default'
                  }}>{p && pro ? 'Accept suggestion' : 'Assign manually'}</button>
                </div>
              </div>);

          })}
        </div>

        <div style={{ textAlign: 'center', padding: '24px 0 8px', fontSize: 12.5, color: 'var(--ink-3)' }}>
          Showing the next 3 events. Older unassigned events live in Settings.
        </div>
      </div>
    </Screen>);

};

// ─────────────────────────────────────────────────────────────
// Snapshot: Today with patient switcher popover open
// ─────────────────────────────────────────────────────────────
const ScreenCalTodayPopover = () =>
<div style={{ position: 'relative', width: PHONE_W, height: PHONE_H }}>
    <ScreenCalToday />
    <CalScrim />
    <CalPatientSwitcherPopover active="all" />
  </div>;


// ─────────────────────────────────────────────────────────────
// 6 · Notes list — provider-filterable
// ─────────────────────────────────────────────────────────────
const ScreenCalNotes = ({ activePatient = 'all', activeProvider = 'all' } = {}) => {
  let notes = CAL_NOTES;
  if (activePatient !== 'all') notes = notes.filter((n) => n.patient === activePatient);
  if (activeProvider !== 'all') notes = notes.filter((n) => n.provider === activeProvider);

  const selectedPro = activeProvider !== 'all' ? CAL_PROVIDERS[activeProvider] : null;

  return (
    <Screen navActive="calendar">
      <div style={{ overflow: 'auto', height: '100%', paddingBottom: 110 }}>

        {/* Header */}
        <div style={{ padding: '8px 22px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div style={{ marginBottom: 12 }}><CalPatientSwitcherButton active={activePatient} /></div>
            <div style={{
              fontSize: 11.5, fontWeight: 500, color: 'var(--ink-3)',
              textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 4
            }}>{CAL_NOTES.length} notes</div>
            <CalSerifTitle size={30}>Visit notes</CalSerifTitle>
          </div>
        </div>

        {/* Provider filter row — All chip + search field */}
        <div style={{ padding: '0 22px 14px', display: 'flex', gap: 8, alignItems: 'center' }}>

          {/* Active filter chip — "All providers" or selected provider */}
          {selectedPro ? (
          /* Selected provider — avatar + name + clear X */
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 10px 6px 4px', borderRadius: 999,
            background: 'var(--ink)', flexShrink: 0
          }}>
              <Avatar name={selectedPro.name} size={24} tone={selectedPro.tone} />
              <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--bg)', maxWidth: 130,
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {selectedPro.name.replace('Dr. ', '')}
              </span>
              <div style={{
              width: 18, height: 18, borderRadius: '50%',
              background: 'rgba(255,255,255,0.2)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer'
            }}>
                <Icon name="close" size={10} color="var(--bg)" />
              </div>
            </div>) : (

          /* All providers chip */
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '7px 13px', borderRadius: 999, flexShrink: 0, cursor: 'pointer',
            background: 'var(--ink)', color: 'var(--bg)', border: 'none',
            fontSize: 13, fontWeight: 500
          }}>
              <Icon name="users" size={13} color="var(--bg)" />
              All providers
            </div>)
          }

          {/* Search provider field */}
          <div style={{
            flex: 1, display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 14px', borderRadius: 999,
            background: 'var(--surface)', border: '0.5px solid var(--hairline)',
            cursor: 'pointer'
          }}>
            <Icon name="search" size={15} color="var(--ink-3)" />
            <span style={{ fontSize: 13.5, color: 'var(--ink-4)' }}>
              {selectedPro ? 'Search providers…' : 'Filter by provider…'}
            </span>
          </div>
        </div>

        {/* Active filter result count */}
        {selectedPro &&
        <div style={{ padding: '0 22px 12px', fontSize: 13, color: 'var(--ink-3)' }}>
            <span style={{ color: 'var(--ink)', fontWeight: 500 }}>{notes.length} notes</span>
            {' '}with {selectedPro.name}
          </div>
        }

        {/* Notes list */}
        <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {notes.map((n) => {
            const p = CAL_PATIENTS[n.patient];
            const pro = CAL_PROVIDERS[n.provider];
            return (
              <div key={n.id} style={{
                background: 'var(--surface)', border: '0.5px solid var(--hairline)',
                borderRadius: 16, padding: 16
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Avatar name={pro.name} size={32} tone={pro.tone} />
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{pro.name}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{pro.spec}</div>
                    </div>
                  </div>
                  <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>{n.date}</span>
                </div>

                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '2px 10px 2px 3px', borderRadius: 999,
                  background: p.soft, marginBottom: 8
                }}>
                  <CalPatientChip p={p} size={16} />
                  <span style={{ fontSize: 11, fontWeight: 600, color: p.deep, letterSpacing: 0.2 }}>{p.name}</span>
                  <span style={{ fontSize: 11, color: p.deep, opacity: 0.6 }}>· {n.type}</span>
                </div>

                <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55,
                  display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical',
                  overflow: 'hidden', textOverflow: 'ellipsis'
                }}>{n.excerpt}</div>
              </div>);

          })}
        </div>
      </div>
    </Screen>);

};

// ─────────────────────────────────────────────────────────────
// 6b · Notes — provider search overlay
// Tapping the search field opens this full-screen picker
// ─────────────────────────────────────────────────────────────
const ScreenCalNotesSearch = () => {
  // Count notes per provider
  const noteCounts = Object.keys(CAL_PROVIDERS).reduce((acc, id) => {
    acc[id] = CAL_NOTES.filter((n) => n.provider === id).length;
    return acc;
  }, {});

  const providers = Object.entries(CAL_PROVIDERS).
  filter(([id]) => noteCounts[id] > 0).
  map(([id, pro]) => ({ id, ...pro, count: noteCounts[id] }));

  // Simulated: "patel" is the typed-ahead result
  const query = 'Patel';
  const results = providers.filter((p) =>
  p.name.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <Screen hideNav>

      {/* Search header */}
      <div style={{ padding: '8px 16px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
        <button style={{
          background: 'transparent', border: 'none', padding: 6,
          cursor: 'pointer', display: 'inline-flex'
        }}>
          <Icon name="back" size={18} color="var(--ink-2)" />
        </button>

        {/* Active search input */}
        <div style={{
          flex: 1, display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 16px', borderRadius: 999,
          background: 'var(--surface)', border: '1.5px solid var(--sage-deep)'
        }}>
          <Icon name="search" size={15} color="var(--sage-deep)" />
          <span style={{ flex: 1, fontSize: 15, color: 'var(--ink)', fontWeight: 500 }}>{query}</span>
          <div style={{
            width: 18, height: 18, borderRadius: '50%', background: 'var(--ink-3)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer'
          }}>
            <Icon name="close" size={10} color="var(--bg)" />
          </div>
        </div>
      </div>

      <div style={{ overflow: 'auto', height: 'calc(100% - 56px)', paddingBottom: 40 }}>

        {/* Search results */}
        {results.length > 0 &&
        <div style={{ padding: '16px 22px 0' }}>
            <div style={{
            fontSize: 11, fontWeight: 600, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 10
          }}>Matching providers</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {results.map((pro) =>
            <div key={pro.id} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              background: 'var(--surface)', border: '0.5px solid var(--hairline)',
              borderRadius: 14, cursor: 'pointer'
            }}>
                  <Avatar name={pro.name} size={36} tone={pro.tone} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)' }}>{pro.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 1 }}>{pro.spec}</div>
                  </div>
                  <div style={{
                fontSize: 11.5, fontWeight: 600, color: 'var(--sage-deep)',
                padding: '3px 9px', borderRadius: 999, background: 'var(--sage-tint)'
              }}>{pro.count} note{pro.count !== 1 ? 's' : ''}</div>
                  <Icon name="chevron" size={14} color="var(--ink-3)" />
                </div>
            )}
            </div>
          </div>
        }

        {/* All providers — full list */}
        <div style={{ padding: '22px 22px 0' }}>
          <div style={{
            fontSize: 11, fontWeight: 600, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 10
          }}>All providers</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {providers.map((pro) =>
            <div key={pro.id} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              background: 'var(--surface)', border: '0.5px solid var(--hairline)',
              borderRadius: 14, cursor: 'pointer',
              opacity: results.some((r) => r.id === pro.id) ? 0.4 : 1
            }}>
                <Avatar name={pro.name} size={36} tone={pro.tone} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink)' }}>{pro.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 1 }}>{pro.spec}</div>
                </div>
                <div style={{
                fontSize: 11.5, fontWeight: 600, color: 'var(--sage-deep)',
                padding: '3px 9px', borderRadius: 999, background: 'var(--sage-tint)'
              }}>{pro.count} note{pro.count !== 1 ? 's' : ''}</div>
                <Icon name="chevron" size={14} color="var(--ink-3)" />
              </div>
            )}
          </div>
        </div>
      </div>
    </Screen>);

};

// Variant snapshots for canvas
const ScreenCalNotesByProvider = () => <ScreenCalNotes activePatient="all" activeProvider="patel" />;
const ScreenCalNotesByPatient = () => <ScreenCalNotes activePatient="papa" activeProvider="all" />;

Object.assign(window, {
  ScreenCalToday, ScreenCalTodayPopover,
  ScreenCalMonth, ScreenCalDay,
  ScreenCalVisitView, ScreenCalVisitEdit,
  ScreenCalAssign, ScreenCalInbox,
  ScreenCalNotes, ScreenCalNotesByProvider, ScreenCalNotesByPatient, ScreenCalNotesSearch,
  CAL_PATIENTS, CAL_PROVIDERS, CAL_APPTS, CAL_NOTES
});