// ============================================================================
// COMPONENT: WhatsAppModal.jsx
// Generador y formateador de resumen financiero listo para enviar por WhatsApp
// ============================================================================

const { useState, useEffect } = React;

function WhatsAppModal({ isOpen, onClose }) {
  const { settings, showToast } = window.useFinance();
  const [dashboardData, setDashboardData] = useState(null);
  const [customNotes, setCustomNotes] = useState('Favor verificar y confirmar para la liquidación correspondiente.');
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (isOpen) {
      window.Api.getDashboard().then(data => {
        setDashboardData(data);
      }).catch(console.error);
    }
  }, [isOpen]);

  if (!isOpen) return null;

  const contractor = settings?.contractor_name || 'Alan Collins Bazzano Pinheiro';
  const studentId = settings?.student_id || 'RA-20240982';
  const institution = settings?.institution_name || 'Universidad Columbia del Paraguay - Filial PJC';
  const currentDate = new Date().toLocaleDateString('es-PY', { day: '2-digit', month: '2-digit', year: 'numeric' });

  const totals = dashboardData?.totals || {
    total_credits: 79470000,
    total_debits: 25922000,
    total_received: 24590000,
    netBalance: 28958000
  };

  const fmt = (v) => window.formatCurrencyPYG ? window.formatCurrencyPYG(v) : `G$ ${v}`;

  // Construye el mensaje de WhatsApp formateado
  const messageText = `🏛️ *ESTADO DE CUENTA Y RENDICIÓN DE SERVICIOS*
🏢 *Institución:* ${institution}
👤 *Prestador:* ${contractor} (${studentId})
📅 *Fecha de emisión:* ${currentDate}
━━━━━━━━━━━━━━━━━━━━━━
🎬 *Total Servicios Prestados:* ${fmt(totals.total_credits)}
🎓 *Cuotas Universitarias:* - ${fmt(totals.total_debits)}
💵 *Pagos Recibidos en Mano:* - ${fmt(totals.total_received)}
━━━━━━━━━━━━━━━━━━━━━━
💰 *SALDO NETO PENDIENTE A FAVOR:* *${fmt(totals.netBalance)}*
━━━━━━━━━━━━━━━━━━━━━━
${customNotes ? `💬 *Nota:* ${customNotes}\n━━━━━━━━━━━━━━━━━━━━━━\n` : ''}📌 *Generado desde el Sistema Columbia Pagos.*`;

  const handleCopy = () => {
    if (navigator.clipboard) {
      navigator.clipboard.writeText(messageText);
      setCopied(true);
      showToast('¡Texto copiado al portapapeles!');
      setTimeout(() => setCopied(false), 2500);
    }
  };

  const handleOpenWhatsApp = () => {
    const encoded = encodeURIComponent(messageText);
    window.open(`https://api.whatsapp.com/send?text=${encoded}`, '_blank');
  };

  return (
    <div className="modal-backdrop open flex items-center justify-center p-4 z-50">
      <div className="modal w-full bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-2xl overflow-hidden" style={{ maxWidth: '580px' }}>
        {/* CABECERA */}
        <div className="p-4 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-full bg-emerald-600 text-white flex items-center justify-center text-base">
              💬
            </div>
            <div>
              <h3 className="font-bold text-sm text-zinc-950 dark:text-white">Resumen para WhatsApp</h3>
              <p className="text-xs text-zinc-500">Envío directo de balance a Tesorería o Dirección</p>
            </div>
          </div>
          <button 
            type="button" 
            className="w-7 h-7 rounded-md border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-500 flex items-center justify-center font-bold text-sm"
            onClick={onClose}
          >
            ✕
          </button>
        </div>

        {/* CUERPO DEL MODAL */}
        <div className="p-5 space-y-4">
          {/* PREVIEW EN BURBUJA DE WHATSAPP */}
          <div className="bg-[#e5ddd5] dark:bg-zinc-950/80 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800">
            <div className="bg-white dark:bg-[#1f2c34] p-3.5 rounded-lg shadow-xs text-xs font-sans whitespace-pre-wrap leading-relaxed text-zinc-900 dark:text-zinc-100 border-l-4 border-emerald-500">
              {messageText}
            </div>
          </div>

          {/* NOTA PERSONALIZADA OPCIONAL */}
          <div className="space-y-1">
            <label className="text-xs font-semibold text-zinc-700 dark:text-zinc-300">Mensaje adicional o nota final (Opcional):</label>
            <input
              type="text"
              className="w-full text-xs px-3 py-2 rounded-md border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-emerald-500"
              value={customNotes}
              onChange={(e) => setCustomNotes(e.target.value)}
              placeholder="Ej: Favor verificar para el pago de la diferencia..."
            />
          </div>
        </div>

        {/* PIE CON ACCIONES */}
        <div className="p-4 border-t border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 flex items-center justify-between gap-2">
          <button
            type="button"
            className="text-xs px-3 py-2 rounded-md border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800"
            onClick={onClose}
          >
            Cerrar
          </button>

          <div className="flex items-center gap-2">
            <button
              type="button"
              className="text-xs px-3.5 py-2 rounded-md border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white font-medium hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-1.5 transition-all"
              onClick={handleCopy}
            >
              <span>{copied ? '✓ Copiado' : '📋 Copiar Texto'}</span>
            </button>

            <button
              type="button"
              className="text-xs px-4 py-2 rounded-md bg-emerald-600 hover:bg-emerald-700 text-white font-semibold flex items-center gap-1.5 shadow-xs transition-colors cursor-pointer"
              onClick={handleOpenWhatsApp}
            >
              <span>Abrir en WhatsApp</span>
              <span>↗</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.WhatsAppModal = WhatsAppModal;