import { icons } from '../services/icons.js';
import {
  getSupplierInvoices, getSupplierInvoiceById, createSupplierInvoice,
  updateSupplierInvoice, deleteSupplierInvoice, changeSupplierInvoiceStatus,
  addSupplierInvoiceLine, updateSupplierInvoiceLine, deleteSupplierInvoiceLine,
  getSupplierInvoicePayments, addSupplierInvoicePayment
} from '../services/supplierInvoices.js';
import { showToast } from '../services/toast.js';
import { apiGet } from '../services/apiClient.js';
import { getPaymentTypes } from '../services/setup.js';

export function renderFacturasProveedoresPage() {
  const container = document.createElement('div');
  container.className = 'facturas-page page-enter';

  let allInvoices = [];
  let filteredInvoices = [];
  let currentFilter = '';
  let searchTerm = '';
  let currentInvoice = null;
  let payments = [];
  let paymentTypes = [];

  const fmt = (n) => new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(n || 0);
  const fmtDate = (d) => d ? new Date(d).toLocaleDateString('es-ES') : '—';
  const fmtDateInput = (d) => d ? new Date(d).toISOString().split('T')[0] : '';

  const STATUS_TEXT = {
    draft: 'Borrador',
    unpaid: 'Pte. Pago',
    paid: 'Pagada',
    cancelled: 'Cancelada',
    unknown: 'Desconocido'
  };
  const STATUS_CLASS = {
    draft: 'status-draft',
    unpaid: 'status-unpaid',
    paid: 'status-paid',
    cancelled: 'status-canceled',
    unknown: 'status-draft'
  };

  function escHtml(str) {
    if (str == null) return '';
    const d = document.createElement('div');
    d.textContent = String(str);
    return d.innerHTML;
  }

  container.innerHTML = /*html*/`
    <div class="facturas-header">
      <h1>Facturas de Proveedores</h1>
    </div>

    <div class="facturas-filters">
      <div class="search-wrapper">
        <span class="search-icon">${icons.search}</span>
        <input type="search" placeholder="Buscar proveedor o referencia..." class="search-input search-input--with-icon" id="sup-search" />
      </div>
      <select class="filter-status" id="sup-filter">
        <option value="">Todos los estados</option>
        <option value="draft">Borrador</option>
        <option value="unpaid">Pte. Pago</option>
        <option value="paid">Pagada</option>
      </select>
      <button class="btn-new-invoice" id="btn-new-sup">${icons.plus} <span>Nueva factura</span></button>
    </div>

    <div class="invoices-summary" id="sup-summary" style="display:none">
      <div class="summary-item">
        <span class="summary-label">Facturas</span>
        <span class="summary-value" id="sum-count">—</span>
      </div>
      <div class="summary-divider"></div>
      <div class="summary-item">
        <span class="summary-label">Base imponible</span>
        <span class="summary-value" id="sum-ht">—</span>
      </div>
      <div class="summary-divider"></div>
      <div class="summary-item">
        <span class="summary-label">IVA soportado</span>
        <span class="summary-value" id="sum-tax">—</span>
      </div>
      <div class="summary-divider"></div>
      <div class="summary-item">
        <span class="summary-label">Total</span>
        <span class="summary-value" id="sum-total">—</span>
      </div>
      <div class="summary-divider"></div>
      <div class="summary-item summary-item--pending">
        <span class="summary-label">Pendiente</span>
        <span class="summary-value" id="sum-pending">—</span>
      </div>
    </div>

    <div class="invoices-table-container">
      <table class="invoices-table">
        <thead>
          <tr>
            <th>Número</th>
            <th>Estado</th>
            <th>Proveedor</th>
            <th>Fecha</th>
            <th class="text-right">Total</th>
            <th class="text-right">Pendiente</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody id="sup-tbody">
          <tr><td colspan="7" class="facturas-empty">Cargando...</td></tr>
        </tbody>
      </table>
    </div>


    <!-- Vista crear factura proveedor (página completa) -->
    <div id="sup-create-view" class="create-invoice-page" style="display:none">
      <div class="invoice-header-compact">
        <h1>Nueva factura de proveedor</h1>
        <button type="button" class="btn-back" id="sup-create-close">← Volver</button>
      </div>
      <form id="sup-create-form" class="invoice-form-compact">
        <div class="form-grid-compact">
          <div class="form-field-compact full-width">
            <label>Proveedor *</label>
            <select id="sup-supplier-select" required>
              <option value="">Cargando proveedores...</option>
            </select>
          </div>
          <div class="form-field-compact full-width">
            <label>Ref. proveedor *</label>
            <input type="text" id="sup-ref-supplier" required placeholder="Ej: FAC-2024-001" />
          </div>
          <div class="form-field-compact">
            <label>Fecha *</label>
            <div class="date-input-wrapper">
              <input type="date" id="sup-date" required />
              <button type="button" class="date-picker-btn" data-target="sup-date" title="Seleccionar fecha">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              </button>
            </div>
          </div>
          <div class="form-field-compact">
            <label>Vencimiento</label>
            <div class="date-input-wrapper">
              <input type="date" id="sup-expire" />
              <button type="button" class="date-picker-btn" data-target="sup-expire" title="Seleccionar fecha">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              </button>
            </div>
          </div>
        </div>

        <div class="notes-grid-compact">
          <div class="form-field-compact">
            <label>Nota pública</label>
            <textarea id="sup-note-public" rows="2" placeholder="Opcional"></textarea>
          </div>
        </div>

        <div class="lines-section-compact">
          <div class="lines-header-compact">
            <h3>Líneas de Factura</h3>
            <button type="button" class="btn-add-compact" id="sup-add-line">+ Añadir</button>
          </div>
          <div class="lines-table-compact" id="sup-lines-container"></div>
        </div>

        <div class="form-actions-compact">
          <button type="button" class="btn-cancel-compact" id="sup-create-cancel">Cancelar</button>
          <button type="submit" class="btn-submit-compact" id="sup-create-submit">Crear factura</button>
        </div>
      </form>
    </div>
  `;

  const tbody = container.querySelector('#sup-tbody');
  const searchInput = container.querySelector('#sup-search');
  const filterSelect = container.querySelector('#sup-filter');
  const summary = container.querySelector('#sup-summary');
  let detailView = null;
  let detailBody = null;
  let detailTitle = null;

  function createDetailModal() {
    const el = document.createElement('div');
    el.className = 'sup-modal-backdrop';
    el.innerHTML = `
      <div class="sup-modal-box">
        <div class="sup-modal-head">
          <h2 id="sup-detail-title">Detalle</h2>
          <button class="btn-close" id="sup-detail-close">×</button>
        </div>
        <div class="sup-modal-body" id="sup-detail-body">
          <div class="loading">Cargando...</div>
        </div>
      </div>`;
    el.querySelector('#sup-detail-close').addEventListener('click', closeDetail);
    el.addEventListener('click', e => { if (e.target === el) closeDetail(); });
    document.body.appendChild(el);
    detailView  = el;
    detailBody  = el.querySelector('#sup-detail-body');
    detailTitle = el.querySelector('#sup-detail-title');
  }

  function applyFilters() {
    filteredInvoices = allInvoices.filter(inv => {
      const matchStatus = !currentFilter || inv.status === currentFilter;
      const q = searchTerm.toLowerCase();
      const matchSearch = !q
        || (inv.number || '').toLowerCase().includes(q)
        || (inv.supplierRef || '').toLowerCase().includes(q)
        || (inv.supplierName || '').toLowerCase().includes(q);
      return matchStatus && matchSearch;
    });
    renderTable();
    renderSummary();
  }

  function renderTable() {
    if (filteredInvoices.length === 0) {
      tbody.innerHTML = `<tr><td colspan="7" class="facturas-empty">No hay facturas de proveedores</td></tr>`;
      return;
    }
    tbody.innerHTML = filteredInvoices.map(inv => `
      <tr class="invoice-item" data-id="${inv.id}">
        <td class="invoice-number">
          <button class="btn-invoice-num" data-id="${inv.id}">${escHtml(inv.number)}</button>
        </td>
        <td class="invoice-status">
          <span class="status-badge ${STATUS_CLASS[inv.status] || 'status-draft'}">
            ${STATUS_TEXT[inv.status] || inv.status}
          </span>
        </td>
        <td class="invoice-client">
          <span class="client-icon">${icons.user}</span>
          ${escHtml(inv.supplierName || 'Sin nombre')}
        </td>
        <td class="invoice-date">${fmtDate(inv.date)}</td>
        <td class="invoice-total amount-positive">${fmt(inv.total)}</td>
        <td class="invoice-remain ${parseFloat(inv.remainToPay) > 0.009 ? 'amount-pending' : 'amount-paid'}">
          ${fmt(inv.remainToPay)}
        </td>
        <td class="invoice-actions">
          <button class="btn-action btn-view" data-id="${inv.id}" title="Ver detalle">
            ${icons.eye}
          </button>
        </td>
      </tr>
    `).join('');

    tbody.querySelectorAll('[data-id]').forEach(el => {
      el.addEventListener('click', () => openDetail(Number(el.dataset.id)));
    });
  }

  function renderSummary() {
    if (filteredInvoices.length === 0) { summary.style.display = 'none'; return; }
    summary.style.display = 'flex';
    const totalHt  = filteredInvoices.reduce((s, i) => s + (i.totalHt || 0), 0);
    const totalTax = filteredInvoices.reduce((s, i) => s + (i.totalTax || 0), 0);
    const total    = filteredInvoices.reduce((s, i) => s + (i.total || 0), 0);
    const pending  = filteredInvoices.reduce((s, i) => s + (i.remainToPay || 0), 0);
    container.querySelector('#sum-count').textContent  = filteredInvoices.length;
    container.querySelector('#sum-ht').textContent     = fmt(totalHt);
    container.querySelector('#sum-tax').textContent    = fmt(totalTax);
    container.querySelector('#sum-total').textContent  = fmt(total);
    container.querySelector('#sum-pending').textContent = fmt(pending);
  }

  function isModalOpen() {
    return detailView && detailView.isConnected;
  }

  async function openDetail(id) {
    if (isModalOpen()) closeDetail();
    createDetailModal();
    payments = [];

    if (paymentTypes.length === 0) {
      try { paymentTypes = await getPaymentTypes(); } catch { paymentTypes = []; }
    }

    if (!isModalOpen()) return;

    try {
      const inv = await getSupplierInvoiceById(id);
      if (!isModalOpen()) return;
      currentInvoice = inv;
      await loadPayments(id);
      if (!isModalOpen()) return;
      renderDetail(inv);
    } catch (err) {
      if (!isModalOpen()) return;
      detailBody.innerHTML = `<div class="error">No se pudo cargar el detalle: ${escHtml(err.message)}</div>`;
    }
  }

  async function refreshDetail() {
    if (!currentInvoice || !isModalOpen()) return;
    try {
      const inv = await getSupplierInvoiceById(currentInvoice.id);
      if (!isModalOpen()) return;
      currentInvoice = inv;
      await loadPayments(inv.id);
      if (!isModalOpen()) return;
      renderDetail(inv);
      const idx = allInvoices.findIndex(x => x.id === inv.id);
      if (idx >= 0) allInvoices[idx] = { ...allInvoices[idx], ...inv };
      applyFilters();
    } catch (err) {
      showToast(`Error al recargar: ${err.message}`, 'error');
    }
  }

  async function loadPayments(id) {
    try {
      payments = await getSupplierInvoicePayments(id);
    } catch {
      payments = [];
    }
  }

  function renderDetail(inv) {
    const isDraft = inv.status === 'draft';
    const isUnpaid = inv.status === 'unpaid';
    const lines = inv.lines || [];

    // Update title with status badge
    detailTitle.innerHTML = `${escHtml(inv.number || '—')} <span class="badge ${STATUS_CLASS[inv.status] || 'badge-draft'}" style="font-size:.7em;vertical-align:middle;margin-left:.5rem">${STATUS_TEXT[inv.status] || inv.status}</span>`;

    detailBody.innerHTML = /*html*/`
      <!-- Info fields -->
      <div class="form-section" id="sup-detail-info">
        <div class="form-row">
          <div class="form-field">
            <label class="form-label">Proveedor</label>
            <input class="form-input" value="${escHtml(inv.supplierName || '—')}" readonly />
          </div>
          <div class="form-field">
            <label class="form-label">Ref. proveedor</label>
            <input class="form-input" id="sup-d-ref" value="${escHtml(inv.supplierRef || '—')}" readonly />
          </div>
        </div>
        <div class="form-row">
          <div class="form-field">
            <label class="form-label">Fecha</label>
            <input class="form-input" value="${fmtDate(inv.date)}" readonly />
          </div>
          <div class="form-field">
            <label class="form-label">Vencimiento</label>
            <input class="form-input" id="sup-d-expire" value="${fmtDate(inv.expireDate)}" readonly />
          </div>
        </div>
        ${inv.notePublic ? `
        <div class="form-field" style="margin-top:.5rem">
          <label class="form-label">Nota pública</label>
          <textarea class="form-input" id="sup-d-note" readonly rows="2" style="resize:none">${escHtml(inv.notePublic)}</textarea>
        </div>` : ''}
      </div>

      <!-- Actions -->
      <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin:1rem 0 1.5rem">
        ${isDraft ? `<button class="btn-submit-compact" id="sup-btn-validate">Validar factura</button>` : ''}
        ${isUnpaid ? `<button class="btn-submit-compact" id="sup-btn-paid" style="background:var(--success);color:#fff">Marcar como pagada</button>` : ''}
        ${inv.status === 'paid' || isUnpaid ? `<button class="btn-cancel-compact" id="sup-btn-draft">Volver a borrador</button>` : ''}
        ${isDraft ? `<button class="btn-cancel-compact" id="sup-btn-edit">Editar</button>` : ''}
        ${isDraft ? `<button class="btn-cancel-compact" id="sup-btn-delete" style="color:var(--danger)">Eliminar</button>` : ''}
      </div>

      <!-- Lines -->
      <h3 class="lines-section-title">Líneas de Factura</h3>
      <div class="invoice-lines-table-wrap">
        <table class="invoice-lines-table">
          <thead>
            <tr>
              <th>Descripción</th>
              <th class="text-right">Cant.</th>
              <th class="text-right">P. Unit.</th>
              <th class="text-right">IVA %</th>
              <th class="text-right">Total</th>
              ${isDraft ? '<th></th>' : ''}
            </tr>
          </thead>
          <tbody id="sup-lines-tbody">
            ${lines.length === 0
              ? `<tr><td colspan="${isDraft ? 6 : 5}" class="no-lines">Sin líneas</td></tr>`
              : lines.map(l => `
                <tr data-line-id="${l.id}">
                  <td>${escHtml(l.description || '—')}</td>
                  <td class="text-right">${l.quantity}</td>
                  <td class="text-right">${fmt(l.unitPrice)}</td>
                  <td class="text-right">${l.taxRate}%</td>
                  <td class="text-right amount-positive">${fmt(l.total)}</td>
                  ${isDraft ? `<td style="white-space:nowrap">
                    <button class="btn-action" data-edit-line="${l.id}" title="Editar">${icons.eye}</button>
                    <button class="btn-action" data-del-line="${l.id}" title="Eliminar" style="color:var(--danger)">${icons.close}</button>
                  </td>` : ''}
                </tr>
              `).join('')}
          </tbody>
        </table>
      </div>
      ${isDraft ? `
        <div id="sup-add-line-form" style="margin-top:0.75rem;display:none">
          <div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center">
            <input type="text" id="nl-desc" placeholder="Descripción *" style="flex:2;min-width:140px;padding:0.4rem 0.5rem;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-primary);color:var(--text-primary)" />
            <input type="number" id="nl-qty" placeholder="Cant." value="1" min="0.01" step="0.01" style="width:70px;padding:0.4rem 0.5rem;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-primary);color:var(--text-primary)" />
            <input type="number" id="nl-price" placeholder="P.Unit." min="0" step="0.01" style="width:90px;padding:0.4rem 0.5rem;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-primary);color:var(--text-primary)" />
            <input type="number" id="nl-tax" placeholder="IVA%" value="21" min="0" max="100" step="0.01" style="width:70px;padding:0.4rem 0.5rem;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-primary);color:var(--text-primary)" />
            <button type="button" class="btn-submit-compact" id="nl-save">Añadir</button>
            <button type="button" class="btn-cancel-compact" id="nl-cancel">Cancelar</button>
          </div>
        </div>
        <button type="button" class="btn-add-compact" id="sup-show-add-line" style="margin-top:0.5rem">+ Añadir línea</button>
      ` : ''}

      <!-- Totals -->
      <div class="invoice-totals">
        ${inv.totalHt  != null ? `<div class="total-row subtotal"><span>Base imponible:</span><strong>${fmt(inv.totalHt)}</strong></div>` : ''}
        ${inv.totalTax != null ? `<div class="total-row subtotal"><span>IVA soportado:</span><strong>${fmt(inv.totalTax)}</strong></div>` : ''}
        <div class="total-row"><span>Total:</span><strong class="amount-positive">${fmt(inv.total)}</strong></div>
        ${inv.status === 'paid' ? `
          <div class="total-row total-row--highlight total-row--highlight-paid">
            <span>Pagado:</span><strong>${fmt(inv.total || 0)}</strong>
          </div>` : `
          <div class="total-row total-row--highlight total-row--highlight-pending">
            <span>Pendiente:</span><strong>${fmt(Math.max(0, inv.remainToPay || 0))}</strong>
          </div>`}
      </div>

      <!-- Payments -->
      <h3 class="lines-section-title" style="margin-top:1.5rem">Pagos</h3>
      <div class="invoice-lines-table-wrap">
        <table class="invoice-lines-table">
          <thead>
            <tr>
              <th>Fecha</th>
              <th>Referencia</th>
              <th>Tipo</th>
              <th class="text-right">Importe</th>
            </tr>
          </thead>
          <tbody id="sup-payments-tbody">
            ${payments.length === 0
              ? `<tr><td colspan="4" class="no-lines">Sin pagos registrados</td></tr>`
              : payments.map(p => `
                <tr>
                  <td>${p.paymentDate ? new Date(p.paymentDate).toLocaleDateString('es-ES') : '—'}</td>
                  <td>${escHtml(p.ref || '—')}</td>
                  <td>${escHtml(p.type || '—')}</td>
                  <td class="text-right amount-paid">${fmt(p.amount)}</td>
                </tr>
              `).join('')}
          </tbody>
        </table>
      </div>
      ${isUnpaid ? `
        <div id="sup-pay-form" style="margin-top:1rem;display:none">
          <div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center">
            <input type="date" id="pay-date" style="padding:0.4rem 0.5rem;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-primary);color:var(--text-primary)" />
            <input type="number" id="pay-amount" placeholder="Importe (vacío=total)" min="0.01" step="0.01" style="width:130px;padding:0.4rem 0.5rem;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-primary);color:var(--text-primary)" />
            <select id="pay-type" style="padding:0.4rem 0.5rem;border:1px solid var(--border-color);border-radius:5px;background:var(--card-bg);color:var(--text-primary)">
              ${paymentTypes.length
                ? paymentTypes.map(t => `<option value="${t.id}">${escHtml(t.label || t.code || t.id)}</option>`).join('')
                : `<option value="6">Transferencia</option><option value="4">Cheque</option><option value="7">Efectivo</option>`}
            </select>
            <button type="button" class="btn-submit-compact" id="pay-save">Registrar pago</button>
            <button type="button" class="btn-cancel-compact" id="pay-cancel">Cancelar</button>
          </div>
        </div>
        <button type="button" class="btn-add-compact" id="sup-show-pay-form" style="margin-top:0.5rem">+ Registrar pago</button>
      ` : ''}
    `;

    // Wire up status buttons
    detailBody.querySelector('#sup-btn-validate')?.addEventListener('click', () => changeStatus('unpaid'));
    detailBody.querySelector('#sup-btn-paid')?.addEventListener('click', () => changeStatus('paid'));
    detailBody.querySelector('#sup-btn-draft')?.addEventListener('click', () => changeStatus('draft'));
    detailBody.querySelector('#sup-btn-delete')?.addEventListener('click', handleDelete);
    detailBody.querySelector('#sup-btn-edit')?.addEventListener('click', () => renderEditForm(inv));

    // Wire up line actions
    detailBody.querySelectorAll('[data-del-line]').forEach(btn => {
      btn.addEventListener('click', () => handleDeleteLine(parseInt(btn.dataset.delLine)));
    });
    detailBody.querySelectorAll('[data-edit-line]').forEach(btn => {
      btn.addEventListener('click', () => openEditLineForm(parseInt(btn.dataset.editLine), inv));
    });

    // Add line form
    const showAddLine = detailBody.querySelector('#sup-show-add-line');
    const addLineForm = detailBody.querySelector('#sup-add-line-form');
    showAddLine?.addEventListener('click', () => {
      addLineForm.style.display = 'flex';
      showAddLine.style.display = 'none';
      detailBody.querySelector('#nl-desc').focus();
    });
    detailBody.querySelector('#nl-cancel')?.addEventListener('click', () => {
      addLineForm.style.display = 'none';
      showAddLine.style.display = '';
    });
    detailBody.querySelector('#nl-save')?.addEventListener('click', handleAddLine);

    // Payment form
    const showPayForm = detailBody.querySelector('#sup-show-pay-form');
    const payForm = detailBody.querySelector('#sup-pay-form');
    showPayForm?.addEventListener('click', () => {
      payForm.style.display = 'flex';
      showPayForm.style.display = 'none';
      const dateInput = detailBody.querySelector('#pay-date');
      if (dateInput) dateInput.value = new Date().toISOString().split('T')[0];
    });
    detailBody.querySelector('#pay-cancel')?.addEventListener('click', () => {
      payForm.style.display = 'none';
      showPayForm.style.display = '';
    });
    detailBody.querySelector('#pay-save')?.addEventListener('click', handleAddPayment);
  }

  function renderEditForm(inv) {
    const editSection = detailBody.querySelector('#sup-detail-info');
    if (!editSection) return;

    const actionsBar = detailBody.querySelector('div[style*="flex-wrap"]');

    // Replace info grid with edit form
    const form = document.createElement('form');
    form.id = 'sup-edit-form';
    form.innerHTML = /*html*/`
      <div class="invoice-detail-grid" style="margin-bottom:1rem">
        <div class="form-field-compact">
          <label>Ref. proveedor</label>
          <input type="text" id="ed-ref" value="${escHtml(inv.supplierRef || '')}"
            style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary)" />
        </div>
        <div class="form-field-compact">
          <label>Vencimiento</label>
          <input type="date" id="ed-expire" value="${fmtDateInput(inv.expireDate)}"
            style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary)" />
        </div>
        <div class="form-field-compact full-width" style="grid-column:1/-1">
          <label>Nota pública</label>
          <input type="text" id="ed-note" value="${escHtml(inv.notePublic || '')}"
            style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);color:var(--text-primary)" />
        </div>
      </div>
      <div class="form-actions-compact">
        <button type="button" class="btn-cancel-compact" id="ed-cancel">Cancelar</button>
        <button type="submit" class="btn-submit-compact" id="ed-save">Guardar cambios</button>
      </div>
    `;

    detailBody.querySelector('#sup-detail-info').replaceWith(form);
    if (actionsBar) actionsBar.style.display = 'none';

    form.querySelector('#ed-cancel').addEventListener('click', () => renderDetail(inv));
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const saveBtn = form.querySelector('#ed-save');
      saveBtn.disabled = true;
      saveBtn.textContent = 'Guardando...';
      try {
        await updateSupplierInvoice(inv.id, {
          supplierRef: form.querySelector('#ed-ref').value.trim() || undefined,
          expireDate: form.querySelector('#ed-expire').value || undefined,
          notePublic: form.querySelector('#ed-note').value.trim() || undefined,
        });
        showToast('Factura actualizada', 'success');
        await refreshDetail();
      } catch (err) {
        showToast(`Error: ${err.message}`, 'error');
        saveBtn.disabled = false;
        saveBtn.textContent = 'Guardar cambios';
      }
    });
  }

  async function changeStatus(status) {
    try {
      await changeSupplierInvoiceStatus(currentInvoice.id, status);
      showToast(`Estado actualizado a ${STATUS_TEXT[status] || status}`, 'success');
      await refreshDetail();
    } catch (err) {
      showToast(`Error: ${err.message}`, 'error');
    }
  }

  async function handleDelete() {
    if (!confirm(`¿Eliminar la factura ${currentInvoice?.number}? Esta acción no se puede deshacer.`)) return;
    try {
      await deleteSupplierInvoice(currentInvoice.id);
      showToast('Factura eliminada', 'success');
      closeDetail();
      allInvoices = allInvoices.filter(i => i.id !== currentInvoice.id);
      applyFilters();
    } catch (err) {
      showToast(`Error: ${err.message}`, 'error');
    }
  }

  async function handleAddLine() {
    const desc = detailBody.querySelector('#nl-desc').value.trim();
    const qty = parseFloat(detailBody.querySelector('#nl-qty').value) || 1;
    const price = parseFloat(detailBody.querySelector('#nl-price').value) || 0;
    const tax = parseFloat(detailBody.querySelector('#nl-tax').value) || 0;
    if (!desc) { showToast('La descripción es obligatoria', 'error'); return; }
    const saveBtn = detailBody.querySelector('#nl-save');
    saveBtn.disabled = true;
    try {
      await addSupplierInvoiceLine(currentInvoice.id, {
        description: desc, quantity: qty, unitPrice: price, taxRate: tax
      });
      showToast('Línea añadida', 'success');
      await refreshDetail();
    } catch (err) {
      showToast(`Error: ${err.message}`, 'error');
      saveBtn.disabled = false;
    }
  }

  function openEditLineForm(lineId, inv) {
    const line = inv.lines?.find(l => l.id === lineId);
    if (!line) return;
    const row = detailBody.querySelector(`[data-line-id="${lineId}"]`);
    if (!row) return;

    row.innerHTML = /*html*/`
      <td><input type="text" value="${escHtml(line.description || '')}" class="el-desc" style="width:100%;padding:0.3rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary)" /></td>
      <td><input type="number" value="${line.quantity}" class="el-qty" min="0.01" step="0.01" style="width:70px;padding:0.3rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary)" /></td>
      <td><input type="number" value="${line.unitPrice}" class="el-price" min="0" step="0.01" style="width:90px;padding:0.3rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary)" /></td>
      <td><input type="number" value="${line.taxRate}" class="el-tax" min="0" max="100" step="0.01" style="width:70px;padding:0.3rem;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary);color:var(--text-primary)" /></td>
      <td></td>
      <td style="white-space:nowrap">
        <button class="btn-submit-compact el-save" style="padding:0.25rem 0.5rem;font-size:0.8rem">OK</button>
        <button class="btn-cancel-compact el-cancel" style="padding:0.25rem 0.5rem;font-size:0.8rem">✕</button>
      </td>
    `;

    row.querySelector('.el-cancel').addEventListener('click', () => renderDetail(inv));
    row.querySelector('.el-save').addEventListener('click', async () => {
      const btn = row.querySelector('.el-save');
      btn.disabled = true;
      try {
        await updateSupplierInvoiceLine(currentInvoice.id, lineId, {
          description: row.querySelector('.el-desc').value.trim() || undefined,
          quantity: parseFloat(row.querySelector('.el-qty').value) || undefined,
          unitPrice: parseFloat(row.querySelector('.el-price').value) || undefined,
          taxRate: parseFloat(row.querySelector('.el-tax').value) ?? undefined,
        });
        showToast('Línea actualizada', 'success');
        await refreshDetail();
      } catch (err) {
        showToast(`Error: ${err.message}`, 'error');
        btn.disabled = false;
      }
    });
  }

  async function handleDeleteLine(lineId) {
    if (!confirm('¿Eliminar esta línea?')) return;
    try {
      await deleteSupplierInvoiceLine(currentInvoice.id, lineId);
      showToast('Línea eliminada', 'success');
      await refreshDetail();
    } catch (err) {
      showToast(`Error: ${err.message}`, 'error');
    }
  }

  async function handleAddPayment() {
    const date = detailBody.querySelector('#pay-date').value;
    const amountRaw = detailBody.querySelector('#pay-amount').value;
    const paymentModeId = parseInt(detailBody.querySelector('#pay-type').value) || 6;
    if (!date) { showToast('Selecciona una fecha de pago', 'error'); return; }
    const saveBtn = detailBody.querySelector('#pay-save');
    saveBtn.disabled = true;
    try {
      await addSupplierInvoicePayment(currentInvoice.id, {
        paymentDate: date,
        amount: amountRaw ? parseFloat(amountRaw) : undefined,
        paymentModeId,
        closePaidInvoices: 'yes',
        accountId: 1,
      });
      showToast('Pago registrado', 'success');
      await refreshDetail();
    } catch (err) {
      showToast(`Error: ${err.message}`, 'error');
      saveBtn.disabled = false;
    }
  }

  function closeDetail() {
    detailView?.remove();
    detailView = detailBody = detailTitle = null;
    currentInvoice = null;
  }

  async function load() {
    try {
      allInvoices = await getSupplierInvoices({ limit: 200 });
      applyFilters();
    } catch (err) {
      tbody.innerHTML = `<tr><td colspan="7" class="facturas-empty">Error al cargar: ${escHtml(err.message)}</td></tr>`;
      showToast('Error al cargar facturas de proveedores', 'error');
    }
  }

  searchInput.addEventListener('input', () => { searchTerm = searchInput.value; applyFilters(); });
  filterSelect.addEventListener('change', () => { currentFilter = filterSelect.value; applyFilters(); });

  // ===== CREAR FACTURA =====
  const createView = container.querySelector('#sup-create-view');
  const listEls = [
    container.querySelector('.facturas-header'),
    container.querySelector('.facturas-filters'),
    container.querySelector('#sup-summary'),
    container.querySelector('.invoices-table-container'),
  ];

  function showListView() {
    detailView.style.display = 'none';
    createView.style.display = 'none';
    listEls.forEach(el => { if (el) el.style.display = ''; });
  }
  const supplierSelect = container.querySelector('#sup-supplier-select');
  const linesContainer = container.querySelector('#sup-lines-container');
  let lineCount = 0;

  function createSupplierLine() {
    lineCount++;
    const row = document.createElement('div');
    row.className = 'line-row-compact';
    row.innerHTML = `
      <input type="text" class="line-desc-compact" required placeholder="Descripción" />
      <input type="number" class="line-qty-compact" required min="0.01" step="0.01" value="1" placeholder="Cant" />
      <input type="number" class="line-price-compact" required min="0" step="0.01" placeholder="Precio" />
      <input type="number" class="line-tax-compact" required min="0" max="100" step="0.01" value="21" placeholder="IVA %" />
      <div class="line-total-compact">0.00 €</div>
      <button type="button" class="btn-delete-compact">×</button>
    `;
    const qty   = row.querySelector('.line-qty-compact');
    const price = row.querySelector('.line-price-compact');
    const tax   = row.querySelector('.line-tax-compact');
    const total = row.querySelector('.line-total-compact');
    const updateTotal = () => {
      const t = (parseFloat(qty.value) || 0) * (parseFloat(price.value) || 0) * (1 + (parseFloat(tax.value) || 0) / 100);
      total.textContent = `${t.toFixed(2)} €`;
    };
    qty.addEventListener('input', updateTotal);
    price.addEventListener('input', updateTotal);
    tax.addEventListener('input', updateTotal);
    row.querySelector('.btn-delete-compact').addEventListener('click', () => {
      row.remove();
      if (linesContainer.children.length === 0) linesContainer.appendChild(createSupplierLine());
    });
    return row;
  }

  function showCreateView() {
    listEls.forEach(el => { if (el) el.style.display = 'none'; });
    createView.style.display = 'block';
    linesContainer.innerHTML = '';
    lineCount = 0;
    container.querySelector('#sup-ref-supplier').value = '';
    container.querySelector('#sup-date').value = new Date().toISOString().split('T')[0];
    container.querySelector('#sup-expire').value = '';
    container.querySelector('#sup-note-public').value = '';
    linesContainer.appendChild(createSupplierLine());
  }

  container.querySelectorAll('.date-picker-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const input = container.querySelector(`#${btn.dataset.target}`);
      if (input) input.showPicker?.();
    });
  });

  function closeCreate() {
    showListView();
  }

  async function loadSuppliers() {
    try {
      const clients = await apiGet('/api/Clients?limit=500&supplier=true');
      supplierSelect.innerHTML = '<option value="">Seleccionar proveedor...</option>';
      clients.forEach(c => {
        const opt = document.createElement('option');
        opt.value = c.id;
        opt.textContent = c.name;
        supplierSelect.appendChild(opt);
      });
    } catch {
      supplierSelect.innerHTML = '<option value="">Error al cargar</option>';
    }
  }

  container.querySelector('#btn-new-sup').addEventListener('click', () => {
    showCreateView();
    loadSuppliers();
  });
  container.querySelector('#sup-create-close').addEventListener('click', closeCreate);
  container.querySelector('#sup-create-cancel').addEventListener('click', closeCreate);
  container.querySelector('#sup-add-line').addEventListener('click', () => linesContainer.appendChild(createSupplierLine()));

  container.querySelector('#sup-create-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const submitBtn = container.querySelector('#sup-create-submit');
    const supplierId = parseInt(supplierSelect.value);
    if (!supplierId) { showToast('Selecciona un proveedor', 'error'); return; }

    const lines = [...linesContainer.querySelectorAll('.line-row-compact')].map(row => ({
      description: row.querySelector('.line-desc-compact').value.trim(),
      quantity: parseFloat(row.querySelector('.line-qty-compact').value) || 1,
      unitPrice: parseFloat(row.querySelector('.line-price-compact').value) || 0,
      taxRate: parseFloat(row.querySelector('.line-tax-compact').value) || 0,
    }));

    if (lines.some(l => !l.description)) { showToast('Rellena la descripción de todas las líneas', 'error'); return; }

    submitBtn.disabled = true;
    submitBtn.textContent = 'Creando...';

    try {
      await createSupplierInvoice({
        supplierId,
        supplierRef: container.querySelector('#sup-ref-supplier').value.trim(),
        date: container.querySelector('#sup-date').value,
        expireDate: container.querySelector('#sup-expire').value || null,
        notePublic: container.querySelector('#sup-note-public').value.trim() || null,
        lines
      });
      showToast('Factura de proveedor creada', 'success');
      showListView();
      allInvoices = await getSupplierInvoices({ limit: 200 });
      applyFilters();
    } catch (err) {
      showToast(`Error: ${err.message}`, 'error');
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = 'Crear factura';
    }
  });

  load().then(() => {
    const pendingId = window.__openSupplierInvoice;
    if (pendingId) {
      window.__openSupplierInvoice = null;
      openDetail(pendingId);
    }
  });

  return container;
}
