/* ============================================================
   REVISAR DOCUMENTO
   ============================================================ */

let _pdfjsPromise = null;
function loadPdfJs() {
  if (_pdfjsPromise) return _pdfjsPromise;
  _pdfjsPromise = new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
    s.onload = () => {
      if (window.pdfjsLib) {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
        resolve(window.pdfjsLib);
      } else reject(new Error('pdfjs'));
    };
    s.onerror = () => reject(new Error('pdfjs'));
    document.head.appendChild(s);
  });
  return _pdfjsPromise;
}

async function extractPdfText(file) {
  const pdfjs = await loadPdfJs();
  const buf = await file.arrayBuffer();
  const pdf = await pdfjs.getDocument({ data: buf }).promise;
  let text = '';
  const pages = Math.min(pdf.numPages, 20);
  for (let i = 1; i <= pages; i++) {
    const page = await pdf.getPage(i);
    const content = await page.getTextContent();
    text += content.items.map(it => it.str).join(' ') + '\n\n';
  }
  return text.trim();
}

function RevisarDocumento() {
  const [text, setText] = useState('');
  const [fileName, setFileName] = useState('');
  const [dragOver, setDragOver] = useState(false);
  const [reading, setReading] = useState(false);
  const [loading, setLoading] = useState(false);
  const [analysis, setAnalysis] = useState(null);
  const [error, setError] = useState(null);
  const inputRef = useRef(null);

  const handleFile = async (file) => {
    if (!file) return;
    setError(null); setAnalysis(null); setFileName(file.name); setReading(true);
    try {
      if (file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
        const t = await extractPdfText(file);
        if (!t) throw new Error('empty');
        setText(t);
      } else {
        const t = await file.text();
        setText(t);
      }
    } catch (e) {
      setFileName('');
      setError(e.message === 'empty'
        ? 'No se ha podido extraer texto de este PDF (puede ser una imagen escaneada). Pega el texto manualmente.'
        : 'No se ha podido leer el archivo. Prueba a pegar el texto manualmente.');
    } finally {
      setReading(false);
    }
  };

  const onDrop = (e) => {
    e.preventDefault(); setDragOver(false);
    const file = e.dataTransfer.files?.[0];
    if (file) handleFile(file);
  };

  const analyze = async () => {
    if (!text.trim() || loading) return;
    setError(null); setLoading(true); setAnalysis(null);
    const prompt = `Analiza el siguiente documento legal desde la perspectiva de quien lo va a firmar. Identifica riesgos, cláusulas abusivas o desfavorables y aspectos a mejorar conforme al derecho español.

Devuelve EXCLUSIVAMENTE un objeto JSON válido (sin texto adicional, sin markdown) con esta estructura exacta:
{
  "tipo": "tipo de documento detectado",
  "resumen": "resumen ejecutivo en 2-3 frases",
  "problematicas": [{"titulo": "...", "detalle": "...", "gravedad": "alta|media|baja"}],
  "positivos": ["punto positivo", ...],
  "recomendaciones": ["recomendación accionable", ...]
}

DOCUMENTO:
"""
${text.slice(0, 9000)}
"""`;
    try {
      const raw = await callLexly(prompt, 'Eres Lexly, analista jurídico experto en derecho español. Devuelves siempre JSON válido, sin texto fuera del JSON.', 3000);
      const parsed = parseAnalysis(raw);
      if (!parsed) throw new Error('parse');
      setAnalysis(parsed);
      // Registrar el uso de una revisión en el contador mensual central.
      try { if (typeof lxRegisterUse === 'function') lxRegisterUse('review'); } catch (e) {}
    } catch (e) {
      setError(e.message === 'NO_API'
        ? 'No se ha podido conectar con el servicio. Revisa tu conexión e inténtalo de nuevo.'
        : 'No se ha podido analizar el documento. Inténtalo de nuevo.');
    } finally {
      setLoading(false);
    }
  };

  const reset = () => { setText(''); setFileName(''); setAnalysis(null); setError(null); };

  return (
    <div className="section-pad fade-up">
      <div className="eyebrow">Análisis</div>
      <h1 className="h-title">Revisar documento</h1>
      <p className="h-sub">Sube un contrato o pega su texto. Lexly te señalará las cláusulas problemáticas, lo que está bien y qué deberías negociar antes de firmar.</p>

      {!analysis && (
        <div className="rev-input fade-up">
          <div
            className={'dropzone' + (dragOver ? ' over' : '') + (text ? ' has-text' : '')}
            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
            onDragLeave={() => setDragOver(false)}
            onDrop={onDrop}
            onClick={() => !text && inputRef.current?.click()}
          >
            <input ref={inputRef} type="file" accept=".pdf,.txt,.md,.doc,.docx" hidden
              onChange={(e) => handleFile(e.target.files?.[0])} />
            {reading ? (
              <div className="dz-center"><Spinner /><p>Extrayendo texto…</p></div>
            ) : fileName ? (
              <div className="dz-file">
                <div className="dz-file-ic"><Icon name="file" size={20} /></div>
                <div className="dz-file-meta">
                  <strong>{fileName}</strong>
                  <span>{text.length.toLocaleString('es-ES')} caracteres extraídos</span>
                </div>
                <button className="icon-btn" onClick={(e) => { e.stopPropagation(); reset(); }}><Icon name="x" size={15} /></button>
              </div>
            ) : (
              <div className="dz-center">
                <div className="dz-ic"><Icon name="upload" size={24} /></div>
                <p className="dz-title">Arrastra un PDF aquí o <span>haz clic para subir</span></p>
                <p className="dz-sub">PDF, TXT · máx. 20 páginas</p>
              </div>
            )}
          </div>

          <div className="rev-or"><span>o pega el texto</span></div>

          <textarea
            className="textarea rev-textarea"
            rows={8}
            placeholder="Pega aquí el contenido del documento que quieres revisar…"
            value={text}
            onChange={(e) => { setText(e.target.value); if (fileName) setFileName(''); }}
          />

          {error && <ErrorNote>{error}</ErrorNote>}

          <div className="rev-actions">
            {text && <button className="btn btn-ghost" onClick={reset}>Limpiar</button>}
            <button className="btn btn-primary" disabled={!text.trim() || loading} onClick={analyze}>
              {loading ? <><Spinner /> Analizando…</> : <><Icon name="sparkle" size={16} /> Analizar documento</>}
            </button>
          </div>
        </div>
      )}

      {loading && !analysis && (
        <div className="rev-loading fade-up">
          <LexAvatar size={40} />
          <p>Lexly está revisando el documento cláusula por cláusula…</p>
        </div>
      )}

      {analysis && <AnalysisResult data={analysis} onReset={reset} />}

      <style>{`
        .rev-input { margin-top: 24px; }
        .dropzone {
          border: 1.5px dashed var(--line-3); border-radius: var(--radius);
          background: var(--bg-2); padding: 30px; cursor: pointer;
          transition: border-color .15s, background .15s; min-height: 150px;
          display: flex; align-items: center; justify-content: center;
        }
        .dropzone.over { border-color: var(--violet); background: var(--violet-dim); }
        .dropzone.has-text { cursor: default; }
        .dz-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
        .dz-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--violet-soft); }
        .dz-title { font-size: 14px; color: var(--text); font-weight: 500; }
        .dz-title span { color: var(--violet-soft); }
        .dz-sub { font-size: 12px; color: var(--text-3); }
        .dz-file { display: flex; align-items: center; gap: 14px; width: 100%; }
        .dz-file-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--violet-dim); border: 1px solid var(--violet-line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; }
        .dz-file-meta { flex: 1; min-width: 0; }
        .dz-file-meta strong { display: block; font-size: 14px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dz-file-meta span { font-size: 12px; color: var(--text-3); }

        .rev-or { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--text-4); font-size: 12px; }
        .rev-or::before, .rev-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
        .rev-textarea { font-family: var(--serif); font-size: 14px; }
        .rev-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

        .rev-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 60px 20px; }
        .rev-loading p { font-size: 13.5px; color: var(--text-2); }
      `}</style>
    </div>
  );
}

