(() => {
const DS = window.LeonardoSousaBJJDesignSystem_2cc6b8;
const { Card, Button, Input, Select, Checkbox, Badge, Icon, Alert } = DS;
const A = window.LSAdmin;
A.health = A.health || {
  2: { sangue: 'O+', plano: 'Unimed', cond: ['Asma'], lesoes: 'Entorse de tornozelo esquerdo (2024), recuperado.', cirurgias: '', meds: 'Bombinha de salbutamol quando necessário', alergias: 'Dipirona', liberacao: true, obs: 'Evitar treinos em dias de crise de asma.', emNome: 'Marina Costa', emRel: 'Esposa', emTel: '(11) 98123-4567', updated: '12 ago 2026' },
};
const CONDS = ['Hipertensão', 'Diabetes', 'Asma', 'Problema cardíaco', 'Epilepsia', 'Hérnia de disco', 'Gestante'];
const EMPTY = { sangue: '', plano: '', cond: [], lesoes: '', cirurgias: '', meds: '', alergias: '', liberacao: false, obs: '', emNome: '', emRel: '', emTel: '', updated: '' };

function HealthTab({ s, toast }) {
  const saved = A.health[s.id];
  const [f, setF] = React.useState(saved || EMPTY);
  const [edit, setEdit] = React.useState(!saved);
  const set = (k) => (v) => setF((x) => ({ ...x, [k]: v && v.target ? v.target.value : v }));
  const tog = (c) => setF((x) => ({ ...x, cond: x.cond.includes(c) ? x.cond.filter((y) => y !== c) : [...x.cond, c] }));
  const save = () => { const v = { ...f, updated: '23 set 2026' }; A.health[s.id] = v; setF(v); setEdit(false); toast('Anamnese salva'); };
  const Row = ({ l, v }) => <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}><span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{l}</span><span style={{ fontSize: 14, color: v ? 'var(--text-strong)' : 'var(--text-subtle)', fontWeight: 500 }}>{v || 'Não informado'}</span></div>;
  const g2 = { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 };
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.6fr) minmax(0, 1fr)', gap: 16, alignItems: 'start' }}>
      <Card title="Anamnese" subtitle={f.updated ? `Atualizada em ${f.updated}` : 'Ainda não preenchida'} action={edit ? null : <Button size="sm" variant="secondary" iconLeft="pencil" onClick={() => setEdit(true)}>Editar</Button>}>
        {edit ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={g2}>
              <Select label="Tipo sanguíneo" placeholder="Selecione" options={['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-']} value={f.sangue} onChange={set('sangue')} />
              <Input label="Plano de saúde" value={f.plano} onChange={set('plano')} placeholder="Opcional" />
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-strong)', marginBottom: 8 }}>Condições de saúde</div>
              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>{CONDS.map((c) => <Checkbox key={c} checked={f.cond.includes(c)} onChange={() => tog(c)} label={c} />)}</div>
            </div>
            <Input label="Lesões (atuais ou anteriores)" multiline rows={2} value={f.lesoes} onChange={set('lesoes')} />
            <div style={g2}>
              <Input label="Cirurgias" multiline rows={2} value={f.cirurgias} onChange={set('cirurgias')} />
              <Input label="Medicamentos em uso" multiline rows={2} value={f.meds} onChange={set('meds')} />
            </div>
            <Input label="Alergias" value={f.alergias} onChange={set('alergias')} />
            <Input label="Observações para o professor" multiline rows={2} value={f.obs} onChange={set('obs')} />
            <Checkbox checked={f.liberacao} onChange={set('liberacao')} label="Possui liberação médica para atividade física" />
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {f.cond.length || f.alergias ? (
              <Alert tone="warning" title="Atenção do professor">{[f.cond.join(', '), f.alergias ? `Alergia: ${f.alergias}` : ''].filter(Boolean).join(' · ')}</Alert>
            ) : null}
            <div style={g2}><Row l="Tipo sanguíneo" v={f.sangue} /><Row l="Plano de saúde" v={f.plano} /></div>
            <Row l="Lesões" v={f.lesoes} />
            <div style={g2}><Row l="Cirurgias" v={f.cirurgias} /><Row l="Medicamentos" v={f.meds} /></div>
            <Row l="Observações" v={f.obs} />
            <div>{f.liberacao ? <Badge tone="success" icon="shield-check">Liberação médica entregue</Badge> : <Badge tone="warning" icon="file-warning">Liberação médica pendente</Badge>}</div>
          </div>
        )}
      </Card>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Card title="Contato de emergência" variant={edit ? 'default' : 'dark'}>
          {edit ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <Input label="Nome" required value={f.emNome} onChange={set('emNome')} />
              <Select label="Parentesco" placeholder="Selecione" options={['Mãe', 'Pai', 'Esposa', 'Marido', 'Irmão(ã)', 'Filho(a)', 'Amigo(a)', 'Outro']} value={f.emRel} onChange={set('emRel')} />
              <Input label="Telefone" iconLeft="phone" required value={f.emTel} onChange={set('emTel')} placeholder="(11) 90000-0000" />
            </div>
          ) : f.emNome ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div><div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: '#fff' }}>{f.emNome}</div><div style={{ fontSize: 13, color: 'var(--text-inverse-muted)' }}>{f.emRel} · {f.emTel}</div></div>
              <div style={{ display: 'flex', gap: 8 }}>
                <a href={`tel:${f.emTel.replace(/\D/g, '')}`} style={{ flex: 1, textDecoration: 'none' }}><Button fullWidth iconLeft="phone">Ligar</Button></a>
                <a href={waLink(f.emTel)} target="_blank" rel="noopener" style={{ flex: 1, textDecoration: 'none' }}><Button fullWidth variant="inverse" iconLeft="message-circle">WhatsApp</Button></a>
              </div>
            </div>
          ) : <div style={{ fontSize: 13, color: 'var(--text-inverse-muted)' }}>Nenhum contato cadastrado.</div>}
        </Card>
        {edit ? (
          <div style={{ display: 'flex', gap: 8 }}>
            {saved ? <Button variant="secondary" onClick={() => { setF(saved); setEdit(false); }} style={{ flex: 1 }}>Cancelar</Button> : null}
            <Button iconLeft="check" onClick={save} disabled={!f.emNome || !f.emTel} style={{ flex: 2 }}>Salvar ficha</Button>
          </div>
        ) : null}
        <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', gap: 6 }}><Icon name="lock" size={14} />Dados de saúde visíveis apenas para professores e administração.</div>
      </div>
    </div>
  );
}

Object.assign(window, { HealthTab });
})();