import { baseTemplate, heading, BRAND_COLORS as C } from './base.js';

function escapeHtml(str: string): string {
  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

function row(label: string, value: string, isLast = false) {
  const border = isLast ? '' : `border-bottom:1px solid ${C.border};`;
  return `<tr>
    <td style="padding:10px 16px;${border}font-weight:500;color:${C.textMuted};width:40%;font-size:13px;">${label}</td>
    <td style="padding:10px 16px;${border}color:${C.textPrimary};font-size:14px;">${value}</td>
  </tr>`;
}

export function primerPagoFacturarEmail(data: {
  clienteNombre: string;
  clienteRfc: string;
  amount: number;
  plan: string;
  paymentDate: string;
  paymentId: string;
}): string {
  const formattedAmount = new Intl.NumberFormat('es-MX', {
    style: 'currency',
    currency: 'MXN',
  }).format(data.amount);

  return baseTemplate(`
    ${heading('Primer pago aprobado — factura pendiente')}
    <p style="color:${C.textPrimary};margin:0 0 24px;">
      El cliente <strong>${escapeHtml(data.clienteNombre)}</strong> realizó su primer pago exitosamente.
      Como es el primer pago, la factura <strong>debe emitirse manualmente</strong>.
    </p>

    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:24px;border:1px solid ${C.border};border-radius:8px;overflow:hidden;">
      ${row('Cliente', `<strong>${escapeHtml(data.clienteNombre)}</strong>`)}
      ${row('RFC', `<span style="font-family:monospace;">${escapeHtml(data.clienteRfc)}</span>`)}
      ${row('Plan', escapeHtml(data.plan))}
      ${row('Monto', `<strong>${formattedAmount}</strong>`)}
      ${row('Fecha de pago', data.paymentDate, true)}
    </table>

    <div style="text-align:center;margin:24px 0;">
      <a href="https://horuxfin.com/admin/facturas-pendientes" style="display:inline-block;background-color:${C.primary};color:#ffffff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;">
        Ver facturas pendientes
      </a>
    </div>

    <div style="background-color:#fef9c3;border-left:4px solid #eab308;border-radius:8px;padding:12px 16px;margin:0 0 16px;">
      <p style="margin:0;color:#854d0e;font-size:13px;">
        <strong>ℹ️ Nota:</strong> Los pagos subsecuentes se facturarán automáticamente. Solo el primer pago requiere emisión manual.
      </p>
    </div>
  `);
}