function parseAnalysis(raw) {
  if (!raw) return null;
  let s = raw.trim();
  // strip code fences
  s = s.replace(/^```(json)?/i, '').replace(/```$/,'').trim();
  const start = s.indexOf('{');
  const end = s.lastIndexOf('}');
  if (start === -1 || end === -1) return null;
  try {
    const obj = JSON.parse(s.slice(start, end + 1));
    return {
      tipo: obj.tipo || 'Documento legal',
      resumen: obj.resumen || '',
      problematicas: Array.isArray(obj.problematicas) ? obj.problematicas : [],
      positivos: Array.isArray(obj.positivos) ? obj.positivos : [],
      recomendaciones: Array.isArray(obj.recomendaciones) ? obj.recomendaciones : [],
    };
  } catch (e) { return null; }
}

const GRAVEDAD = {
  alta:  { c: 'var(--red)',   bg: 'var(--red-dim)',   l: 'Alta' },
  media: { c: 'var(--amber)', bg: 'var(--amber-dim)', l: 'Media' },
  baja:  { c: 'var(--text-2)',bg: 'rgba(255,255,255,0.05)', l: 'Baja' },
};

function AnalysisResult({ data, onReset }) {
  return (
    <div className="ar fade-up">
      <div className="ar-head">
        <div>
          <div className="ar-type"><Icon name="file" size={13} /> {data.tipo}</div>
        </div>
        <button className="btn btn-ghost" onClick={onReset}><Icon name="plus" size={15} /> Nuevo análisis</button>
      </div>

      <div className="ar-summary card">
        <div className="ar-block-title"><Icon name="sparkle" size={15} /> Resumen ejecutivo</div>
        <p>{data.resumen}</p>
      </div>

      {data.problematicas.length > 0 && (
        <div className="ar-block">
          <div className="ar-block-title warn"><Icon name="warn" size={15} /> Cláusulas problemáticas <span className="cnt">{data.problematicas.length}</span></div>
          <div className="ar-issues">
            {data.problematicas.map((p, i) => {
              const g = GRAVEDAD[p.gravedad] || GRAVEDAD.media;
              return (
                <div key={i} className="issue card">
                  <div className="issue-head">
                    <strong>{p.titulo}</strong>
                    <span className="grav" style={{ color: g.c, background: g.bg }}>{g.l}</span>
                  </div>
                  <p>{p.detalle}</p>
                </div>
              );
            })}
          </div>
        </div>
      )}

      <div className="ar-two">
        {data.positivos.length > 0 && (
          <div className="ar-block">
            <div className="ar-block-title good"><Icon name="checkCircle" size={15} /> Puntos positivos</div>
            <ul className="ar-list good">
              {data.positivos.map((p, i) => <li key={i}><Icon name="check" size={14} /><span>{p}</span></li>)}
            </ul>
          </div>
        )}
        {data.recomendaciones.length > 0 && (
          <div className="ar-block">
            <div className="ar-block-title"><Icon name="bolt" size={15} /> Recomendaciones</div>
            <ul className="ar-list rec">
              {data.recomendaciones.map((p, i) => <li key={i}><Icon name="arrowRight" size={14} /><span>{p}</span></li>)}
            </ul>
          </div>
        )}
      </div>

      <p className="ar-disc">Recuerda que esta información no sustituye el asesoramiento de un abogado colegiado.</p>

      <style>{`
        .ar { margin-top: 24px; }
        .ar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
        .ar-type { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--violet-soft); background: var(--violet-dim); border: 1px solid var(--violet-line); padding: 5px 11px; border-radius: 20px; }
        .ar-block { margin-bottom: 22px; }
        .ar-block-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 11px; }
        .ar-block-title .ic { color: var(--text-3); }
        .ar-block-title.warn .ic { color: var(--amber); }
        .ar-block-title.good .ic { color: var(--green); }
        .ar-block-title .cnt { font-size: 11px; background: var(--surface-3); color: var(--text-2); padding: 1px 7px; border-radius: 9px; }
        .ar-summary { padding: 18px 20px; margin-bottom: 22px; }
        .ar-summary p { font-size: 14px; line-height: 1.6; color: var(--text); margin-top: 4px; }
        .ar-issues { display: flex; flex-direction: column; gap: 10px; }
        .issue { padding: 15px 17px; }
        .issue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
        .issue-head strong { font-size: 13.5px; font-weight: 600; color: var(--white); }
        .grav { font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; flex-shrink: 0; }
        .issue p { font-size: 13px; line-height: 1.55; color: var(--text-2); }
        .ar-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
        .ar-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
        .ar-list li { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
        .ar-list li .ic { flex-shrink: 0; margin-top: 2px; }
        .ar-list.good li .ic { color: var(--green); }
        .ar-list.rec li .ic { color: var(--violet-soft); }
        .ar-disc { font-size: 11px; color: var(--text-4); margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
        @media (max-width: 860px) { .ar-two { grid-template-columns: 1fr; gap: 18px; } }
      `}</style>
    </div>
  );
}

Object.assign(window, { RevisarDocumento });
