import React, { useState, useEffect, createContext, useContext, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { format, isSameDay } from "date-fns";
import { 
  AlertCircle, 
  CheckCircle, 
  ChevronDown, 
  Clock, 
  Filter, 
  LayoutDashboard,
  LayoutList,
  MoreHorizontal, 
  Plus, 
  RefreshCw,
  Search, 
  Trash2,
  Eye,
  Edit2,
  Bug,
  Check,
  User,
  ShieldAlert,
  FlameIcon,
  X,
  Timer,
  CalendarIcon,
  ExternalLink,
  ChevronRight,
  ListFilter,
  Download,
  FileSpreadsheet,
  FileText
} from "lucide-react";
import * as XLSX from 'xlsx';
import { jsPDF } from 'jspdf';
import 'jspdf-autotable';
import { saveAs } from 'file-saver';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
} from "@/components/ui/dropdown-menu";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import Layout from "@/components/layout/layout";
// Import Task and tasksApi from tasksApi
import { Task, tasksApi } from "@/services/tasksApi";
import { employeeService, projectService, teamMemberService } from "@/lib/api";
import { Employee, ProjectApi } from "@/types";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import DashboardBugs from "@/components/dashboard/dashboard-bugs";
import { Dropdown, DropdownOption } from "@/components/ui/dropdown";
import { useAuth } from "@/lib/auth-context";
import { timeLogApi, TimeLogCreateRequest } from "@/services/timeLogApi";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  Calendar,
} from "@/components/ui/calendar";
import { Textarea } from "@/components/ui/textarea";
import CustomModal from "@/components/custom-modal"; // Import the custom modal
import { exportToExcel } from "@/lib/excel-export";
import autoTable from 'jspdf-autotable';

// Add console log to verify XLSX availability
console.log("XLSX library imported:", XLSX);

// Create a dropdown context to manage all dropdowns globally
const DropdownContext = createContext<{
  openDropdown: string | null;
  setOpenDropdown: (id: string | null) => void;
}>({
  openDropdown: null,
  setOpenDropdown: () => {},
});

// Rest of the file contents would go here 
  openDropdown: null,
  setOpenDropdown: () => {},
});

// Create a dropdown provider component
function DropdownProvider({ children }: { children: React.ReactNode }) {
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
  
  return (
    <DropdownContext.Provider value={{ openDropdown, setOpenDropdown }}>
      {openDropdown && <div className="dropdown-overlay" onClick={() => setOpenDropdown(null)} />}
      {children}
    </DropdownContext.Provider>
  );
}

// Custom Action Menu component for table actions
interface CustomActionMenuProps {
  align?: "left" | "right";
  bug: Task;
  onView: (bug: Task) => void;
  onEdit: (bug: Task) => void;
  onDelete: (id: number) => void;
  isDeleting: boolean;
  deleteId: number | null;
}

