/**
 * Formatea el texto de advertencia de sincronización de propuestas comerciales
 * en un diseño HTML legible, profesional y visualmente ordenado para SweetAlert2.
 */
export const formatAdvertenciaPropuestasHtml = (rawText: string): string => {
  if (!rawText) return '';

  const lines = rawText.split('\n').map(l => l.trim()).filter(Boolean);

  const sectionsHtml = lines.map((line) => {
    // Buscar referencias dentro de (Ref. Propuesta: ...) o (Propuestas CUPs: ...)
    const refMatch = line.match(/\((?:Ref\.\s*Propuestas?|Propuestas\s*CUPs?):\s*([^)]+)\)/i);
    let referencias: string[] = [];
    let mainText = line;
    let postText = 'Los valores anteriores quedaron en Histórico.';

    if (refMatch) {
      referencias = refMatch[1].split(',').map((r) => r.trim()).filter(Boolean);
      const parts = line.split(refMatch[0]);
      mainText = parts[0]?.trim() || line;
      if (parts[1] && parts[1].trim().length > 0) {
        postText = parts[1].trim();
      }
    }

    const badgesHtml = referencias.length > 0
      ? `<div style="margin-top: 10px; margin-bottom: 8px;">
          <div style="font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; margin-bottom: 6px;">
            📋 Propuestas comerciales afectadas (${referencias.length}):
          </div>
          <div style="display: flex; flex-wrap: wrap; gap: 6px; max-height: 140px; overflow-y: auto; padding: 6px; background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0;">
            ${referencias.map(ref => `
              <span style="display: inline-flex; align-items: center; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; padding: 3px 8px; border-radius: 4px; font-size: 0.785rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 600;">
                # ${ref}
              </span>
            `).join('')}
          </div>
        </div>`
      : '';

    return `
      <div style="background: #ffffff; border: 1px solid #fed7aa; border-left: 4px solid #f97316; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
        <p style="margin: 0; color: #1e293b; font-size: 0.85rem; font-weight: 600; line-height: 1.45;">
          ${mainText}
        </p>
        ${badgesHtml}
        <div style="display: flex; align-items: center; gap: 6px; font-size: 0.785rem; color: #047857; font-weight: 500; background: #ecfdf5; padding: 5px 10px; border-radius: 6px; border: 1px solid #a7f3d0; margin-top: 6px;">
          <span>📁</span>
          <span>${postText}</span>
        </div>
      </div>
    `;
  }).join('');

  return `
    <div style="text-align: left; font-family: system-ui, -apple-system, sans-serif; line-height: 1.4;">
      <p style="color: #64748b; font-size: 0.8125rem; margin-bottom: 10px;">
        Se actualizaron los datos en propuestas comerciales en estado no tramitado asociadas a este suministro:
      </p>
      ${sectionsHtml}
    </div>
  `;
};