import React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Eye, MoreVertical, Users } from "lucide-react";
import { format } from "date-fns";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

const statusColors = {
  Active: "bg-blue-100 text-blue-800 border-blue-200",
  Pending: "bg-yellow-100 text-yellow-800 border-yellow-200",
  Confirmed: "bg-purple-100 text-purple-800 border-purple-200",
  Completed: "bg-green-100 text-green-800 border-green-200",
  Canceled: "bg-red-100 text-red-800 border-red-200"
};

export default function EventsTable({ events }) {
  const navigate = useNavigate();

  return (
    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
      <Table>
        <TableHeader>
          <TableRow className="bg-slate-50">
            <TableHead className="font-semibold">ID</TableHead>
            <TableHead className="font-semibold">Hub</TableHead>
            <TableHead className="font-semibold">Status</TableHead>
            <TableHead className="font-semibold">Date</TableHead>
            <TableHead className="font-semibold">Event Name</TableHead>
            <TableHead className="font-semibold">PO</TableHead>
            <TableHead className="font-semibold text-center">Requested</TableHead>
            <TableHead className="font-semibold text-center">Assigned</TableHead>
            <TableHead className="font-semibold">Total</TableHead>
            <TableHead className="font-semibold text-center">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {events.length > 0 ? (
            events.map((event) => (
              <TableRow key={event.id} className="hover:bg-slate-50 transition-colors">
                <TableCell className="font-medium">{event.id?.slice(0, 8)}</TableCell>
                <TableCell>
                  <div>
                    <p className="font-medium text-slate-900">{event.hub}</p>
                    {event.event_location && (
                      <p className="text-xs text-slate-500 truncate max-w-xs">{event.event_location}</p>
                    )}
                  </div>
                </TableCell>
                <TableCell>
                  <Badge className={`${statusColors[event.status]} border font-medium`}>
                    {event.status}
                  </Badge>
                </TableCell>
                <TableCell>
                  {event.date ? format(new Date(event.date), "MMM d, yyyy") : "-"}
                </TableCell>
                <TableCell className="font-medium">{event.event_name}</TableCell>
                <TableCell>{event.po || "-"}</TableCell>
                <TableCell className="text-center">{event.requested || 0}</TableCell>
                <TableCell className="text-center">
                  {event.assigned_staff && event.assigned_staff.length > 0 ? (
                    <HoverCard>
                      <HoverCardTrigger asChild>
                        <button className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800 font-medium">
                          <Users className="w-4 h-4" />
                          {event.assigned_staff.length}
                        </button>
                      </HoverCardTrigger>
                      <HoverCardContent className="w-80">
                        <div className="space-y-2">
                          <h4 className="font-semibold text-sm">Assigned Staff:</h4>
                          <div className="space-y-2">
                            {event.assigned_staff.map((staff, idx) => (
                              <div key={idx} className="flex items-center gap-2 text-sm">
                                <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
                                  {staff.staff_name?.charAt(0)}
                                </div>
                                <div>
                                  <p className="font-medium">{staff.staff_name}</p>
                                  {staff.position && (
                                    <p className="text-xs text-slate-500">{staff.position}</p>
                                  )}
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>
                      </HoverCardContent>
                    </HoverCard>
                  ) : (
                    <span className="text-slate-400">0</span>
                  )}
                </TableCell>
                <TableCell className="font-semibold">${event.total?.toFixed(2) || "0.00"}</TableCell>
                <TableCell>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreVertical className="w-4 h-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={() => navigate(createPageUrl(`EditEvent?id=${event.id}`))}>
                        <Eye className="w-4 h-4 mr-2" />
                        View Details
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={10} className="text-center py-8 text-slate-500">
                No events found
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
}