// Exams list + exam detail

function ExamsListScreen({ dark, go }) {
  const t = useT(dark);
  const d = LUMEN_DATA;
  const [filter, setFilter] = React.useState('upcoming');

  return (
    <Screen dark={dark}>
      <ScreenHeader dark={dark} title="Seus exames" subtitle="Agendados e realizados recentemente" />

      {/* Segmented */}
      <div style={{
        display: 'flex', background: t.surfaceSunken, borderRadius: 14, padding: 4, marginBottom: 18,
      }}>
        {[
          { id: 'upcoming', label: `Próximos · ${d.upcoming.length}` },
          { id: 'past', label: `Realizados` },
        ].map(s => {
          const on = s.id === filter;
          return (
            <button key={s.id} onClick={() => setFilter(s.id)} style={{
              flex: 1, height: 36, borderRadius: 10, border: 'none',
              background: on ? t.surface : 'transparent',
              color: on ? t.text : t.textMuted, fontSize: 13.5, fontWeight: 500,
              fontFamily: LUMEN_FONTS.sans, cursor: 'pointer',
              boxShadow: on ? `0 1px 3px ${t.border}` : 'none',
            }}>{s.label}</button>
          );
        })}
      </div>

      {filter === 'upcoming' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {d.upcoming.map(ex => (
            <Card key={ex.id} dark={dark} onClick={() => go('exam-detail', ex.id)} padding={18}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <span style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase',
                  color: ex.status === 'confirmed' ? t.sage : t.textMuted,
                }}>
                  {ex.status === 'confirmed' ? '✓ Confirmado' : 'Agendado'}
                </span>
                <span style={{ fontSize: 13, color: t.textMuted, fontWeight: 500 }}>{ex.dayLabel}</span>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'start' }}>
                <ExamBadge icon={ex.icon} dark={dark} size={48} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: LUMEN_FONTS.serif, fontSize: 21, color: t.text, letterSpacing: -0.3, lineHeight: 1.15 }}>
                    {ex.type}
                  </div>
                  <div style={{ fontSize: 13, color: t.textMuted, marginTop: 2 }}>{ex.subtype}</div>
                  <div style={{ display: 'flex', gap: 14, marginTop: 12, alignItems: 'center' }}>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 13, color: t.text, fontWeight: 500 }}>
                      <Icon name="clock" size={14} color={t.textMuted} /> {ex.time}
                    </span>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 13, color: t.text, fontWeight: 500 }}>
                      <Icon name="pin" size={14} color={t.textMuted} /> {ex.unit.replace('Lumen ','')}
                    </span>
                  </div>
                </div>
              </div>
            </Card>
          ))}

          <Card dark={dark} tone="sunken" padding={14} onClick={() => go('schedule')} style={{
            display: 'flex', alignItems: 'center', gap: 12, border: `1px dashed ${t.borderStrong}`,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 12, background: t.accentBg, color: t.accent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="plus" size={18} strokeWidth={2} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, fontWeight: 500, color: t.text }}>Agendar novo exame</div>
              <div style={{ fontSize: 12.5, color: t.textMuted }}>Convênio ou particular</div>
            </div>
            <Icon name="chevron" size={16} color={t.textSubtle} />
          </Card>
        </div>
      )}

      {filter === 'past' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {d.history.map(group => (
            <div key={group.year}>
              <div style={{
                fontSize: 11, color: t.textMuted, letterSpacing: 1.5, textTransform: 'uppercase',
                fontWeight: 600, padding: '14px 4px 8px',
              }}>{group.year}</div>
              <Card dark={dark} padding={0}>
                {group.items.map((it, i) => (
                  <div key={i} style={{
                    padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
                    borderBottom: i < group.items.length - 1 ? `1px solid ${t.border}` : 'none',
                  }}>
                    <ExamBadge icon={
                      it.type.includes('Ress') ? 'mri' : it.type.includes('Tomo') ? 'ct' :
                      it.type.includes('Ultra') ? 'ultrasound' : 'xray'
                    } dark={dark} tone="muted" size={36} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 15, color: t.text, fontWeight: 500 }}>{it.type}</div>
                      <div style={{ fontSize: 12.5, color: t.textMuted }}>{it.subtype}</div>
                    </div>
                    <div style={{ fontSize: 12, color: t.textSubtle }}>{it.date}</div>
                  </div>
                ))}
              </Card>
            </div>
          ))}
        </div>
      )}
    </Screen>
  );
}

