// Results screen + result detail + history + notifications + profile + schedule

function ResultsScreen({ dark, go }) {
  const t = useT(dark);
  const d = LUMEN_DATA;
  return (
    <Screen dark={dark}>
      <ScreenHeader dark={dark} title="Resultados" subtitle="Seus laudos e imagens em um só lugar" />

      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px',
        background: t.surface, borderRadius: 99, marginBottom: 18,
        border: `1px solid ${t.border}`,
      }}>
        <Icon name="search" size={18} color={t.textMuted} />
        <input placeholder="Buscar por tipo ou médico" style={{
          flex: 1, border: 'none', background: 'transparent', outline: 'none',
          fontSize: 14.5, color: t.text, fontFamily: LUMEN_FONTS.sans,
        }} />
        <Icon name="filter" size={18} color={t.textMuted} />
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {d.results.map(r => (
          <Card key={r.id} dark={dark} onClick={() => go('result-detail', r.id)} padding={16}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'start' }}>
              <ExamBadge icon={r.icon} dark={dark} tone={r.status === 'new' ? 'sage' : 'muted'} size={44} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                  <div style={{ fontSize: 16, fontWeight: 500, color: t.text, letterSpacing: -0.2 }}>{r.type}</div>
                  {r.status === 'new' && (
                    <span style={{
                      fontSize: 10, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
                      color: t.sage, background: t.sageBg, padding: '2px 7px', borderRadius: 99,
                    }}>Novo</span>
                  )}
                </div>
                <div style={{ fontSize: 13, color: t.textMuted }}>{r.subtype}</div>
                <div style={{ fontSize: 12.5, color: t.textSubtle, marginTop: 6 }}>
                  {r.date} · {r.doctor}
                </div>
              </div>
              <Icon name="chevron" size={16} color={t.textSubtle} />
            </div>
          </Card>
        ))}
      </div>
    </Screen>
  );
}

