// Home screen — saudação, próximo exame com check-in, atalhos, resultados novos

function HomeScreen({ dark, go, layout = 'classic' }) {
  const t = useT(dark);
  const d = LUMEN_DATA;
  const next = d.upcoming[0];

  // Header com saudação
  const header = (
    <div style={{ paddingTop: 66, paddingLeft: 20, paddingRight: 20, paddingBottom: 22 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
        <div>
          <div style={{ fontSize: 14, color: t.textMuted, fontWeight: 500, letterSpacing: 0.1 }}>
            Quinta, 22 de abril
          </div>
          <h1 style={{
            margin: '4px 0 0', fontFamily: LUMEN_FONTS.sans, fontWeight: 600,
            fontSize: 26, lineHeight: 1.1, color: t.text, letterSpacing: -0.6,
            whiteSpace: 'nowrap',
          }}>
            Olá, {d.user.firstName}
          </h1>
        </div>
        <button onClick={() => go('notifications')} style={{
          width: 44, height: 44, borderRadius: 99, border: 'none', cursor: 'pointer',
          background: t.surface, position: 'relative', color: t.text,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 1px 2px ${t.border}`,
        }}>
          <Icon name="bell" size={20} />
          <span style={{
            position: 'absolute', top: 9, right: 10,
            width: 8, height: 8, borderRadius: 99, background: t.accent,
            border: `1.5px solid ${t.surface}`,
          }} />
        </button>
      </div>
    </div>
  );

  // Hero card — próximo exame
  const heroCard = (
    <Card dark={dark} tone="dark" padding={0} style={{ overflow: 'hidden' }}>
      <div style={{ padding: 20, paddingBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <span style={{
            fontSize: 11, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase',
            color: t.accent, background: 'rgba(124,92,211,0.15)',
            padding: '4px 10px', borderRadius: 99,
          }}>Próximo exame · {next.dayLabel}</span>
          <Icon name="sparkle" size={16} color={t.accent} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
          <div style={{
            width: 48, height: 48, borderRadius: 14, flexShrink: 0,
            background: 'rgba(124,92,211,0.2)', color: t.accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name={next.icon} size={26} strokeWidth={1.6} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: LUMEN_FONTS.sans, fontSize: 19, lineHeight: 1.2,
              color: t.queueText, fontWeight: 600, letterSpacing: -0.4,
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>{next.type}</div>
            <div style={{ fontSize: 13, color: 'rgba(236,232,245,0.6)', marginTop: 3,
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {next.subtype}
            </div>
          </div>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
          gap: 0, borderTop: '1px solid rgba(236,232,245,0.08)',
          paddingTop: 14,
        }}>
          {[
            { label: 'Horário', value: next.time },
            { label: 'Duração', value: next.duration },
            { label: 'Unidade', value: next.unit.replace('Lumen ', '') },
          ].map((i, idx) => (
            <div key={idx} style={{
              paddingLeft: idx === 0 ? 0 : 12,
              borderLeft: idx === 0 ? 'none' : '1px solid rgba(236,232,245,0.08)',
            }}>
              <div style={{ fontSize: 10.5, color: 'rgba(236,232,245,0.45)', textTransform: 'uppercase', letterSpacing: 0.8, fontWeight: 600 }}>{i.label}</div>
              <div style={{ fontSize: 16, color: t.queueText, fontWeight: 500, marginTop: 3, fontFamily: LUMEN_FONTS.serif, letterSpacing: -0.2 }}>{i.value}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: 12, borderTop: '1px solid rgba(236,232,245,0.08)' }}>
        <button onClick={() => go('checkin')} style={{
          width: '100%', height: 48, borderRadius: 99, border: 'none',
          background: t.accent, color: '#FFF4E6',
          fontFamily: LUMEN_FONTS.sans, fontWeight: 500, fontSize: 15,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          cursor: 'pointer',
        }}>
          <Icon name="scan" size={18} /> Fazer check-in agora
        </button>
        <div style={{ textAlign: 'center', fontSize: 11.5, color: 'rgba(236,232,245,0.5)', marginTop: 8, paddingBottom: 2 }}>
          Check-in antecipado disponível até 1h antes
        </div>
      </div>
    </Card>
  );

  // Atalhos
  const quickActions = [
    { id: 'schedule', icon: 'plus', label: 'Agendar' },
    { id: 'results', icon: 'doc', label: 'Resultados' },
    { id: 'exams', icon: 'calendar', label: 'Próximos' },
    { id: 'history', icon: 'clock', label: 'Histórico' },
  ];
  const shortcuts = (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10,
    }}>
      {quickActions.map(q => (
        <button key={q.id} onClick={() => go(q.id)} style={{
          background: t.surface, border: `1px solid ${t.border}`,
          borderRadius: 18, padding: '14px 8px', cursor: 'pointer',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
          color: t.text, fontFamily: LUMEN_FONTS.sans,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 12, background: t.accentBg, color: t.accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name={q.icon} size={18} strokeWidth={1.9} />
          </div>
          <span style={{ fontSize: 11.5, fontWeight: 500 }}>{q.label}</span>
        </button>
      ))}
    </div>
  );

  // Resultados novos
  const newResults = d.results.filter(r => r.status === 'new');
  const resultPreview = newResults.length > 0 && (
    <Card dark={dark} onClick={() => go('result-detail', newResults[0].id)} style={{
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <ExamBadge icon={newResults[0].icon} dark={dark} tone="sage" />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
          <span style={{
            fontSize: 10.5, fontWeight: 700, letterSpacing: 0.6,
            color: t.sage, textTransform: 'uppercase',
          }}>Novo</span>
          <span style={{ fontSize: 13, color: t.textMuted }}>· {newResults[0].date}</span>
        </div>
        <div style={{ fontSize: 16, fontWeight: 500, color: t.text, letterSpacing: -0.2 }}>
          {newResults[0].type}
        </div>
        <div style={{ fontSize: 13, color: t.textMuted, marginTop: 1 }}>{newResults[0].summary}</div>
      </div>
      <Icon name="chevron" size={18} color={t.textSubtle} />
    </Card>
  );

  // Dica / health nudge
  const healthCard = (
    <Card dark={dark} tone="sage" padding={16}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'start' }}>
        <div style={{
          width: 36, height: 36, borderRadius: 12, flexShrink: 0,
          background: 'rgba(92,122,92,0.18)', color: t.sage,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="heart" size={18} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: dark ? t.text : '#3D2D5A', marginBottom: 2 }}>
            Seu check-up anual vence em 3 meses
          </div>
          <div style={{ fontSize: 12.5, color: dark ? t.textMuted : '#5E4D7D', lineHeight: 1.4 }}>
            Baseado no seu histórico. Posso montar um pacote?
          </div>
        </div>
      </div>
    </Card>
  );

  // LAYOUT CLASSIC
  if (layout === 'classic') {
    return (
      <div style={{ height: '100%', overflowY: 'auto' }}>
        {header}
        <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {heroCard}
          {shortcuts}
          {newResults.length > 0 && (
            <>
              <SectionLabel dark={dark} action={{ label: 'Ver todos', onClick: () => go('results') }}>
                Resultados
              </SectionLabel>
              {resultPreview}
            </>
          )}
          <SectionLabel dark={dark}>Sugestão</SectionLabel>
          {healthCard}
          <div style={{ height: 20 }} />
        </div>
      </div>
    );
  }

  // LAYOUT EDITORIAL — more minimal, typography-forward
  if (layout === 'editorial') {
    return (
      <div style={{ height: '100%', overflowY: 'auto' }}>
        <div style={{ paddingTop: 72, paddingLeft: 24, paddingRight: 24, paddingBottom: 8 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
            <div>
              <div style={{ fontSize: 12, color: t.textMuted, letterSpacing: 1.5, textTransform: 'uppercase', fontWeight: 600 }}>
                Qui · 22 abr
              </div>
              <h1 style={{
                margin: '18px 0 0', fontFamily: LUMEN_FONTS.sans, fontWeight: 600,
                fontSize: 40, lineHeight: 1, color: t.text, letterSpacing: -1.2,
              }}>
                Bom dia,<br/><span style={{ color: t.accent }}>{d.user.firstName}.</span>
              </h1>
            </div>
            <button onClick={() => go('notifications')} style={{
              width: 44, height: 44, borderRadius: 99, border: 'none', cursor: 'pointer',
              background: 'transparent', position: 'relative', color: t.text,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="bell" size={22} />
              <span style={{ position: 'absolute', top: 11, right: 11, width: 8, height: 8, borderRadius: 99, background: t.accent }} />
            </button>
          </div>
        </div>

        {/* Ribbon com próximo exame em tom diferente */}
        <div style={{ padding: '24px 24px 0' }}>
          <div style={{
            padding: '14px 0', borderTop: `1px solid ${t.borderStrong}`,
            borderBottom: `1px solid ${t.borderStrong}`,
          }}>
            <div style={{ fontSize: 11, color: t.textMuted, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>Próximo</div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 4 }}>
              <div style={{ fontFamily: LUMEN_FONTS.sans, fontSize: 20, fontWeight: 600, color: t.text, letterSpacing: -0.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, marginRight: 10 }}>{next.type}</div>
              <div style={{ fontFamily: LUMEN_FONTS.sans, fontSize: 20, fontWeight: 600, color: t.accent }}>{next.time}</div>
            </div>
            <div style={{ fontSize: 13, color: t.textMuted }}>{next.dayLabel} · {next.unit}</div>
            <button onClick={() => go('checkin')} style={{
              marginTop: 14, width: '100%', height: 50, borderRadius: 99, border: 'none',
              background: t.text, color: t.bg, fontWeight: 500, fontSize: 15,
              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              fontFamily: LUMEN_FONTS.sans,
            }}>
              <Icon name="scan" size={18} /> Fazer check-in
            </button>
          </div>
        </div>

        <div style={{ padding: '20px 20px 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {shortcuts}
          {resultPreview}
          {healthCard}
          <div style={{ height: 20 }} />
        </div>
      </div>
    );
  }
}

window.HomeScreen = HomeScreen;