// Resultado — Result card after triage

window.ResultadoScreen = function ResultadoScreen({ T, onNavigate, probs, gestante }) {
  const visible = (probs || []).filter(p => p.prob > 0.03);
  const top = visible[0];
  if (!top) {
    return (
      <div style={{ padding: 30, color: T.inkSoft }}>
        Nenhum resultado disponível. Refaça a triagem.
      </div>
    );
  }
  const compat =
    top.prob > 0.5 ? 'Compatibilidade alta' :
    top.prob > 0.25 ? 'Compatibilidade moderada' :
    'Compatibilidade baixa';
  return (
    <div style={{ padding: '0 20px 120px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ paddingTop: 12 }}>
        <button onClick={() => onNavigate('home')} style={{
          all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 13, color: T.inkSoft, marginBottom: 16,
        }}>
          <Icon name="chevron" size={14} stroke={2} color={T.inkSoft} /> Início
        </button>
        <SectionLabel>Relatório pré‑clínico</SectionLabel>
        <h1 style={{
          fontFamily: 'Georgia, serif', fontSize: 30, lineHeight: 1.05,
          margin: '8px 0 0', color: T.ink, fontWeight: 500, letterSpacing: -0.5,
        }}>
          Achados<br/><span style={{ fontStyle: 'italic', color: T.forest }}>compatíveis.</span>
        </h1>
      </div>

      {/* Top result card — dark */}
      <div style={{
        background: T.ink, color: '#fff', borderRadius: 24, padding: 20,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: -60, right: -60, width: 220, height: 220, borderRadius: '50%',
          background: `radial-gradient(circle, ${top.color}55 0%, ${top.color}00 65%)`,
        }}/>
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <Pill color="#fff" bg="rgba(255,255,255,0.12)">{top.kind}</Pill>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 11, opacity: 0.6, textTransform: 'uppercase', letterSpacing: 1 }}>{compat}</div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 42, fontWeight: 500, lineHeight: 1, color: top.color, marginTop: 4 }}>
              {Math.round(top.prob * 100)}<span style={{ fontSize: 20, opacity: 0.6 }}>%</span>
            </div>
          </div>
        </div>
        <div style={{ position: 'relative', marginTop: 18 }}>
          <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: 13.5, opacity: 0.55 }}>
            {top.name}
          </div>
          <div style={{ fontFamily: 'Georgia, serif', fontSize: 26, lineHeight: 1.1, letterSpacing: -0.3, marginTop: 2 }}>
            {top.popular}
          </div>
        </div>
        <div style={{ position: 'relative', marginTop: 18 }}>
          <ProbBar value={top.prob} color={top.color} height={8} bg="rgba(255,255,255,0.1)"/>
        </div>
        <div style={{ position: 'relative', marginTop: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
          paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
          <div>
            <div style={{ fontSize: 10.5, opacity: 0.55, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 4 }}>Exame sugerido</div>
            <div style={{ fontSize: 13, lineHeight: 1.3 }}>{top.exam}</div>
          </div>
          <div>
            <div style={{ fontSize: 10.5, opacity: 0.55, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 4 }}>Transmissão</div>
            <div style={{ fontSize: 13, lineHeight: 1.3 }}>{top.transmission}</div>
          </div>
        </div>
        {gestante && top.gestanteAlert && (
          <div style={{ position: 'relative', marginTop: 14, padding: '10px 12px', background: 'rgba(116,98,155,0.25)', borderRadius: 12,
            display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="pregnant" size={16} color="#f3d1da" stroke={1.8}/>
            <div style={{ fontSize: 12, color: '#f3d1da' }}>Risco teratogênico — discutir com obstetra antes de qualquer fármaco.</div>
          </div>
        )}
      </div>

      {/* Disclaimer */}
      <div style={{
        background: '#fff', borderRadius: 18, padding: '14px 16px',
        border: `1px solid ${T.hair}`,
        display: 'flex', gap: 12, alignItems: 'flex-start',
      }}>
        <Icon name="info" size={20} color={T.water} stroke={1.8}/>
        <div style={{ fontSize: 12.5, color: T.inkSoft, lineHeight: 1.45 }}>
          Esta análise <strong style={{ color: T.ink }}>não é diagnóstico.</strong> Use o relatório para guiar a consulta com seu médico ou agente comunitário de saúde.
        </div>
      </div>

      {/* Other candidates */}
      <div>
        <SectionLabel style={{ marginBottom: 10, padding: '0 4px' }}>Outros candidatos compatíveis</SectionLabel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {visible.slice(1, 5).map((p, i) => (
            <button key={p.id} onClick={() => onNavigate('parasite', p.id)} style={{
              all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
              background: '#fff', borderRadius: 16, padding: '12px 14px',
              border: `1px solid ${T.hair}`,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8, background: `${p.color}18`,
                fontFamily: 'ui-monospace, monospace', fontSize: 11, color: p.color, fontWeight: 600,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{i + 2}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, fontWeight: 500, color: T.ink }}>{p.popular}</div>
                <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: 11.5, color: T.inkSoft }}>{p.name}</div>
              </div>
              <div style={{ minWidth: 90 }}>
                <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 13, color: p.color, fontWeight: 600, textAlign: 'right', marginBottom: 6 }}>
                  {Math.round(p.prob * 100)}%
                </div>
                <ProbBar value={p.prob} color={p.color} height={4}/>
              </div>
              <Icon name="chevron" size={14} color={T.inkMuted}/>
            </button>
          ))}
        </div>
      </div>

      {/* Actions */}
      <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
        <button onClick={() => alert('Abriria visão de impressão.')} style={{
          all: 'unset', cursor: 'pointer', flex: 1,
          padding: '14px 18px', borderRadius: 99,
          background: '#fff', border: `1px solid ${T.hair}`,
          color: T.ink, fontSize: 14, fontWeight: 600, textAlign: 'center',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <Icon name="print" size={16} stroke={1.8}/> Relatório
        </button>
        <button onClick={() => onNavigate('parasite', top.id)} style={{
          all: 'unset', cursor: 'pointer', flex: 1.2,
          padding: '14px 18px', borderRadius: 99,
          background: T.forestDeep, color: '#fff',
          fontSize: 14, fontWeight: 600, textAlign: 'center',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          Ver ficha {top.popular}
          <Icon name="arrow" size={14} color="#fff" stroke={2.2}/>
        </button>
      </div>
    </div>
  );
};