// Biblioteca — Catálogo + ficha de parasita

window.BibliotecaScreen = function BibliotecaScreen({ T, onNavigate }) {
  const [filter, setFilter] = React.useState('all');
  const [query, setQuery] = React.useState('');
  const groups = [
    { id: 'all', label: 'Todos' },
    { id: 'Helminto', label: 'Helmintos' },
    { id: 'Protozoário', label: 'Protozoários' },
  ];
  const filtered = PARASITES.filter(p => {
    const matchKind = filter === 'all' || p.kind === filter;
    const q = query.trim().toLowerCase();
    const matchQ = !q || p.popular.toLowerCase().includes(q) || p.name.toLowerCase().includes(q);
    return matchKind && matchQ;
  });

  return (
    <div style={{ padding: '0 20px 120px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ paddingTop: 14 }}>
        <SectionLabel>Biblioteca clínica</SectionLabel>
        <h1 style={{
          fontFamily: 'Georgia, serif', fontSize: 30, lineHeight: 1.05,
          margin: '8px 0 0', color: T.ink, fontWeight: 500, letterSpacing: -0.5,
        }}>Catálogo de<br/><span style={{ fontStyle: 'italic', color: T.forest }}>parasitas humanos.</span></h1>
        <p style={{ margin: '8px 0 0', fontSize: 13.5, color: T.inkSoft, lineHeight: 1.45 }}>
          {PARASITES.length} fichas com transmissão, sinais de alerta e exames.
        </p>
      </div>

      {/* Search */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        background: '#fff', padding: '12px 14px', borderRadius: 16,
        border: `1px solid ${T.hair}`,
      }}>
        <Icon name="search" size={18} color={T.inkSoft} stroke={1.8}/>
        <input
          value={query}
          onChange={e => setQuery(e.target.value)}
          placeholder="Buscar nome popular ou científico…"
          style={{
            flex: 1, border: 'none', outline: 'none', background: 'transparent',
            fontFamily: 'system-ui, sans-serif', fontSize: 14, color: T.ink,
          }}
        />
      </div>

      {/* Filter chips */}
      <div style={{ display: 'flex', gap: 8 }}>
        {groups.map(g => (
          <button key={g.id} onClick={() => setFilter(g.id)} style={{
            all: 'unset', cursor: 'pointer',
            padding: '8px 14px', borderRadius: 99,
            background: filter === g.id ? T.ink : '#fff',
            color: filter === g.id ? '#fff' : T.inkSoft,
            border: `1px solid ${filter === g.id ? T.ink : T.hair}`,
            fontSize: 13, fontWeight: 500,
          }}>{g.label}</button>
        ))}
      </div>

      {/* List */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {filtered.map(p => (
          <button key={p.id} onClick={() => onNavigate('parasite', p.id)} style={{
            all: 'unset', cursor: 'pointer',
            background: '#fff', borderRadius: 20, padding: 14,
            border: `1px solid ${T.hair}`,
            display: 'flex', gap: 14, alignItems: 'center',
          }}>
            {/* Stripe placeholder */}
            <div style={{
              width: 60, height: 76, borderRadius: 14, flexShrink: 0,
              background: `${p.color}12`, position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', inset: 0, opacity: 0.35,
                backgroundImage: `repeating-linear-gradient(45deg, ${p.color} 0 1.5px, transparent 1.5px 7px)`,
              }}/>
              <div style={{
                position: 'absolute', bottom: 6, left: 6,
                width: 22, height: 22, borderRadius: 6, background: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: p.color, fontFamily: 'ui-monospace, monospace', fontSize: 11, fontWeight: 700,
              }}>{p.kind[0]}</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
                <Pill color={p.color} bg={`${p.color}14`}>{p.kind}</Pill>
                {p.gestanteAlert && <Pill color="#74629b" bg="rgba(116,98,155,0.12)" style={{ fontSize: 9.5 }}>Gestante</Pill>}
              </div>
              <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: 12.5, color: T.inkSoft }}>
                {p.name}
              </div>
              <div style={{ fontSize: 16, fontWeight: 500, color: T.ink, marginTop: 1 }}>
                {p.popular}
              </div>
              <div style={{ fontSize: 12, color: T.inkSoft, marginTop: 4, lineHeight: 1.3,
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                {p.transmission}
              </div>
            </div>
            <Icon name="chevron" size={16} color={T.inkMuted}/>
          </button>
        ))}
      </div>
    </div>
  );
};

window.ParasiteDetailScreen = function ParasiteDetailScreen({ T, onNavigate, parasiteId, gestante }) {
  const p = PARASITES.find(x => x.id === parasiteId) || PARASITES[0];
  return (
    <div style={{ padding: '0 0 120px' }}>
      {/* Hero with color */}
      <div style={{
        background: p.color, color: '#fff', padding: '14px 20px 24px',
        position: 'relative', overflow: 'hidden',
        margin: '0 0 14px',
      }}>
        <div style={{
          position: 'absolute', top: -80, right: -80, width: 280, height: 280, borderRadius: '50%',
          background: `radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 65%)`,
        }}/>
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.18,
          backgroundImage: `repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 10px)`,
        }}/>
        <button onClick={() => onNavigate('biblioteca')} style={{
          all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4,
          fontSize: 13, color: 'rgba(255,255,255,0.85)', marginBottom: 16, position: 'relative',
        }}>
          <Icon name="chevron" size={14} stroke={2} color="#fff"/> Catálogo
        </button>
        <div style={{ position: 'relative' }}>
          <Pill color="#fff" bg="rgba(255,255,255,0.18)">{p.kind}</Pill>
          <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: 14, opacity: 0.7, marginTop: 14 }}>
            {p.name}
          </div>
          <div style={{ fontFamily: 'Georgia, serif', fontSize: 34, lineHeight: 1.05, letterSpacing: -0.6, fontWeight: 500, marginTop: 2 }}>
            {p.popular}
          </div>
          <div style={{ marginTop: 16, display: 'flex', gap: 16 }}>
            <div>
              <div style={{ fontSize: 10.5, opacity: 0.65, textTransform: 'uppercase', letterSpacing: 1 }}>Prevalência</div>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 20, fontWeight: 500, marginTop: 2 }}>{Math.round(p.prevalence * 100)}%</div>
            </div>
            <div style={{ width: 1, alignSelf: 'stretch', background: 'rgba(255,255,255,0.2)' }}/>
            <div>
              <div style={{ fontSize: 10.5, opacity: 0.65, textTransform: 'uppercase', letterSpacing: 1 }}>Sinais‑chave</div>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 20, fontWeight: 500, marginTop: 2 }}>{p.signals.length}</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {gestante && p.gestanteAlert && (
          <div style={{
            background: '#74629b', color: '#fff', padding: '14px 16px', borderRadius: 18,
            display: 'flex', alignItems: 'flex-start', gap: 10,
          }}>
            <Icon name="pregnant" size={20} color="#f3d1da" stroke={1.8}/>
            <div>
              <div style={{ fontWeight: 600, fontSize: 13.5 }}>Atenção: gestação</div>
              <div style={{ fontSize: 12.5, opacity: 0.85, lineHeight: 1.4, marginTop: 2 }}>
                Risco teratogênico documentado. Fármacos comuns são contraindicados — discuta com seu obstetra.
              </div>
            </div>
          </div>
        )}

        <DetailBlock T={T} label="Transmissão" icon="drop" color={T.water}>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5, color: T.ink }}>{p.transmission}</p>
        </DetailBlock>

        <DetailBlock T={T} label="Sinais de alerta" icon="alert" color={p.color}>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
            {p.signals.map(s => (
              <li key={s} style={{ display: 'flex', gap: 10, fontSize: 14, color: T.ink, lineHeight: 1.4 }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: p.color, marginTop: 8, flexShrink: 0 }}/>
                {s}
              </li>
            ))}
          </ul>
        </DetailBlock>

        <DetailBlock T={T} label="Exame recomendado" icon="flask" color={T.moss}>
          <div style={{
            background: T.paperWarm, padding: '10px 12px', borderRadius: 12,
            fontFamily: 'ui-monospace, monospace', fontSize: 13, color: T.ink,
          }}>{p.exam}</div>
        </DetailBlock>

        <DetailBlock T={T} label="Princípios ativos para discussão" icon="info" color={T.lavender}>
          <p style={{ margin: 0, fontSize: 12.5, color: T.inkSoft, lineHeight: 1.5 }}>
            Apenas princípios ativos — sem doses ou nomes comerciais. Esta tela orienta a conversa com seu médico, nunca substitui prescrição.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
            {['Albendazol', 'Metronidazol', 'Praziquantel', 'Nitazoxanida'].map(d => (
              <Pill key={d} color={T.lavender} bg="rgba(116,98,155,0.12)" style={{ textTransform: 'none', letterSpacing: 0, fontSize: 11.5, fontFamily: 'system-ui' }}>
                {d}
              </Pill>
            ))}
          </div>
        </DetailBlock>

        <button onClick={() => onNavigate('triagem')} style={{
          all: 'unset', cursor: 'pointer',
          padding: '14px 18px', borderRadius: 99, marginTop: 8,
          background: T.forestDeep, color: '#fff', textAlign: 'center',
          fontSize: 14, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          Iniciar triagem com este perfil <Icon name="arrow" size={14} color="#fff" stroke={2.2}/>
        </button>
      </div>
    </div>
  );
};

function DetailBlock({ T, label, icon, color, children }) {
  return (
    <div style={{ background: '#fff', borderRadius: 20, padding: 16, border: `1px solid ${T.hair}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8, background: `${color}14`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', color,
        }}>
          <Icon name={icon} size={16} color={color} stroke={1.8}/>
        </div>
        <SectionLabel color={T.inkSoft}>{label}</SectionLabel>
      </div>
      {children}
    </div>
  );
}