function ResultDetailScreen({ dark, resultId, go }) {
  const t = useT(dark);
  const r = LUMEN_DATA.results.find(x => x.id === resultId) || LUMEN_DATA.results[0];
  return (
    <Screen dark={dark} pad={false}>
      <div style={{ padding: '62px 20px 0', display: 'flex', justifyContent: 'space-between', marginBottom: 18 }}>
        <BackButton dark={dark} onClick={() => go('results')} />
        <button style={{
          width: 38, height: 38, borderRadius: 99, border: 'none',
          background: t.surface, boxShadow: `0 1px 2px ${t.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: t.text,
        }}><Icon name="share" size={16} /></button>
      </div>
      <div style={{ padding: '0 20px' }}>
        <ExamBadge icon={r.icon} dark={dark} size={56} tone="sage" />
        <h1 style={{
          margin: '16px 0 4px', fontFamily: LUMEN_FONTS.serif, fontSize: 30, color: t.text,
          letterSpacing: -0.4, lineHeight: 1.1,
        }}>{r.type}</h1>
        <div style={{ fontSize: 15, color: t.textMuted }}>{r.subtype}</div>

        <Card dark={dark} padding={16} style={{ marginTop: 20 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <div style={{ fontSize: 11, color: t.textMuted, textTransform: 'uppercase', letterSpacing: 0.8, fontWeight: 600 }}>Realizado em</div>
              <div style={{ fontSize: 14.5, color: t.text, fontWeight: 500, marginTop: 3 }}>{r.date}</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: t.textMuted, textTransform: 'uppercase', letterSpacing: 0.8, fontWeight: 600 }}>Laudado por</div>
              <div style={{ fontSize: 14.5, color: t.text, fontWeight: 500, marginTop: 3 }}>{r.doctor}</div>
            </div>
          </div>
        </Card>

        {/* Summary */}
        <div style={{ marginTop: 22 }}>
          <div style={{ fontSize: 11, color: t.textMuted, textTransform: 'uppercase', letterSpacing: 1, fontWeight: 600, marginBottom: 10, paddingLeft: 4 }}>Resumo do laudo</div>
          <Card dark={dark} padding={20}>
            <div style={{ fontFamily: LUMEN_FONTS.serif, fontSize: 20, color: t.text, lineHeight: 1.3, letterSpacing: -0.2 }}>
              “{r.summary}.”
            </div>
            <div style={{
              marginTop: 14, paddingTop: 14, borderTop: `1px solid ${t.border}`,
              fontSize: 13.5, color: t.textMuted, lineHeight: 1.55,
            }}>
              Campos pulmonares transparentes, sem condensações ou consolidações. Silhueta cardíaca de dimensões normais. Seios costofrênicos livres. Arcabouço ósseo preservado.
            </div>
          </Card>
        </div>

        {/* Images */}
        <div style={{ marginTop: 22 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10, paddingLeft: 4 }}>
            <div style={{ fontSize: 11, color: t.textMuted, textTransform: 'uppercase', letterSpacing: 1, fontWeight: 600 }}>Imagens</div>
            <div style={{ fontSize: 12, color: t.accent, fontWeight: 500 }}>4 arquivos</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[1,2,3,4].map(n => (
              <div key={n} style={{
                aspectRatio: '1', borderRadius: 16, background: t.queueBg,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'rgba(236,232,245,0.35)', fontFamily: LUMEN_FONTS.mono, fontSize: 11,
                border: `1px solid ${t.border}`, position: 'relative', overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: `radial-gradient(ellipse at ${30 + n*15}% ${40 + n*10}%, rgba(236,232,245,0.08), transparent 60%)`,
                }} />
                <span style={{ position: 'relative', zIndex: 1 }}>IMG · {String(n).padStart(2,'0')}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
          <Button dark={dark} full variant="secondary" icon="download">Baixar PDF</Button>
          <Button dark={dark} full variant="primary" icon="share">Compartilhar</Button>
        </div>
        <div style={{ height: 20 }} />
      </div>
    </Screen>
  );
}

// ═══════════════════════════════════════════════════════════
function NotificationsScreen({ dark, go }) {
  const t = useT(dark);
  const items = LUMEN_DATA.notifications;
  const iconMap = { reminder: 'clock', result: 'doc', prep: 'info', confirm: 'check' };
  return (
    <Screen dark={dark}>
      <ScreenHeader dark={dark} title="Notificações" onBack={() => go('home')} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map(n => (
          <Card key={n.id} dark={dark} padding={16} tone={n.unread ? 'default' : 'sunken'}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'start' }}>
              <div style={{
                width: 38, height: 38, borderRadius: 12, flexShrink: 0,
                background: n.unread ? t.accentBg : t.surfaceSunken,
                color: n.unread ? t.accent : t.textMuted,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={iconMap[n.kind]} size={18} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                  <div style={{ fontSize: 15, fontWeight: n.unread ? 600 : 500, color: t.text }}>{n.title}</div>
                  {n.unread && <div style={{ width: 7, height: 7, borderRadius: 99, background: t.accent }} />}
                </div>
                <div style={{ fontSize: 13, color: t.textMuted, lineHeight: 1.4 }}>{n.body}</div>
                <div style={{ fontSize: 11.5, color: t.textSubtle, marginTop: 6, letterSpacing: 0.3 }}>{n.time}</div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </Screen>
  );
}

// ═══════════════════════════════════════════════════════════
function ProfileScreen({ dark, go }) {
  const t = useT(dark);
  const u = LUMEN_DATA.user;
  const row = (icon, label, detail, onClick) => (
    <div onClick={onClick} style={{
      padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
      cursor: onClick ? 'pointer' : 'default',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 10, background: t.surfaceSunken, color: t.textMuted,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><Icon name={icon} size={16} /></div>
      <div style={{ flex: 1, fontSize: 14.5, color: t.text, fontWeight: 500 }}>{label}</div>
      {detail && <div style={{ fontSize: 13, color: t.textMuted }}>{detail}</div>}
      <Icon name="chevron" size={14} color={t.textSubtle} />
    </div>
  );
  return (
    <Screen dark={dark}>
      <ScreenHeader dark={dark} title="Perfil" />

      <Card dark={dark} padding={20} style={{ textAlign: 'center' }}>
        <div style={{
          width: 76, height: 76, borderRadius: 99, margin: '0 auto',
          background: t.accentBg, color: t.accent,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: LUMEN_FONTS.serif, fontSize: 32,
        }}>{u.avatarInitials}</div>
        <div style={{ fontFamily: LUMEN_FONTS.serif, fontSize: 24, color: t.text, marginTop: 12, letterSpacing: -0.3 }}>
          {u.fullName}
        </div>
        <div style={{ fontSize: 13, color: t.textMuted, marginTop: 2 }}>
          {u.cpf} · {u.birthdate}
        </div>
      </Card>

      {/* Convênio */}
      <SectionLabel dark={dark}>Convênio</SectionLabel>
      <Card dark={dark} padding={18} tone="accent">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 11, color: dark ? t.textMuted : '#5A3E8C', letterSpacing: 1, textTransform: 'uppercase', fontWeight: 600 }}>Convênio ativo</div>
            <div style={{ fontFamily: LUMEN_FONTS.serif, fontSize: 20, color: dark ? t.text : '#2D1D4E', marginTop: 3, letterSpacing: -0.2 }}>{u.convenio}</div>
          </div>
          <div style={{
            padding: '4px 10px', borderRadius: 99, background: 'rgba(92,122,92,0.2)',
            fontSize: 10.5, fontWeight: 700, color: t.sage, letterSpacing: 0.6, textTransform: 'uppercase',
          }}>Vigente</div>
        </div>
        <div style={{ fontFamily: LUMEN_FONTS.mono, fontSize: 15, color: dark ? t.text : '#2D1D4E', letterSpacing: 2 }}>
          {u.convenioId}
        </div>
      </Card>

      {/* Sections */}
      <SectionLabel dark={dark}>Dados e acesso</SectionLabel>
      <Card dark={dark} padding={0}>
        {row('user', 'Informações pessoais', null, () => {})}
        <div style={{ height: 1, background: t.border, marginLeft: 60 }} />
        {row('phone', 'Telefone', u.phone)}
        <div style={{ height: 1, background: t.border, marginLeft: 60 }} />
        {row('globe', 'E-mail', u.email.split('@')[0] + '@…')}
        <div style={{ height: 1, background: t.border, marginLeft: 60 }} />
        {row('card', 'Carteirinhas e convênios')}
      </Card>

      <SectionLabel dark={dark}>Documentos</SectionLabel>
      <Card dark={dark} padding={0}>
        {row('doc', 'Meus documentos', '6')}
        <div style={{ height: 1, background: t.border, marginLeft: 60 }} />
        {row('download', 'Histórico completo (PDF)')}
      </Card>

      <SectionLabel dark={dark}>Preferências</SectionLabel>
      <Card dark={dark} padding={0}>
        {row('bell', 'Notificações')}
        <div style={{ height: 1, background: t.border, marginLeft: 60 }} />
        {row('lock', 'Privacidade e senha')}
        <div style={{ height: 1, background: t.border, marginLeft: 60 }} />
        {row('chat', 'Falar com suporte')}
      </Card>

      <div style={{ marginTop: 20, textAlign: 'center' }}>
        <button onClick={() => go('logout')} style={{
          background: 'transparent', border: 'none', color: t.danger,
          fontSize: 14, fontWeight: 500, cursor: 'pointer', padding: 10,
          fontFamily: LUMEN_FONTS.sans,
        }}>Sair da conta</button>
      </div>
      <div style={{ fontSize: 11, color: t.textSubtle, textAlign: 'center', marginTop: 4 }}>Lumen · v2.4.1</div>
      <div style={{ height: 20 }} />
    </Screen>
  );
}

// ═══════════════════════════════════════════════════════════
function ScheduleScreen({ dark, go }) {
  const t = useT(dark);
  const [sel, setSel] = React.useState(null);
  return (
    <Screen dark={dark}>
      <ScreenHeader dark={dark} title="Agendar exame" onBack={() => go('home')} subtitle="Escolha a modalidade para começar" />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {LUMEN_DATA.modalities.map(m => {
          const on = sel === m.id;
          return (
            <button key={m.id} onClick={() => setSel(m.id)} style={{
              background: on ? t.queueBg : t.surface,
              color: on ? t.queueText : t.text,
              border: `1px solid ${on ? 'transparent' : t.border}`,
              borderRadius: 22, padding: 18, cursor: 'pointer', textAlign: 'left',
              fontFamily: LUMEN_FONTS.sans,
              transition: 'all 0.15s',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12,
                background: on ? 'rgba(236,232,245,0.1)' : t.accentBg,
                color: on ? t.accent : t.accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14,
              }}>
                <Icon name={m.icon} size={20} />
              </div>
              <div style={{ fontFamily: LUMEN_FONTS.serif, fontSize: 19, letterSpacing: -0.2, lineHeight: 1.1 }}>{m.name}</div>
              <div style={{ fontSize: 12, color: on ? 'rgba(236,232,245,0.55)' : t.textMuted, marginTop: 4, lineHeight: 1.3 }}>{m.desc}</div>
            </button>
          );
        })}
      </div>

      <SectionLabel dark={dark}>Unidades próximas</SectionLabel>
      <Card dark={dark} padding={0}>
        {LUMEN_DATA.units.map((u, i) => (
          <div key={u.id} style={{
            padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
            borderBottom: i < LUMEN_DATA.units.length - 1 ? `1px solid ${t.border}` : 'none',
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 12, background: t.surfaceSunken, color: t.textMuted,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><Icon name="building" size={18} /></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, color: t.text, fontWeight: 500 }}>{u.name}</div>
              <div style={{ fontSize: 12.5, color: t.textMuted }}>{u.address}</div>
            </div>
            <div style={{ fontSize: 12, color: t.textMuted, fontWeight: 500 }}>{u.dist}</div>
          </div>
        ))}
      </Card>

      <div style={{ position: 'sticky', bottom: 0, paddingTop: 18, background: `linear-gradient(to top, ${t.bg} 70%, transparent)`, marginTop: 20 }}>
        <Button dark={dark} full size="lg" variant="primary" disabled={!sel} onClick={() => go('home')}>
          {sel ? 'Ver horários disponíveis' : 'Selecione uma modalidade'}
        </Button>
      </div>
    </Screen>
  );
}

window.ResultsScreen = ResultsScreen;
window.ResultDetailScreen = ResultDetailScreen;
window.NotificationsScreen = NotificationsScreen;
window.ProfileScreen = ProfileScreen;
window.ScheduleScreen = ScheduleScreen;