/* global React */
const { useState: useStateImpPDF } = React;

// =====================================================================
// ImportPDF — sobe PDF/foto/screenshot, manda pra /api/extrair-escala
// (Claude Vision), recebe JSON Import v1 estruturado, devolve via prop
// pra ImportView popular sua lista de revisão.
// =====================================================================

function ImportPDF({ hospitais, doctor, onJsonExtraido }) {
  const [arquivo, setArquivo] = useStateImpPDF(null); // { name, type, dataUrl } ou null — 1 por vez
  const [doctorEdit, setDoctorEdit] = useStateImpPDF(doctor || 'Mariana');
  const [hospitalSel, setHospitalSel] = useStateImpPDF((hospitais && hospitais[0]?.id) || '');
  const [carregando, setCarregando] = useStateImpPDF(false);
  const [erro, setErro] = useStateImpPDF(null);
  const [resultado, setResultado] = useStateImpPDF(null); // { import, custo_aprox_brl, tokens }

  const onPickFile = async (fileList) => {
    setErro(null);
    const f = (fileList && fileList[0]) || null;
    if (!f) { setArquivo(null); return; }
    const dataUrl = await new Promise((resolve, reject) => {
      const r = new FileReader();
      r.onload = () => resolve(r.result);
      r.onerror = reject;
      r.readAsDataURL(f);
    });
    setArquivo({ name: f.name, type: f.type, size: f.size, dataUrl });
  };

  const removerArquivo = () => setArquivo(null);

  const processar = async () => {
    if (!arquivo) { setErro('Sobe um arquivo.'); return; }
    setCarregando(true); setErro(null); setResultado(null);

    const pdf = arquivo.type === 'application/pdf' ? arquivo.dataUrl : undefined;
    const imagens = arquivo.type.startsWith('image/') ? [arquivo.dataUrl] : undefined;
    const sourceLabel = arquivo.name;
    const hospitalSelecionado = (hospitais || []).find(h => String(h.id) === String(hospitalSel));

    try {
      const resp = await fetch('/api/extrair-escala', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          doctor: doctorEdit,
          hospitaisCadastrados: (hospitais || []).map(h => ({
            abrev: h.abrev, nome: h.nome, turnos: h.turnos || {},
          })),
          hospitalEsperado: hospitalSelecionado ? {
            abrev: hospitalSelecionado.abrev,
            nome: hospitalSelecionado.nome,
            turnos: hospitalSelecionado.turnos || {},
          } : null,
          pdf,
          imagens,
          sourceLabel,
        }),
      });
      const data = await resp.json();
      if (!data.ok) {
        setErro(data.erro || 'Falhou em extrair');
        return;
      }
      setResultado(data);
      // Repassa pro pai (ImportView) popular a lista de revisão
      if (onJsonExtraido) onJsonExtraido(JSON.stringify(data.import, null, 2));
    } catch (e) {
      setErro('Erro de rede: ' + e.message);
    } finally {
      setCarregando(false);
    }
  };

  return (
    <div style={{
      padding: 'var(--s-5)',
      background: 'var(--colo-blue-50, #EAF2F9)',
      border: '1px solid var(--colo-blue-tag, #3F6E9C)33',
      borderRadius: 'var(--r-lg)',
      display: 'grid', gap: 'var(--s-4)',
    }}>
      <div>
        <div style={{display:'flex', alignItems:'center', gap: 8, marginBottom: 4}}>
          <span style={{
            display:'inline-block', padding: '2px 8px',
            background: 'var(--colo-blue-tag, #3F6E9C)', color: 'var(--bg)',
            borderRadius: 'var(--r-pill)', fontSize: 10, fontWeight: 700,
            textTransform:'uppercase', letterSpacing: '0.04em',
          }}>IA</span>
          <h3 className="h3" style={{margin: 0, fontSize: 18}}>Importar de PDF, foto ou screenshot</h3>
        </div>
        <p className="small" style={{margin: 0, fontSize: 12, color:'var(--ink-2)'}}>
          Sobe a escala (PDF da coordenação, foto da tabela, print do WhatsApp) e
          a IA extrai os plantões. Você revisa antes de salvar.
        </p>
      </div>

      <div className="form-2col" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--s-3)'}}>
        <label style={{display:'block'}}>
          <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Médica destino</div>
          <input className="input"
            value={doctorEdit}
            onChange={e => setDoctorEdit(e.target.value)}
            placeholder="Mariana"/>
        </label>
        <label style={{display:'block'}}>
          <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Hospital da escala</div>
          <select className="input"
            value={hospitalSel}
            onChange={e => setHospitalSel(e.target.value)}
            disabled={!hospitais || hospitais.length === 0}>
            <option value="">— escolha o hospital —</option>
            {(hospitais || []).map(h => (
              <option key={h.id} value={h.id}>{h.abrev} · {h.nome}</option>
            ))}
          </select>
        </label>
      </div>

      <div>
        <div className="eyebrow" style={{fontSize: 11, marginBottom: 4}}>Arquivo (1 por vez)</div>
        <input type="file"
          accept="application/pdf,image/*"
          onChange={e => onPickFile(e.target.files)}
          style={{display:'block', marginBottom: 8}}/>
        {arquivo && (
          <div style={{display:'grid', gap: 4, marginTop: 8}}>
            <div style={{
              display:'flex', alignItems:'center', gap: 8,
              padding: '6px 12px',
              background: 'var(--bg)', border:'1px solid var(--line)',
              borderRadius: 'var(--r-md)', fontSize: 12,
            }}>
              <span style={{flex: 1}}>
                <strong>{arquivo.name}</strong>{' '}
                <span className="small" style={{color:'var(--ink-3)'}}>
                  {(arquivo.size/1024).toFixed(0)}KB · {arquivo.type}
                </span>
              </span>
              <button type="button"
                onClick={removerArquivo}
                style={{
                  border:'none', background:'none', cursor:'pointer',
                  color:'var(--err)', fontSize: 14,
                }}>×</button>
            </div>
          </div>
        )}
      </div>

      <button type="button" className="btn"
        onClick={processar}
        disabled={carregando || !arquivo || !doctorEdit || !hospitalSel}
        title={!hospitalSel ? 'Escolha o hospital primeiro' : ''}
        style={{
          background: (carregando || !arquivo || !doctorEdit || !hospitalSel) ? 'var(--bg-alt)' : 'var(--colo-blue-tag, #3F6E9C)',
          color: (carregando || !arquivo || !doctorEdit || !hospitalSel) ? 'var(--ink-3)' : 'var(--bg)',
          padding: '10px 20px', fontSize: 13, fontWeight: 700,
          justifyContent:'center',
        }}>
        {carregando ? 'Processando com IA…' : '✨ Extrair escala'}
      </button>

      {erro && (
        <div style={{
          padding: '8px 12px', fontSize: 12,
          background: 'var(--err-bg, #FBE9E5)', color:'var(--err, #B25A4D)',
          borderRadius: 'var(--r-md)',
        }}>{erro}</div>
      )}

      {resultado?.ok && (
        <div style={{
          padding: '10px 14px', fontSize: 12,
          background: 'var(--ok-bg, #ECF6E7)', color:'var(--ok, #5A6E50)',
          borderRadius: 'var(--r-md)',
          display:'grid', gap: 4,
        }}>
          <strong>
            ✓ Extraídos: {(resultado.import?.blocks || []).length} plantões
            {resultado.import?.recurrences?.length ? ` + ${resultado.import.recurrences.length} recorrências` : ''}
          </strong>
          {resultado.import?.notes && (
            <div className="small" style={{fontSize: 11, fontStyle:'italic'}}>
              IA observou: {resultado.import.notes}
            </div>
          )}
          <div className="small" style={{fontSize: 10, color:'var(--ink-3)'}}>
            Custo: ~R${resultado.custo_aprox_brl?.toFixed(2) || '?'} ·
            {' '}Revise e confirme abaixo ↓
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ImportPDF });