"use client";

import { useState } from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { tasks, march2025Tasks, april2025Tasks, users, initialTeams } from "@/utils/data";
import { Task } from "@/types/task";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { CalendarIcon, ChevronDown, ChevronRight } from "lucide-react";
import { format } from "date-fns";

// Define activity types we want to track
const activityTypes = ["Scheduled Call", "Follow-up Meeting", "Site Visit"] as const;
type ActivityType = typeof activityTypes[number];

// Period type
type Period = "today" | "week" | "month";

// Interface for detailed activity counts
interface ActivityDetail {
  due: number;
  overdue: number;
  completed: number;
  total: number;
}

// Interface for activity counts per period
interface PeriodActivityCount {
  calls: ActivityDetail;
  meetings: ActivityDetail;
  siteVisits: ActivityDetail;
  bookings: ActivityDetail;
}

// Interface for team member detailed stats
interface TeamMemberDetailedStats {
  id: string;
  name: string;
  avatar: string;
  role: string;
  teamId: string;
  teamName: string;
  today: PeriodActivityCount;
}

// Interface for grouped team data
interface GroupedTeamData {
  teamId: string;
  teamName: string;
  members: TeamMemberDetailedStats[];
  totals: {
    today: PeriodActivityCount;
  };
}

// Helper function to check if a date falls within a period
function isDateInPeriod(dateString: string, period: Period): boolean {
  const taskDate = new Date(dateString);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  
  switch (period) {
    case "today":
      const todayEnd = new Date(today);
      todayEnd.setHours(23, 59, 59, 999);
      return taskDate >= today && taskDate <= todayEnd;
    
    case "week":
      const weekStart = new Date(today);
      weekStart.setDate(today.getDate() - today.getDay()); // Start of week (Sunday)
      const weekEnd = new Date(weekStart);
      weekEnd.setDate(weekStart.getDate() + 6);
      weekEnd.setHours(23, 59, 59, 999);
      return taskDate >= weekStart && taskDate <= weekEnd;
    
    case "month":
      const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
      const monthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0);
      monthEnd.setHours(23, 59, 59, 999);
      return taskDate >= monthStart && taskDate <= monthEnd;
    
    default:
      return false;
  }
}

// Function to calculate detailed team member activity statistics grouped by team
function calculateDetailedTeamActivities(allTasks: Task[]): GroupedTeamData[] {
  // Create a map to store team member stats
  const teamMembersMap = new Map<string, TeamMemberDetailedStats>();

  // Helper to create empty activity detail
  const emptyActivityDetail = (): ActivityDetail => ({
    due: 0,
    overdue: 0,
    completed: 0,
    total: 0,
  });

  // Helper to create empty period activity count
  const emptyPeriodActivityCount = (): PeriodActivityCount => ({
    calls: emptyActivityDetail(),
    meetings: emptyActivityDetail(),
    siteVisits: emptyActivityDetail(),
    bookings: emptyActivityDetail(),
  });

  // Initialize all team members from users list
  users.forEach((user) => {
    // Find which team this user belongs to
    const userTeam = initialTeams.find(team => team.members.includes(user.id));
    
    teamMembersMap.set(user.name, {
      id: user.id,
      name: user.name,
      avatar: user.avatar || "",
      role: user.role || "Team Member",
      teamId: userTeam?.id || "0",
      teamName: userTeam?.name || "Unassigned",
      today: emptyPeriodActivityCount(),
    });
  });

  // Get today's date
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  // Process all tasks
  allTasks.forEach((task) => {
    const assignedTo = task.assignedBy?.name;
    if (!assignedTo || !teamMembersMap.has(assignedTo)) return;

    const memberStats = teamMembersMap.get(assignedTo)!;
    
    // Determine activity type
    const activity = task.activity.toLowerCase();
    let activityKey: keyof PeriodActivityCount | null = null;
    
    if (activity.includes("call")) {
      activityKey = "calls";
    } else if (activity.includes("meeting")) {
      activityKey = "meetings";
    } else if (activity.includes("visit") || activity.includes("site")) {
      activityKey = "siteVisits";
    } else if (activity.includes("booking") || activity.includes("booked")) {
      activityKey = "bookings";
    }
    
    if (!activityKey) return;
    
    // Get the task date
    const taskDate = task.createdAt || task.due;
    if (!taskDate) return;
    
    // Check if task is in today's period
    if (isDateInPeriod(taskDate.toString(), "today")) {
      const activityDetail = memberStats.today[activityKey];
      
      // Increment total
      activityDetail.total++;
      
      // Check status
      if (task.status === "completed") {
        activityDetail.completed++;
      } else {
        // Check if overdue
        const dueDate = new Date(task.due);
        if (dueDate < today) {
          activityDetail.overdue++;
        } else {
          activityDetail.due++;
        }
      }
    }
  });

  // Group by teams
  const groupedByTeam = new Map<string, GroupedTeamData>();
  
  teamMembersMap.forEach((member) => {
    if (!groupedByTeam.has(member.teamId)) {
      groupedByTeam.set(member.teamId, {
        teamId: member.teamId,
        teamName: member.teamName,
        members: [],
        totals: {
          today: emptyPeriodActivityCount(),
        },
      });
    }
    
    const teamData = groupedByTeam.get(member.teamId)!;
    teamData.members.push(member);
    
    // Add to team totals
    const addToTotals = (activityKey: keyof PeriodActivityCount) => {
      teamData.totals.today[activityKey].due += member.today[activityKey].due;
      teamData.totals.today[activityKey].overdue += member.today[activityKey].overdue;
      teamData.totals.today[activityKey].completed += member.today[activityKey].completed;
      teamData.totals.today[activityKey].total += member.today[activityKey].total;
    };
    
    addToTotals("calls");
    addToTotals("meetings");
    addToTotals("siteVisits");
    addToTotals("bookings");
  });

  // Convert map to array and sort by team name
  return Array.from(groupedByTeam.values())
    .sort((a, b) => a.teamName.localeCompare(b.teamName));
}

