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

export type VentanaRecordatorio = '3d' | '1d' | '0d';

export interface RecordatorioProximoData {
  /** Título del recordatorio. */
  titulo: string;
  /** Descripción opcional. */
  descripcion?: string | null;
  /** Notas opcionales. */
  notas?: string | null;
  /** Fecha límite (YYYY-MM-DD). */
  fechaLimite: string;
  /** Ventana de aviso: 3d / 1d / 0d. */
  ventana: VentanaRecordatorio;
  /** Nombre del despacho. */
  despachoNombre: string;
  /** URL al calendario. */
  link: string;
}

const VENTANA_LABEL: Record<VentanaRecordatorio, { titulo: string; subtitulo: string; color: string }> = {
  '3d': { titulo: 'Recordatorio en 3 días', subtitulo: 'Tienes 3 días para atender este pendiente.', color: '#3B82F6' },
  '1d': { titulo: 'Recordatorio mañana', subtitulo: 'Esto vence mañana — prepara la documentación con tiempo.', color: '#F59E0B' },
  '0d': { titulo: 'Recordatorio HOY', subtitulo: 'Vence hoy. Revisa y atiende cuanto antes.', color: '#EF4444' },
};

export function recordatorioProximoEmail(data: RecordatorioProximoData): string {
  const v = VENTANA_LABEL[data.ventana];
  const fechaFormateada = formatFecha(data.fechaLimite);

  return baseTemplate(`
    ${heading(v.titulo)}
    <p style="color:${C.textPrimary};margin:0 0 16px;">${escapeHtml(v.subtitulo)}</p>
    ${infoBox(`
      <p style="margin:0 0 6px;color:${C.textMuted};font-size:13px;">Recordatorio</p>
      <p style="margin:0 0 12px;color:${C.textPrimary};font-weight:600;">${escapeHtml(data.titulo)}</p>
      <p style="margin:0 0 6px;color:${C.textMuted};font-size:13px;">Fecha límite</p>
      <p style="margin:0 0 12px;color:${v.color};font-weight:600;">${escapeHtml(fechaFormateada)}</p>
      ${data.descripcion ? `
        <p style="margin:0 0 6px;color:${C.textMuted};font-size:13px;">Descripción</p>
        <p style="margin:0 0 12px;color:${C.textPrimary};">${escapeHtml(data.descripcion)}</p>
      ` : ''}
      ${data.notas ? `
        <p style="margin:0 0 6px;color:${C.textMuted};font-size:13px;">Notas</p>
        <p style="margin:0 0 12px;color:${C.textPrimary};">${escapeHtml(data.notas)}</p>
      ` : ''}
      <p style="margin:0 0 6px;color:${C.textMuted};font-size:13px;">Despacho</p>
      <p style="margin:0;color:${C.textPrimary};">${escapeHtml(data.despachoNombre)}</p>
    `)}
    <div style="margin-top:24px;">
      ${primaryButton('Ver en el calendario', data.link)}
    </div>
  `);
}

function formatFecha(fecha: string): string {
  const [y, m, d] = fecha.split('-').map(Number);
  if (!y || !m || !d) return fecha;
  const dt = new Date(y, m - 1, d);
  return dt.toLocaleDateString('es-MX', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
}

function escapeHtml(s: string): string {
  return s.replace(/[&<>"']/g, (ch) => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
  })[ch]!);
}
