// Upload inteligente — modal com upload real para a API

const UploadModal = ({ onClose }) => {
  const D = window.PAC_DATA;
  const [stage, setStage] = React.useState('drop'); // drop -> uploading -> classify
  const [over, setOver] = React.useState(false);
  const [file, setFile] = React.useState(null);
  const [result, setResult] = React.useState(null);
  const [error, setError] = React.useState('');
  const [saving, setSaving] = React.useState(false);

  // Campos de metadados
  const [clientId, setClientId] = React.useState('');
  const [caseId, setCaseId] = React.useState('');
  const [category, setCategory] = React.useState('');

  const CATEGORIES = [
    { value: 'balanco_contabil', label: 'Balanço auditado / contábil' },
    { value: 'atos_societarios', label: 'Atos societários' },
    { value: 'contrato_minuta', label: 'Contrato / minuta' },
    { value: 'documento_fiscal', label: 'Documento fiscal' },
    { value: 'documento_trabalhista', label: 'Documento trabalhista' },
    { value: 'email_comunicacao', label: 'E-mail / comunicação' },
    { value: 'audio_transcricao', label: 'Áudio / transcrição' },
    { value: 'outros', label: 'Outros' },
  ];

  const handleFile = async (f) => {
    setFile(f);
    setStage('uploading');
    setError('');
    try {
      const uploadResult = await window.PACApi.documents.upload(f);
      setResult(uploadResult);
      setCategory(uploadResult.document.category || '');
      setClientId(uploadResult.document.client_id || '');
      setCaseId(uploadResult.document.case_id || '');
      setStage('classify');
    } catch (err) {
      setError(err.message || 'Erro no upload.');
      setStage('drop');
    }
  };

  const onDragOver = (e) => { e.preventDefault(); setOver(true); };
  const onDragLeave = () => setOver(false);
  const onDrop = (e) => {
    e.preventDefault(); setOver(false);
    const f = e.dataTransfer.files[0];
    if (f) handleFile(f);
  };

  const onFileInput = (e) => {
    const f = e.target.files[0];
    if (f) handleFile(f);
  };

  const onSave = async () => {
    if (!result) return;
    setSaving(true);
    try {
      await window.PACApi.documents.update(result.document.id, {
        category,
        client_id: clientId || undefined,
        case_id: caseId || undefined,
      });
      onClose();
    } catch (err) {
      setError(err.message || 'Erro ao salvar.');
    } finally {
      setSaving(false);
    }
  };

  const fmtSize = (bytes) => {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1048576) return `${(bytes / 1024).toFixed(0)} KB`;
    return `${(bytes / 1048576).toFixed(1)} MB`;
  };

  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div style={{ width: 32, height: 32, borderRadius: 4, background: 'var(--pac-navy)', color: '#fff', display: 'grid', placeItems: 'center' }}>
            <Icon name="upload" size={16} />
          </div>
          <div>
            <h2>Upload inteligente</h2>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>A IA classifica e vincula os arquivos automaticamente.</div>
          </div>
          <button className="x" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>

        <div className="modal-body">
          {/* Erro */}
          {error && (
            <div style={{ padding: '10px 14px', background: 'rgba(194,37,62,.08)', border: '1px solid rgba(194,37,62,.2)', borderRadius: 6, color: '#C2253E', fontSize: 12, marginBottom: 14 }}>
              {error}
            </div>
          )}

          {/* Estágio: drop */}
          {stage === 'drop' && (
            <>
              <label htmlFor="file-input" style={{ display: 'block', cursor: 'pointer' }}>
                <div
                  className={`drop ${over ? 'over' : ''}`}
                  onDragOver={onDragOver}
                  onDragLeave={onDragLeave}
                  onDrop={onDrop}
                >
                  <Icon name="upload" size={28} style={{ color: 'var(--pac-navy)' }} />
                  <div className="ttl">Arraste arquivos aqui ou clique para enviar</div>
                  <div className="sub">PDFs, DOCXs, áudios, imagens, e-mails (.eml), notas e prints</div>
                  <div className="types">
                    <span><Icon name="fileText" size={11} style={{ verticalAlign: 'middle' }} /> Documentos</span>
                    <span>·</span>
                    <span><Icon name="audio" size={11} style={{ verticalAlign: 'middle' }} /> Áudio</span>
                    <span>·</span>
                    <span><Icon name="image" size={11} style={{ verticalAlign: 'middle' }} /> Imagens</span>
                    <span>·</span>
                    <span><Icon name="mail" size={11} style={{ verticalAlign: 'middle' }} /> E-mails</span>
                  </div>
                </div>
              </label>
              <input id="file-input" type="file" style={{ display: 'none' }} onChange={onFileInput}
                accept=".pdf,.docx,.doc,.txt,.eml,.png,.jpg,.jpeg,.webp,.mp3,.mp4,.wav,.ogg" />

              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 20, fontSize: 12, color: 'var(--fg-muted)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <Icon name="lock" size={12} /> Criptografia ponta a ponta
                </div>
                <span>·</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <Icon name="sparkles" size={12} style={{ color: 'var(--pac-navy)' }} /> Classificação por IA automática
                </div>
              </div>
            </>
          )}

          {/* Estágio: uploading */}
          {stage === 'uploading' && (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, padding: '32px 0' }}>
              <div className="spinner" style={{ width: 32, height: 32, borderWidth: 3 }} />
              <div style={{ fontSize: 13, color: 'var(--pac-navy)', fontWeight: 600 }}>
                Enviando e analisando…
              </div>
              {file && (
                <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>
                  {file.name} · {fmtSize(file.size)}
                </div>
              )}
            </div>
          )}

          {/* Estágio: classify */}
          {stage === 'classify' && result && (
            <>
              {/* Pill do arquivo */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: '#fff', border: '1px solid var(--border)', borderRadius: 6 }}>
                <div style={{ width: 36, height: 36, background: 'rgba(13,13,107,.06)', borderRadius: 4, display: 'grid', placeItems: 'center' }}>
                  <Icon name="fileText" size={18} style={{ color: 'var(--pac-navy)' }} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, color: 'var(--pac-navy)', fontWeight: 600 }}>{result.document.filename}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{fmtSize(result.document.size)}</div>
                </div>
                <span className="chip soft">✓ Enviado</span>
              </div>

              {/* Sugestão da IA */}
              {result.suggestion && (
                <div className="ai-suggest" style={{ marginTop: 14 }}>
                  <Icon name="sparkles" size={14} style={{ color: 'var(--pac-navy)' }} />
                  <div style={{ flex: 1 }}>
                    <b style={{ color: 'var(--pac-navy)' }}>PAC.AI sugere:</b> {result.suggestion}
                  </div>
                  <span className="acc" onClick={() => {}}>Aceitar tudo</span>
                </div>
              )}

              {/* Resumo */}
              {result.summary && (
                <div style={{ marginTop: 10, padding: '10px 14px', background: 'rgba(13,13,107,.03)', borderRadius: 4, fontSize: 12, color: 'var(--pac-black)', lineHeight: 1.55 }}>
                  {result.summary}
                </div>
              )}

              {/* Campos de metadados */}
              <div className="field-grid" style={{ marginTop: 14 }}>
                <div className="field-w">
                  <label>Cliente</label>
                  <select value={clientId} onChange={(e) => setClientId(e.target.value)}>
                    <option value="">— Nenhum —</option>
                    {D.clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                  </select>
                </div>
                <div className="field-w">
                  <label>Caso</label>
                  <select value={caseId} onChange={(e) => setCaseId(e.target.value)}>
                    <option value="">— Nenhum —</option>
                    {D.cases
                      .filter(k => !clientId || k.clientId === clientId)
                      .map(k => <option key={k.id} value={k.id}>{k.number} · {k.title}</option>)}
                  </select>
                </div>
                <div className="field-w" style={{ gridColumn: '1 / -1' }}>
                  <label>Categoria</label>
                  <select value={category} onChange={(e) => setCategory(e.target.value)}>
                    {CATEGORIES.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
                  </select>
                </div>
              </div>
            </>
          )}
        </div>

        <div className="modal-foot">
          {stage === 'classify' && (
            <button className="btn ghost sm" onClick={() => { setStage('drop'); setResult(null); setFile(null); }}>
              <Icon name="chevronLeft" size={12} /> Novo arquivo
            </button>
          )}
          {stage === 'drop' && <span style={{ fontSize: 11, color: 'var(--fg-muted)' }}>Máx. 50 MB por arquivo.</span>}
          <div style={{ display: 'flex', gap: 8, marginLeft: 'auto' }}>
            <button className="btn ghost sm" onClick={onClose}>Cancelar</button>
            {stage === 'classify' && (
              <button className="btn sm" onClick={onSave} disabled={saving}>
                {saving ? <><span className="spinner" style={{ width: 12, height: 12, borderWidth: 2, marginRight: 6 }} />Salvando…</> : 'Salvar e classificar'}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

window.UploadModal = UploadModal;