/* Canvas — painel de edição de peças lado a lado com o chat.
 * Renderiza markdown como HTML formatado (negrito, títulos, etc.)
 * para que a peça fique pronta para Word. */

function pieceMarkdownToHtml(md) {
  if (!md) return '';
  let t = md;
  const blocks = [];
  t = t.replace(/```([\s\S]*?)```/g, (_, code) => {
    const idx = blocks.length;
    blocks.push(`<pre class="cv-pre"><code>${code.replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]))}</code></pre>`);
    return `\x00BLOCK${idx}\x00`;
  });
  t = t.replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
  t = t.replace(/^#### (.+)$/gm, '<h5>$1</h5>');
  t = t.replace(/^### (.+)$/gm, '<h4>$1</h4>');
  t = t.replace(/^## (.+)$/gm, '<h3>$1</h3>');
  t = t.replace(/^# (.+)$/gm, '<h3>$1</h3>');
  t = t.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
  t = t.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
  t = t.replace(/\*(.+?)\*/g, '<em>$1</em>');
  t = t.replace(/^- (.+)$/gm, '<li>$1</li>');
  t = t.replace(/(<li>.*<\/li>\n?)+/g, m => `<ul>${m.replace(/\n/g,'')}</ul>`);
  t = t.replace(/^(\d+)\. (.+)$/gm, '<oli>$2</oli>');
  t = t.replace(/(<oli>.*<\/oli>\n?)+/g, m => `<ol>${m.replace(/<\/?oli>/g, m2 => m2 === '<oli>' ? '<li>' : '</li>').replace(/\n/g,'')}</ol>`);
  t = t.replace(/^---$/gm, '<hr/>');
  t = t.replace(/\[center\]([\s\S]*?)\[\/center\]/g, '<p class="cv-center">$1</p>');
  // Center endereçamento lines (EXCELENTÍSSIMO / AO EXMO etc.)
  t = t.replace(/^(EXCELENTÍSSIMO[^<]*)$/gm, '<p class="cv-center"><strong>$1</strong></p>');
  t = t.replace(/^(AO\s+(?:EXMO|MM|ILMO)[^<]*)$/gim, '<p class="cv-center"><strong>$1</strong></p>');
  // Center "Termos em que" / "Pede deferimento" lines
  t = t.replace(/^(Termos em que[^<]*)$/gm, '<p class="cv-center">$1</p>');
  t = t.replace(/^(Pede deferimento[^<]*)$/gm, '<p class="cv-center">$1</p>');
  // Right-align date lines
  t = t.replace(/^(.+,\s*\d{1,2}\s+de\s+[^<]+)$/gm, '<p class="cv-right">$1</p>');
  const parts = t.split(/\n{2,}/);
  t = parts.map(p => {
    if (p.match(/^<(ul|ol|h[3-6]|pre|div|hr|p\s)/)) return p;
    return `<p>${p.replace(/\n/g, '<br/>')}</p>`;
  }).join('');
  t = t.replace(/\x00BLOCK(\d+)\x00/g, (_, i) => blocks[+i]);
  return t;
}

const Canvas = ({ content, title, onClose, onUndo, onChange, onEditCommand, hasVersions }) => {
  const editorRef = React.useRef(null);
  const textareaRef = React.useRef(null);
  const [copied, setCopied] = React.useState(false);
  const [editMode, setEditMode] = React.useState(false);
  const [downloading, setDownloading] = React.useState(false);

  const html = React.useMemo(() => pieceMarkdownToHtml(content), [content]);

  const handleCopy = async () => {
    try {
      await copyMessageAsHtml(content);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (e) {
      navigator.clipboard?.writeText(content);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  const handleDownload = async (format) => {
    if (!content) return;
    setDownloading(true);
    try {
      const r = await fetch(`/api/download/${format}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', ...authHeaders() },
        body: JSON.stringify({ content, title }),
      });
      if (!r.ok) throw new Error('Download failed');
      const blob = await r.blob();
      const disposition = r.headers.get('Content-Disposition') || '';
      const filenameMatch = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
      const filename = filenameMatch ? decodeURIComponent(filenameMatch[1].replace(/['"]/g, '')) : `peca.${format}`;
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = filename; a.click();
      URL.revokeObjectURL(url);
    } catch (e) {
      console.error('download error', e);
    } finally { setDownloading(false); }
  };

  const toggleEdit = () => setEditMode(e => !e);

  const applyWrap = (before, after = before, placeholder = 'texto') => {
    setEditMode(true);
    setTimeout(() => {
      const el = textareaRef.current;
      if (!el) return;
      const start = el.selectionStart || 0;
      const end = el.selectionEnd || 0;
      const selected = content.slice(start, end) || placeholder;
      const next = content.slice(0, start) + before + selected + after + content.slice(end);
      onChange?.(next);
      requestAnimationFrame(() => {
        el.focus();
        el.setSelectionRange(start + before.length, start + before.length + selected.length);
      });
    }, 0);
  };

  const applyLinePrefix = (prefix) => {
    setEditMode(true);
    setTimeout(() => {
      const el = textareaRef.current;
      if (!el) return;
      const start = el.selectionStart || 0;
      const end = el.selectionEnd || 0;
      const lineStart = content.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
      const lineEnd = end || start;
      const selected = content.slice(lineStart, lineEnd) || 'Título';
      const next = content.slice(0, lineStart) + prefix + selected.replace(/^#{1,4}\s*/, '') + content.slice(lineEnd);
      onChange?.(next);
      requestAnimationFrame(() => el.focus());
    }, 0);
  };

  const sendEdit = (cmd) => {
    onEditCommand?.(cmd);
  };

  return (
    <div className="canvas-panel">
      <div className="canvas-toolbar">
        <div className="canvas-toolbar-left">
          <span className="canvas-title">{title || 'Peça em andamento'}</span>
          <span className="canvas-badge">{(content || '').length.toLocaleString('pt-BR')} chars</span>
        </div>
        <div className="canvas-toolbar-right">
          {hasVersions && (
            <button className="ctool" title="Desfazer (versão anterior)" onClick={onUndo}>
              <I.arrowL size={14}/> Desfazer
            </button>
          )}
          <button className="ctool" title={editMode ? 'Visualizar formatado' : 'Editar texto bruto'} onClick={toggleEdit}>
            <I.edit size={14}/> {editMode ? 'Visualizar' : 'Editar'}
          </button>
          <button className="ctool" title="Copiar formatado para Word" onClick={handleCopy}>
            <I.copy size={14}/> {copied ? 'Copiado!' : 'Copiar'}
          </button>
          <span className="ctool-sep"/>
          <button className="ctool canvas-dl-btn" title="Baixar como Word (.docx)" onClick={() => handleDownload('word')} disabled={downloading}>
            <I.download size={14}/> Word
          </button>
          <button className="ctool canvas-dl-btn" title="Baixar como PDF" onClick={() => handleDownload('pdf')} disabled={downloading}>
            <I.file size={14}/> PDF
          </button>
          <button className="ctool" title="Fechar canvas" onClick={onClose}>
            <I.x size={14}/>
          </button>
        </div>
      </div>
      <div className="canvas-formatbar">
        <div className="canvas-formatbar-group" aria-label="Formatação rápida">
          <button className="ctool ctool-icon" title="Negrito" onClick={() => applyWrap('**', '**', 'negrito')}>B</button>
          <button className="ctool ctool-icon" title="Itálico" onClick={() => applyWrap('*', '*', 'itálico')}><em>I</em></button>
          <button className="ctool" title="Título de seção" onClick={() => applyLinePrefix('## ')}>Título</button>
          <button className="ctool" title="Subtítulo" onClick={() => applyLinePrefix('### ')}>Subtítulo</button>
          <button className="ctool" title="Centralizar linha" onClick={() => applyWrap('[center]', '[/center]', 'texto centralizado')}>Centralizar</button>
        </div>
        <span className="ctool-sep"/>
        <div className="canvas-formatbar-group canvas-formatbar-ai" aria-label="Ajustes com IA">
          <button className="ctool ai-edit" onClick={() => sendEdit('Revise a peça atual no Canvas e corrija apenas erros gramaticais, concordância, pontuação e fluidez, preservando fatos, fundamentos, pedidos e estrutura. Não recrie a peça.')}>Revisar</button>
          <button className="ctool ai-edit" onClick={() => sendEdit('Aprimore a persuasão da peça atual no Canvas com edições pontuais, sem recriar do zero e sem alterar fatos. Preserve o contexto, a estrutura e os pedidos.')}>Persuasão</button>
          <button className="ctool ai-edit" onClick={() => sendEdit('Padronize a formatação da peça atual no Canvas para Word jurídico: endereçamento centralizado, títulos consistentes, parágrafos objetivos e pedidos bem separados. Preserve o conteúdo jurídico.')}>Formato Word</button>
          <button className="ctool ai-edit" onClick={() => sendEdit('Enxugue repetições da peça atual no Canvas e deixe a redação mais objetiva, mantendo todos os argumentos essenciais e sem perder contexto.')}>Enxugar</button>
        </div>
      </div>
      {editMode ? (
        <textarea
          ref={textareaRef}
          className="canvas-editor canvas-editor-raw"
          value={content || ''}
          onChange={e => onChange?.(e.target.value)}
          spellCheck={false}
          autoFocus
        />
      ) : (
        <div
          ref={editorRef}
          className="canvas-editor canvas-editor-rendered"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      )}
    </div>
  );
};

window.Canvas = Canvas;