// Caregivers list + Add caregiver sheet + Doctor handoff with dimension toggles
const { Icon, Phone, TabBar, HomeIndicator, ModalShell, Label, TopBar } = window;

// ═══════════════════════════════════════════════════════════
// Caregivers list (revised, less text, more visual)
// ═══════════════════════════════════════════════════════════
function Caregivers() {
  const T = UN.d;

  const folks = [
    { name: 'You',     role: 'Parent',     tone: '#c2b39a', last: '12m', dot: T.sage, you: true,
      perms: ['Log everything', 'Manage', 'Billing'],
      shift: [1,1,1,1,1,0,0,1,1,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1] },
    { name: 'Sarah',   role: 'Parent',     tone: '#a5b8c9', last: '4h',  dot: UN.d.sev.warm,
      perms: ['Log everything', 'Manage'],
      sub: 'sleeping',
      shift: [0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0] },
    { name: 'Grandma', role: 'Grandparent', tone: '#d3a89a', last: '23m', dot: T.sage,
      perms: ['Log doses', 'Log symptoms', 'Read-only settings'],
      sub: 'here now',
      shift: [0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1] },
  ];

  return (
    <Phone mode="d" time="2:14">
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <TopBar mode="d" kidName="Maeve" kidTone="#d3a89a" dot="warm" subtitle="WATCHING · 3 LIVE"/>

        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0 16px' }}>
          <h1 style={{
            margin: '8px 22px 4px', fontSize: 26, fontWeight: 700, color: T.text, letterSpacing: -0.6,
          }}>Watching</h1>
          <p style={{ margin: '0 22px', fontSize: 13, color: T.textDim, lineHeight: 1.4 }}>
            <strong style={{ color: T.text, fontWeight: 700 }}>Grandma is with Maeve.</strong> You and Sarah on call.
          </p>

          {/* Shift visualisation — past 24h, who was logging when */}
          <div style={{
            margin: '18px 22px 0',
            background: T.surface, border: `1px solid ${T.line}`, borderRadius: 18,
            padding: '14px 16px',
          }}>
            <div style={{
              display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12,
            }}>
              <div style={{ fontSize: 10.5, color: T.textMute, letterSpacing: 0.7, fontWeight: 700, textTransform: 'uppercase' }}>
                Past 24 hours
              </div>
              <div style={{ fontSize: 11.5, color: T.textDim }}>
                14 logs · evenly shared
              </div>
            </div>
            {folks.map((f, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0',
              }}>
                <div style={{ position: 'relative' }}>
                  <div style={{
                    width: 24, height: 24, borderRadius: 24,
                    background: f.tone, color: '#fff', fontSize: 10, fontWeight: 700,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>{f.name[0]}</div>
                  <div style={{
                    position: 'absolute', bottom: -1, right: -1,
                    width: 8, height: 8, borderRadius: 8, background: f.dot,
                    border: `1.5px solid ${T.surface}`,
                  }}/>
                </div>
                <div style={{ width: 56, fontSize: 11.5, color: T.text, fontWeight: 600 }}>
                  {f.name}
                </div>
                {/* swim lane */}
                <div style={{
                  flex: 1, display: 'flex', gap: 1.5, alignItems: 'center',
                  padding: '2px 0',
                }}>
                  {f.shift.map((s, j) => {
                    const isNow = j === 23;
                    return (
                      <div key={j} style={{
                        flex: 1, height: 14, borderRadius: 2,
                        background: s ? f.tone : T.surface2,
                        opacity: s ? (isNow ? 1 : 0.55 + 0.1*Math.sin(j)) : 1,
                        border: isNow && s ? `1px solid ${T.sage}` : 'none',
                      }}/>
                    );
                  })}
                </div>
              </div>
            ))}
            {/* axis */}
            <div style={{
              marginTop: 4, marginLeft: 90,
              display: 'flex', justifyContent: 'space-between',
              fontSize: 9, color: T.textMute, letterSpacing: 0.3, fontWeight: 600,
            }}>
              <span>YESTERDAY 2am</span><span>8am</span><span>2pm</span><span>8pm</span><span>NOW</span>
            </div>
          </div>

          {/* Caregivers list */}
          <div style={{ padding: '18px 22px 0' }}>
            {folks.map((f, i) => (
              <div key={i} style={{
                background: T.surface, border: `1px solid ${T.line}`, borderRadius: 16,
                padding: '14px 16px', marginBottom: 8,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                  <div style={{ position: 'relative' }}>
                    <div style={{
                      width: 40, height: 40, borderRadius: 40,
                      background: `linear-gradient(135deg, ${f.tone}, ${T.sageDeep})`,
                      color: '#fff', fontWeight: 700, fontSize: 15,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>{f.name[0]}</div>
                    <div style={{
                      position: 'absolute', bottom: -1, right: -1,
                      width: 12, height: 12, borderRadius: 12,
                      background: f.dot, border: `2.5px solid ${T.surface}`,
                    }}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 15, color: T.text, fontWeight: 700, letterSpacing: -0.2 }}>
                      {f.name}
                      {f.you && (
                        <span style={{
                          marginLeft: 6, fontSize: 9, color: T.sage,
                          padding: '2px 6px', borderRadius: 4,
                          background: T.sageSoft, fontWeight: 700, letterSpacing: 0.4,
                        }}>YOU</span>
                      )}
                    </div>
                    <div style={{ fontSize: 11, color: T.textMute, marginTop: 1 }}>
                      {f.role} · {f.sub ? f.sub : `last log ${f.last} ago`}
                    </div>
                  </div>
                  <Icon name="chev" size={14} color={T.textMute} strokeWidth={1.8}/>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                  {f.perms.map((p, j) => (
                    <span key={j} style={{
                      fontSize: 10, color: T.textDim, fontWeight: 500,
                      padding: '2px 7px', borderRadius: 99,
                      background: T.surface2, border: `1px solid ${T.line}`,
                    }}>{p}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>

          {/* Invite */}
          <div style={{ padding: '6px 22px 0' }}>
            <button style={{
              width: '100%', height: 52, borderRadius: 16,
              background: T.sageSoft, border: `1.5px dashed ${T.sageEdge}`,
              color: T.sage, fontFamily: UN.font.body, fontSize: 14, fontWeight: 700,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              <Icon name="plus" size={16} color={T.sage} strokeWidth={2.2}/>
              Invite anyone watching
            </button>
          </div>
        </div>
        <TabBar mode="d" active="home"/>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

// ═══════════════════════════════════════════════════════════
// Add caregiver — sheet with role + permissions
// ═══════════════════════════════════════════════════════════
function AddCaregiver() {
  const T = UN.d;
  const roles = [
    { id: 'parent', t: 'Parent',      sub: 'Full access', icon: 'people' },
    { id: 'grand',  t: 'Grandparent', sub: 'Doses + symptoms', icon: 'people', sel: true },
    { id: 'sitter', t: 'Sitter',      sub: 'Doses + read-only', icon: 'people' },
    { id: 'nanny',  t: 'Nanny',       sub: 'Doses + symptoms', icon: 'people' },
    { id: 'doc',    t: 'Doctor',      sub: 'View-only handoff', icon: 'doc' },
    { id: 'other',  t: 'Other',       sub: 'Build permissions', icon: 'plus' },
  ];
  return (
    <ModalShell
      mode="d"
      title="Invite a caregiver"
      subtitle="They tap the link and they're in. No install."
      cta={<><Icon name="share" size={16} color="#0E1A14" strokeWidth={2.2}/>Share link via SMS</>}
    >
      <Label>Their name</Label>
      <div style={{
        marginTop: 8, marginBottom: 18,
        padding: '14px 16px', borderRadius: 14,
        background: T.surface, border: `1.5px solid ${T.sage}`,
        fontSize: 16, color: T.text, fontWeight: 500, letterSpacing: -0.2,
      }}>Grandma <span style={{ color: T.textMute, fontSize: 13, fontWeight: 400 }}>(Linda)</span></div>

      <Label>Role · what they can do</Label>
      <div style={{ marginTop: 8, marginBottom: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
        {roles.map(r => (
          <div key={r.id} style={{
            padding: '12px',
            background: r.sel ? T.sageSoft : T.surface,
            border: `1.5px solid ${r.sel ? T.sage : T.line2}`,
            borderRadius: 12,
            display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6,
          }}>
            <Icon name={r.icon} size={16} color={r.sel ? T.sage : T.textDim} strokeWidth={1.9}/>
            <div style={{ fontSize: 13.5, color: T.text, fontWeight: 700 }}>{r.t}</div>
            <div style={{ fontSize: 11, color: T.textDim }}>{r.sub}</div>
          </div>
        ))}
      </div>

      <Label>They'll be able to</Label>
      <div style={{
        marginTop: 8, marginBottom: 14,
        background: T.surface, border: `1px solid ${T.line2}`, borderRadius: 14, overflow: 'hidden',
      }}>
        {[
          { t: 'Log a dose',            on: true },
          { t: 'Log temperatures & symptoms', on: true },
          { t: 'Use voice logging',     on: true },
          { t: 'See past episodes',     on: false },
          { t: 'Manage other caregivers', on: false },
          { t: 'See billing',           on: false },
        ].map((row,i,arr) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '12px 16px',
            borderBottom: i < arr.length - 1 ? `1px solid ${T.line}` : 'none',
          }}>
            <span style={{ fontSize: 13.5, color: row.on ? T.text : T.textMute, fontWeight: 500 }}>
              {row.t}
            </span>
            <div style={{
              width: 36, height: 22, borderRadius: 22,
              background: row.on ? T.sage : T.surface2,
              border: `1px solid ${row.on ? T.sage : T.line2}`,
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: 2,
                left: row.on ? 16 : 2, width: 16, height: 16, borderRadius: 16,
                background: row.on ? '#0E1A14' : T.textMute,
              }}/>
            </div>
          </div>
        ))}
      </div>

      <div style={{
        padding: '10px 12px', borderRadius: 12,
        background: T.surface2,
        fontSize: 11.5, color: T.textDim, lineHeight: 1.45,
      }}>
        Link expires when this episode closes. Re-invite for future episodes from past caregivers.
      </div>
    </ModalShell>
  );
}

// ═══════════════════════════════════════════════════════════
// Doctor handoff — with dimension toggle chips
// ═══════════════════════════════════════════════════════════
function DoctorHandoff() {
  const T = UN.l;

  return (
    <Phone mode="l" time="11:42">
      <div style={{ height: '100%', overflowY: 'auto' }}>
        {/* Browser chrome */}
        <div style={{
          padding: '12px 18px 12px',
          borderBottom: `1px solid ${T.line}`,
          background: T.surface2,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <div style={{ display: 'flex', gap: 5 }}>
            {['#ff5f57','#febc2e','#28c840'].map((c,i) => (
              <div key={i} style={{ width: 10, height: 10, borderRadius: 10, background: c }}/>
            ))}
          </div>
          <div style={{
            flex: 1, marginLeft: 6,
            padding: '5px 10px', borderRadius: 6,
            background: T.surface, border: `1px solid ${T.line}`,
            fontSize: 11.5, color: T.textDim,
            fontFamily: '"SF Mono", ui-monospace, monospace',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 6, background: UN.l.sage }}/>
            unpanic.app/share/maeve-may15
          </div>
        </div>

        {/* Header */}
        <div style={{ padding: '18px 22px 10px' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 6,
            fontSize: 10.5, color: T.textMute, letterSpacing: 1, fontWeight: 700, textTransform: 'uppercase',
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="10" stroke={UN.l.sage} strokeWidth="2"/>
              <circle cx="12" cy="12" r="4" fill={UN.l.sage}/>
            </svg>
            Unpanic handoff · view-only
          </div>
          <h1 style={{
            margin: '10px 0 4px', fontSize: 26, fontWeight: 700,
            color: T.text, letterSpacing: -0.6, lineHeight: 1.1,
          }}>Maeve, 4 yrs · 15.4 kg</h1>
          <div style={{ fontSize: 13.5, color: T.textDim }}>
            Stomach flu · Day 3 · active episode · 3 caregivers
          </div>
        </div>

        {/* Dimension toggle chips */}
        <div style={{
          padding: '6px 22px 14px',
          display: 'flex', gap: 5, flexWrap: 'wrap',
        }}>
          {[
            { i: 'thermo', t: 'Temp',     on: true },
            { i: 'pill',   t: 'Doses',    on: true },
            { i: 'vomit',  t: 'Vomit',    on: true },
            { i: 'diaper', t: 'Urine',    on: true },
            { i: 'drop',   t: 'Fluids',   on: false },
            { i: 'food',   t: 'Food',     on: false },
            { i: 'clock',  t: 'Sleep',    on: false },
          ].map((c, i) => (
            <button key={i} style={{
              padding: '6px 10px', borderRadius: 8,
              background: c.on ? T.sageSoft : 'transparent',
              border: `1px solid ${c.on ? UN.l.sageEdge : T.line}`,
              color: c.on ? UN.l.sageDeep : T.textMute,
              fontFamily: UN.font.body, fontSize: 12, fontWeight: c.on ? 700 : 500,
              display: 'inline-flex', alignItems: 'center', gap: 5,
            }}>
              <Icon name={c.i} size={12} color={c.on ? UN.l.sageDeep : T.textMute} strokeWidth={1.9}/>
              {c.t}
            </button>
          ))}
        </div>

        {/* Stat strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4,1fr)',
          gap: 1, margin: '0 22px',
          background: T.line, border: `1px solid ${T.line}`,
          borderRadius: 12, overflow: 'hidden',
        }}>
          {[
            { l: 'Peak', v: '39.3°', s: '17h ago', c: UN.l.sev.hot },
            { l: 'Now',  v: '38.4°', s: '↓ 0.2',   c: UN.l.sev.warm },
            { l: 'Doses', v: '4',    s: 'Tyl + Mot' },
            { l: 'Vomits', v: '3',   s: 'last 10h' },
          ].map((s, i) => (
            <div key={i} style={{ background: T.surface, padding: '10px 10px' }}>
              <div style={{ fontSize: 9.5, color: T.textMute, textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 700 }}>{s.l}</div>
              <div style={{
                fontFamily: UN.font.num, fontSize: 17, fontWeight: 700,
                color: s.c || T.text, marginTop: 2, letterSpacing: -0.3,
                fontVariantNumeric: 'tabular-nums',
              }}>{s.v}</div>
              <div style={{ fontSize: 10.5, color: T.textDim, marginTop: 1 }}>{s.s}</div>
            </div>
          ))}
        </div>

        {/* Big timeline */}
        <div style={{
          margin: '14px 22px',
          background: T.surface, border: `1px solid ${T.line}`,
          borderRadius: 14, padding: '14px 8px 4px',
        }}>
          <div style={{ padding: '0 8px 6px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 10.5, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>
              30-hour view
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              {['24h','3d','All'].map((s,i) => (
                <button key={s} style={{
                  padding: '4px 8px', borderRadius: 6,
                  background: i === 0 ? T.surface2 : 'transparent',
                  color: i === 0 ? T.text : T.textMute,
                  fontSize: 11, fontWeight: 600, border: 'none',
                }}>{s}</button>
              ))}
            </div>
          </div>
          <Timeline width={310} height={150} mode="l"/>
        </div>

        {/* Per-dimension mini-tracks */}
        <div style={{ padding: '6px 22px 0' }}>
          <div style={{ fontSize: 10.5, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase', marginBottom: 8 }}>
            Per dimension
          </div>
          {[
            { i: 'diaper', t: 'Wet diapers', v: '5', sub: 'Last: 7h ago — flag at 8h', flag: true,
              dots: [1,1,1,0,1,1,0,0,0,0,0,0] },
            { i: 'vomit',  t: 'Vomit',       v: '3', sub: '2 small + 1 medium · last 10h ago',
              dots: [0,0,0,1,0,0,2,0,0,1,0,0] },
            { i: 'drop',   t: 'Fluids',      v: '21oz', sub: 'Mostly Pedialyte · 1 refusal',
              dots: [0,2,0,3,1,0,5,0,4,0,1,5] },
          ].map((r,i,arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0',
              borderBottom: i < arr.length - 1 ? `1px solid ${T.line}` : 'none',
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 10,
                background: r.flag ? `${UN.l.sev.warm}22` : T.surface2,
                border: `1px solid ${r.flag ? `${UN.l.sev.warm}66` : T.line}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <Icon name={r.i} size={15} color={r.flag ? UN.l.sev.warm : T.textDim} strokeWidth={1.9}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 13.5, color: T.text, fontWeight: 600, letterSpacing: -0.1 }}>{r.t}</div>
                  <div style={{
                    fontFamily: UN.font.num, fontSize: 13, fontWeight: 700, color: r.flag ? UN.l.sev.warm : T.text,
                    fontVariantNumeric: 'tabular-nums',
                  }}>{r.v}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                  <div style={{ display: 'flex', gap: 2, flex: 1 }}>
                    {r.dots.map((d, j) => (
                      <div key={j} style={{
                        flex: 1, height: 14, borderRadius: 2,
                        background: d === 0 ? T.line :
                                    d >= 4 ? UN.l.sage :
                                    d >= 2 ? UN.l.sev.warm :
                                    UN.l.trust,
                        opacity: d === 0 ? 1 : 0.5 + d * 0.12,
                      }}/>
                    ))}
                  </div>
                </div>
                <div style={{ fontSize: 11, color: T.textMute, marginTop: 3 }}>{r.sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Footer */}
        <div style={{
          margin: '14px 22px 24px',
          padding: '12px 14px', borderRadius: 12,
          background: T.surface2, border: `1px solid ${T.line}`,
          fontSize: 11, color: T.textDim, lineHeight: 1.5,
        }}>
          <strong style={{ color: T.text, fontWeight: 700 }}>Parent self-reported data.</strong>{' '}
          Not a medical record. Generated by Unpanic · May 15, 2026 · 11:42 PM.
          Caregiver attribution preserved on every entry.
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { Caregivers, AddCaregiver, DoctorHandoff });