// Document templates subtab + editor
const { useState: _tpl_useState } = React;

const TEMPLATES = [
  {
    id: 't-01', name: 'Contrato laboral término indefinido', type: 'Contrato', version: 'v3.2', updated: '12/04/2026',
    author: 'Carlos Gómez', uses: 247,
    vars: ['empleado.nombre', 'empleado.documento', 'empleado.cargo', 'empleado.salario', 'empleado.fecha_ingreso', 'empresa.razon_social', 'empresa.nit'],
  },
  {
    id: 't-02', name: 'Contrato laboral término fijo', type: 'Contrato', version: 'v2.8', updated: '02/04/2026',
    author: 'Carlos Gómez', uses: 84,
    vars: ['empleado.nombre', 'empleado.documento', 'empleado.cargo', 'contrato.duracion', 'contrato.fecha_fin'],
  },
  {
    id: 't-03', name: 'Reglamento interno de trabajo', type: 'Reglamento', version: 'v1.4', updated: '15/01/2026',
    author: 'Carolina Restrepo', uses: 847,
    vars: ['empleado.nombre', 'empresa.razon_social', 'empresa.direccion'],
  },
  {
    id: 't-04', name: 'Certificación laboral', type: 'Certificación', version: 'v2.1', updated: '20/03/2026',
    author: 'Carolina Restrepo', uses: 412,
    vars: ['empleado.nombre', 'empleado.cargo', 'empleado.fecha_ingreso', 'empleado.salario', 'empresa.razon_social', 'fecha.actual'],
  },
  {
    id: 't-05', name: 'Acuerdo de confidencialidad', type: 'Acuerdo', version: 'v1.2', updated: '08/02/2026',
    author: 'Carlos Gómez', uses: 156,
    vars: ['empleado.nombre', 'empleado.documento', 'empleado.cargo', 'empresa.razon_social'],
  },
  {
    id: 't-06', name: 'Paz y salvo', type: 'Paz y salvo', version: 'v1.0', updated: '01/03/2026',
    author: 'Patricia Gómez', uses: 38,
    vars: ['empleado.nombre', 'empleado.fecha_retiro', 'liquidacion.total'],
  },
];

const VAR_GROUPS = [
  {
    group: 'Empleado', vars: [
      { key: 'empleado.nombre', sample: 'María Fernanda López' },
      { key: 'empleado.documento', sample: '1.094.567.890' },
      { key: 'empleado.cargo', sample: 'Operaria de Aprovechamiento' },
      { key: 'empleado.salario', sample: '$1.450.000 COP' },
      { key: 'empleado.fecha_ingreso', sample: '01/05/2026' },
      { key: 'empleado.eps', sample: 'Sura' },
      { key: 'empleado.afp', sample: 'Protección' },
    ],
  },
  {
    group: 'Empresa', vars: [
      { key: 'empresa.razon_social', sample: 'Atica S.A.S.' },
      { key: 'empresa.nit', sample: '900.123.456-7' },
      { key: 'empresa.direccion', sample: 'Cra. 12 #34-56, Cali' },
    ],
  },
  {
    group: 'Contrato', vars: [
      { key: 'contrato.tipo', sample: 'Indefinido' },
      { key: 'contrato.duracion', sample: '12 meses' },
      { key: 'contrato.fecha_fin', sample: '01/05/2027' },
      { key: 'contrato.jornada', sample: 'Tiempo completo · 48h/sem' },
    ],
  },
  {
    group: 'Sistema', vars: [
      { key: 'fecha.actual', sample: '05/05/2026' },
      { key: 'documento.id', sample: 'DOC-2026-00127' },
    ],
  },
];