export function TeamMemberActivitiesTable() {
  const [timeDuration, setTimeDuration] = useState<"today" | "tomorrow" | "week" | "month" | "custom">("today");
  const [sourceFilter, setSourceFilter] = useState<string>("all");
  const [customStartDate, setCustomStartDate] = useState<Date | undefined>();
  const [customEndDate, setCustomEndDate] = useState<Date | undefined>();
  const [expandedTeams, setExpandedTeams] = useState<Set<string>>(new Set());
  
  const allTasks = [...tasks, ...march2025Tasks, ...april2025Tasks] as Task[];
  const groupedTeamData = calculateDetailedTeamActivities(allTasks);
  
  const toggleTeam = (teamId: string) => {
    setExpandedTeams(prev => {
      const newSet = new Set(prev);
      if (newSet.has(teamId)) {
        newSet.delete(teamId);
      } else {
        newSet.add(teamId);
      }
      return newSet;
    });
  };
  
  // Helper to create empty activity detail
  const emptyActivityDetail = (): ActivityDetail => ({
    due: 0,
    overdue: 0,
    completed: 0,
    total: 0,
  });

  // Calculate grand totals
  const grandTotals = {
    today: {
      calls: emptyActivityDetail(),
      meetings: emptyActivityDetail(),
      siteVisits: emptyActivityDetail(),
      bookings: emptyActivityDetail(),
    },
  };
  
  groupedTeamData.forEach((team) => {
    const addToGrandTotals = (activityKey: keyof PeriodActivityCount) => {
      grandTotals.today[activityKey].due += team.totals.today[activityKey].due;
      grandTotals.today[activityKey].overdue += team.totals.today[activityKey].overdue;
      grandTotals.today[activityKey].completed += team.totals.today[activityKey].completed;
      grandTotals.today[activityKey].total += team.totals.today[activityKey].total;
    };
    
    addToGrandTotals("calls");
    addToGrandTotals("meetings");
    addToGrandTotals("siteVisits");
    addToGrandTotals("bookings");
  });
  
  return (
    <div>
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-lg font-medium">Team Member Activities</h3>
        
        <div className="flex items-center gap-3">
          {/* Source Filter */}
          <Select value={sourceFilter} onValueChange={setSourceFilter}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select source" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Sources</SelectItem>
              <SelectItem value="housing">Housing.com</SelectItem>
              <SelectItem value="magicbricks">MagicBricks</SelectItem>
              <SelectItem value="99acres">99acres</SelectItem>
              <SelectItem value="direct">Direct</SelectItem>
              <SelectItem value="referral">Referral</SelectItem>
            </SelectContent>
          </Select>
          
          {/* Time Duration Filter */}
          <Select value={timeDuration} onValueChange={(value: any) => setTimeDuration(value)}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select duration" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">Today</SelectItem>
              <SelectItem value="tomorrow">Tomorrow</SelectItem>
              <SelectItem value="week">This Week</SelectItem>
              <SelectItem value="month">This Month</SelectItem>
              <SelectItem value="custom">Custom Range</SelectItem>
            </SelectContent>
          </Select>
          
          {/* Custom Date Range */}
          {timeDuration === "custom" && (
            <>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline" className="w-[140px] justify-start text-left font-normal">
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {customStartDate ? format(customStartDate, "PPP") : "Start Date"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={customStartDate}
                    onSelect={setCustomStartDate}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
              
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline" className="w-[140px] justify-start text-left font-normal">
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {customEndDate ? format(customEndDate, "PPP") : "End Date"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={customEndDate}
                    onSelect={setCustomEndDate}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </>
          )}
        </div>
      </div>
      
      <div className="rounded-xl border overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead rowSpan={3} className="w-[200px] border-r align-middle">Team Member</TableHead>
              <TableHead colSpan={16} className="text-center">Today</TableHead>
            </TableRow>
            <TableRow>
              <TableHead colSpan={4} className="text-center border-r">Calls</TableHead>
              <TableHead colSpan={4} className="text-center border-r">Meetings</TableHead>
              <TableHead colSpan={4} className="text-center border-r">Site Visits</TableHead>
              <TableHead colSpan={4} className="text-center">Bookings</TableHead>
            </TableRow>
            <TableRow>
              {/* Calls sub-columns */}
              <TableHead className="text-center text-xs">Due</TableHead>
              <TableHead className="text-center text-xs">Overdue</TableHead>
              <TableHead className="text-center text-xs">Completed</TableHead>
              <TableHead className="text-center text-xs border-r">Total</TableHead>
              {/* Meetings sub-columns */}
              <TableHead className="text-center text-xs">Due</TableHead>
              <TableHead className="text-center text-xs">Overdue</TableHead>
              <TableHead className="text-center text-xs">Completed</TableHead>
              <TableHead className="text-center text-xs border-r">Total</TableHead>
              {/* Site Visits sub-columns */}
              <TableHead className="text-center text-xs">Due</TableHead>
              <TableHead className="text-center text-xs">Overdue</TableHead>
              <TableHead className="text-center text-xs">Completed</TableHead>
              <TableHead className="text-center text-xs border-r">Total</TableHead>
              {/* Bookings sub-columns */}
              <TableHead className="text-center text-xs">Due</TableHead>
              <TableHead className="text-center text-xs">Overdue</TableHead>
              <TableHead className="text-center text-xs">Completed</TableHead>
              <TableHead className="text-center text-xs">Total</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {groupedTeamData.map((team) => {
              const isExpanded = expandedTeams.has(team.teamId);
              
              return (
                <>
                  {/* Team Header Row - Clickable */}
                  <TableRow 
                    key={`team-${team.teamId}`} 
                    className="bg-muted/50 cursor-pointer hover:bg-muted/70 transition-colors"
                    onClick={() => toggleTeam(team.teamId)}
                  >
                    <TableCell className="border-r">
                      <div className="flex items-center gap-2">
                        {isExpanded ? (
                          <ChevronDown className="h-4 w-4 flex-shrink-0" />
                        ) : (
                          <ChevronRight className="h-4 w-4 flex-shrink-0" />
                        )}
                        <span className="font-semibold text-sm">{team.teamName}</span>
                      </div>
                    </TableCell>
                    
                    {/* Calls totals */}
                    <TableCell className="text-center text-sm">{team.totals.today.calls.due}</TableCell>
                    <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{team.totals.today.calls.overdue}</TableCell>
                    <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{team.totals.today.calls.completed}</TableCell>
                    <TableCell className="text-center text-sm font-bold border-r">{team.totals.today.calls.total}</TableCell>
                    
                    {/* Meetings totals */}
                    <TableCell className="text-center text-sm">{team.totals.today.meetings.due}</TableCell>
                    <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{team.totals.today.meetings.overdue}</TableCell>
                    <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{team.totals.today.meetings.completed}</TableCell>
                    <TableCell className="text-center text-sm font-bold border-r">{team.totals.today.meetings.total}</TableCell>
                    
                    {/* Site Visits totals */}
                    <TableCell className="text-center text-sm">{team.totals.today.siteVisits.due}</TableCell>
                    <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{team.totals.today.siteVisits.overdue}</TableCell>
                    <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{team.totals.today.siteVisits.completed}</TableCell>
                    <TableCell className="text-center text-sm font-bold border-r">{team.totals.today.siteVisits.total}</TableCell>
                    
                    {/* Bookings totals */}
                    <TableCell className="text-center text-sm">{team.totals.today.bookings.due}</TableCell>
                    <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{team.totals.today.bookings.overdue}</TableCell>
                    <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{team.totals.today.bookings.completed}</TableCell>
                    <TableCell className="text-center text-sm font-bold">{team.totals.today.bookings.total}</TableCell>
                  </TableRow>
                  
                  {/* Team Members - Only shown when expanded */}
                  {isExpanded && (
                    <>
                      {team.members.map((member) => (
                        <TableRow key={member.id}>
                          <TableCell className="border-r pl-8">
                            <div className="flex items-center gap-2">
                              <Avatar className="h-8 w-8">
                                <AvatarImage src={member.avatar} alt={member.name} />
                                <AvatarFallback>{member.name.substring(0, 2)}</AvatarFallback>
                              </Avatar>
                              <div className="flex flex-col">
                                <span className="font-medium text-sm">{member.name}</span>
                                <span className="text-xs text-muted-foreground">{member.role}</span>
                              </div>
                            </div>
                          </TableCell>
                          
                          {/* Calls */}
                          <TableCell className="text-center text-sm">{member.today.calls.due}</TableCell>
                          <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{member.today.calls.overdue}</TableCell>
                          <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{member.today.calls.completed}</TableCell>
                          <TableCell className="text-center text-sm font-semibold border-r">{member.today.calls.total}</TableCell>
                          
                          {/* Meetings */}
                          <TableCell className="text-center text-sm">{member.today.meetings.due}</TableCell>
                          <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{member.today.meetings.overdue}</TableCell>
                          <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{member.today.meetings.completed}</TableCell>
                          <TableCell className="text-center text-sm font-semibold border-r">{member.today.meetings.total}</TableCell>
                          
                          {/* Site Visits */}
                          <TableCell className="text-center text-sm">{member.today.siteVisits.due}</TableCell>
                          <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{member.today.siteVisits.overdue}</TableCell>
                          <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{member.today.siteVisits.completed}</TableCell>
                          <TableCell className="text-center text-sm font-semibold border-r">{member.today.siteVisits.total}</TableCell>
                          
                          {/* Bookings */}
                          <TableCell className="text-center text-sm">{member.today.bookings.due}</TableCell>
                          <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{member.today.bookings.overdue}</TableCell>
                          <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{member.today.bookings.completed}</TableCell>
                          <TableCell className="text-center text-sm font-semibold">{member.today.bookings.total}</TableCell>
                        </TableRow>
                      ))}
                    </>
                  )}
                </>
              );
            })}
            
            {/* Grand Total Row */}
            <TableRow className="bg-primary/10 font-semibold">
              <TableCell className="border-r">
                <span className="font-bold">Total</span>
              </TableCell>
              
              {/* Calls totals */}
              <TableCell className="text-center text-sm">{grandTotals.today.calls.due}</TableCell>
              <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{grandTotals.today.calls.overdue}</TableCell>
              <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{grandTotals.today.calls.completed}</TableCell>
              <TableCell className="text-center text-sm font-bold border-r">{grandTotals.today.calls.total}</TableCell>
              
              {/* Meetings totals */}
              <TableCell className="text-center text-sm">{grandTotals.today.meetings.due}</TableCell>
              <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{grandTotals.today.meetings.overdue}</TableCell>
              <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{grandTotals.today.meetings.completed}</TableCell>
              <TableCell className="text-center text-sm font-bold border-r">{grandTotals.today.meetings.total}</TableCell>
              
              {/* Site Visits totals */}
              <TableCell className="text-center text-sm">{grandTotals.today.siteVisits.due}</TableCell>
              <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{grandTotals.today.siteVisits.overdue}</TableCell>
              <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{grandTotals.today.siteVisits.completed}</TableCell>
              <TableCell className="text-center text-sm font-bold border-r">{grandTotals.today.siteVisits.total}</TableCell>
              
              {/* Bookings totals */}
              <TableCell className="text-center text-sm">{grandTotals.today.bookings.due}</TableCell>
              <TableCell className="text-center text-sm text-orange-600 dark:text-orange-400">{grandTotals.today.bookings.overdue}</TableCell>
              <TableCell className="text-center text-sm text-green-600 dark:text-green-400">{grandTotals.today.bookings.completed}</TableCell>
              <TableCell className="text-center text-sm font-bold">{grandTotals.today.bookings.total}</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </div>
    </div>
  );
}