function CustomActionMenu({ 
  align = "right", 
  bug, 
  onView, 
  onEdit, 
  onDelete,
  isDeleting,
  deleteId
}: CustomActionMenuProps) {
  const [open, setOpen] = useState(false);
  const menuRef = React.useRef<HTMLDivElement>(null);
  const [menuPosition, setMenuPosition] = useState({
    top: 0,
    right: undefined as number | undefined,
    left: undefined as number | undefined
  });

  const updateMenuPosition = () => {
    if (menuRef.current) {
      const rect = menuRef.current.getBoundingClientRect();
      setMenuPosition({
        top: rect.bottom + window.scrollY,
        right: align === "right" ? window.innerWidth - rect.right : undefined,
        left: align === "left" ? rect.left : undefined
      });
    }
  };

  const handleButtonClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setOpen(!open);
    if (!open) {
      // Update position when opening
      setTimeout(updateMenuPosition, 0);
    }
  };

  const handleAction = (action: () => void, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    action();
    setOpen(false);
  };

  // Update position when open state changes
  useEffect(() => {
    if (open) {
      updateMenuPosition();
    }
  }, [open]);

  // Update position on scroll and resize
  useEffect(() => {
    if (!open) return;

    const handleScroll = () => {
      updateMenuPosition();
    };

    const handleResize = () => {
      updateMenuPosition();
    };

    window.addEventListener('scroll', handleScroll, true);
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('scroll', handleScroll, true);
      window.removeEventListener('resize', handleResize);
    };
  }, [open]);

  // Close dropdown when clicking outside
  useEffect(() => {
    if (!open) return;
    
    const handleOutsideClick = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    };
    
    document.addEventListener('mousedown', handleOutsideClick);
    return () => {
      document.removeEventListener('mousedown', handleOutsideClick);
    };
  }, [open]);
  
  return (
    <div className="relative" ref={menuRef}>
      <Button
        variant="ghost"
        size="sm"
        className="h-8 w-8 p-0"
        onClick={handleButtonClick}
      >
        <span className="sr-only">Open menu</span>
        <MoreHorizontal className="h-4 w-4" />
      </Button>
      
      {open && (
        <div 
          className="fixed z-[9999] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
          style={{
            top: menuPosition.top,
            right: menuPosition.right,
            left: menuPosition.left
          }}
        >
          <div 
            className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
            onClick={(e) => handleAction(() => onView(bug), e)}
          >
            <Eye className="mr-2 h-4 w-4" />
            View Details
          </div>
          
          <div 
            className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
            onClick={(e) => handleAction(() => onEdit(bug), e)}
          >
            <Edit2 className="mr-2 h-4 w-4" />
            Edit
          </div>
          
          <div className="h-px my-1 -mx-1 bg-muted"></div>
          
          <div 
            className={cn(
              "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none text-red-600 hover:bg-accent hover:text-red-600",
              (isDeleting && deleteId === bug.id) && "opacity-50 cursor-not-allowed"
            )}
            onClick={(e) => {
              if (!(isDeleting && deleteId === bug.id)) {
                handleAction(() => onDelete(bug.id), e);
              } else {
                e.preventDefault();
                e.stopPropagation();
              }
            }}
          >
            {isDeleting && deleteId === bug.id ? (
              <>
                <div className="h-4 w-4 mr-2 rounded-full border-b-2 border-red-600"></div>
                Deleting...
              </>
            ) : (
              <>
                <Trash2 className="mr-2 h-4 w-4" />
                Delete
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// Improved CustomDropdown component with dropdown context
interface CustomDropdownProps {
  id?: string; // Optional identifier for this dropdown
  value: string;
  onChange: (value: string) => void;
  options: { value: string; label: string }[];
  placeholder: string;
}

function CustomDropdown({ id = "dropdown-" + Math.random().toString(36).substring(2, 9), value, onChange, options, placeholder }: CustomDropdownProps) {
  const { openDropdown, setOpenDropdown } = useContext(DropdownContext);
  const isOpen = openDropdown === id;
  const dropdownRef = React.useRef<HTMLDivElement>(null);
  const [menuPosition, setMenuPosition] = useState({
    top: 0,
    left: 0,
    width: 0
  });
  
  const getLabel = () => {
    return options.find(option => option.value === value)?.label || placeholder;
  };
  
  const updateMenuPosition = () => {
    if (dropdownRef.current) {
      const rect = dropdownRef.current.getBoundingClientRect();
      
      // Calculate available space below and above
      const spaceBelow = window.innerHeight - rect.bottom;
      const spaceAbove = rect.top;
      
      // Determine if dropdown should open upward or downward
      const openUpward = spaceBelow < 300 && spaceAbove > spaceBelow;
      
      setMenuPosition({
        top: openUpward ? rect.top - 5 : rect.bottom + 5,
        left: rect.left,
        width: rect.width
      });
    }
  };
  
  const handleButtonClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    // If already open, close it
    if (isOpen) {
      setOpenDropdown(null);
      return;
    }
    
    // Otherwise, update position and open this dropdown
    // Close any other open dropdown
    setTimeout(() => {
      updateMenuPosition();
      setOpenDropdown(id);
    }, 0);
  };
  
  const handleOptionClick = (optionValue: string, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    // Close dropdown first
    setOpenDropdown(null);
    
    // Then change the value
    setTimeout(() => {
      onChange(optionValue);
    }, 0);
  };

  // Update position when open state changes
  useEffect(() => {
    if (isOpen) {
      updateMenuPosition();
    }
  }, [isOpen]);
  
  // Update position on scroll and resize when open
  useEffect(() => {
    if (!isOpen) return;
    
    const handleScroll = () => {
      updateMenuPosition();
    };
    
    const handleResize = () => {
      updateMenuPosition();
    };
    
    window.addEventListener('scroll', handleScroll, true);
    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('scroll', handleScroll, true);
      window.removeEventListener('resize', handleResize);
    };
  }, [isOpen]);

  // Close dropdown when clicking outside
  useEffect(() => {
    if (!isOpen) return;
    
    const handleOutsideClick = (e: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setOpenDropdown(null);
      }
    };
    
    document.addEventListener('mousedown', handleOutsideClick);
    return () => {
      document.removeEventListener('mousedown', handleOutsideClick);
    };
  }, [isOpen, setOpenDropdown]);
  
  return (
    <div className="relative w-full dropdown-container" ref={dropdownRef}>
      <div
        className={cn(
          "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background cursor-pointer dropdown-trigger",
          isOpen && "ring-2 ring-ring ring-offset-2"
        )}
        onClick={handleButtonClick}
      >
        <span className={!value || value === "all" ? "text-muted-foreground" : ""}>{getLabel()}</span>
        <ChevronDown className={cn("h-4 w-4 shrink-0 opacity-50", isOpen && "")} />
      </div>
      
      {isOpen && (
        <div 
          className="fixed overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md dropdown-menu custom-scrollbar dropdown-active"
          style={{
            top: menuPosition.top,
            left: menuPosition.left,
            width: menuPosition.width,
            maxHeight: "300px"
          }}
        >
          {options.map((option) => (
            <div
              key={option.value}
              className={cn(
                "flex cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 hover:bg-accent hover:text-accent-foreground dropdown-item",
                value === option.value && "bg-accent text-accent-foreground dropdown-item active"
              )}
              onClick={(e) => handleOptionClick(option.value, e)}
            >
              {option.label}
              {value === option.value && <Check className="h-4 w-4" />}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// Improved CustomEmployeeDropdown component with dropdown context
interface CustomEmployeeDropdownProps {
  id?: string; // Optional identifier for this dropdown
  value: string | number;
  onChange: (value: string | number) => void;
  employees: Employee[];
  placeholder: string;
}

function CustomEmployeeDropdown({ id = "employee-dropdown-" + Math.random().toString(36).substring(2, 9), value, onChange, employees, placeholder }: CustomEmployeeDropdownProps) {
  const { openDropdown, setOpenDropdown } = useContext(DropdownContext);
  const isOpen = openDropdown === id;
  const dropdownRef = React.useRef<HTMLDivElement>(null);
  const [menuPosition, setMenuPosition] = useState({
    top: 0,
    left: 0,
    width: 0
  });
  
  const getEmployeeName = (id: string | number | null) => {
    if (id === null || id === "all" || id === "unassigned") return placeholder;
    if (typeof id === "string" && id !== "all") {
      id = parseInt(id, 10);
    }
    const employee = employees.find(emp => emp.id === id);
    return employee ? `${employee.firstName} ${employee.lastName}` : `Employee ${id}`;
  };
  
  const getInitials = (id: number) => {
    const employee = employees.find(emp => emp.id === id);
    if (!employee) return "??";
    return (employee.firstName.charAt(0) + employee.lastName.charAt(0)).toUpperCase();
  };
  
  const updateMenuPosition = () => {
    if (dropdownRef.current) {
      const rect = dropdownRef.current.getBoundingClientRect();
      
      // Calculate available space below and above
      const spaceBelow = window.innerHeight - rect.bottom;
      const spaceAbove = rect.top;
      
      // Determine if dropdown should open upward or downward
      const openUpward = spaceBelow < 300 && spaceAbove > spaceBelow;
      
      setMenuPosition({
        top: openUpward ? rect.top - 5 : rect.bottom + 5,
        left: rect.left,
        width: rect.width
      });
    }
  };
  
  const handleButtonClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    // If already open, close it
    if (isOpen) {
      setOpenDropdown(null);
      return;
    }
    
    // Otherwise, update position and open this dropdown
    setTimeout(() => {
      updateMenuPosition();
      setOpenDropdown(id);
    }, 0);
  };
  
  const handleOptionClick = (employeeId: string | number, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    // Close menu first
    setOpenDropdown(null);
    
    // Then change the value with a small delay
    setTimeout(() => {
      onChange(employeeId);
    }, 0);
  };

  // Update position when open state changes
  useEffect(() => {
    if (isOpen) {
      updateMenuPosition();
    }
  }, [isOpen]);
  
  // Update position on scroll and resize
  useEffect(() => {
    if (!isOpen) return;
    
    const handleScroll = () => {
      updateMenuPosition();
    };
    
    const handleResize = () => {
      updateMenuPosition();
    };
    
    window.addEventListener('scroll', handleScroll, true);
    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('scroll', handleScroll, true);
      window.removeEventListener('resize', handleResize);
    };
  }, [isOpen]);

  // Close dropdown when clicking outside
  useEffect(() => {
    if (!isOpen) return;
    
    const handleOutsideClick = (e: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setOpenDropdown(null);
      }
    };
    
    document.addEventListener('mousedown', handleOutsideClick);
    return () => {
      document.removeEventListener('mousedown', handleOutsideClick);
    };
  }, [isOpen, setOpenDropdown]);
  
  return (
    <div className="relative w-full dropdown-container" ref={dropdownRef}>
      <div
        className={cn(
          "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background cursor-pointer dropdown-trigger",
          isOpen && "ring-2 ring-ring ring-offset-2"
        )}
        onClick={handleButtonClick}
      >
        <div className="flex items-center">
          {value !== "all" && typeof value === "number" ? (
            <Avatar className="h-5 w-5 mr-2">
              <AvatarFallback className="text-[10px]">
                {getInitials(value)}
              </AvatarFallback>
            </Avatar>
          ) : (
            <User className="h-4 w-4 mr-2 opacity-50" />
          )}
          <span className={value === "all" ? "text-muted-foreground" : ""}>
            {getEmployeeName(value)}
          </span>
        </div>
        <ChevronDown className={cn("h-4 w-4 shrink-0 opacity-50", isOpen && "")} />
      </div>
      
      {isOpen && (
        <div 
          className="fixed overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md dropdown-menu custom-scrollbar dropdown-active"
          style={{
            top: menuPosition.top,
            left: menuPosition.left,
            width: menuPosition.width,
            maxHeight: "300px"
          }}
        >
          <div
            key="all"
            className={cn(
              "flex cursor-pointer items-center px-2 py-1.5 hover:bg-accent hover:text-accent-foreground dropdown-item",
              value === "all" && "bg-accent text-accent-foreground dropdown-item active"
            )}
            onClick={(e) => handleOptionClick("all", e)}
          >
            <User className="h-4 w-4 mr-2 opacity-50" />
            <span>All Assignees</span>
            {value === "all" && (
              <Check className="ml-auto h-4 w-4" />
            )}
          </div>
          
          {employees.map((employee) => (
            <div
              key={employee.id}
              className={cn(
                "flex cursor-pointer items-center px-2 py-1.5 hover:bg-accent hover:text-accent-foreground dropdown-item",
                value === employee.id && "bg-accent text-accent-foreground dropdown-item active"
              )}
              onClick={(e) => handleOptionClick(employee.id, e)}
            >
              <Avatar className="h-5 w-5 mr-2">
                <AvatarFallback className="text-[10px]">
                  {(employee.firstName.charAt(0) + employee.lastName.charAt(0)).toUpperCase()}
                </AvatarFallback>
              </Avatar>
              <span>{employee.firstName} {employee.lastName}</span>
              {value === employee.id && (
                <Check className="ml-auto h-4 w-4" />
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// The Task interface in tasksApi.ts now includes all required fields

const Bugs = () => {
  const navigate = useNavigate();
  const { userData } = useAuth(); // Add useAuth to get current user data
  const [searchQuery, setSearchQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState<string | "all">("all");
  const [severityFilter, setSeverityFilter] = useState<string | "all">("all");
  const [assigneeFilter, setAssigneeFilter] = useState<string | "all">("all");
  const [projectFilter, setProjectFilter] = useState<string>("all");
  // Add new filter for My/Team bugs
  const [scopeFilter, setScopeFilter] = useState<"my" | "all">("my");
  const [isLoading, setIsLoading] = useState(true);
  const [bugs, setBugs] = useState<Task[]>([]);
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [teamMembers, setTeamMembers] = useState<Employee[]>([]); // Add state for team members
  const [projects, setProjects] = useState<Record<number, string>>({});
  const [userProjects, setUserProjects] = useState<ProjectApi[]>([]); // Add state for user's projects
  const [isDeleting, setIsDeleting] = useState(false);
  const [deleteId, setDeleteId] = useState<number | null>(null);
  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [sortField, setSortField] = useState<string>("createdAt");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc"); // Newest first by default
  const [viewMode, setViewMode] = useState<"dashboard" | "list">("list");
  // Add state for filter card expansion
  const [filtersExpanded, setFiltersExpanded] = useState(false);
  
  // Quick View Dialog state
  const [isQuickViewOpen, setIsQuickViewOpen] = useState(false);
  const [selectedBugForQuickView, setSelectedBugForQuickView] = useState<Task | null>(null);
  
  // Time logging state
  const [isLoggingTime, setIsLoggingTime] = useState(false);
  const [selectedBugForTimeLog, setSelectedBugForTimeLog] = useState<Task | null>(null);
  const [timeLogHours, setTimeLogHours] = useState<string>("");
  const [remainingHours, setRemainingHours] = useState<string>("");
  const [timeLogDescription, setTimeLogDescription] = useState<string>("");
  const [startTime, setStartTime] = useState<string>("");
  const [endTime, setEndTime] = useState<string>("");
  const [workDate, setWorkDate] = useState<Date | undefined>(new Date());
  const [timeOptions, setTimeOptions] = useState<Array<{label: string, value: string}>>([]);
  
  // Status update state
  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
  const [updateStatusId, setUpdateStatusId] = useState<number | null>(null);

  // Add new state for collapsing completed bugs
  const [collapseCompletedBugs, setCollapseCompletedBugs] = useState(true);

  const statusOptions = ["Open", "In Progress", "In Review", "Ready for QA", "Resolved", "Completed", "Closed", "Reopened"];
  const severityOptions = ["High", "Medium", "Low"];

  // Create API data cache to prevent multiple calls
  const apiCache = useRef<{
    teamMembers: any[] | null;
    allTeamMembers: any[] | null;
    allEmployees: Employee[] | null;
  }>({
    teamMembers: null,
    allTeamMembers: null,
    allEmployees: null
  });
  
  // We don't need this cache anymore
  // const projectTeamsCache = React.useRef<Record<number, any[]>>({});

  // Time logging functions
  const generateTimeOptions = () => {
    const options: Array<{label: string, value: string}> = [];
    
    // Generate times from 12:00 AM to 11:45 PM in 15-minute increments
    for (let hour = 0; hour < 24; hour++) {
      for (let minute = 0; minute < 60; minute += 15) {
        // Format the time as AM/PM
        const period = hour < 12 ? 'AM' : 'PM';
        const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
        const timeString = `${displayHour}:${minute.toString().padStart(2, '0')} ${period}`;
        
        options.push({
          label: timeString,
          value: timeString
        });
      }
    }
    
    setTimeOptions(options);
  };
  
  useEffect(() => {
    const loadData = async () => {
      try {
        if (!userData) {
          toast.error("User data not found. Please log in again.");
          return;
        }

        setIsLoading(true);
        console.log("DEBUG: Starting data loading process");
        
        // Load everything sequentially to prevent duplicate calls
        // 1. First get the employee data for the entire app
        const employeeData = await employeeService.getAll();
        console.log(`DEBUG: Loaded ${employeeData.length} employees`);
        setEmployees(employeeData);
        
        // 2. Get user's projects
        const projectsData = await projectService.getByEmployeeId(userData.employeeId);
        console.log(`DEBUG: Loaded ${projectsData.length} projects for user ${userData.employeeId}`);
        setUserProjects(projectsData);
        
        const projectsMap = projectsData.reduce((acc: Record<number, string>, project: ProjectApi) => {
          acc[project.id] = project.projectName;
          return acc;
        }, {});
        setProjects(projectsMap);
        console.log("DEBUG: Created projects map:", projectsMap);
        
        // 3. Get team members (only if we have projects and need to)
        if (projectsData.length > 0 && teamMembers.length === 0) {
          // Get all team members
          const allTeamMembers = await teamMemberService.getAll();
          console.log(`DEBUG: Loaded ${allTeamMembers.length} team members`);
          
          // We don't need to fetch project teams anymore since we're using all employees
          console.log("DEBUG: Using all employees for assignee dropdown");
          
          // Set team members to be the same as all employees
          setTeamMembers(employeeData);
        }
        
        // 4. Finally, get the bugs
        console.log("DEBUG: Fetching bugs with tasksApi.getByType('Bug')");
        const bugTasks = await tasksApi.getByType('Bug');
        console.log(`DEBUG: Loaded ${bugTasks.length} bug tasks from API`);
        
        if (bugTasks.length === 0) {
          console.warn("DEBUG: No bugs returned from API");
        } else {
          console.log("DEBUG: First bug from API:", bugTasks[0]);
        }
        
        // Map tasks to include projectId
        const bugsWithProjectId = bugTasks.map(task => {
          // Using issuesId as projectId, but handle the case where it might be null
          return { ...task, projectId: task.issuesId || null } as Task;
        });
        
        // Filter bugs by project only if projectFilter is applied, otherwise show all bugs
        let filteredBugs = bugsWithProjectId;
        
        // Only filter by project if there are projects and we're not in "all projects" mode
        if (projectsData.length > 0 && projectFilter !== "all") {
          filteredBugs = bugsWithProjectId.filter(bug => 
            bug.projectName === projectFilter
          );
          console.log(`DEBUG: Filtered to ${filteredBugs.length} bugs for selected project ${projectFilter}`);
          console.log(`DEBUG: Project filter value: ${projectFilter}`);
          console.log(`DEBUG: Sample bug projectName: ${filteredBugs.length > 0 ? filteredBugs[0].projectName : 'none'}`);
        }
        
        console.log(`DEBUG: Final bugs count: ${filteredBugs.length} bugs`);
        if (filteredBugs.length === 0) {
          console.warn("DEBUG: No bugs left after filtering");
          if (bugTasks.length > 0) {
            console.log("DEBUG: Example bug before filtering:", bugTasks[0]);
            console.log("DEBUG: Project IDs in bugs:", bugsWithProjectId.map(b => b.projectId));
            console.log("DEBUG: User projects:", projectsData.map(p => p.id));
          }
        } else {
          console.log("DEBUG: Example bug after filtering:", filteredBugs[0]);
        }
        
        // Set the bugs state with our filtered bugs
        setBugs(filteredBugs);
        
      } catch (error) {
        console.error("Error loading data:", error);
        toast.error("Error loading data. Please try again.");
      } finally {
        setIsLoading(false);
      }
    };
    
    // Only load data once when user data is available
    loadData();
    
    // Also initialize time options
    generateTimeOptions();
    
  }, [userData]); // Only run when userData changes

  const getYesterday = () => {
    const yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    return yesterday;
  };

  const calculateHoursSpent = (start: string, end: string): string => {
    // Extract hours and minutes from time strings like "9:30 AM" or "2:45 PM"
    const parseTime = (timeStr: string) => {
      const [timePart, periodPart] = timeStr.split(' ');
      const [hourStr, minuteStr] = timePart.split(':');
      
      let hour = parseInt(hourStr, 10);
      const minute = parseInt(minuteStr, 10);
      
      // Adjust hour based on AM/PM
      if (periodPart === 'PM' && hour < 12) {
        hour += 12;
      } else if (periodPart === 'AM' && hour === 12) {
        hour = 0;
      }
      
      return { hour, minute };
    };
    
    const startTime = parseTime(start);
    const endTime = parseTime(end);
    
    // Calculate total minutes
    let startMinutes = startTime.hour * 60 + startTime.minute;
    let endMinutes = endTime.hour * 60 + endTime.minute;
    
    // If end time is earlier than start time, assume it's the next day
    if (endMinutes < startMinutes) {
      endMinutes += 24 * 60; // Add 24 hours in minutes
    }
    
    // Calculate difference in hours
    const hoursDiff = (endMinutes - startMinutes) / 60;
    
    // Round to nearest quarter hour (0.25)
    const roundedHours = Math.round(hoursDiff * 4) / 4;
    
    return roundedHours.toFixed(2);
  };

  const convertTo24HourFormat = (timeStr: string): string => {
    const [timePart, ampm] = timeStr.split(' ');
    let [hourStr, minuteStr] = timePart.split(':');
    
    let hour = parseInt(hourStr, 10);
    const minute = parseInt(minuteStr, 10);
    
    if (ampm === 'PM' && hour < 12) hour += 12;
    if (ampm === 'AM' && hour === 12) hour = 0;
    
    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
  };

  const handleTimeLogSubmit = async (bugId: number) => {
    if (!timeLogHours || isNaN(Number(timeLogHours)) || Number(timeLogHours) <= 0) {
      toast.error("Please enter valid hours");
      return;
    }

    if (!startTime || !endTime) {
      toast.error("Please enter both start and end time");
      return;
    }

    if (!workDate) {
      toast.error("Please select a work date");
      return;
    }

    try {
      // Convert AM/PM time to 24-hour format for API
      const startTime24 = convertTo24HourFormat(startTime);
      const endTime24 = convertTo24HourFormat(endTime);
      
      const timeLogData: TimeLogCreateRequest = {
        workDate: workDate.toISOString(),
        startTime: startTime24, // Using 24-hour format
        endTime: endTime24, // Using 24-hour format
        comments: timeLogDescription || "",
        createdBy: String(userData.userId),
        updatedBy: String(userData.userId),
        remainingHr: parseFloat(remainingHours) || 0,
        taskId: bugId,
        hrsSpent: Number(timeLogHours),
      };

      await timeLogApi.create(timeLogData);

      toast.success("Time logged successfully");
      setIsLoggingTime(false);
      setSelectedBugForTimeLog(null);
      setTimeLogHours("");
      setTimeLogDescription("");
      setStartTime("");
      setEndTime("");
      setWorkDate(new Date());
    } catch (error) {
      console.error("Error logging time:", error);
      toast.error("Failed to log time");
    }
  };

  const getEmployeeName = (employeeId: number): string => {
    const employee = employees.find(emp => emp.id === employeeId);
    return employee ? `${employee.firstName} ${employee.lastName}` : `User ${employeeId}`;
  };

  const getEmployeeInitials = (employeeId: number): string => {
    const employee = employees.find(emp => emp.id === employeeId);
    return employee ? `${employee.firstName.charAt(0)}${employee.lastName.charAt(0)}`.toUpperCase() : "UN";
  };

  const sortBugs = (bugsToSort: Task[]): Task[] => {
    return [...bugsToSort].sort((a, b) => {
      let valueA, valueB;
      
      // Extract the values to compare based on the sort field
      switch (sortField) {
        case "title":
          valueA = a.title?.toLowerCase() || "";
          valueB = b.title?.toLowerCase() || "";
          break;
        case "status":
          valueA = a.status?.toLowerCase() || "";
          valueB = b.status?.toLowerCase() || "";
          break;
        case "assignedTo":
          valueA = getEmployeeName(a.assignedTo || 0).toLowerCase();
          valueB = getEmployeeName(b.assignedTo || 0).toLowerCase();
          break;
        case "severity":
          valueA = a.type?.toLowerCase() || "";
          valueB = b.type?.toLowerCase() || "";
          break;
        case "createdAt":
        default:
          // For dates, we need to convert to actual Date objects
          valueA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
          valueB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
          break;
      }
      
      // Compare based on sort order
      if (sortOrder === "asc") {
        return valueA > valueB ? 1 : valueA < valueB ? -1 : 0;
      } else {
        return valueA < valueB ? 1 : valueA > valueB ? -1 : 0;
      }
    });
  };

  // Helper function to get severity value from a bug
  const getBugSeverity = (bug: Task): string => {
    // First check if we have a severity field
    if (bug.severity) {
      return bug.severity;
    }
    // Fall back to type field which may have been used for severity
    return bug.type || '';
  };

  // Add this function to determine if a bug should be hidden
  const shouldShowBug = (bug: Task) => {
    const completedStatuses = ["Completed", "Closed", "Resolved"];
    if (collapseCompletedBugs && completedStatuses.includes(bug.status)) {
      return false;
    }
    return true;
  };

  // Add this function to determine if a bug should be shown based on the scope filter
  const isInSelectedScope = (bug: Task) => {
    if (scopeFilter === "all") return true;
    if (scopeFilter === "my" && bug.assignedTo === userData?.employeeId) return true;
    return false;
  };

  // Modify the filtered and sorted bugs function to handle collapsing
  const filteredAndSortedBugs = () => {
    console.log("DEBUG: Running filteredAndSortedBugs function");
    console.log(`DEBUG: Current bugs array length: ${bugs.length}`);
    
    let filtered = [...bugs];
    
    // Log current filters
    console.log("DEBUG: Applied filters:", { 
      searchQuery, 
      statusFilter, 
      severityFilter, 
      assigneeFilter, 
      projectFilter,
      scopeFilter
    });
    
    // Apply scope filter (My/Team/All bugs)
    if (scopeFilter !== "all") {
      filtered = filtered.filter(isInSelectedScope);
      console.log(`DEBUG: After scope filter: ${filtered.length} bugs`);
    }
    
    // Apply text search filter
    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(bug => 
        bug.title?.toLowerCase().includes(query) || 
        bug.description?.toLowerCase().includes(query) ||
        bug.taskCode?.toLowerCase().includes(query) ||
        bug.version?.toLowerCase().includes(query)
      );
      console.log(`DEBUG: After search filter: ${filtered.length} bugs`);
    }
    
    // Apply status filter
    if (statusFilter !== "all") {
      filtered = filtered.filter(bug => bug.status === statusFilter);
      console.log(`DEBUG: After status filter: ${filtered.length} bugs`);
    }
    
    // Apply severity filter (check both severity and type fields)
    if (severityFilter !== "all") {
      filtered = filtered.filter(bug => 
        getBugSeverity(bug) === severityFilter || bug.type === severityFilter
      );
      console.log(`DEBUG: After severity filter: ${filtered.length} bugs`);
    }
    
    // Apply assignee filter
    if (assigneeFilter !== "all") {
      filtered = filtered.filter(bug => bug.assignedTo?.toString() === assigneeFilter);
      console.log(`DEBUG: After assignee filter: ${filtered.length} bugs`);
    }
    
    // Apply project filter
    if (projectFilter !== "all") {
      filtered = filtered.filter(bug => 
        bug.projectName === projectFilter
      );
      console.log(`DEBUG: After project filter: ${filtered.length} bugs`);
      console.log(`DEBUG: Project filter value: ${projectFilter}`);
      console.log(`DEBUG: Sample bug projectName: ${filtered.length > 0 ? filtered[0].projectName : 'none'}`);
    }
    
    console.log(`DEBUG: Final filtered bugs count: ${filtered.length}`);
    
    // Apply sorting
    const sorted = sortBugs(filtered);
    
    return sorted;
  };

  // Count completed bugs that are currently filtered
  const getCompletedBugsCount = () => {
    const completedStatuses = ["Completed", "Closed", "Resolved"];
    return filteredAndSortedBugs().filter(bug => 
      completedStatuses.includes(bug.status)
    ).length;
  };

  const handleCreate = () => {
    navigate("/bugs/new");
  };

  const handleEdit = (bug: Task) => {
    navigate(`/bugs/${bug.id}/edit`);
  };

  const handleViewDetails = (bug: Task) => {
    navigate(`/bugs/${bug.id}`);
  };

  const handleDelete = async (id: number) => {
    try {
      setIsDeleting(true);
      setDeleteId(id);
      await tasksApi.delete(id);
      toast.success("Bug deleted successfully");
      
      // Refresh the bug list
      const bugTasks = await tasksApi.getByType('Bug');
      
      // Map tasks to include projectId
      const bugsWithProjectId = bugTasks.map(task => {
        return { ...task, projectId: task.issuesId } as Task;
      })
      .filter(bug => {
        // If no user projects are loaded yet, don't filter
        if (userProjects.length === 0) return true;
        
        // Keep bugs that belong to the user's projects
        return bug.projectName && userProjects.some(p => p.projectName === bug.projectName);
      });
      
      setBugs(bugsWithProjectId);
    } catch (error) {
      console.error("Error deleting bug:", error);
      toast.error("Failed to delete bug");
    } finally {
      setIsDeleting(false);
      setDeleteId(null);
    }
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "Completed":
      case "Closed":
      case "Resolved":
        return (
          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 flex items-center gap-1 px-2 font-medium">
            <CheckCircle className="h-3 w-3" />
            {status}
          </Badge>
        );
      case "In Progress":
        return (
          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200 flex items-center gap-1 px-2 font-medium">
            <RefreshCw className="h-3 w-3" />
            {status}
          </Badge>
        );
      case "Re-Open":
      case "Reopened":
        return (
          <Badge variant="outline" className="bg-orange-50 text-orange-700 border-orange-200 flex items-center gap-1 px-2 font-medium">
            <RefreshCw className="h-3 w-3" />
            {status}
          </Badge>
        );
      case "In Review":
      case "Ready for QA":
        return (
          <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200 flex items-center gap-1 px-2 font-medium">
            <Clock className="h-3 w-3" />
            {status}
          </Badge>
        );
      case "Open":
      case "New":
        return (
          <Badge variant="outline" className="bg-slate-50 text-slate-700 border-slate-200 flex items-center gap-1 px-2 font-medium">
            <AlertCircle className="h-3 w-3" />
            {status || "New"}
          </Badge>
        );
      default:
        return (
          <Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200 flex items-center gap-1 px-2 font-medium">
            <AlertCircle className="h-3 w-3" />
            {status || "Unknown"}
          </Badge>
        );
    }
  };

  const getSeverityBadge = (severity: string) => {
    // Use our helper function if we're passed a bug object
    if (typeof severity === 'object') {
      severity = getBugSeverity(severity);
    }
    
    switch (severity) {
      case "Blocker":
        return (
          <Badge variant="outline" className="bg-red-50 border-red-200 text-red-700 flex items-center gap-1 px-2 font-medium">
            <ShieldAlert className="h-3 w-3" />
            {severity}
          </Badge>
        );
      case "Critical":
        return (
          <Badge variant="outline" className="bg-rose-50 border-rose-200 text-rose-700 flex items-center gap-1 px-2 font-medium">
            <FlameIcon className="h-3 w-3" />
            {severity}
          </Badge>
        );
      case "Major":
      case "High":
        return (
          <Badge variant="outline" className="bg-amber-50 border-amber-200 text-amber-700 flex items-center gap-1 px-2 font-medium">
            <AlertCircle className="h-3 w-3" />
            {severity}
          </Badge>
        );
      case "Minor":
      case "Medium":
        return (
          <Badge variant="outline" className="bg-indigo-50 border-indigo-200 text-indigo-700 flex items-center gap-1 px-2 font-medium">
            <Check className="h-3 w-3" />
            {severity}
          </Badge>
        );
      case "Trivial":
      case "Low":
        return (
          <Badge variant="outline" className="bg-green-50 border-green-200 text-green-600 flex items-center gap-1 px-2 font-medium">
            <Check className="h-3 w-3" />
            {severity}
          </Badge>
        );
      default:
        return (
          <Badge variant="outline" className="bg-gray-50 border-gray-200 text-gray-600 flex items-center gap-1 px-2 font-medium">
            {severity || "Unknown"}
          </Badge>
        );
    }
  };

  const handleSortChange = (field: string) => {
    if (field === sortField) {
      // If clicking the same field, toggle the sort order
      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
    } else {
      // If clicking a different field, set it as the new sort field and default to ascending
      setSortField(field);
      setSortOrder("asc");
    }
  };

  const renderSortIcon = (field: string) => {
    if (field !== sortField) return null;
    
    return (
      <span className="ml-1">
        {sortOrder === "asc" ? "↑" : "↓"}
      </span>
    );
  };

  // Add useEffect to track filter changes
  useEffect(() => {
    console.log("Filters changed:", { statusFilter, severityFilter, assigneeFilter, projectFilter });
  }, [statusFilter, severityFilter, assigneeFilter, projectFilter]);

  // Update filter handlers to ensure state update triggers re-render
  const handleStatusFilterChange = (value: string) => {
    console.log("Status filter changing to:", value);
    setStatusFilter(value);
  };

  const handleSeverityFilterChange = (value: string) => {
    console.log("Severity filter changing to:", value);
    setSeverityFilter(value);
  };

  const handleAssigneeFilterChange = (value: string | number) => {
    console.log("Assignee filter changing to:", value);
    setAssigneeFilter(value === "all" ? "all" : value.toString());
  };

  const handleProjectFilterChange = (value: string) => {
    console.log(`Project filter changed to: ${value}`);
    setProjectFilter(value);
    console.log(`Setting project filter to: ${value}`);
  };

  // Add new function to handle quick status change
  const handleStatusChange = async (bug: Task, newStatus: string) => {
    if (isUpdatingStatus) return;
    
    try {
      setIsUpdatingStatus(true);
      setUpdateStatusId(bug.id);
      
      // Create updated bug object with new status
      const updatedBug: Task = {
        ...bug,
        status: newStatus
      };
      
      // Call API to update the bug
      await tasksApi.update(bug.id, updatedBug);
      
      // Update local state
      setBugs(prevBugs => 
        prevBugs.map(b => 
          b.id === bug.id ? { ...b, status: newStatus } : b
        )
      );
      
      toast.success(`Bug status updated to ${newStatus}`);
    } catch (error) {
      console.error("Error updating bug status:", error);
      toast.error("Failed to update status");
    } finally {
      setIsUpdatingStatus(false);
      setUpdateStatusId(null);
    }
  };

  // We don't need a separate fetchBugs function anymore as it's handled in the loadData function
  // But we need a refresh function for the refresh button
  const handleRefreshBugs = async () => {
    try {
      setIsLoading(true);
      
      // Only refresh the bugs without reloading team data
      const bugTasks = await tasksApi.getByType('Bug');
      console.log(`DEBUG: Refreshed ${bugTasks.length} bug tasks from API`);
      
      // Map tasks to include projectId
      const bugsWithProjectId = bugTasks.map(task => {
        return { ...task, projectId: task.issuesId || null } as Task;
      });
      
      // Don't filter by user projects, show all bugs
      console.log(`DEBUG: Mapped ${bugsWithProjectId.length} bugs with project IDs`);
      setBugs(bugsWithProjectId);
      toast.success("Bug list refreshed");
    } catch (error) {
      console.error("Error refreshing bugs:", error);
      toast.error("Failed to refresh bug list");
    } finally {
      setIsLoading(false);
    }
  };

  const handleQuickView = (bug: Task, e?: React.MouseEvent) => {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    setSelectedBugForQuickView(bug);
    setIsQuickViewOpen(true);
  };

  // Export functionality
  const handleExportToExcel = () => {
    try {
      console.log("Starting Excel export...");
      // Get filtered bugs data
      const filteredBugs = filteredAndSortedBugs();
      console.log(`Found ${filteredBugs.length} bugs to export`);
      
      if (filteredBugs.length === 0) {
        toast.error("No bugs to export");
        return;
      }
      
      // Format data for Excel - include all available columns
      console.log("Formatting bug data for Excel export");
      const excelData = filteredBugs.map(bug => {
        // Cast bug to Task for accessing specific properties
        const bugTask = bug as Task;
        return {
          'Bug ID': bug.taskCode || `BUG-${bug.id}`,
          'Title': bug.title || '',
          'Status': bug.status || '',
          'Severity': getBugSeverity(bug) || '',
          'Priority': bug.priority || '',
          'Assignee': bug.assignedTo ? getEmployeeName(bug.assignedTo) : 'Unassigned',
          'Project': bugTask.projectName || (bugTask.projectId ? projects[bugTask.projectId as number] || `Project ID: ${bugTask.projectId}` : 'N/A'),
          'Issue': bugTask.issueName || 'N/A',
          'Deliverable': bugTask.deliverableName || 'N/A',
          'Description': bug.description || '',
          'Steps to Reproduce': bugTask.stepsToReproduce || '',
          'Expected Behavior': bugTask.expectedBehavior || '',
          'Actual Behavior': bugTask.actualBehavior || '',
          'Related URL': bugTask.relatedUrl || '',
          'Version': bug.version || '',
          'Created Date': bug.createdAt ? format(new Date(bug.createdAt), "MM/dd/yyyy") : 'N/A'
        };
      });
      
      console.log("Prepared Excel data, creating worksheet...");
      console.log("XLSX object available:", typeof XLSX !== 'undefined');
      
      try {
        // First try using the XLSX library if available
        if (typeof XLSX !== 'undefined' && XLSX) {
          // Create a worksheet from the data
          const worksheet = XLSX.utils.json_to_sheet(excelData);
          console.log("Worksheet created successfully");
          
          // Define column widths
          const columnWidths = {
            'Bug ID': 15,
            'Title': 50,
            'Status': 15,
            'Severity': 15,
            'Priority': 15,
            'Assignee': 25,
            'Project': 25,
            'Issue': 25,
            'Deliverable': 25,
            'Description': 80,
            'Steps to Reproduce': 80,
            'Expected Behavior': 50,
            'Actual Behavior': 50,
            'Related URL': 40,
            'Version': 15,
            'Created Date': 15
          };
          
          // Apply column widths
          console.log("Applying column widths");
          worksheet['!cols'] = Object.entries(columnWidths).map(([key, width]) => ({
            wch: width
          }));
          
          // Create a workbook and add the worksheet
          console.log("Creating workbook");
          const workbook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(workbook, worksheet, 'Bugs');
          
          // Generate Excel file
          const filename = `bug_list_${format(new Date(), 'yyyy-MM-dd')}`;
          console.log("Writing Excel file:", filename);
          XLSX.writeFile(workbook, `${filename}.xlsx`);
          
          toast.success(`Bugs exported to Excel successfully`);
          console.log("Excel export completed successfully");
          return;
        }
        
        // Fallback method: Generate CSV and use saveAs
        console.log("XLSX library not available, using CSV fallback method");
        
        // Generate CSV content
        let csvContent = Object.keys(excelData[0]).join(",") + "\n";
        
        // Add data rows
        excelData.forEach(item => {
          const row = Object.values(item).map(value => {
            // Properly escape values with quotes if they contain commas or quotes
            if (typeof value === 'string' && (value.includes(',') || value.includes('"') || value.includes('\n'))) {
              return `"${value.replace(/"/g, '""')}"`;
            }
            return value;
          }).join(",");
          csvContent += row + "\n";
        });
        
        // Create a blob with the CSV content
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        
        // Create a filename
        const filename = `bug_list_${format(new Date(), 'yyyy-MM-dd')}.csv`;
        
        // Use the saveAs function to trigger the download
        saveAs(blob, filename);
        
        toast.success(`Bugs exported to CSV successfully`);
        console.log("CSV export completed successfully");
      } catch (innerError) {
        console.error("Error during Excel/CSV operations:", innerError);
        toast.error("Failed to generate file: " + (innerError instanceof Error ? innerError.message : String(innerError)));
      }
    } catch (error) {
      console.error('Error exporting to Excel:', error);
      toast.error('Failed to export bugs to Excel: ' + (error instanceof Error ? error.message : String(error)));
    }
  };
  
  const handleExportToPDF = () => {
    try {
      console.log("Starting PDF export...");
      // Get filtered bugs data
      const filteredBugs = filteredAndSortedBugs();
      console.log(`Found ${filteredBugs.length} bugs to export to PDF`);
      
      if (filteredBugs.length === 0) {
        toast.error("No bugs to export");
        return;
      }
      
      // Try the primary jsPDF method first
      try {
        console.log("Creating jsPDF instance...");
        // Create a new PDF document
        const doc = new jsPDF('landscape');
        console.log("jsPDF instance created successfully");
        
        // Add title
        doc.setFontSize(18);
        doc.text('Bug Report', 14, 22);
        
        // Add generated date
        doc.setFontSize(10);
        doc.text(`Generated on: ${format(new Date(), 'MM/dd/yyyy HH:mm')}`, 14, 30);
        
        // Filter and status info
        const filterInfo = [];
        if (statusFilter !== 'all') filterInfo.push(`Status: ${statusFilter}`);
        if (severityFilter !== 'all') filterInfo.push(`Severity: ${severityFilter}`);
        if (assigneeFilter !== 'all') filterInfo.push(`Assignee: ${employees.find(emp => emp.id.toString() === assigneeFilter)?.firstName || assigneeFilter}`);
        if (projectFilter !== 'all') filterInfo.push(`Project: ${projectFilter}`);
        
        if (filterInfo.length > 0) {
          doc.text(`Filters: ${filterInfo.join(', ')}`, 14, 36);
        }
        
        // Define table columns - add new fields
        const tableColumn = ["Bug ID", "Title", "Status", "Severity", "Assignee", "Project", "Issue", "Created Date"];
        
        // Create data for the table - display full title now
        const tableRows = filteredBugs.map(bug => {
          const bugTask = bug as Task;
          return [
            bug.taskCode || `BUG-${bug.id}`,
            bug.title?.substring(0, 40) || '', // Trim title to prevent overflow
            bug.status || '',
            getBugSeverity(bug) || '',
            bug.assignedTo ? getEmployeeName(bug.assignedTo).substring(0, 20) : 'Unassigned',
            (bugTask.projectName || '').substring(0, 20),
            (bugTask.issueName || 'N/A').substring(0, 20),
            bug.createdAt ? format(new Date(bug.createdAt), "MM/dd/yyyy") : 'N/A',
          ];
        });
        
        console.log("Checking if doc.autoTable is available...");
        
        // Get page dimensions
        const pageWidth = doc.internal.pageSize.getWidth();
        const pageHeight = doc.internal.pageSize.getHeight();
        
        // Define minimal margins for maximum usable width
        const margin = 10;
        
        // Create a simple table manually if autoTable is not available
        if (!doc.autoTable) {
          console.log("autoTable not available, creating manual table");
          
          // Set starting position
          let startY = 45;
          const lineHeight = 8;
          const cellPadding = 2;
          const columnWidth = (pageWidth - margin * 2) / tableColumn.length;
          
          // Draw header
          doc.setFillColor(66, 66, 124);
          doc.setTextColor(255, 255, 255);
          doc.setFontSize(8);
          
          // Draw header cells
          doc.rect(margin, startY, pageWidth - margin * 2, lineHeight + cellPadding * 2, 'F');
          
          for (let i = 0; i < tableColumn.length; i++) {
            doc.text(
              tableColumn[i],
              margin + i * columnWidth + cellPadding,
              startY + lineHeight
            );
          }
          
          startY += lineHeight + cellPadding * 2;
          
          // Draw data rows
          doc.setTextColor(0, 0, 0);
          
          for (let i = 0; i < tableRows.length; i++) {
            const row = tableRows[i];
            
            // Alternate row background
            if (i % 2 === 0) {
              doc.setFillColor(240, 240, 240);
              doc.rect(margin, startY, pageWidth - margin * 2, lineHeight + cellPadding * 2, 'F');
            }
            
            // Draw cell text
            for (let j = 0; j < row.length; j++) {
              doc.text(
                String(row[j]),
                margin + j * columnWidth + cellPadding,
                startY + lineHeight
              );
            }
            
            startY += lineHeight + cellPadding * 2;
            
            // Add a new page if needed
            if (startY > pageHeight - margin) {
              doc.addPage();
              startY = margin;
              
              // Add page number
              doc.setFontSize(8);
              doc.text(`Page ${doc.getNumberOfPages()}`, margin, pageHeight - 10);
            }
          }
        } else {
          console.log("Calling doc.autoTable method...");
          // Use the autoTable method directly on the doc object
          doc.autoTable({
            head: [tableColumn],
            body: tableRows,
            startY: 45,
            theme: 'grid',
            styles: { 
              fontSize: 8, 
              cellPadding: 2,
              overflow: 'linebreak', // This setting will wrap long text
              lineWidth: 0.1,
              halign: 'left', // Horizontal alignment
            },
            // Set column widths to undefined to allow autoTable to calculate
            // optimal widths for filling the whole page width
            columnStyles: {},
            headStyles: { 
              fillColor: [66, 66, 124], 
              textColor: 255,
              fontStyle: 'bold'
            },
            alternateRowStyles: { fillColor: [240, 240, 240] },
            // Set margins to use maximum space
            margin: { top: 45, left: margin, right: margin, bottom: 20 },
            // Set to 'auto' to use full available width
            tableWidth: 'auto',
            didDrawPage: (data) => {
              // Add page number at the bottom
              doc.setFontSize(8);
              doc.text(`Page ${data.pageNumber}`, margin, pageHeight - 10);
            }
          });
        }
        
        console.log("Saving PDF...");
        // Save the PDF
        doc.save(`bug_report_${format(new Date(), 'yyyy-MM-dd')}.pdf`);
        
        toast.success('Bugs exported to PDF successfully');
        console.log("PDF export completed successfully");
        return;
      } catch (jsPdfError) {
        console.error("jsPDF export failed, trying fallback method:", jsPdfError);
        
        // Fallback method: Create a printable HTML table
        console.log("Using HTML table fallback for PDF export");
        
        // Define columns for HTML table
        const htmlTableColumns = ["Bug ID", "Title", "Status", "Severity", "Assignee", "Project", "Issue", "Created Date"];
        
        // Create filter info for HTML display
        const htmlFilterInfo = [];
        if (statusFilter !== 'all') htmlFilterInfo.push(`Status: ${statusFilter}`);
        if (severityFilter !== 'all') htmlFilterInfo.push(`Severity: ${severityFilter}`);
        if (assigneeFilter !== 'all') htmlFilterInfo.push(`Assignee: ${employees.find(emp => emp.id.toString() === assigneeFilter)?.firstName || assigneeFilter}`);
        if (projectFilter !== 'all') htmlFilterInfo.push(`Project: ${projectFilter}`);
        
        // Create a new window for printing
        const printWindow = window.open('', '_blank');
        if (!printWindow) {
          throw new Error("Could not open print window. Please check your browser's popup settings.");
        }
        
        // Build HTML content
        const htmlContent = `
          <!DOCTYPE html>
          <html>
          <head>
            <title>Bug Report - ${format(new Date(), 'yyyy-MM-dd')}</title>
            <style>
              body { font-family: Arial, sans-serif; margin: 20px; }
              h1 { color: #333; }
              table { border-collapse: collapse; width: 100%; margin-top: 20px; }
              th { background-color: #424e7c; color: white; text-align: left; padding: 8px; }
              td { border: 1px solid #ddd; padding: 8px; }
              tr:nth-child(even) { background-color: #f2f2f2; }
              .info { color: #666; margin-bottom: 20px; }
              @media print {
                button { display: none; }
                body { margin: 0; }
              }
            </style>
          </head>
          <body>
            <button onclick="window.print()" style="padding: 10px; background: #424e7c; color: white; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 20px;">Print Report</button>
            <h1>Bug Report</h1>
            <div class="info">Generated on: ${format(new Date(), 'MM/dd/yyyy HH:mm')}</div>
            ${
              htmlFilterInfo.length > 0 ? 
              `<div class="info">Filters: ${htmlFilterInfo.join(', ')}</div>` : 
              ''
            }
            <table>
              <thead>
                <tr>
                  ${htmlTableColumns.map(col => `<th>${col}</th>`).join('')}
                </tr>
              </thead>
              <tbody>
                ${filteredBugs.map(bug => {
                  const bugTask = bug as Task;
                  return `
                    <tr>
                      <td>${bug.taskCode || `BUG-${bug.id}`}</td>
                      <td>${bug.title || ''}</td>
                      <td>${bug.status || ''}</td>
                      <td>${getBugSeverity(bug) || ''}</td>
                      <td>${bug.assignedTo ? getEmployeeName(bug.assignedTo) : 'Unassigned'}</td>
                      <td>${bugTask.projectName || 'N/A'}</td>
                      <td>${bugTask.issueName || 'N/A'}</td>
                      <td>${bug.createdAt ? format(new Date(bug.createdAt), "MM/dd/yyyy") : 'N/A'}</td>
                    </tr>
                  `;
                }).join('')}
              </tbody>
            </table>
          </body>
          </html>
        `;
        
        // Write HTML to the new window
        printWindow.document.write(htmlContent);
        printWindow.document.close();
        
        toast.success('Bug report opened in a new window for printing');
        console.log("HTML table export completed successfully");
      }
    } catch (error) {
      console.error('Error exporting to PDF:', error);
      toast.error('Failed to export bugs to PDF: ' + (error instanceof Error ? error.message : String(error)));
    }
  };

  // Add a custom export dropdown component
  function ExportDropdown() {
    const { openDropdown, setOpenDropdown } = useContext(DropdownContext);
    const isOpen = openDropdown === "export-dropdown";
    const dropdownRef = useRef<HTMLDivElement>(null);
    
    const handleButtonClick = (e: React.MouseEvent) => {
      e.preventDefault();
      e.stopPropagation();
      
      // If already open, close it
      if (isOpen) {
        setOpenDropdown(null);
        return;
      }
      
      // Otherwise, open this dropdown
      setOpenDropdown("export-dropdown");
    };
    
    const handleExcelExport = (e: React.MouseEvent) => {
      e.preventDefault();
      e.stopPropagation();
      console.log("Excel export button clicked");
      setOpenDropdown(null);
      handleExportToExcel();
    };
    
    const handlePDFExport = (e: React.MouseEvent) => {
      e.preventDefault();
      e.stopPropagation();
      console.log("PDF export button clicked");
      setOpenDropdown(null);
      handleExportToPDF();
    };
    
    // Close dropdown when clicking outside
    useEffect(() => {
      if (!isOpen) return;
      
      const handleOutsideClick = (e: MouseEvent) => {
        if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
          setOpenDropdown(null);
        }
      };
      
      document.addEventListener('mousedown', handleOutsideClick);
      return () => {
        document.removeEventListener('mousedown', handleOutsideClick);
      };
    }, [isOpen, setOpenDropdown]);
    
    return (
      <div className="relative" ref={dropdownRef}>
        <Button 
          variant="outline" 
          className="gap-1"
          onClick={handleButtonClick}
        >
          <Download className="h-4 w-4" />
          Export
          <ChevronDown className={cn("h-4 w-4 opacity-50", isOpen && "transform rotate-180")} />
        </Button>
        
        {isOpen && (
          <div 
            className="absolute right-0 z-50 mt-1 min-w-[160px] rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
          >
            <div
              className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
              onClick={(e) => {
                console.log("Excel export div clicked");
                handleExcelExport(e);
              }}
            >
              <FileSpreadsheet className="mr-2 h-4 w-4 text-green-600" />
              Excel
            </div>
            <div
              className="flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
              onClick={handlePDFExport}
            >
              <FileText className="mr-2 h-4 w-4 text-red-600" />
              PDF
            </div>
          </div>
        )}
      </div>
    );
  }

  return (
    <>
      {/* Quick View Dialog - Using custom modal */}
      <CustomModal 
        isOpen={isQuickViewOpen} 
        onClose={() => setIsQuickViewOpen(false)}
        title={selectedBugForQuickView?.title}
      >
        {selectedBugForQuickView && (
          <div className="space-y-4">
            <div className="flex items-center gap-2 text-muted-foreground mb-2">
              <span className="text-xs font-mono bg-muted px-2 py-1 rounded">
                {selectedBugForQuickView.taskCode || `BUG-${selectedBugForQuickView.id}`}
              </span>
              {selectedBugForQuickView.createdAt && (
                <span className="text-xs">
                  Created on {format(new Date(selectedBugForQuickView.createdAt), "MMMM d, yyyy")}
                </span>
              )}
            </div>
            
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-3">
              <div className="space-y-1">
                <p className="text-xs font-medium text-muted-foreground">Status</p>
                {getStatusBadge(selectedBugForQuickView.status)}
              </div>
              <div className="space-y-1">
                <p className="text-xs font-medium text-muted-foreground">Severity</p>
                {getSeverityBadge(getBugSeverity(selectedBugForQuickView))}
              </div>
              <div className="space-y-1">
                <p className="text-xs font-medium text-muted-foreground">Version</p>
                <p className="font-mono text-xs">{selectedBugForQuickView.version || "N/A"}</p>
              </div>
            </div>
            
            <div className="border-t pt-3 mb-3">
              <div className="space-y-1">
                <p className="text-xs font-medium text-muted-foreground">Assignee</p>
                {selectedBugForQuickView.assignedTo ? (
                  <div className="flex items-center gap-2">
                    <Avatar className="h-6 w-6 bg-indigo-100">
                      <AvatarFallback className="text-xs bg-indigo-500 text-white">
                        {getEmployeeInitials(selectedBugForQuickView.assignedTo)}
                      </AvatarFallback>
                    </Avatar>
                    <span className="text-sm">
                      {getEmployeeName(selectedBugForQuickView.assignedTo)}
                    </span>
                  </div>
                ) : (
                  <span className="text-muted-foreground text-sm">Unassigned</span>
                )}
              </div>
            </div>
            
            <div className="border-t pt-3 mb-3">
              <div className="space-y-1">
                <p className="text-xs font-medium text-muted-foreground">Description</p>
                <div className="text-sm bg-muted/50 p-3 rounded-md whitespace-pre-wrap text-sm">
                  {selectedBugForQuickView.description || "No description provided."}
                </div>
              </div>
            </div>
            
            {/* Steps to Reproduce section */}
            <div className="border-t pt-3 mb-3">
              <div className="space-y-1">
                <p className="text-xs font-medium text-muted-foreground">Steps to Reproduce</p>
                <div className="text-sm bg-muted/50 p-3 rounded-md">
                  {selectedBugForQuickView.stepsToReproduce ? (
                    <ol className="list-decimal pl-5 space-y-1 text-sm">
                      {selectedBugForQuickView.stepsToReproduce
                        .split('\n')
                        .filter(Boolean)
                        .map((step, index) => (
                          <li key={index}>{step.trim()}</li>
                        ))}
                    </ol>
                  ) : (
                    <span className="text-muted-foreground text-sm">No steps to reproduce provided</span>
                  )}
                </div>
              </div>
            </div>
            
            {/* Expected Behavior section */}
            <div className="border-t pt-3 mb-3">
              <div className="space-y-1">
                <p className="text-xs font-medium text-muted-foreground">Expected Behavior</p>
                <div className="text-sm bg-muted/50 p-3 rounded-md whitespace-pre-wrap">
                  {selectedBugForQuickView.expectedBehavior || 
                    <span className="text-muted-foreground text-sm">No expected behavior provided</span>
                  }
                </div>
              </div>
            </div>
            
            {/* Actual Behavior section */}
            <div className="border-t pt-3 mb-3">
              <div className="space-y-1">
                <p className="text-xs font-medium text-muted-foreground">Actual Behavior</p>
                <div className="text-sm bg-muted/50 p-3 rounded-md whitespace-pre-wrap">
                  {selectedBugForQuickView.actualBehavior || 
                    <span className="text-muted-foreground text-sm">No actual behavior provided</span>
                  }
                </div>
              </div>
            </div>
            
            <div className="border-t pt-3 flex flex-wrap gap-2">
              <Button 
                variant="outline" 
                size="sm" 
                onClick={() => handleViewDetails(selectedBugForQuickView)}
                className="h-8"
              >
                <ExternalLink className="h-3.5 w-3.5 mr-1.5" />
                Open Full View
              </Button>
              
              <Button 
                variant="outline" 
                size="sm" 
                onClick={() => {
                  setIsQuickViewOpen(false);
                  handleEdit(selectedBugForQuickView);
                }}
                className="h-8"
              >
                <Edit2 className="h-3.5 w-3.5 mr-1.5" />
                Edit Bug
              </Button>
              
              <Button 
                variant="outline" 
                size="sm" 
                onClick={() => {
                  setIsQuickViewOpen(false);
                  setSelectedBugForTimeLog(selectedBugForQuickView);
                  setIsLoggingTime(true);
                }}
                className="h-8"
              >
                <Timer className="h-3.5 w-3.5 mr-1.5" />
                Log Time
              </Button>
            </div>
          </div>
        )}
      </CustomModal>

      {/* Time Logging Modal - Mobile Responsive */}
      {isLoggingTime && selectedBugForTimeLog && (
        <div
          className="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999] p-3 sm:p-4"
          onClick={() => {
            // Only close if clicking the backdrop
            setIsLoggingTime(false);
            setSelectedBugForTimeLog(null);
            setTimeLogHours("");
            setRemainingHours("");
            setTimeLogDescription("");
            setStartTime("");
            setEndTime("");
            setWorkDate(new Date());
          }}
        >
          <div
            className="bg-background rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-y-auto p-4 sm:p-6 relative"
            onClick={(e) => e.stopPropagation()}
            style={{ zIndex: 10000 }}
          >
            {/* Close button in the corner */}
            <Button
              variant="ghost"
              size="icon"
              className="absolute right-2 top-2"
              onClick={() => {
                setIsLoggingTime(false);
                setSelectedBugForTimeLog(null);
                setTimeLogHours("");
                setRemainingHours("");
                setTimeLogDescription("");
                setStartTime("");
                setEndTime("");
                setWorkDate(new Date());
              }}
            >
              <X className="h-4 w-4" />
            </Button>

            <div className="mb-4">
              <h3 className="text-base sm:text-lg font-semibold mb-1">Log Time</h3>
              <p className="text-sm text-muted-foreground line-clamp-2">{selectedBugForTimeLog.title}</p>
            </div>

            <div className="space-y-4">
              <div>
                <label className="text-sm font-medium mb-2 block">Work Date</label>
                <div className="space-y-3">
                  <div className="grid grid-cols-2 gap-2">
                    <Button
                      variant={workDate && isSameDay(workDate, getYesterday()) ? "default" : "outline"}
                      className="w-full justify-center text-xs sm:text-sm h-9"
                      onClick={() => {
                        const yesterday = getYesterday();
                        setWorkDate(yesterday);
                      }}
                      type="button"
                    >
                      Yesterday
                    </Button>
                    <Button
                      variant={workDate && isSameDay(workDate, new Date()) ? "default" : "outline"}
                      className="w-full justify-center text-xs sm:text-sm h-9"
                      onClick={() => {
                        const today = new Date();
                        setWorkDate(today);
                      }}
                      type="button"
                    >
                      Today
                    </Button>
                  </div>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className={cn(
                          "w-full justify-start text-left font-normal h-9 text-sm",
                          !workDate && "text-muted-foreground"
                        )}
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {workDate ? format(workDate, "PPP") : <span>Pick a date</span>}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                      <Calendar
                        mode="single"
                        selected={workDate}
                        onSelect={setWorkDate}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div className="space-y-2" style={{ zIndex: 45, position: 'relative' }}>
                  <label className="text-sm font-medium block">Start Time</label>
                  <Dropdown
                    options={timeOptions}
                    value={startTime}
                    onValueChange={(value) => {
                      setStartTime(value);
                      if (endTime) {
                        // Calculate hours spent between start and end
                        const hoursSpent = calculateHoursSpent(value, endTime);
                        setTimeLogHours(hoursSpent);
                      }
                    }}
                    placeholder="Select start time"
                    className="w-full text-sm"
                  />
                </div>

                <div className="space-y-2" style={{ zIndex: 40, position: 'relative' }}>
                  <label className="text-sm font-medium block">End Time</label>
                  <Dropdown
                    options={timeOptions}
                    value={endTime}
                    onValueChange={(value) => {
                      setEndTime(value);
                      if (startTime) {
                        // Calculate hours spent between start and end
                        const hoursSpent = calculateHoursSpent(startTime, value);
                        setTimeLogHours(hoursSpent);
                      }
                    }}
                    placeholder="Select end time"
                    className="w-full text-sm"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium block">Hours Spent</label>
                  <Input
                    type="number"
                    min="0"
                    step="0.5"
                    value={timeLogHours}
                    onChange={(e) => setTimeLogHours(e.target.value)}
                    placeholder="Hours worked"
                    className="text-sm h-9"
                  />
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-medium block">Hours Remaining</label>
                  <Input
                    type="number"
                    min="0"
                    step="0.5"
                    value={remainingHours}
                    onChange={(e) => setRemainingHours(e.target.value)}
                    placeholder="Hours remaining"
                    className="text-sm h-9"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium block">Description</label>
                <Textarea
                  value={timeLogDescription}
                  onChange={(e) => setTimeLogDescription(e.target.value)}
                  placeholder="What did you work on?"
                  rows={3}
                  className="text-sm resize-none"
                />
              </div>

              <Button 
                className="w-full h-10 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white text-sm font-medium"
                onClick={() => handleTimeLogSubmit(selectedBugForTimeLog.id)}
              >
                <Clock className="h-4 w-4 mr-2" /> Log Time
              </Button>
            </div>
          </div>
        </div>
      )}

      <Layout>
        <TooltipProvider>
          <DropdownProvider>
            <div className="pb-6 w-full">
            <div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 border-b">
              <div className="flex flex-col gap-4 px-3 sm:px-4 md:px-6 py-4 sm:py-6">
                <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
                  <div className="flex-1 min-w-0">
                    <h1 className="text-2xl sm:text-3xl font-bold tracking-tight flex items-center gap-2 mb-1">
                      <Bug className="h-6 w-6 sm:h-7 sm:w-7 text-indigo-600 flex-shrink-0" />
                      <span className="truncate">Bug Tracker</span>
                    </h1>
                    <p className="text-muted-foreground text-sm sm:text-base max-w-lg">
                      Track, manage, and resolve bugs and issues across your projects
                    </p>
                  </div>
                  
                  {/* Mobile-first action buttons */}
                  <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-2 flex-shrink-0">
                    <Button 
                      onClick={handleCreate} 
                      className="bg-blue-600 hover:bg-blue-700 shadow-sm w-full sm:w-auto order-1 sm:order-3"
                      size="sm"
                    >
                      <Plus className="mr-2 h-4 w-4" />
                      <span className="sm:hidden">New Bug</span>
                      <span className="hidden sm:inline">New Bug</span>
                    </Button>
                    
                    {/* Export dropdown - hidden on mobile, shown on larger screens */}
                    <div className="relative hidden sm:block order-2 sm:order-4">
                      <ExportDropdown />
                    </div>
                  </div>
                </div>
                
                {/* View mode and scope filters - stacked on mobile */}
                <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
                  {/* View mode toggle */}
                  <div className="bg-background/80 backdrop-blur-sm border shadow-sm p-1 rounded-lg flex w-full sm:w-auto">
                    <Button 
                      variant={viewMode === "dashboard" ? "default" : "ghost"} 
                      size="sm"
                      onClick={() => setViewMode("dashboard")}
                      className={cn(
                        "flex-1 sm:flex-initial text-xs sm:text-sm",
                        viewMode === "dashboard" ? "bg-white dark:bg-gray-800 shadow-sm text-primary" : ""
                      )}
                    >
                      <LayoutDashboard className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
                      Dashboard
                    </Button>
                    <Button 
                      variant={viewMode === "list" ? "default" : "ghost"}
                      size="sm"
                      onClick={() => setViewMode("list")}
                      className={cn(
                        "flex-1 sm:flex-initial text-xs sm:text-sm",
                        viewMode === "list" ? "bg-white dark:bg-gray-800 shadow-sm text-primary" : ""
                      )}
                    >
                      <LayoutList className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
                      List
                    </Button>
                  </div>
                  
                  {/* Scope filter buttons */}
                  <div className="bg-background/80 backdrop-blur-sm border shadow-sm p-1 rounded-lg flex w-full sm:w-auto">
                    <Button 
                      variant={scopeFilter === "my" ? "default" : "ghost"} 
                      size="sm"
                      onClick={() => setScopeFilter("my")}
                      className={cn(
                        "flex-1 sm:flex-initial text-xs sm:text-sm",
                        scopeFilter === "my" ? "bg-white dark:bg-gray-800 shadow-sm text-primary" : ""
                      )}
                    >
                      <User className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
                      My Bugs
                    </Button>
                    <Button 
                      variant={scopeFilter === "all" ? "default" : "ghost"}
                      size="sm"
                      onClick={() => setScopeFilter("all")}
                      className={cn(
                        "flex-1 sm:flex-initial text-xs sm:text-sm",
                        scopeFilter === "all" ? "bg-white dark:bg-gray-800 shadow-sm text-primary" : ""
                      )}
                    >
                      <ListFilter className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
                      All Bugs
                    </Button>
                  </div>
                  
                  {/* Export dropdown for mobile - shown only on small screens */}
                  <div className="relative sm:hidden">
                    <ExportDropdown />
                  </div>
                </div>
              </div>
            </div>

            {/* Dashboard View */}
            {viewMode === "dashboard" && (
              <div className="px-4 md:px-6 pb-4">
                <DashboardBugs bugs={bugs} employees={employees} />
              </div>
            )}

            {/* List View */}
            {viewMode === "list" && (
              <div className="flex flex-col space-y-4 px-4 md:px-6 pt-4 overflow-visible">
                {/* Scope header - mobile responsive */}
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 py-2">
                  <h2 className="text-lg sm:text-xl font-semibold flex items-center gap-2">
                    {scopeFilter === "my" ? (
                      <>
                        <User className="h-4 w-4 sm:h-5 sm:w-5 text-indigo-600" />
                        My Bugs
                      </>
                    ) : (
                      <>
                        <ListFilter className="h-4 w-4 sm:h-5 sm:w-5 text-indigo-600" />
                        All Bugs
                      </>
                    )}
                  </h2>
                  <div className="text-sm text-muted-foreground">
                    {filteredAndSortedBugs().length} {filteredAndSortedBugs().length === 1 ? 'bug' : 'bugs'}
                  </div>
                </div>

                <Card className="shadow-sm">
                  <CardHeader className="pb-3 border-b">
                    <div className="flex flex-col gap-3">
                      <div className="flex items-center justify-between">
                        <CardTitle 
                          className="flex items-center gap-2 cursor-pointer text-base sm:text-lg" 
                          onClick={() => setFiltersExpanded(!filtersExpanded)}
                        >
                          <Filter className="h-4 w-4 sm:h-5 sm:w-5 text-indigo-500" />
                          Filter & Search
                          <ChevronRight className={`h-3 w-3 sm:h-4 sm:w-4 transition-transform ${filtersExpanded ? 'rotate-90' : ''}`} />
                        </CardTitle>
                        
                        {/* Refresh button - always visible */}
                        <Button 
                          variant="outline" 
                          size="sm" 
                          onClick={handleRefreshBugs}
                          disabled={isLoading}
                          title="Refresh bug list"
                          className="h-8 w-8 p-0 sm:h-9 sm:w-9"
                        >
                          {isLoading ? (
                            <div className="h-3 w-3 sm:h-4 sm:w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
                          ) : (
                            <RefreshCw className="h-3 w-3 sm:h-4 sm:w-4" />
                          )}
                        </Button>
                      </div>
                      
                      {/* Search input - full width on mobile */}
                      <div className="relative w-full">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input
                          type="search"
                          placeholder="Search bugs..."
                          className="pl-8 bg-background/50 border-muted text-sm sm:text-base"
                          value={searchQuery}
                          onChange={(e) => setSearchQuery(e.target.value)}
                        />
                      </div>
                    </div>
                  </CardHeader>
                  
                  {/* Conditionally render card content based on expanded state */}
                  {filtersExpanded && (
                  <CardContent className="pt-4">
                    <div className="space-y-4">
                      {/* Filter dropdowns - mobile-first responsive grid */}
                      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4">
                        <div className="space-y-2">
                          <label className="text-xs sm:text-sm font-medium pl-1 text-muted-foreground">Project</label>
                          <Dropdown
                            options={[
                              { label: "All Projects", value: "all" },
                                // Get distinct project names from both projects object and bugs
                                ...Array.from(
                                  new Set([
                                    ...Object.values(projects),
                                    ...bugs
                                      .filter(bug => bug.projectName)
                                      .map(bug => bug.projectName as string)
                                  ])
                                ).sort().map(name => ({
                                label: name,
                                  value: name
                              }))
                            ]}
                              value={projectFilter}
                            onValueChange={handleProjectFilterChange}
                            placeholder="Filter by Project"
                            className="w-full text-sm"
                          />
                        </div>
                        
                        <div className="space-y-2">
                          <label className="text-xs sm:text-sm font-medium pl-1 text-muted-foreground">Status</label>
                          <Dropdown
                            options={[
                              { label: "All Statuses", value: "all" },
                              { label: "Open", value: "Open" },
                              { label: "In Progress", value: "In Progress" },
                              { label: "In Review", value: "In Review" },
                              { label: "Ready for QA", value: "Ready for QA" },
                              { label: "Resolved", value: "Resolved" },
                              { label: "Closed", value: "Closed" }
                            ]}
                            value={statusFilter}
                            onValueChange={handleStatusFilterChange}
                            placeholder="Status"
                            className="w-full text-sm"
                          />
                        </div>
                        
                        <div className="space-y-2">
                          <label className="text-xs sm:text-sm font-medium pl-1 text-muted-foreground">Severity</label>
                          <Dropdown
                            options={[
                              { label: "All Severities", value: "all" },
                              { label: "Critical", value: "Critical" },
                              { label: "High", value: "High" },
                              { label: "Medium", value: "Medium" },
                              { label: "Low", value: "Low" }
                            ]}
                            value={severityFilter}
                            onValueChange={handleSeverityFilterChange}
                            placeholder="Severity"
                            className="w-full text-sm"
                          />
                        </div>
                        
                        <div className="space-y-2">
                          <label className="text-xs sm:text-sm font-medium pl-1 text-muted-foreground">Assignee</label>
                          <Dropdown
                            options={[
                              { label: "All Assignees", value: "all" },
                              ...employees.map(employee => ({ // Use all employees instead of team members
                                label: `${employee.firstName} ${employee.lastName}`,
                                value: employee.id.toString()
                              }))
                            ]}
                            value={assigneeFilter}
                            onValueChange={handleAssigneeFilterChange}
                            placeholder="Assignee"
                            className="w-full text-sm"
                          />
                        </div>
                      </div>
                    </div>
                    
                    {/* Active Filters - mobile-friendly layout */}
                      {(statusFilter !== "all" || severityFilter !== "all" || assigneeFilter !== "all" || projectFilter !== "all" || searchQuery || scopeFilter !== "all") && (
                      <div className="mt-4 border-t pt-4 space-y-3">
                        <div className="flex items-center justify-between">
                          <span className="text-xs sm:text-sm font-medium text-muted-foreground">Active filters:</span>
                          <Button 
                            variant="ghost" 
                            size="sm"
                            className="text-xs sm:text-sm h-7 px-2"
                            onClick={() => {
                              setSearchQuery("");
                              setStatusFilter("all");
                              setSeverityFilter("all");
                              setAssigneeFilter("all");
                              setProjectFilter("all");
                            }}
                          >
                            <X className="h-3 w-3 mr-1" />
                            Clear All
                          </Button>
                        </div>
                        
                        <div className="flex flex-wrap gap-1.5 sm:gap-2">
                          {scopeFilter !== "all" && (
                            <Badge variant="outline" className="flex items-center gap-1 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 px-2 py-1 border-indigo-200 text-xs">
                              <span className="font-medium">Scope:</span> My Bugs
                              <X 
                                className="h-3 w-3 ml-1 cursor-pointer" 
                                onClick={() => setScopeFilter("all")}
                              />
                            </Badge>
                          )}
                          {statusFilter !== "all" && (
                            <Badge variant="outline" className="flex items-center gap-1 bg-blue-50 text-blue-700 hover:bg-blue-100 px-2 py-1 border-blue-200 text-xs">
                              <span className="font-medium">Status:</span> {statusFilter}
                              <X 
                                className="h-3 w-3 ml-1 cursor-pointer" 
                                onClick={() => setStatusFilter("all")}
                              />
                            </Badge>
                          )}
                          {severityFilter !== "all" && (
                            <Badge variant="outline" className="flex items-center gap-1 bg-orange-50 text-orange-700 hover:bg-orange-100 px-2 py-1 border-orange-200 text-xs">
                              <span className="font-medium">Severity:</span> {severityFilter}
                              <X 
                                className="h-3 w-3 ml-1 cursor-pointer" 
                                onClick={() => setSeverityFilter("all")}
                              />
                            </Badge>
                          )}
                          {projectFilter !== "all" && (
                            <Badge variant="outline" className="flex items-center gap-1 bg-green-50 text-green-700 hover:bg-green-100 px-2 py-1 border-green-200 text-xs">
                              <span className="font-medium">Project:</span> 
                              <span className="truncate max-w-[100px]">{projectFilter}</span>
                              <X 
                                className="h-3 w-3 ml-1 cursor-pointer flex-shrink-0" 
                                onClick={() => setProjectFilter("all")}
                              />
                            </Badge>
                          )}
                          {assigneeFilter !== "all" && (
                            <Badge variant="outline" className="flex items-center gap-1 bg-purple-50 text-purple-700 hover:bg-purple-100 px-2 py-1 border-purple-200 text-xs">
                              <span className="font-medium">Assignee:</span> 
                              <span className="truncate max-w-[80px]">
                                {employees.find(emp => emp.id.toString() === assigneeFilter)?.firstName || `ID: ${assigneeFilter}`}
                              </span>
                              <X 
                                className="h-3 w-3 ml-1 cursor-pointer flex-shrink-0" 
                                onClick={() => setAssigneeFilter("all")}
                              />
                            </Badge>
                          )}
                          {searchQuery && (
                            <Badge variant="outline" className="flex items-center gap-1 bg-gray-50 text-gray-700 hover:bg-gray-100 px-2 py-1 border-gray-200 text-xs">
                              <span className="font-medium">Search:</span> 
                              <span className="truncate max-w-[100px]">{searchQuery}</span>
                              <X 
                                className="h-3 w-3 ml-1 cursor-pointer flex-shrink-0" 
                                onClick={() => setSearchQuery("")}
                              />
                            </Badge>
                          )}
                        </div>
                      </div>
                    )}
                  </CardContent>
                  )}
                </Card>
                
                {isLoading ? (
                  <div className="flex items-center justify-center py-16">
                    <div className="flex flex-col items-center gap-3">
                      <div className="h-10 w-10 rounded-full border-t-2 border-indigo-600 animate-spin"></div>
                      <p className="text-sm text-muted-foreground">Loading Bugs...</p>
                    </div>
                  </div>
                ) : filteredAndSortedBugs().length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-16 text-center">
                    <div className="h-16 w-16 rounded-full bg-indigo-50 flex items-center justify-center mb-4">
                      <Bug className="h-8 w-8 text-indigo-600" />
                    </div>
                    <h3 className="text-xl font-medium mb-2">No Bugs found</h3>
                    <p className="text-muted-foreground mb-6 max-w-md">
                      {searchQuery || statusFilter !== "all" || severityFilter !== "all" || assigneeFilter !== "all" || projectFilter !== "all"
                        ? "Try adjusting your filters to see more results."
                        : "Create a new Bug to start tracking bugs and problems in your project."}
                    </p>
                    {searchQuery || statusFilter !== "all" || severityFilter !== "all" || assigneeFilter !== "all" || projectFilter !== "all" ? (
                      <Button 
                        variant="outline" 
                        className="bg-background"
                        onClick={() => {
                          setSearchQuery("");
                          setStatusFilter("all");
                          setSeverityFilter("all");
                          setAssigneeFilter("all");
                          setProjectFilter("all");
                        }}
                      >
                        <X className="mr-2 h-4 w-4" />
                        Clear All Filters
                      </Button>
                    ) : (
                      <Button onClick={handleCreate} className="bg-indigo-600 hover:bg-indigo-700">
                        <Plus className="mr-2 h-4 w-4" />
                        Create New Bug
                      </Button>
                    )}
                  </div>
                ) : (
                  <>
                    {/* Mobile summary cards - optimized for touch */}
                    <div className="md:hidden mt-4 space-y-3">
                      {filteredAndSortedBugs()
                        .filter(shouldShowBug)
                        .map((bug, index) => (
                        <Card 
                          key={bug.id} 
                          className={`shadow-sm overflow-hidden transition-all duration-200 active:scale-[0.98] ${
                            index % 4 === 0 ? 'border-l-4 border-l-blue-500' : 
                            index % 4 === 1 ? 'border-l-4 border-l-purple-500' : 
                            index % 4 === 2 ? 'border-l-4 border-l-amber-500' : 
                            'border-l-4 border-l-green-500'
                          }`}
                          onClick={() => handleViewDetails(bug)}
                        >
                          <div className="p-3 sm:p-4 cursor-pointer">
                            {/* Header with title and status */}
                            <div className="flex justify-between items-start mb-3 gap-2">
                              <div className="flex-1 min-w-0">
                                <div className="flex items-center gap-2 mb-1">
                                  <span className="text-xs font-bold text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
                                    #{index + 1}
                                  </span>
                                  <span className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">
                                    {bug.taskCode || `BUG-${bug.id}`}
                                  </span>
                                </div>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <h3 className="font-medium text-sm leading-tight line-clamp-2 text-foreground cursor-pointer">
                                      {bug.title}
                                    </h3>
                                  </TooltipTrigger>
                                  <TooltipContent side="top" className="max-w-sm z-50">
                                    <p className="text-sm whitespace-normal">{bug.title}</p>
                                  </TooltipContent>
                                </Tooltip>
                              </div>
                              
                              {/* Status dropdown - more touch-friendly */}
                              <div onClick={(e) => e.stopPropagation()} className="flex-shrink-0">
                                <div className="min-w-[100px]">
                                  <CustomDropdown
                                    id={`status-dropdown-mobile-${bug.id}`}
                                    value={bug.status}
                                    onChange={(newStatus) => handleStatusChange(bug, newStatus)}
                                    options={statusOptions.map(status => ({ value: status, label: status }))}
                                    placeholder="Select status"
                                  />
                                </div>
                              </div>
                            </div>
                            
                            {/* Bug details grid */}
                            <div className="space-y-2 mb-3">
                              <div className="flex items-center justify-between">
                                <div className="flex items-center gap-1">
                                  <span className="text-xs font-medium text-muted-foreground">Severity:</span>
                                  {getSeverityBadge(getBugSeverity(bug))}
                                </div>
                                <div className="text-xs text-muted-foreground">
                                  {bug.createdAt ? format(new Date(bug.createdAt), "MMM d") : "N/A"}
                                </div>
                              </div>
                              
                              {(bug as Task).projectName && (
                                <div className="flex items-center gap-1">
                                  <span className="text-xs font-medium text-muted-foreground">Project:</span>
                                  <span className="text-xs truncate flex-1 text-foreground">{(bug as Task).projectName}</span>
                                </div>
                              )}
                              
                              {(bug as Task).issueName && (
                                <div className="flex items-center gap-1">
                                  <span className="text-xs font-medium text-muted-foreground">Issue:</span>
                                  <span className="text-xs truncate flex-1 text-foreground">{(bug as Task).issueName}</span>
                                </div>
                              )}
                              
                              <div className="flex items-center gap-1">
                                <span className="text-xs font-medium text-muted-foreground">Assignee:</span>
                                {bug.assignedTo ? (
                                  <div className="flex items-center gap-1.5">
                                    <Avatar className="h-4 w-4">
                                      <AvatarFallback className="text-[8px] bg-indigo-500 text-white">
                                        {getEmployeeInitials(bug.assignedTo)}
                                      </AvatarFallback>
                                    </Avatar>
                                    <span className="text-xs truncate max-w-[120px] text-foreground">
                                      {getEmployeeName(bug.assignedTo)}
                                    </span>
                                  </div>
                                ) : (
                                  <span className="text-xs text-muted-foreground">Unassigned</span>
                                )}
                              </div>
                            </div>
                            
                            {/* Action buttons - larger touch targets */}
                            <div className="flex justify-between items-center pt-2 border-t">
                              <Button 
                                variant="ghost" 
                                size="sm" 
                                className="h-8 px-2 text-xs" 
                                onClick={(e) => { 
                                  e.stopPropagation(); 
                                  handleQuickView(bug, e); 
                                }}
                              >
                                <Eye className="h-3.5 w-3.5 mr-1 text-indigo-500" />
                                View
                              </Button>
                              
                              <div className="flex gap-1">
                                <Button 
                                  variant="ghost" 
                                  size="sm" 
                                  className="h-8 w-8 p-0" 
                                  onClick={(e) => { 
                                    e.stopPropagation(); 
                                    handleEdit(bug); 
                                  }}
                                >
                                  <Edit2 className="h-3.5 w-3.5 text-amber-500" />
                                </Button>
                                <Button 
                                  variant="ghost" 
                                  size="sm" 
                                  className="h-8 w-8 p-0" 
                                  onClick={(e) => { 
                                    e.stopPropagation(); 
                                    setSelectedBugForTimeLog(bug);
                                    setIsLoggingTime(true);
                                  }}
                                >
                                  <Timer className="h-3.5 w-3.5 text-blue-500" />
                                </Button>
                                <Button 
                                  variant="ghost" 
                                  size="sm" 
                                  className="h-8 w-8 p-0" 
                                  onClick={(e) => { 
                                    e.stopPropagation(); 
                                    handleDelete(bug.id); 
                                  }}
                                  disabled={isDeleting && deleteId === bug.id}
                                >
                                  {isDeleting && deleteId === bug.id ? (
                                    <div className="h-3.5 w-3.5 rounded-full border-b-2 border-red-600 animate-spin"></div>
                                  ) : (
                                    <Trash2 className="h-3.5 w-3.5 text-red-500" />
                                  )}
                                </Button>
                              </div>
                            </div>
                          </div>
                        </Card>
                      ))}
                    </div>
                    
                    {/* Collapse completed bugs toggle - mobile responsive */}
                    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-4 mt-4">
                      <div className="flex items-center gap-2">
                        <Button 
                          variant="outline" 
                          size="sm" 
                          onClick={() => setCollapseCompletedBugs(!collapseCompletedBugs)}
                          className="flex items-center gap-1 text-xs sm:text-sm h-8"
                        >
                          <ChevronRight 
                            className={`h-3 w-3 sm:h-4 sm:w-4 transition-transform ${!collapseCompletedBugs ? 'rotate-90' : ''}`} 
                          />
                          {collapseCompletedBugs ? 'Show Completed' : 'Hide Completed'}
                        </Button>
                        {collapseCompletedBugs && getCompletedBugsCount() > 0 && (
                          <span className="text-xs text-muted-foreground">
                            ({getCompletedBugsCount()} completed {getCompletedBugsCount() === 1 ? 'bug' : 'bugs'} hidden)
                          </span>
                        )}
                      </div>
                      <div className="text-xs text-muted-foreground">
                        Total: {filteredAndSortedBugs().length} {filteredAndSortedBugs().length === 1 ? 'bug' : 'bugs'}
                      </div>
                    </div>
                    
                    {/* Desktop table view - hidden on small screens */}
                    <div className="hidden md:block overflow-hidden rounded-md border mt-4 table-container">
                      <table className="w-full text-sm table-fixed">
                        <thead>
                          <tr className="bg-gradient-to-r from-indigo-50 via-blue-50 to-indigo-50 border-b">
                            <th className="px-2 py-3 text-left font-semibold text-gray-700 w-[3%]">#</th>
                            <th 
                              className="px-4 py-3 text-left font-semibold cursor-pointer text-gray-700 w-[20%]"
                              onClick={() => handleSortChange("title")}
                            >
                              <div className="flex items-center">
                                Bug Title
                                {renderSortIcon("title")}
                              </div>
                            </th>
                            <th 
                              className="px-4 py-3 text-left font-semibold cursor-pointer hidden md:table-cell text-gray-700 w-[12%]"
                              onClick={() => handleSortChange("status")}
                            >
                              <div className="flex items-center">
                                Status
                                {renderSortIcon("status")}
                              </div>
                            </th>
                            <th 
                              className="px-4 py-3 text-left font-semibold cursor-pointer hidden lg:table-cell text-gray-700 w-[10%]"
                              onClick={() => handleSortChange("severity")}
                            >
                              <div className="flex items-center">
                                Severity
                                {renderSortIcon("severity")}
                              </div>
                            </th>
                            <th className="px-4 py-3 text-left font-semibold hidden sm:table-cell text-gray-700 w-[5%]">
                              ID
                            </th>
                            <th className="px-4 py-3 text-left font-semibold hidden md:table-cell text-gray-700 w-[12%]">
                              Project
                            </th>
                            <th 
                              className="px-4 py-3 text-left font-semibold cursor-pointer hidden lg:table-cell text-gray-700 w-[12%]"
                              onClick={() => handleSortChange("assignedTo")}
                            >
                              <div className="flex items-center">
                                Assignee
                                {renderSortIcon("assignedTo")}
                              </div>
                            </th>
                            <th 
                              className="px-4 py-3 text-left font-semibold cursor-pointer hidden md:table-cell text-gray-700 w-[10%]"
                              onClick={() => handleSortChange("createdAt")}
                            >
                              <div className="flex items-center">
                                Created
                                {renderSortIcon("createdAt")}
                              </div>
                            </th>
                            <th className="px-4 py-3 text-right font-semibold text-gray-700 w-[16%]">
                              Actions
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          {filteredAndSortedBugs()
                            .filter(shouldShowBug)
                            .map((bug, index) => (
                            <tr key={bug.id} className={`border-t hover:bg-accent/5 group ${index % 2 === 0 ? 'bg-muted/20' : ''}`}>
                              <td className="px-2 py-3 text-center text-muted-foreground w-[3%]">
                                {index + 1}
                              </td>
                              <td className="px-4 py-3 font-medium w-[20%]">
                                <div 
                                  className="flex items-center cursor-pointer"
                                  onClick={() => handleViewDetails(bug)}
                                >
                                  <div className={`w-2 h-2 rounded-full mr-2 flex-shrink-0 ${
                                    bug.status === 'Completed' || bug.status === 'Closed' ? 'bg-green-500' :
                                    bug.status === 'In Progress' ? 'bg-blue-500' :
                                    bug.status === 'In Review' ? 'bg-purple-500' :
                                    bug.status === 'Reopened' ? 'bg-orange-500' : 'bg-gray-500'
                                  }`}></div>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <span className="truncate underline-offset-2 group-hover:underline block">
                                        {bug.title && bug.title.length > 10 ? `${bug.title.substring(0, 35)}...` : bug.title}
                                      </span>
                                    </TooltipTrigger>
                                    <TooltipContent side="top" className="max-w-md z-50">
                                      <p className="text-sm whitespace-normal">{bug.title}</p>
                                    </TooltipContent>
                                  </Tooltip>

                                </div>
                              </td>
                              <td className="px-4 py-3 hidden md:table-cell w-[12%]">
                                {/* Status badge with dropdown for desktop */}
                                <CustomDropdown
                                  id={`status-dropdown-desktop-${bug.id}`}
                                  value={bug.status}
                                  onChange={(newStatus) => handleStatusChange(bug, newStatus)}
                                  options={statusOptions.map(status => ({ value: status, label: status }))}
                                  placeholder="Select status"
                                />
                              </td>
                              <td className="px-4 py-3 hidden lg:table-cell w-[10%]">
                                {getSeverityBadge(getBugSeverity(bug))}
                              </td>
                              <td className="px-4 py-3 hidden sm:table-cell w-[5%]">
                                <span className="text-xs font-mono bg-muted px-2 py-1 rounded">
                                  {bug.taskCode || `BUG-${bug.id}`}
                                </span>
                              </td>
                              <td className="px-4 py-3 hidden md:table-cell w-[12%]">
                                <span className="truncate inline-block">
                                  {(bug as Task).projectName || 'N/A'}
                                </span>
                              </td>
                              <td className="px-4 py-3 hidden lg:table-cell w-[12%]">
                                {bug.assignedTo ? (
                                  <div className="flex items-center gap-2">
                                    <Avatar className="h-6 w-6 bg-indigo-100 flex-shrink-0">
                                      <AvatarFallback className="text-xs bg-indigo-500 text-white">
                                        {getEmployeeInitials(bug.assignedTo)}
                                      </AvatarFallback>
                                    </Avatar>
                                    <span className="truncate">
                                      {getEmployeeName(bug.assignedTo)}
                                    </span>
                                  </div>
                                ) : (
                                  <span className="text-muted-foreground">Unassigned</span>
                                )}
                              </td>
                              <td className="px-4 py-3 text-muted-foreground hidden md:table-cell w-[10%]">
                                {bug.createdAt ? format(new Date(bug.createdAt), "MMM d, yyyy") : "N/A"}
                              </td>
                              <td className="px-4 py-3 text-right w-[16%]">
                                <div className="flex items-center justify-end gap-1">
                                  <Button 
                                    variant="ghost" 
                                    size="icon" 
                                    className="h-8 w-8 text-indigo-500 hover:text-indigo-600 hover:bg-indigo-50"
                                    onClick={(e) => handleQuickView(bug, e)}
                                  >
                                    <Eye className="h-4 w-4" />
                                    <span className="sr-only">View details</span>
                                  </Button>
                                  <Button 
                                    variant="ghost" 
                                    size="icon" 
                                    className="h-8 w-8 text-amber-500 hover:text-amber-600 hover:bg-amber-50"
                                    onClick={() => handleEdit(bug)}
                                  >
                                    <Edit2 className="h-4 w-4" />
                                    <span className="sr-only">Edit</span>
                                  </Button>
                                  <Button 
                                    variant="ghost" 
                                    size="icon" 
                                    className="h-8 w-8 text-blue-500 hover:text-blue-600 hover:bg-blue-50"
                                    onClick={(e) => {
                                      e.stopPropagation();
                                      setSelectedBugForTimeLog(bug);
                                      setIsLoggingTime(true);
                                    }}
                                  >
                                    <Timer className="h-4 w-4" />
                                    <span className="sr-only">Log time</span>
                                  </Button>
                                  <Button 
                                    variant="ghost" 
                                    size="icon" 
                                    className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50"
                                    onClick={() => handleDelete(bug.id)}
                                    disabled={isDeleting && deleteId === bug.id}
                                  >
                                    {isDeleting && deleteId === bug.id ? (
                                      <div className="h-4 w-4 rounded-full border-b-2 border-red-600"></div>
                                    ) : (
                                      <Trash2 className="h-4 w-4" />
                                    )}
                                    <span className="sr-only">Delete</span>
                                  </Button>
                                </div>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </>
                )}
              </div>
            )}
          </div>
          </DropdownProvider>
        </TooltipProvider>
      </Layout>
    </>
  );
};

export default Bugs;