const SAMPLE_TEMPLATE = `<h1>CONTRATO INDIVIDUAL DE TRABAJO A TÉRMINO INDEFINIDO</h1>

<p>Entre los suscritos, <strong>{{empresa.razon_social}}</strong>, sociedad legalmente constituida con NIT <strong>{{empresa.nit}}</strong>, con domicilio en <strong>{{empresa.direccion}}</strong>, en adelante <em>EL EMPLEADOR</em>, y</p>

<p><strong>{{empleado.nombre}}</strong>, mayor de edad, identificado(a) con cédula de ciudadanía No. <strong>{{empleado.documento}}</strong>, en adelante <em>EL TRABAJADOR</em>, hemos convenido celebrar el presente contrato individual de trabajo, que se regirá por las siguientes cláusulas:</p>

<h2>PRIMERA. — Objeto</h2>
<p>EL TRABAJADOR se obliga a prestar sus servicios personales en el cargo de <strong>{{empleado.cargo}}</strong>, así como a desempeñar todas las funciones inherentes al mismo.</p>

<h2>SEGUNDA. — Salario</h2>
<p>El salario mensual será de <strong>{{empleado.salario}}</strong>, pagadero por períodos vencidos.</p>

<h2>TERCERA. — Duración</h2>
<p>El presente contrato tiene una duración indefinida y comenzará a regir desde el <strong>{{empleado.fecha_ingreso}}</strong>.</p>

{{#if clausula_confidencialidad}}
<h2>CUARTA. — Confidencialidad</h2>
<p>EL TRABAJADOR se obliga a guardar absoluta reserva sobre la información a la que tenga acceso…</p>
{{/if}}`;

const VERSIONS = [
  { v: 'v3.2', date: '12/04/2026', author: 'Carlos Gómez',     note: 'Actualización cláusula de confidencialidad', current: true },
  { v: 'v3.1', date: '03/02/2026', author: 'Carlos Gómez',     note: 'Ajuste salario base 2026' },
  { v: 'v3.0', date: '15/12/2025', author: 'Carolina Restrepo', note: 'Nuevo formato post-Reforma Laboral' },
  { v: 'v2.5', date: '04/08/2025', author: 'Carlos Gómez',     note: 'Inclusión cláusula teletrabajo' },
];

const DocTemplates = () => {
  const [editing, setEditing] = _tpl_useState(null);
  if (editing) return <TemplateEditor tpl={editing} onBack={() => setEditing(null)} />;

  return (
    <div className="tpl-grid">
      {TEMPLATES.map(t => (
        <div key={t.id} className="tpl-card">
          <div className="tpl-card-head">
            <div className="tpl-icon"><IconDoc size={18} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="tpl-name">{t.name}</div>
              <div className="muted" style={{ fontSize: 11.5, marginTop: 3 }}>{t.type} · {t.uses.toLocaleString()} usos</div>
            </div>
            <span className="pill navy mono" style={{ fontSize: 11 }}>{t.version}</span>
          </div>
          <div className="tpl-meta">
            <div><div className="muted-xs">Última modificación</div><div className="tpl-meta-val">{t.updated}</div></div>
            <div><div className="muted-xs">Autor</div><div className="tpl-meta-val">{t.author}</div></div>
          </div>
          <div className="tpl-vars">
            <div className="muted-xs">Variables ({t.vars.length})</div>
            <div className="tpl-var-chips">
              {t.vars.slice(0, 4).map(v => <span key={v} className="var-chip mono">{`{{${v}}}`}</span>)}
              {t.vars.length > 4 && <span className="muted" style={{ fontSize: 11 }}>+{t.vars.length - 4}</span>}
            </div>
          </div>
          <div className="tpl-card-foot">
            <button className="btn" style={{ flex: 1 }}><IconExternal size={13} /> Vista previa</button>
            <button className="btn primary" style={{ flex: 1 }} onClick={() => setEditing(t)}><IconDoc size={13} /> Editar</button>
          </div>
        </div>
      ))}
      <div className="tpl-card tpl-new" onClick={() => alert('Nueva plantilla')}>
        <IconPlus size={22} />
        <div className="tpl-new-label">Nueva plantilla</div>
        <div className="muted" style={{ fontSize: 12 }}>Desde cero o desde plantilla legal validada</div>
      </div>
    </div>
  );
};

// ─── Template editor ───