// ═══════════════════════════════════════════════════════════
function ExamDetailScreen({ dark, examId, go }) {
  const t = useT(dark);
  const ex = LUMEN_DATA.upcoming.find(e => e.id === examId) || LUMEN_DATA.upcoming[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('exams')} />
        <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>

      {/* Hero */}
      <div style={{ padding: '0 20px' }}>
        <ExamBadge icon={ex.icon} dark={dark} size={60} />
        <h1 style={{
          margin: '16px 0 6px', fontFamily: LUMEN_FONTS.serif, fontWeight: 400,
          fontSize: 32, lineHeight: 1.05, color: t.text, letterSpacing: -0.4,
        }}>{ex.type}</h1>
        <div style={{ fontSize: 15, color: t.textMuted }}>{ex.subtype}</div>
      </div>

      {/* Data/hora/local em um cartão */}
      <div style={{ padding: '20px' }}>
        <Card dark={dark} padding={0}>
          <div style={{ padding: 18, borderBottom: `1px solid ${t.border}` }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div>
                <div style={{ fontSize: 11, color: t.textMuted, textTransform: 'uppercase', letterSpacing: 0.8, fontWeight: 600 }}>Data</div>
                <div style={{ fontFamily: LUMEN_FONTS.serif, fontSize: 22, color: t.text, marginTop: 3, letterSpacing: -0.2 }}>{ex.date}</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: t.textMuted, textTransform: 'uppercase', letterSpacing: 0.8, fontWeight: 600 }}>Horário</div>
                <div style={{ fontFamily: LUMEN_FONTS.serif, fontSize: 22, color: t.text, marginTop: 3, letterSpacing: -0.2 }}>{ex.time} <span style={{ fontSize: 13, color: t.textMuted, fontFamily: LUMEN_FONTS.sans }}>· {ex.duration}</span></div>
              </div>
            </div>
          </div>
          <div style={{ padding: 18, display: 'flex', gap: 12, alignItems: 'start' }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: t.accentBg, color: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="pin" size={18} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 500, color: t.text }}>{ex.unit}</div>
              <div style={{ fontSize: 13, color: t.textMuted, marginTop: 2, lineHeight: 1.4 }}>{ex.address}</div>
              <div style={{ display: 'flex', gap: 18, marginTop: 10 }}>
                <button style={{ background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', color: t.accent, fontSize: 13, fontWeight: 500, fontFamily: LUMEN_FONTS.sans }}>Como chegar →</button>
                <button style={{ background: 'transparent', border: 'none', padding: 0, cursor: 'pointer', color: t.accent, fontSize: 13, fontWeight: 500, fontFamily: LUMEN_FONTS.sans }}>Ligar</button>
              </div>
            </div>
          </div>
        </Card>

        {/* Solicitante */}
        <div style={{ marginTop: 20 }}>
          <div style={{ fontSize: 11, color: t.textMuted, textTransform: 'uppercase', letterSpacing: 1, fontWeight: 600, marginBottom: 10, paddingLeft: 4 }}>Solicitado por</div>
          <Card dark={dark} padding={16}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 99, background: t.surfaceSunken,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: LUMEN_FONTS.serif, fontSize: 16, color: t.text,
              }}>RC</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 500, color: t.text }}>{ex.doctor}</div>
                <div style={{ fontSize: 12.5, color: t.textMuted }}>{ex.crm} · Neurologia</div>
              </div>
              <Icon name="doc" size={20} color={t.textMuted} />
            </div>
          </Card>
        </div>

        {/* Preparo */}
        <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 }}>Preparo necessário</div>
            <div style={{ fontSize: 12, color: t.accent, fontWeight: 500 }}>{ex.prep.length} itens</div>
          </div>
          <Card dark={dark} padding={0}>
            {ex.prep.map((p, i) => (
              <div key={i} style={{
                padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'start',
                borderBottom: i < ex.prep.length - 1 ? `1px solid ${t.border}` : 'none',
              }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 99, background: t.sageBg, color: t.sage,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2,
                }}>
                  <Icon name="check" size={14} strokeWidth={2.2} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14.5, color: t.text, fontWeight: 500 }}>{p.label}</div>
                  <div style={{ fontSize: 13, color: t.textMuted, marginTop: 2, lineHeight: 1.4 }}>{p.detail}</div>
                </div>
              </div>
            ))}
          </Card>
        </div>

        {/* CTA */}
        <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <Button dark={dark} full size="lg" variant="primary" icon="scan" onClick={() => go('checkin')}>
            Fazer check-in antecipado
          </Button>
          <div style={{ display: 'flex', gap: 10 }}>
            <Button dark={dark} full variant="secondary">Reagendar</Button>
            <Button dark={dark} full variant="secondary">Cancelar</Button>
          </div>
        </div>
        <div style={{ height: 20 }} />
      </div>
    </Screen>
  );
}

window.ExamsListScreen = ExamsListScreen;
window.ExamDetailScreen = ExamDetailScreen;