import React, { useState, useRef, useEffect, useMemo } from "react";
import { Employee, WorkflowRequest } from "../types";
import { calculateExpiringDocuments, ExpiringDocumentAlert } from "../utils/documentExpiry";
import { 
  Bell, 
  BellRing, 
  CheckCircle2, 
  Clock, 
  ArrowRight, 
  ShieldAlert, 
  Check, 
  X, 
  UserCheck, 
  Sparkles,
  ChevronRight,
  BadgeCheck,
  AlertTriangle,
  FileWarning
} from "lucide-react";

interface NotificationBellProps {
  currentUser: Employee;
  workflows: WorkflowRequest[];
  employees?: Employee[];
  onNavigateToWorkflows: () => void;
  onApproveWorkflow?: (wfId: string, approverName: string, notes: string) => void;
  onSelectEmployee?: (empId: string) => void;
  onOpenEmailLogs?: () => void;
}

export default function NotificationBell({
  currentUser,
  workflows,
  employees = [],
  onNavigateToWorkflows,
  onApproveWorkflow,
  onSelectEmployee,
  onOpenEmailLogs
}: NotificationBellProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [activeFilter, setActiveFilter] = useState<"my_approval" | "all_pending" | "doc_alerts">("my_approval");
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Expiring document alerts
  const expiringDocAlerts = useMemo(() => {
    return calculateExpiringDocuments(employees, 30);
  }, [employees]);

  // Close dropdown when clicking outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // Helper: check if a pending workflow requires current user's approval
  const isActionableForUser = (wf: WorkflowRequest): boolean => {
    if (wf.status !== "Pending") return false;

    const pos = (currentUser.position || "").toLowerCase();
    const stage = (wf.currentStage || "").toLowerCase();

    // Executive directors (CEO, COO, CFO, CTO, CHR, Direktur, Komisaris)
    const isDirectorOrExec = 
      pos.includes("direktur") || 
      pos.includes("ceo") || 
      pos.includes("coo") || 
      pos.includes("cfo") || 
      pos.includes("cto") || 
      pos.includes("chr") || 
      pos.includes("komisaris");

    const isManager = pos.includes("manager");
    const isSupervisor = pos.includes("supervisor");

    if (stage.includes("ceo") || stage.includes("komisaris")) {
      return pos.includes("ceo") || pos.includes("komisaris") || currentUser.name.includes("Bambang");
    }

    if (stage.includes("direktur")) {
      return isDirectorOrExec;
    }

    if (stage.includes("manager")) {
      return isManager || isDirectorOrExec;
    }

    if (stage.includes("supervisor")) {
      return isSupervisor || isManager || isDirectorOrExec;
    }

    // Default for directors/executives: show all pending items
    if (isDirectorOrExec) return true;

    return false;
  };

  const pendingWorkflows = workflows.filter(w => w.status === "Pending");
  const myActionableWorkflows = pendingWorkflows.filter(isActionableForUser);

  const activeWorkflowsList = activeFilter === "my_approval" ? myActionableWorkflows : pendingWorkflows;
  const badgeCount = myActionableWorkflows.length + expiringDocAlerts.length;

  return (
    <div className="relative font-mono" ref={dropdownRef}>
      {/* Header Notification Bell Trigger Button */}
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className={`relative px-3 py-1.5 flex items-center gap-1.5 border transition-all text-xs font-black uppercase tracking-wider cursor-pointer ${
          isOpen
            ? "bg-[#facc15] text-black border-[#facc15]"
            : badgeCount > 0
            ? "bg-[#161616] text-[#facc15] border-[#facc15]/50 hover:bg-[#222]"
            : "bg-[#111] text-slate-400 border-[#2a2a2a] hover:text-white"
        }`}
        title="Notifikasi Real-time Approval Workflow & Alert Kepegawaian"
      >
        {badgeCount > 0 ? (
          <BellRing className="w-4 h-4 text-[#facc15] animate-bounce" />
        ) : (
          <Bell className="w-4 h-4" />
        )}
        <span className="hidden sm:inline">Notifikasi</span>

        {badgeCount > 0 && (
          <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 bg-rose-600 text-white font-black text-[10px] rounded-full animate-pulse border border-rose-400 shadow-sm">
            {badgeCount}
          </span>
        )}
      </button>

      {/* Real-Time Dropdown Popover */}
      {isOpen && (
        <div className="absolute right-0 mt-2 w-80 sm:w-96 bg-[#0a0a0a] border-2 border-[#facc15] shadow-2xl z-50 rounded-none overflow-hidden text-slate-200 animate-in fade-in zoom-in-95 duration-150">
          {/* Header Bar */}
          <div className="bg-[#141414] p-3 border-b border-[#262626] flex items-center justify-between">
            <div className="flex items-center gap-2">
              <ShieldAlert className="w-4 h-4 text-[#facc15]" />
              <div>
                <h4 className="text-xs font-black uppercase text-white tracking-wider">Notifikasi & Alert System</h4>
                <p className="text-[9px] text-slate-400 font-sans">
                  {currentUser.position} • {currentUser.division}
                </p>
              </div>
            </div>
            <button
              type="button"
              onClick={() => setIsOpen(false)}
              className="text-slate-400 hover:text-white p-1 text-xs"
            >
              <X className="w-4 h-4" />
            </button>
          </div>

          {/* Filter Toggle Buttons */}
          <div className="p-2 bg-[#050505] border-b border-[#1f1f1f] flex items-center gap-1 text-[10px]">
            <button
              type="button"
              onClick={() => setActiveFilter("my_approval")}
              className={`flex-1 py-1 px-1.5 uppercase font-black border transition-colors truncate cursor-pointer ${
                activeFilter === "my_approval"
                  ? "bg-[#facc15] text-black border-[#facc15]"
                  : "bg-[#111] text-slate-400 border-[#222] hover:text-white"
              }`}
            >
              Approval ({myActionableWorkflows.length})
            </button>
            <button
              type="button"
              onClick={() => setActiveFilter("all_pending")}
              className={`flex-1 py-1 px-1.5 uppercase font-black border transition-colors truncate cursor-pointer ${
                activeFilter === "all_pending"
                  ? "bg-[#facc15] text-black border-[#facc15]"
                  : "bg-[#111] text-slate-400 border-[#222] hover:text-white"
              }`}
            >
              Pending ({pendingWorkflows.length})
            </button>
            <button
              type="button"
              onClick={() => setActiveFilter("doc_alerts")}
              className={`flex-1 py-1 px-1.5 uppercase font-black border transition-colors truncate cursor-pointer ${
                activeFilter === "doc_alerts"
                  ? "bg-rose-500 text-white border-rose-400"
                  : "bg-[#111] text-rose-300 border-[#222] hover:text-white"
              }`}
            >
              Alert SK/Cert ({expiringDocAlerts.length})
            </button>
          </div>

          {/* List of Workflow or Document Expiry Items */}
          <div className="max-h-80 overflow-y-auto divide-y divide-[#1a1a1a] p-1">
            {activeFilter === "doc_alerts" ? (
              expiringDocAlerts.length === 0 ? (
                <div className="p-6 text-center space-y-2">
                  <CheckCircle2 className="w-8 h-8 text-emerald-500 mx-auto opacity-70" />
                  <p className="text-xs font-bold text-slate-400 uppercase">Tidak ada dokumen kadaluarsa.</p>
                  <p className="text-[10px] text-slate-600 font-sans">Seluruh SK dan sertifikasi pegawai dalam status aktif (&gt; 30 hari).</p>
                </div>
              ) : (
                expiringDocAlerts.map(alert => {
                  const isUrgent = alert.daysRemaining <= 10;
                  return (
                    <div key={alert.id} className="p-3 space-y-2 hover:bg-[#121212] transition-colors">
                      <div className="flex items-start justify-between gap-2">
                        <div>
                          <span className={`text-[9px] font-black uppercase px-1.5 py-0.5 border ${
                            alert.docType === 'SK' ? "bg-amber-500/20 text-amber-300 border-amber-500/40" : "bg-emerald-500/20 text-emerald-300 border-emerald-500/40"
                          }`}>
                            {alert.docType}
                          </span>
                          <h5 className="text-xs font-bold text-white mt-1">{alert.employeeName}</h5>
                          <p className="text-[10px] text-slate-400 font-sans">{alert.docTitle}</p>
                        </div>
                        <span className={`text-[9px] font-black uppercase px-2 py-0.5 rounded border whitespace-nowrap ${
                          isUrgent ? "bg-rose-600 text-white border-rose-400 animate-pulse" : "bg-amber-500/20 text-amber-300 border-amber-500/30"
                        }`}>
                          {alert.daysRemaining <= 0 ? "KADALUARSA" : `${alert.daysRemaining} HARI`}
                        </span>
                      </div>
                      <div className="flex items-center justify-between text-[9px] text-slate-500 pt-1 border-t border-[#1a1a1a]">
                        <span>s/d: <strong className="text-rose-300">{alert.expiryDate}</strong></span>
                        {onSelectEmployee && (
                          <button
                            type="button"
                            onClick={() => {
                              setIsOpen(false);
                              onSelectEmployee(alert.employeeId);
                            }}
                            className="text-sky-400 hover:text-white font-bold uppercase flex items-center gap-1"
                          >
                            <span>Proses Renewal</span>
                            <ArrowRight className="w-3 h-3" />
                          </button>
                        )}
                      </div>
                    </div>
                  );
                })
              )
            ) : activeWorkflowsList.length === 0 ? (
              <div className="p-6 text-center space-y-2">
                <CheckCircle2 className="w-8 h-8 text-green-500 mx-auto opacity-70" />
                <p className="text-xs font-bold text-slate-400 uppercase">Tidak ada pengajuan yang memerlukan persetujuan.</p>
                <p className="text-[10px] text-slate-600 font-sans">Semua workflow dalam antrian Anda telah selesai diproses.</p>
              </div>
            ) : (
              activeWorkflowsList.map((wf) => {
                const isNeedMyRole = isActionableForUser(wf);

                return (
                  <div 
                    key={wf.id}
                    className={`p-3 transition-colors space-y-2 hover:bg-[#121212] ${
                      isNeedMyRole ? "bg-[#0e0c05] border-l-2 border-l-[#facc15]" : ""
                    }`}
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div>
                        <span className="text-[9px] font-black uppercase text-[#facc15] bg-amber-500/10 px-1.5 py-0.5 border border-amber-500/30">
                          {wf.type}
                        </span>
                        <h5 className="text-xs font-bold text-white mt-1 line-clamp-1">{wf.title}</h5>
                      </div>
                      <span className="text-[9px] font-bold text-amber-400 bg-amber-400/10 px-1.5 py-0.5 border border-amber-400/20 whitespace-nowrap">
                        Mengantri: {wf.currentStage}
                      </span>
                    </div>

                    <p className="text-[10px] text-slate-400 line-clamp-2 font-sans">{wf.description}</p>

                    <div className="flex items-center justify-between text-[9px] text-slate-500 pt-1 border-t border-[#1a1a1a]">
                      <div className="flex items-center gap-1 truncate max-w-[180px]">
                        <UserCheck className="w-3 h-3 text-slate-400 shrink-0" />
                        <span className="truncate">{wf.requesterName} ({wf.requesterPosition})</span>
                      </div>
                      {wf.budgetAmount && (
                        <span className="text-emerald-400 font-bold shrink-0">{wf.budgetAmount}</span>
                      )}
                    </div>

                    {/* Action Bar inside Item */}
                    <div className="flex items-center justify-between gap-2 pt-1">
                      {onApproveWorkflow && isNeedMyRole && (
                        <button
                          type="button"
                          onClick={(e) => {
                            e.stopPropagation();
                            onApproveWorkflow(wf.id, currentUser.name, `Disetujui cepat via Notifikasi Header (${currentUser.position})`);
                          }}
                          className="bg-green-600 hover:bg-green-500 text-white font-black uppercase text-[9px] px-2 py-1 flex items-center gap-1 border border-green-400/40 cursor-pointer"
                        >
                          <Check className="w-3 h-3" />
                          Quick Setujui
                        </button>
                      )}

                      <button
                        type="button"
                        onClick={() => {
                          setIsOpen(false);
                          onNavigateToWorkflows();
                        }}
                        className="ml-auto text-xs font-black uppercase text-[#facc15] hover:underline flex items-center gap-1 cursor-pointer"
                      >
                        <span>Buka Console</span>
                        <ChevronRight className="w-3 h-3" />
                      </button>
                    </div>
                  </div>
                );
              })
            )}
          </div>

          {/* Footer Bar */}
          <div className="p-2.5 bg-[#121212] border-t border-[#222] flex items-center justify-between text-[10px] gap-2">
            {onOpenEmailLogs ? (
              <button
                type="button"
                onClick={() => {
                  setIsOpen(false);
                  onOpenEmailLogs();
                }}
                className="text-indigo-400 hover:text-indigo-300 font-bold flex items-center gap-1 cursor-pointer transition-colors"
              >
                <span>📧 Log Email Atasan</span>
              </button>
            ) : (
              <span className="text-slate-400 font-sans">
                Total Pending: <strong className="text-white">{pendingWorkflows.length}</strong>
              </span>
            )}
            <button
              onClick={() => {
                setIsOpen(false);
                onNavigateToWorkflows();
              }}
              className="bg-[#facc15] hover:bg-yellow-400 text-black font-black uppercase px-2.5 py-1 flex items-center gap-1"
            >
              <span>Console</span>
              <ArrowRight className="w-3 h-3" />
            </button>
          </div>
        </div>
      )}
    </div>
  );
}