import { escapeHtml } from '../utils/escapeHtml.js';

export function InvoiceItem(invoice, onView) {
  const item = document.createElement('tr');
  item.className = 'invoice-item';

  // Formatear fecha
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('es-ES');
  };

  // Formatear moneda
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('es-ES', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount);
  };

  // Obtener clase de estado
  const getStatusClass = (status) => {
    const statusMap = {
      'draft': 'status-draft',
      'validated': 'status-validated',
      'paid': 'status-paid',
      'unpaid': 'status-unpaid',
      'canceled': 'status-canceled'
    };
    return statusMap[status] || 'status-default';
  };

  // Obtener texto de estado
  const getStatusText = (status) => {
    const statusTextMap = {
      'draft': 'Borrador',
      'validated': 'Validada',
      'paid': 'Pagada',
      'unpaid': 'Impagada',
      'canceled': 'Cancelada'
    };
    return statusTextMap[status] || status;
  };

  item.innerHTML = /*html*/`
    <td class="invoice-number">${escapeHtml(invoice.number)}</td>
    <td class="invoice-status">
      <span class="status-badge ${getStatusClass(invoice.status)}" role="status">
        ${getStatusText(invoice.status)}
      </span>
    </td>
    <td class="invoice-client">
      <span class="client-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>
      ${escapeHtml(invoice.clientName || 'Sin nombre')}
    </td>
    <td class="invoice-date">${formatDate(invoice.date)}</td>
    <td class="invoice-total">${formatCurrency(invoice.total)}</td>
    <td class="invoice-remain">${formatCurrency(invoice.remainToPay)}</td>
    <td class="invoice-actions">
      <button class="btn-action btn-view" data-invoice-id="${invoice.id}" title="Ver/Editar detalles" aria-label="Ver detalles de factura ${escapeHtml(invoice.number)}">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
      </button>
    </td>
  `;

  // Event listener para el botón de ver
  const viewBtn = item.querySelector('.btn-view');
  viewBtn.addEventListener('click', () => {
    if (onView) {
      onView(invoice.id);
    }
  });

  return item;
}