// Workforce OS — Home (AI Dashboard / Command Center).

function CommandBox() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const [val, setVal] = React.useState('');
  const examples = [
    "What's my most urgent flag today?",
    'Patients waiting on records >5 days',
    'Draft stim check reminder for tomorrow',
    'Which cycles are at risk?',
    "Summarize this week's intakes",
  ];

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: '#000', color: '#fff',
      borderRadius: 20, padding: '36px 32px 28px',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(800px 320px at 80% -10%, rgba(126,128,255,0.35), transparent 65%), radial-gradient(600px 280px at 10% 110%, rgba(228,91,194,0.20), transparent 65%)',
        pointerEvents: 'none',
      }}></div>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', color: '#FFA8E9', textTransform: 'uppercase', marginBottom: 8 }}>
              Tuesday · May 26 · 9:14 am
            </div>
            <div style={{ fontFamily: 'Libre Caslon Text, serif', fontSize: 36, fontWeight: 600, fontStyle: 'italic', letterSpacing: '-0.01em', lineHeight: 1.1 }}>
              Good morning, Robin.
            </div>
            <div style={{ fontFamily: 'Urbanist', fontSize: 14, color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>
              You have <strong style={{ color: '#fff' }}>12 tasks</strong>, <strong style={{ color: '#FFA8E9' }}>2 red flags</strong>, and <strong style={{ color: '#fff' }}>4 patient messages</strong> waiting.
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <LivePulse color="#9CCAA9" size={7} />
            <span style={{ fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700, color: '#9CCAA9' }}>AGENTS ACTIVE · 3 OF 4</span>
          </div>
        </div>

        <div style={{
          background: '#fff', color: '#000',
          borderRadius: 16, padding: '14px 18px',
          display: 'flex', alignItems: 'center', gap: 14,
          boxShadow: '0 20px 50px rgba(126,128,255,0.30)',
        }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: '#000', color: '#DEDFFF', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <i data-lucide="sparkles" style={{ width: 18, height: 18 }}></i>
          </div>
          <input value={val} onChange={e => setVal(e.target.value)} placeholder="What do you need today?" style={{
            flex: 1, minWidth: 0, border: 'none', outline: 'none',
            fontFamily: 'Urbanist', fontSize: 18, fontWeight: 500, background: 'transparent', padding: '4px 0',
          }} />
          <button style={{
            padding: '8px 14px', background: '#000', color: '#fff',
            border: 'none', borderRadius: 8, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 5,
            fontFamily: 'Urbanist', fontWeight: 700, fontSize: 12,
          }}>
            Ask <i data-lucide="arrow-up" style={{ width: 12, height: 12 }}></i>
          </button>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {examples.map(q => (
            <button key={q} onClick={() => setVal(q)} style={{
              padding: '7px 12px', borderRadius: 999,
              background: 'rgba(255,255,255,0.08)',
              border: '1px solid rgba(255,255,255,0.14)',
              color: '#fff', cursor: 'pointer',
              fontFamily: 'Urbanist', fontSize: 12, fontWeight: 500,
            }}>
              <span style={{ marginRight: 6, color: '#FFA8E9' }}>↗</span>{q}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function AgentCard({ agent }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const dot = agent.live ? '#277852' : '#C1C1C1';
  const handleClick = () => {
    if (agent.href) window.location.href = agent.href;
  };
  return (
    <div onClick={handleClick} style={{
      padding: 16, background: '#fff',
      border: '1px solid #EBEBEB', borderRadius: 14,
      display: 'flex', flexDirection: 'column', gap: 12, cursor: 'pointer',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: agent.bg, color: agent.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <i data-lucide={agent.icon} style={{ width: 18, height: 18 }}></i>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'Urbanist', fontSize: 14, fontWeight: 700 }}>{agent.name}</div>
          <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E', marginTop: 1 }}>{agent.tagline}</div>
        </div>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 999, background: dot + '22', fontFamily: 'Urbanist', fontSize: 9, fontWeight: 800, letterSpacing: '0.08em' }}>
          <span style={{ width: 5, height: 5, borderRadius: 999, background: dot }}></span>
          {agent.live ? 'LIVE' : 'SOON'}
        </span>
      </div>
      <div style={{ display: 'flex', gap: 14, fontFamily: 'Urbanist', fontSize: 11, color: '#62748E' }}>
        <span><strong style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>{agent.todayCount}</strong> today</span>
        <span>·</span>
        <span><strong style={{ color: '#000', fontSize: 14, fontWeight: 800 }}>{agent.savings}</strong> saved</span>
      </div>
    </div>
  );
}

function HomeScreen({ onNav }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const agents = [
    { name: 'MedReview', tagline: 'AI medical record review',  icon: 'file-search', bg: '#DEDFFF', fg: '#202166', live: true, todayCount: 6, savings: '3.1h', href: 'MedReview.html' },
    { name: 'CareCall',  tagline: 'AI voice agent',            icon: 'phone-call',  bg: '#FFD3F4', fg: '#71205D', live: true, todayCount: 187, savings: '8.2h', href: 'CareCall.html' },
    { name: 'Scribe',    tagline: 'Ambient documentation',     icon: 'mic',         bg: '#FFF2BF', fg: '#7a6505', live: true, todayCount: 8, savings: '4.6h', href: 'ClinicalScribe.html' },
    { name: 'Agent Hub', tagline: 'Build custom AI agents',    icon: 'cpu',         bg: '#FFE0BA', fg: '#8D622D', live: false, todayCount: '—', savings: 'Soon' },
  ];

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 1500, margin: '0 auto' }}>
      <CommandBox />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        <MetricTile label="Active patients" value="247" delta="14 new" trend="up" sub="this week" accent="#7E80FF" />
        <MetricTile label="Cycles in stim" value="38" sub="6 trigger this wk" />
        <MetricTile label="Tasks open" value="12" delta="4 overdue" trend="down" sub="across team" accent="#FF8C00" />
        <MetricTile label="Red flags" value="2" sub="needs MD review" accent="#FF404C" />
        <MetricTile label="Hours saved" value="41.2h" delta="this week" trend="up" sub="vs baseline" accent="#277852" />
      </div>

      <div>
        <SectionHead eyebrow="Apps · running for you" title="Active AI agents" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {agents.map(a => <AgentCard key={a.name} agent={a} />)}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
        <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
          <SectionHead eyebrow="Surfaced for you" title="Today's flags & tasks" right={
            <div style={{ display: 'flex', gap: 4 }}>
              {['All', 'Flags', 'Tasks'].map((t, i) => (
                <button key={t} style={{
                  padding: '5px 10px', borderRadius: 6, border: 'none',
                  background: i === 0 ? '#000' : 'transparent',
                  color: i === 0 ? '#fff' : '#4D4D4D',
                  fontFamily: 'Urbanist', fontSize: 11, fontWeight: 700, cursor: 'pointer',
                }}>{t}</button>
              ))}
            </div>
          } />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { kind: 'flag', priority: 'P0', patient: 'Ashley Park', text: 'Heavy post-transfer bleeding — CareCall escalated 12 min ago', src: 'CareCall · c-1041', who: 'Page MD' },
              { kind: 'flag', priority: 'P0', patient: 'Anita Chen',  text: 'STI panel expired before cycle start — MedReview flagged', src: 'MedReview · Anita', who: 'Re-order panel' },
              { kind: 'task', priority: 'P1', patient: 'María Sandoval', text: 'Confirm Wednesday baseline ultrasound reschedule', src: 'CareCall · c-1042', who: 'Book in IMS' },
              { kind: 'task', priority: 'P2', patient: 'Carla Ortega', text: 'Schedule new-patient callback for Monday 10am', src: 'CareCall · c-1039', who: 'Calendar' },
              { kind: 'flag', priority: 'P1', patient: 'Sarah Goldman', text: 'GC agreement confirmation pending — Scribe captured', src: 'Scribe · s-04', who: 'Send pack' },
            ].map((it, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: '#FDFBFA', border: '1px solid #EBEBEB', borderRadius: 10 }}>
                <PriorityDot priority={it.priority} />
                <Avatar name={it.patient} size={32} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <div style={{ fontFamily: 'Urbanist', fontSize: 13, fontWeight: 700 }}>{it.patient}</div>
                    <span style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', color: '#62748E', textTransform: 'uppercase' }}>{it.priority} · {it.kind}</span>
                  </div>
                  <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#4D4D4D', marginTop: 2, lineHeight: 1.5 }}>{it.text}</div>
                  <div style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E', marginTop: 4 }}>↗ {it.src}</div>
                </div>
                <button style={{ padding: '7px 12px', background: '#000', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontWeight: 700, fontSize: 11, whiteSpace: 'nowrap' }}>{it.who}</button>
              </div>
            ))}
          </div>
        </div>

        <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22, display: 'flex', flexDirection: 'column' }}>
          <SectionHead eyebrow="Quick chat" title="Messages" right={
            <button onClick={() => onNav && onNav('comms')} style={{ padding: '6px 10px', background: 'transparent', color: '#000', border: '1px solid #EBEBEB', borderRadius: 8, cursor: 'pointer', fontFamily: 'Urbanist', fontWeight: 700, fontSize: 11 }}>Open inbox</button>
          } />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { name: 'Anita Chen', time: '2 min', msg: 'Should I take the Menopur with food tonight?', unread: true, channel: 'app' },
              { name: 'María Sandoval', time: '14 min', msg: 'Gracias, confirmo el jueves a las 4:30.', unread: true, channel: 'sms' },
              { name: 'Dr. Reyes', time: '1h', msg: 'Can you push Sarah\'s transfer to next Tue?', unread: false, channel: 'internal' },
              { name: 'Jennifer Wu', time: '2h', msg: 'Got the prescription, all set 🙏', unread: false, channel: 'app' },
              { name: 'Tasha Williams', time: '3h', msg: 'Insurance card uploaded to vault.', unread: false, channel: 'email' },
            ].map((m, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 10, borderRadius: 8, background: m.unread ? '#FDFBFA' : 'transparent', border: m.unread ? '1px solid #EBEBEB' : '1px solid transparent' }}>
                <Avatar name={m.name} size={32} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <span style={{ fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700 }}>{m.name}</span>
                    {m.unread && <span style={{ width: 6, height: 6, borderRadius: 999, background: '#7E80FF' }}></span>}
                    <span style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E', textTransform: 'uppercase', letterSpacing: '0.04em' }}>· {m.channel}</span>
                  </div>
                  <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#4D4D4D', marginTop: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.msg}</div>
                </div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 10, color: '#62748E' }}>{m.time}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16 }}>
        <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
          <SectionHead eyebrow="Pipeline · this week" title="Patient flow by journey stage" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6, marginBottom: 14 }}>
            {[
              { stage: 'Intake',       n: 31, color: '#DEDFFF', text: '#202166' },
              { stage: 'Workup',       n: 18, color: '#FFE0BA', text: '#8D622D' },
              { stage: 'Stim cycle',   n: 38, color: '#FFD3F4', text: '#71205D' },
              { stage: 'Retrieval',    n:  9, color: '#FFF2BF', text: '#AC9121' },
              { stage: 'Transfer',     n: 12, color: '#DDF0E5', text: '#277852' },
              { stage: 'Post-transfer',n: 15, color: '#FFE5E7', text: '#a82530' },
            ].map(s => (
              <div key={s.stage} style={{ padding: 14, background: s.color, borderRadius: 10 }}>
                <div style={{ fontFamily: 'Urbanist', fontWeight: 800, fontSize: 22, color: s.text, letterSpacing: '-0.02em' }}>{s.n}</div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 700, color: s.text, letterSpacing: '0.04em', textTransform: 'uppercase', marginTop: 4 }}>{s.stage}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#62748E', textTransform: 'uppercase' }}>Cycle starts · 8wk</div>
              <Sparkline data={[12, 14, 16, 13, 18, 21, 23, 26]} color="#7E80FF" height={48} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#62748E', textTransform: 'uppercase' }}>Hours saved</div>
              <Sparkline data={[18, 24, 26, 31, 34, 36, 41, 41]} color="#E45BC2" height={48} />
            </div>
          </div>
        </div>

        <div style={{ background: '#fff', border: '1px solid #EBEBEB', borderRadius: 14, padding: 22 }}>
          <SectionHead eyebrow="Platform status" title="Modules health" />
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {[
              { mod: 'Patients',      stat: '247 active · 14 new this wk',       ok: true },
              { mod: 'Capacity',      stat: '12 tasks · 4 overdue',              ok: false },
              { mod: 'Communication', stat: '4 unread · 18 min avg reply',       ok: true },
              { mod: 'MedReview',     stat: '6 reviewed · 0 errors',             ok: true },
              { mod: 'CareCall',      stat: '162 calls handled by Eva',          ok: true },
              { mod: 'Scribe',        stat: '8 sessions · all under 60s',         ok: true },
              { mod: 'Finance',       stat: '3 pre-auths expiring',              ok: false },
              { mod: 'Portal',        stat: '31 onboardings this wk',            ok: true },
            ].map(f => (
              <div key={f.mod} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: '1px solid #FDFBFA' }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: f.ok ? '#277852' : '#FF8C00', flexShrink: 0 }}></span>
                <div style={{ fontFamily: 'Urbanist', fontSize: 12, fontWeight: 700, width: 100 }}>{f.mod}</div>
                <div style={{ fontFamily: 'Urbanist', fontSize: 11, color: '#62748E', flex: 1 }}>{f.stat}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen });