import React, { useState, useEffect } from "react";
import { EmailGatewayDispatchedRecord } from "../services/emailGatewayService";
import { Mail, CheckCircle2, Clock, ExternalLink, X } from "lucide-react";

interface EmailDispatchToastProps {
  onOpenModal: (selectedEmailId?: string) => void;
}

export const EmailDispatchToast: React.FC<EmailDispatchToastProps> = ({ onOpenModal }) => {
  const [activeToast, setActiveToast] = useState<EmailGatewayDispatchedRecord | null>(null);

  useEffect(() => {
    const handleEmailDispatched = (event: Event) => {
      const customEvent = event as CustomEvent<EmailGatewayDispatchedRecord>;
      if (customEvent.detail) {
        setActiveToast(customEvent.detail);
        // Auto hide after 7 seconds
        const timer = setTimeout(() => {
          setActiveToast(null);
        }, 7000);
        return () => clearTimeout(timer);
      }
    };

    window.addEventListener("ems_email_dispatched", handleEmailDispatched);
    return () => window.removeEventListener("ems_email_dispatched", handleEmailDispatched);
  }, []);

  if (!activeToast) return null;

  return (
    <div className="fixed bottom-6 right-6 z-50 animate-in slide-in-from-bottom-5 duration-300">
      <div className="bg-slate-900/95 border-2 border-sky-500/80 rounded-xl shadow-2xl p-4 max-w-md text-white backdrop-blur-md flex items-start gap-3.5">
        <div className="p-2.5 bg-sky-500/20 text-sky-400 rounded-lg border border-sky-500/40 shrink-0 mt-0.5 animate-pulse">
          <Mail className="w-5 h-5" />
        </div>

        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between gap-2 mb-1">
            <span className="text-[11px] font-bold font-mono uppercase px-2 py-0.5 bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 rounded">
              ✅ API Gateway: 200 OK
            </span>
            <span className="text-[10px] text-slate-400 font-mono flex items-center gap-1">
              <Clock className="w-3 h-3 text-slate-500" />
              {activeToast.latencyMs}ms
            </span>
          </div>

          <h4 className="text-xs font-bold text-sky-200 line-clamp-1">
            Email Notifikasi Dikirim ke Atasan
          </h4>
          <p className="text-[11px] text-slate-300 font-mono mt-0.5 line-clamp-1">
            Kepada: <strong>{activeToast.payload.recipientName}</strong> ({activeToast.payload.recipientRole})
          </p>
          <p className="text-[10px] text-slate-400 line-clamp-1 mt-0.5 italic">
            "{activeToast.payload.subject}"
          </p>

          <div className="mt-2.5 pt-2 border-t border-slate-800 flex items-center justify-between">
            <button
              onClick={() => {
                onOpenModal(activeToast.id);
                setActiveToast(null);
              }}
              className="text-xs font-mono font-bold text-sky-400 hover:text-sky-300 flex items-center gap-1 transition-colors"
            >
              <ExternalLink className="w-3.5 h-3.5" />
              <span>Lihat Format Surat Email</span>
            </button>

            <button
              onClick={() => setActiveToast(null)}
              className="text-slate-400 hover:text-white p-1 rounded transition-colors"
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};