src/components/layout/header.tsx

import React, { useState, useRef, useEffect } from "react";
import { Bell, ChevronDown, Menu, Search, X, Download, LogIn, LogOut, Loader2 } from "lucide-react";
import { useNavigate, useLocation } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import Logo from "@/components/ui/logo";
import { useIsMobile } from "@/hooks/use-mobile";
import { useAuth } from "@/lib/auth-context";
import { toast } from "@/lib/custom-toast";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useAssetRequestNotifications } from "@/hooks/useAssetRequestNotifications";
import { attendanceApi } from "@/services/attendanceApi";
import { getConfettiOriginFromElement, triggerAttendanceConfetti } from "@/lib/confetti";
import CheckOutReminderDialog from "@/components/CheckOutReminderDialog";

interface HeaderProps {
  toggleSidebar: () => void;
  isSidebarOpen: boolean;
}

const Header = ({ toggleSidebar, isSidebarOpen }: HeaderProps) => {
  const isMobile = useIsMobile();
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const [downloadMenuOpen, setDownloadMenuOpen] = useState(false);
  const [now, setNow] = useState(() => new Date());
  const [showCheckOutReminder, setShowCheckOutReminder] = useState(false);
  const [reminderDismissed, setReminderDismissed] = useState(false);
  const quickAttendanceBtnRef = useRef<HTMLButtonElement>(null);
  const userMenuRef = useRef<HTMLDivElement>(null);
  const downloadMenuRef = useRef<HTMLDivElement>(null);
  const { logout, userData, isAuthenticated } = useAuth();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const location = useLocation();
  const { notificationCount, hasNotifications } = useAssetRequestNotifications();
  
  // Check if we're on the download app page
  const isDownloadPage = location.pathname === "/download-app";

  const employeeId = userData?.employeeId;
  const isClient = userData?.roleName?.toLowerCase() === "client";

  const { data: todayAttendance, isLoading: todayAttendanceLoading } = useQuery({
    queryKey: ["attendance-today", employeeId ?? 0],
    queryFn: () => {
      if (!employeeId) return Promise.resolve(null);
      return attendanceApi.getToday(employeeId);
    },
    enabled: isAuthenticated && !isDownloadPage && !isClient && !!employeeId,
    refetchInterval: 60_000,
  });

  const invalidateAttendance = async () => {
    if (employeeId) {
      await queryClient.invalidateQueries({ queryKey: ["attendance-today", employeeId] });
    }
    await queryClient.invalidateQueries({ queryKey: ["attendance"] });
  };

  const checkInMutation = useMutation({
    mutationFn: async () => {
      if (!employeeId) throw new Error("Employee ID not found");
      return attendanceApi.checkIn(employeeId);
    },
    onSuccess: async () => {
      toast.success("Checked in successfully");
      triggerAttendanceConfetti("checkIn", getConfettiOriginFromElement(quickAttendanceBtnRef.current));
      await invalidateAttendance();
    },
    onError: (error: any) => {
      toast.error(error?.response?.data || error?.message || "Failed to check in");
    },
  });

  const checkOutMutation = useMutation({
    mutationFn: async () => {
      if (!employeeId) throw new Error("Employee ID not found");
      return attendanceApi.checkOut(employeeId);
    },
    onSuccess: async () => {
      toast.success("Checked out successfully");
      triggerAttendanceConfetti("checkOut", getConfettiOriginFromElement(quickAttendanceBtnRef.current));
      await invalidateAttendance();
    },
    onError: (error: any) => {
      toast.error(error?.response?.data || error?.message || "Failed to check out");
    },
  });

  const isCheckedIn = !!todayAttendance?.inTime;
  const isCheckedOut = !!todayAttendance?.outTime;
  const canCheckIn = !todayAttendanceLoading && !checkInMutation.isPending && !isCheckedIn;
  const canCheckOut = !todayAttendanceLoading && !checkOutMutation.isPending && isCheckedIn && !isCheckedOut;
  const showQuickAttendance = isAuthenticated && !isDownloadPage && !isClient && !!employeeId;

  useEffect(() => {
    if (!isAuthenticated || isDownloadPage || !isCheckedIn || isCheckedOut) {
      setNow(new Date());
      return;
    }
    const intervalId = window.setInterval(() => setNow(new Date()), 1000);
    return () => window.clearInterval(intervalId);
  }, [isAuthenticated, isDownloadPage, isCheckedIn, isCheckedOut]);

  const parseTimeToToday = (time: string) => {
    const parts = time.split(":").map(p => parseInt(p, 10));
    const [hh, mm, ss] = [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0];
    const dt = new Date(now);
    dt.setHours(hh, mm, ss, 0);
    return dt;
  };

  const officeDurationText = (() => {
    if (!todayAttendance?.inTime) return null;

    const start = parseTimeToToday(todayAttendance.inTime);
    const end = todayAttendance.outTime ? parseTimeToToday(todayAttendance.outTime) : now;
    const diffMs = Math.max(0, end.getTime() - start.getTime());
    const totalSeconds = Math.floor(diffMs / 1000);
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;

    const pad2 = (n: number) => n.toString().padStart(2, "0");
    return `${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)}`;
  })();

  // Handle navigation to home/dashboard
  const goToHomePage = () => {
    if (isAuthenticated) {
      // For client role, redirect to production-bugs page instead of dashboard
      if (userData?.roleName?.toLowerCase() === "client") {
        navigate('/production-bugs');
      } else {
        // For other roles, redirect to dashboard
        navigate('/');
      }
    } else {
      // For non-authenticated users, redirect to login
      navigate('/login');
    }
  };

  // Check if it's past 6:30 PM and show checkout reminder
  useEffect(() => {
    if (!isAuthenticated || isDownloadPage || isClient || !isCheckedIn || isCheckedOut || reminderDismissed) {
      return;
    }

    const currentHour = now.getHours();
    const currentMinute = now.getMinutes();
    
    // Check if it's 6:30 PM or later (18:30 in 24-hour format)
    const isPast630PM = currentHour > 18 || (currentHour === 18 && currentMinute >= 30);
    
    if (isPast630PM && !showCheckOutReminder) {
      setShowCheckOutReminder(true);
    }
  }, [now, isAuthenticated, isDownloadPage, isClient, isCheckedIn, isCheckedOut, reminderDismissed, showCheckOutReminder]);

  // Handle outside clicks to close the menus
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
        setUserMenuOpen(false);
      }
      if (downloadMenuRef.current && !downloadMenuRef.current.contains(event.target as Node)) {
        setDownloadMenuOpen(false);
      }
    };

    if (userMenuOpen || downloadMenuOpen) {
      document.addEventListener('mousedown', handleClickOutside);
      document.addEventListener('touchstart', handleClickOutside as any);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      document.removeEventListener('touchstart', handleClickOutside as any);
    };
  }, [userMenuOpen, downloadMenuOpen]);

  const handleLogout = () => {
    logout();
    toast.success("Logged out successfully");
    navigate('/login');
  };

  const handleReminderClose = () => {
    setShowCheckOutReminder(false);
    setReminderDismissed(true);
  };

  const handleReminderCheckOut = async () => {
    await checkOutMutation.mutateAsync();
    setShowCheckOutReminder(false);
  };

  const toggleUserMenu = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setUserMenuOpen(prev => !prev);
  };

  const toggleDownloadMenu = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDownloadMenuOpen(prev => !prev);
  };

  // Get initials for avatar fallback
  const getInitials = () => {
    if (!userData) return "U";
    const first = userData.firstName?.charAt(0) || '';
    const last = userData.lastName?.charAt(0) || '';
    return (first + last).toUpperCase();
  };

  // Get display name
  const getDisplayName = () => {
    if (!userData) return "User";
    return `${userData.firstName} ${userData.lastName}`;
  };

  // Generate avatar URL
  const getAvatarUrl = () => {
    if (!userData) return '';
    return `https://ui-avatars.com/api/?name=${userData.firstName}+${userData.lastName}&background=random`;
  };

  // Download handlers
  const handleDownloadAPK = () => {
    window.open('/pm-tool.apk', '_blank');
    setDownloadMenuOpen(false);
  };

  const handleVisitDownloadPage = () => {
    navigate('/download-app');
    setDownloadMenuOpen(false);
  };

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-lg border-b h-16 flex items-center justify-between px-4 transition-all duration-300">

      <div className="flex items-center gap-4">

        {isMobile && isAuthenticated && (

          <Button

            variant="ghost"

            size="icon"

            onClick={toggleSidebar}

            aria-label="Toggle sidebar"

          >

            {isSidebarOpen ? (

              <X className="h-5 w-5" />

            ) : (

              <Menu className="h-5 w-5" />

            )}

          </Button>

        )}

        {(!isMobile || !isSearchOpen) && (

          <div 

            className="cursor-pointer" 

            onClick={goToHomePage}

            title="Go to Dashboard"

          >

            <Logo />

          </div>

        )}

      </div>



      <div className={`flex-1 flex ${isMobile ? "justify-end" : "justify-center"} max-w-xl mx-auto`}>

        {!isDownloadPage && isAuthenticated && (isSearchOpen || !isMobile) && (

          <div className={`relative w-full max-w-md ${isMobile ? "absolute left-0 right-0 px-4" : ""}`}>

            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />

            <Input

              placeholder="Search..."

              className="w-full pl-9 bg-secondary/50 border-secondary-foreground/10 focus-visible:ring-primary/20"

            />

            {isMobile && (

              <Button

                variant="ghost"

                size="icon"

                className="absolute right-5 top-1/2 transform -translate-y-1/2"

                onClick={() => setIsSearchOpen(false)}

              >

                <X className="h-4 w-4" />

              </Button>

            )}

          </div>

        )}



        {isMobile && !isSearchOpen && !isDownloadPage && isAuthenticated && (

          <Button

            variant="ghost"

            size="icon"

            onClick={() => setIsSearchOpen(true)}

          >

            <Search className="h-5 w-5" />

          </Button>

        )}

      </div>



      <div className="flex items-center gap-3">

        {/* Custom Download Menu Implementation */}

        <div ref={downloadMenuRef} className="relative">

          <Button 

            variant="ghost" 

            size="icon" 

            className="text-primary hover:text-primary/80"

            onClick={toggleDownloadMenu}

          >

            <Download className="h-5 w-5" />

          </Button>

          

          {downloadMenuOpen && (

            <div className="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-popover border border-border z-50">

              <div className="py-2 px-4 border-b">

                <p className="font-medium">Download Options</p>

              </div>

              <div className="py-1">

                <button 

                  className="flex w-full px-4 py-2 text-sm hover:bg-accent"

                  onClick={handleDownloadAPK}

                >

                  Download APK Directly

                </button>

                <button 

                  className="flex w-full px-4 py-2 text-sm hover:bg-accent"

                  onClick={handleVisitDownloadPage}

                >

                  Visit Download Page

                </button>

              </div>

            </div>

          )}

        </div>



        {isAuthenticated ? (

          <>

            {!isDownloadPage && !!officeDurationText && (

              <div className="flex items-center gap-2 rounded-md border px-2 py-1 text-xs sm:text-sm text-muted-foreground">

                <span className="text-muted-foreground">In Office</span>

                <span className="font-medium text-foreground tabular-nums">{officeDurationText}</span>

              </div>

            )}



            {showQuickAttendance && (

              <TooltipProvider>

                <Tooltip>

                  <TooltipTrigger asChild>

                    <Button

                      ref={quickAttendanceBtnRef}

                      variant="outline"

                      size={isMobile ? "icon" : "sm"}

                      className={isMobile ? "" : "gap-2"}

                      disabled={!canCheckIn && !canCheckOut}

                      onClick={() => {

                        if (canCheckIn) {

                          checkInMutation.mutate();

                          return;

                        }

                        if (canCheckOut) {

                          checkOutMutation.mutate();

                        }

                      }}

                    >

                      {(todayAttendanceLoading || checkInMutation.isPending || checkOutMutation.isPending) ? (

                        <Loader2 className="h-4 w-4 animate-spin" />

                      ) : canCheckIn ? (

                        <LogIn className="h-4 w-4" />

                      ) : canCheckOut ? (

                        <LogOut className="h-4 w-4" />

                      ) : (

                        <LogOut className="h-4 w-4" />

                      )}

                      {!isMobile && (

                        <span>

                          {canCheckIn ? "Check In" : canCheckOut ? "Check Out" : "Done"}

                        </span>

                      )}

                    </Button>

                  </TooltipTrigger>

                  <TooltipContent>

                    <p>

                      {canCheckIn

                        ? "Quick Check In"

                        : canCheckOut

                          ? "Quick Check Out"

                          : "Attendance completed for today"}

                    </p>

                  </TooltipContent>

                </Tooltip>

              </TooltipProvider>

            )}



            <TooltipProvider>

              <Tooltip>

                <TooltipTrigger asChild>

                  <Button 

                    variant="ghost" 

                    size="icon" 

                    className="relative"

                    onClick={() => {

                      const isAdmin = userData?.roleId === 1 || userData?.roleName?.toLowerCase() === 'admin';

                      navigate(isAdmin ? '/admin/asset-requests' : '/asset-requests');

                    }}

                  >

                    <Bell className="h-5 w-5" />

                    {hasNotifications && (

                      <>

                        <span className="absolute top-1 right-1 w-2 h-2 bg-primary rounded-full" />

                        {notificationCount > 0 && (

                          <span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">

                            {notificationCount > 9 ? '9+' : notificationCount}

                          </span>

                        )}

                      </>

                    )}

                  </Button>

                </TooltipTrigger>

                <TooltipContent>

                  <p>

                    {hasNotifications 

                      ? `${notificationCount} asset request ${notificationCount === 1 ? 'notification' : 'notifications'}`

                      : 'No new notifications'}

                  </p>

                </TooltipContent>

              </Tooltip>

            </TooltipProvider>



            {/* Custom User Menu Implementation */}

            <div ref={userMenuRef} className="relative">

              <Button 

                variant="ghost" 

                className="flex items-center gap-2"

                onClick={toggleUserMenu}

              >

                <Avatar className="h-8 w-8">

                  <AvatarImage src={getAvatarUrl()} />

                  <AvatarFallback>{getInitials()}</AvatarFallback>

                </Avatar>

                {!isMobile && (

                  <>

                    <div className="flex flex-col items-start text-sm">

                      <span className="font-medium">{getDisplayName()}</span>

                      <span className="text-xs text-muted-foreground">

                        {userData?.roleName || "User"}

                      </span>

                    </div>

                    <ChevronDown className="h-4 w-4 text-muted-foreground" />

                  </>

                )}

              </Button>

              

              {userMenuOpen && (

                <div className="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-popover border border-border z-50">

                  <div className="py-2 px-4 border-b">

                    <p className="font-medium">My Account</p>

                  </div>

                  <div className="py-1">

                    <button 

                      className="flex w-full px-4 py-2 text-sm hover:bg-accent"

                      onClick={() => {

                        navigate('/profile');

                        setUserMenuOpen(false);

                      }}

                    >

                      Profile

                    </button>

                    <button 

                      className="flex w-full px-4 py-2 text-sm hover:bg-accent"

                      onClick={() => {

                        navigate('/settings');

                        setUserMenuOpen(false);

                      }}

                    >

                      Settings

                    </button>

                  </div>

                  <div className="border-t py-1">

                    <button 

                      className="flex w-full px-4 py-2 text-sm hover:bg-accent"

                      onClick={() => {

                        handleLogout();

                        setUserMenuOpen(false);

                      }}

                    >

                      Log out

                    </button>

                  </div>

                </div>

              )}

            </div>
          </>
        ) : (
          <div className="flex items-center gap-3">

           

            <Button 

              variant="default" 

              size="sm" 

              onClick={() => navigate('/login')}

              className="font-medium"

            >

              Log In

            </Button>

          </div>
        )}
      </div>
      
      {/* Check-Out Reminder Dialog */}
      <CheckOutReminderDialog
        isOpen={showCheckOutReminder}
        onClose={handleReminderClose}
        onCheckOut={handleReminderCheckOut}
        isLoading={checkOutMutation.isPending}
        userName={userData?.firstName || 'User'}
        workDuration={officeDurationText || '00:00:00'}
      />
    </header>
  );
};

export default Header;