const TemplateEditor = ({ tpl, onBack }) => {
  const [content, setContent] = _tpl_useState(SAMPLE_TEMPLATE);
  const [showCondClause, setShowCondClause] = _tpl_useState(true);

  // Build live preview with variable substitution
  const buildPreview = () => {
    let html = content;
    // resolve simple {{x.y}} tokens
    VAR_GROUPS.forEach(g => g.vars.forEach(v => {
      const re = new RegExp(`\\{\\{\\s*${v.key.replace('.', '\\.')}\\s*\\}\\}`, 'g');
      html = html.replace(re, `<span class="prv-var">${v.sample}</span>`);
    }));
    // {{#if x}} ... {{/if}} block
    html = html.replace(/\{\{#if\s+\w+\}\}([\s\S]*?)\{\{\/if\}\}/g, showCondClause ? '$1' : '');
    return html;
  };

  // Render editor source with var highlighting
  const renderEditorHTML = () => {
    let html = content
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
    html = html.replace(/(\{\{#if\s+\w+\}\}|\{\{\/if\}\})/g, '<span class="ed-cond">$1</span>');
    html = html.replace(/(\{\{[\w.]+\}\})/g, '<span class="ed-var">$1</span>');
    return html;
  };

  const insertVar = (key) => setContent(c => c + ` {{${key}}}`);

  return (
    <>
      <button className="btn" onClick={onBack} style={{ marginBottom: 14 }}>
        <IconChevronLeft size={14} /> Volver a plantillas
      </button>

      <div className="tpl-editor-head">
        <div>
          <div className="tpl-editor-title">{tpl.name}</div>
          <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
            <span className="pill navy mono" style={{ fontSize: 11, marginRight: 8 }}>{tpl.version}</span>
            Última modificación: {tpl.updated} por {tpl.author}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn">Descartar cambios</button>
          <button className="btn">Guardar borrador</button>
          <button className="btn primary">Publicar versión</button>
        </div>
      </div>

      <div className="tpl-editor-grid">
        <div className="tpl-pane">
          <div className="tpl-pane-head"><IconDoc size={13} /> Editor HTML</div>
          <div
            className="tpl-source mono"
            contentEditable
            suppressContentEditableWarning
            onInput={(e) => setContent(e.currentTarget.innerText)}
            dangerouslySetInnerHTML={{ __html: renderEditorHTML() }}
          />
          <div className="tpl-pane-foot">
            <label className="tpl-toggle">
              <input type="checkbox" checked={showCondClause} onChange={(e) => setShowCondClause(e.target.checked)} />
              <span className="mono" style={{ fontSize: 11.5 }}>{`{{#if clausula_confidencialidad}}`}</span>
              <span className="muted" style={{ fontSize: 11.5 }}>incluir en preview</span>
            </label>
          </div>
        </div>

        <div className="tpl-pane">
          <div className="tpl-pane-head"><IconExternal size={13} /> Vista previa · datos de ejemplo</div>
          <div className="tpl-preview" dangerouslySetInnerHTML={{ __html: buildPreview() }} />
        </div>

        <div className="tpl-side-pane">
          <div className="tpl-pane-head"><IconBarChart size={13} /> Variables</div>
          <div className="tpl-vars-list">
            {VAR_GROUPS.map(g => (
              <div key={g.group}>
                <div className="muted-xs" style={{ padding: '8px 12px 2px' }}>{g.group}</div>
                {g.vars.map(v => (
                  <button key={v.key} className="tpl-var-row" onClick={() => insertVar(v.key)} title="Insertar">
                    <div>
                      <div className="mono" style={{ fontSize: 11.5, color: 'var(--navy-800)', fontWeight: 600 }}>{`{{${v.key}}}`}</div>
                      <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{v.sample}</div>
                    </div>
                    <IconPlus size={12} />
                  </button>
                ))}
              </div>
            ))}
          </div>

          <div className="tpl-pane-head" style={{ borderTop: '1px solid var(--border)' }}><IconClock size={13} /> Historial</div>
          <div className="tpl-versions">
            {VERSIONS.map(v => (
              <div key={v.v} className={`tpl-version ${v.current ? 'current' : ''}`}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span className="mono" style={{ fontWeight: 600, fontSize: 12 }}>{v.v}</span>
                  {v.current && <span className="pill green" style={{ fontSize: 10, padding: '1px 7px' }}>Actual</span>}
                </div>
                <div className="muted" style={{ fontSize: 11, marginTop: 3 }}>{v.date} · {v.author}</div>
                <div style={{ fontSize: 12, marginTop: 4 }}>{v.note}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

window.DocTemplates = DocTemplates;