"use client"

import { useGetStylistById, useDeleteStylist, useUpdateStylist, useDeleteVacation } from "@/lib/react-query/hooks/stylists"
import { useGetStylistAppointments, useModifyAppointment, useGetCancelledVacationAppointments, useMarkAsNoShow } from "@/lib/react-query/hooks/appointments"
import { useParams, useRouter } from "next/navigation"
import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Clock, Pencil, Trash2, MoreHorizontal, SquarePen, ChevronLeft, ChevronRight, X, CalendarOff, AlertCircle } from "lucide-react"
import { useDisclosure } from "@/hooks/useDisclosure"
import { useConfirm } from "@/context/ConfirmDialogContext"
import dynamic from "next/dynamic"
import { useTranslations } from "next-intl"
import { CustomTabs, TabsContent } from "@/components/common/CustomTabs"

const EditStaffModal = dynamic(() => import("@/components/modules/staff/EditStaffModal"), { ssr: false })
const AddWorkingHoursModal = dynamic(() => import("@/components/modules/staff/AddWorkingHoursModal"), { ssr: false })
const AddVacationModal = dynamic(() => import("@/components/modules/staff/AddVacationModal"), { ssr: false })

// Helper function to format date and time
const formatDateTime = (start: string, end: string) => {
  const startDate = new Date(start)
  const endDate = new Date(end)

  const date = startDate.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })

  const time = `${startDate.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  })} - ${endDate.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  })}`

  return { date, time }
}

export default function Page() {
  const { id } = useParams() as { id: string }
  const router = useRouter()
  const t = useTranslations()
  const [currentPage, setCurrentPage] = useState(1)
  const [activeTab, setActiveTab] = useState("appointments")
  const pageSize = 10

  // Edit modal state
  const { isOpen: isEditOpen, open: openEdit, close: closeEdit } = useDisclosure()
  const { isOpen: isWorkingHoursOpen, open: openWorkingHours, close: closeWorkingHours } = useDisclosure()
  const { isOpen: isVacationOpen, open: openVacation, close: closeVacation } = useDisclosure()
  const [apiWorkingHours, setApiWorkingHours] = useState<any[]>([])
  const [modalWorkingHours, setModalWorkingHours] = useState<Record<string, any>>({
    monday: { enabled: true, timeSlots: [{ start: "09:00", end: "18:00" }] },
    tuesday: { enabled: true, timeSlots: [{ start: "09:00", end: "18:00" }] },
    wednesday: { enabled: true, timeSlots: [{ start: "09:00", end: "18:00" }] },
    thursday: { enabled: true, timeSlots: [{ start: "09:00", end: "18:00" }] },
    friday: { enabled: true, timeSlots: [{ start: "09:00", end: "18:00" }] },
    saturday: { enabled: false, timeSlots: [{ start: "09:00", end: "18:00" }] },
    sunday: { enabled: false, timeSlots: [{ start: "09:00", end: "18:00" }] }
  })

  const { data: stylist, isLoading: stylistLoading } = useGetStylistById(id)
  const { data: appointmentsData, isLoading: appointmentsLoading } = useGetStylistAppointments({
    stylistId: id,
    page: currentPage,
    limit: pageSize
  })
  const { data: cancelledData, isLoading: cancelledLoading } = useGetCancelledVacationAppointments(id)
  const modifyAppointment = useModifyAppointment()
  const markAsNoShow = useMarkAsNoShow()
  const deleteStylist = useDeleteStylist()
  const updateStylist = useUpdateStylist()
  const deleteVacation = useDeleteVacation()
  const confirm = useConfirm()

  // Update working hours when stylist details are loaded
  useEffect(() => {
    if (stylist && stylist.workingHours) {
      const modalFormat = stylist.workingHours.reduce((acc: any, wh: any) => {
        const dayName = wh.day.toLowerCase()
        acc[dayName] = {
          enabled: wh.enabled,
          timeSlots: wh.slots
        }
        return acc
      }, {})
      setModalWorkingHours(modalFormat)
      setApiWorkingHours(stylist.workingHours)
    }
  }, [stylist])

  const handleCancelAppointment = (appointmentId: string) => {
    modifyAppointment.mutate({
      bookingId: appointmentId,
      delete: true
    })
  }

  const handleDeleteStylist = () => {
    if (!stylist) return
    confirm.show({
      title: t("staff.modals.deleteStaff"),
      description: t("staff.messages.confirmDeleteStaff"),
      confirmText: t("common.delete"),
      cancelText: t("common.cancel"),
      onConfirm: async () => {
        try {
          await deleteStylist.mutateAsync(stylist._id)
          router.push("/dashboard/staff")
        } catch (e) {
          console.error("Delete failed", e)
        }
      }
    })
  }

  const handleSaveWorkingHours = (newWorkingHours: any[]) => {
    setApiWorkingHours(newWorkingHours)
    const modalFormat = newWorkingHours.reduce((acc: any, wh: any) => {
      const dayName = wh.day.toLowerCase()
      acc[dayName] = {
        enabled: wh.enabled,
        timeSlots: wh.slots
      }
      return acc
    }, {})
    setModalWorkingHours(modalFormat)
  }

  if (stylistLoading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    )
  }

  if (!stylist) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <div className="text-center">
          <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <div className="w-6 h-6 bg-gray-300 rounded"></div>
          </div>
          <h3 className="text-lg font-medium text-gray-900 mb-2">{t("staff.detail.staffNotFound")}</h3>
          <p className="text-gray-500">{t("staff.detail.staffNotFoundDescription")}</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen">
      <div className="w-full">
        <Card className="shadow-lg">
          <CardContent className="p-6 md:p-8">

            {/* Header Section with Profile and Actions */}
            <div className="flex flex-col lg:flex-row lg:justify-between gap-6 mb-8">

              {/* Profile Section */}
              <div className="flex flex-col gap-6">
                {/* Profile Info */}
                <div className="flex items-start gap-6">
                  <Avatar className="w-24 h-24 rounded-full">
                    <AvatarImage
                      src={stylist.image || ""}
                      alt={stylist.name}
                      className="object-cover"
                    />
                    <AvatarFallback className="rounded-full bg-gray-200 text-gray-600 text-xl">
                      {stylist.name
                        .split(" ")
                        .map(n => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex flex-col justify-center gap-1">
                    <h1 className="text-2xl font-medium text-gray-900 leading-tight">
                      {stylist.name}
                    </h1>
                    <p className="text-lg text-gray-600 font-normal">
                      {/* {stylist.services.length > 0 ? stylist.services[0].name : "Stylist"} */}
                      {stylist.role || (stylist.services.length > 0 ? stylist.services[0].name : "Stylist")}
                    </p>
                    <div className="flex items-center gap-2">
                      <div className="flex items-center px-4 py-2 rounded-lg bg-green-50 w-fit">
                        <span className="text-green-700 text-sm font-medium">
                          {stylist.active ? t("staff.status.active") : t("staff.status.offDuty")}
                        </span>
                      </div>
                      {stylist.isOnVacation && (
                        <div className="flex items-center px-4 py-2 rounded-lg bg-red-50 w-fit">
                          <span className="text-red-700 text-sm font-medium">
                            {t("staff.status.onVacation")}
                          </span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>

                {/* Service Tags */}
                {stylist.services && stylist.services.length > 0 && (
                  <div className="flex flex-wrap items-center gap-3">
                    {stylist.services.map((service) => (
                      <div key={service._id} className="px-3 py-1.5 rounded-md bg-blue-50">
                        <span className="text-sm font-normal text-blue-700">
                          {service.name}
                        </span>
                      </div>
                    ))}
                  </div>
                )}

                {/* Availability */}
                <div className="flex flex-col gap-2">
                  <div className="text-gray-900 text-sm font-medium">
                    {t("staff.detail.available")}:
                  </div>
                  <div className="flex flex-wrap items-center gap-4">
                    {stylist.workingHours && stylist.workingHours.length > 0 ? (
                      (() => {
                        // Group consecutive days with same hours
                        const enabledDays = stylist.workingHours
                          .filter((wh: any) => wh.enabled)
                          .map((wh: any) => ({
                            day: wh.day.charAt(0).toUpperCase() + wh.day.slice(1),
                            slots: wh.slots
                          }))

                        if (enabledDays.length === 0) {
                          return (
                            <div className="flex items-center gap-2">
                              <Clock className="w-4 h-4 text-gray-500" />
                              <span className="text-gray-600 text-sm">{t("staff.workingHours.noWorkingHours")}</span>
                            </div>
                          )
                        }

                        // Format time from 24h to 12h
                        const formatTime = (time: string) => {
                          const [hours, minutes] = time.split(':').map(Number)
                          return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
                        }

                        // Group days by their time slots
                        const groupedByTime: Record<string, string[]> = {}
                        enabledDays.forEach((day: any) => {
                          const timeKey = day.slots.map((s: any) => `${s.start}-${s.end}`).join(',')
                          if (!groupedByTime[timeKey]) {
                            groupedByTime[timeKey] = []
                          }
                          groupedByTime[timeKey].push(day.day)
                        })

                        return Object.entries(groupedByTime).map(([timeKey, days], index) => {
                          const slots = timeKey.split(',').map(slot => {
                            const [start, end] = slot.split('-')
                            return `${formatTime(start)} - ${formatTime(end)}`
                          })

                          // Format day range (e.g., "Monday - Friday" or "Monday, Wednesday")
                          const dayOrder = [
                            t("staff.workingHours.monday"),
                            t("staff.workingHours.tuesday"),
                            t("staff.workingHours.wednesday"),
                            t("staff.workingHours.thursday"),
                            t("staff.workingHours.friday"),
                            t("staff.workingHours.saturday"),
                            t("staff.workingHours.sunday")
                          ]
                          const englishDayOrder = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

                          // Convert English days to translated days for sorting
                          const translatedDays = days.map(day => {
                            const englishIndex = englishDayOrder.indexOf(day)
                            return englishIndex !== -1 ? dayOrder[englishIndex] : day
                          })

                          const sortedDays = translatedDays.sort((a, b) => dayOrder.indexOf(a) - dayOrder.indexOf(b))

                          let dayDisplay = ''
                          if (sortedDays.length === 1) {
                            dayDisplay = sortedDays[0]
                          } else {
                            // Check if days are consecutive
                            const indices = sortedDays.map(d => dayOrder.indexOf(d))
                            const isConsecutive = indices.every((val, i, arr) =>
                              i === 0 || val === arr[i - 1] + 1
                            )

                            if (isConsecutive && sortedDays.length > 2) {
                              dayDisplay = `${sortedDays[0]} - ${sortedDays[sortedDays.length - 1]}`
                            } else {
                              dayDisplay = sortedDays.join(', ')
                            }
                          }

                          return (
                            <div key={index} className="flex items-center gap-2">
                              <Clock className="w-4 h-4 text-gray-500" />
                              <span className="text-gray-600 text-sm">
                                {dayDisplay}, {slots.join(' & ')}
                              </span>
                            </div>
                          )
                        })
                      })()
                    ) : (
                      <div className="flex items-center gap-2">
                        <Clock className="w-4 h-4 text-gray-500" />
                        <span className="text-gray-600 text-sm">{t("staff.workingHours.noWorkingHours")}</span>
                      </div>
                    )}
                  </div>
                </div>

                {/* Vacations */}
                {stylist.vacations && stylist.vacations.length > 0 && (
                  <div className="flex flex-col gap-2">
                    <div className="text-gray-900 text-sm font-medium">
                      {t("staff.detail.vacations")}:
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                      {stylist.vacations.map((vacation, vIndex) => {
                        const startDate = new Date(vacation.start)
                        const endDate = new Date(vacation.end)

                        const dateOptions: Intl.DateTimeFormatOptions = {
                          month: 'short',
                          day: 'numeric',
                          year: 'numeric'
                        }
                        const timeOptions: Intl.DateTimeFormatOptions = {
                          hour: '2-digit',
                          minute: '2-digit',
                          hour12: false
                        }

                        const startStr = `${startDate.toLocaleDateString('en-US', dateOptions)}`
                        const endStr = `${endDate.toLocaleDateString('en-US', dateOptions)}`

                        return (
                          <div key={vIndex} className="bg-red-50/50 border border-red-100 rounded-lg p-3 relative group">
                            {/* Delete Button */}
                            <button
                              onClick={() => {
                                if (vacation._id) {
                                  confirm.show({
                                    title: t("common.delete"),
                                    description: t("staff.messages.confirmDeleteVacation"),
                                    confirmText: t("common.delete"),
                                    cancelText: t("common.cancel"),
                                    onConfirm: () => deleteVacation.mutate(vacation._id!)
                                  })
                                }
                              }}
                              className="absolute top-2 right-2 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-red-50 rounded"
                              disabled={deleteVacation.isPending}
                            >
                              <Trash2 className="w-4 h-4" />
                            </button>

                            <div className="flex flex-col gap-2 pr-8">
                              <div className="flex items-start gap-2">
                                <CalendarOff className="w-4 h-4 text-red-500 mt-0.5 shrink-0" />
                                <div className="flex flex-col">
                                  <span className="text-gray-900 text-sm font-medium">
                                    {startStr}
                                  </span>
                                  <span className="text-gray-500 text-xs">
                                    {t("workingHoursForm.to")} {endStr}
                                  </span>
                                </div>
                              </div>
                              {vacation.reason && (
                                <div className="mt-1 pl-6">
                                  <Badge variant="secondary" className="bg-white text-gray-600 border-gray-200 text-xs font-normal hover:bg-white">
                                    {vacation.reason}
                                  </Badge>
                                </div>
                              )}
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  </div>
                )}
              </div>

              {/* Action Buttons - Desktop */}
              <div className="hidden lg:flex items-start gap-4 shrink-0">
                <Button onClick={openVacation} variant="outline" className="border-gray-300 text-gray-700 px-4 py-2 hover:bg-gray-50">
                  <CalendarOff className="w-4 h-4 mr-2" />
                  {t("staff.status.offDuty")}
                </Button>
                <Button onClick={openEdit} className="bg-primary-gradient text-white px-4 py-2">
                  <SquarePen className="w-4 h-4 mr-2" />
                  {t("staff.detail.editStaff")}
                </Button>
                <Button
                  variant="outline"
                  className="border-red-500 text-red-500 hover:bg-red-50 px-4 py-2"
                  onClick={handleDeleteStylist}
                  disabled={deleteStylist.isPending}
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  {deleteStylist.isPending ? t("common.loading") + "..." : t("staff.detail.deleteStaff")}
                </Button>
              </div>

              <div className="flex lg:hidden items-center gap-4">
                <Button onClick={openVacation} variant="outline" className="border-gray-300 text-gray-700 px-4 py-2 hover:bg-gray-50">
                  <CalendarOff className="w-4 h-4 mr-2" />
                  {t("staff.status.offDuty")}
                </Button>
                <Button onClick={openEdit} className="bg-primary-gradient text-white px-4 py-2">
                  <Pencil className="w-4 h-4 mr-2" />
                  {t("staff.detail.editStaff")}
                </Button>
                <Button
                  variant="outline"
                  className="border-red-500 text-red-500 hover:bg-red-50 px-4 py-2"
                  onClick={handleDeleteStylist}
                  disabled={deleteStylist.isPending}
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  {deleteStylist.isPending ? t("common.loading") + "..." : t("staff.detail.deleteStaff")}
                </Button>
              </div>
            </div>

            {/* Tabs for Appointments and Cancelled due to Vacation */}
            <div className="mt-8">
              <CustomTabs
                activeValue={activeTab}
                onTabChange={setActiveTab}
                items={[
                  { value: "appointments", label: t("staff.detail.appointments") },
                  { value: "cancelled", label: t("staff.detail.cancelledDueToVacation") }
                ]}
              >
                <TabsContent value="appointments">
                  <div className="rounded-lg bg-white overflow-hidden border">
                    <Table>
                      {/* Table Header - Hidden on mobile */}
                      <TableHeader className="hidden md:table-header-group">
                        <TableRow className="bg-gray-50 border-b">
                          <TableHead className="text-gray-900 text-sm font-medium">{t("staff.detail.clientName")}</TableHead>
                          <TableHead className="text-gray-900 text-sm font-medium">{t("staff.detail.date")}</TableHead>
                          <TableHead className="text-gray-900 text-sm font-medium">{t("staff.detail.time")}</TableHead>
                          <TableHead className="text-gray-900 text-sm font-medium">{t("staff.detail.status")}</TableHead>
                          <TableHead className="text-gray-900 text-sm font-medium text-center">{t("staff.detail.action")}</TableHead>
                        </TableRow>
                      </TableHeader>

                      {/* Table Body */}
                      <TableBody>
                        {appointmentsLoading ? (
                          <TableRow>
                            <TableCell colSpan={5} className="text-center py-8">
                              <div className="flex items-center justify-center">
                                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mr-2"></div>
                                {t("staff.detail.loadingAppointments")}
                              </div>
                            </TableCell>
                          </TableRow>
                        ) : appointmentsData?.data?.length === 0 ? (
                          <TableRow>
                            <TableCell colSpan={5} className="text-center py-8 text-gray-500">
                              {t("staff.detail.noAppointments")}
                            </TableCell>
                          </TableRow>
                        ) : (
                          appointmentsData?.data?.map((appointment) => {
                            const { date, time } = formatDateTime(appointment.start, appointment.end)
                            return (
                              <TableRow key={appointment._id} className="border-b">
                                {/* Mobile Layout - Stacked */}
                                <TableCell className="md:hidden p-4">
                                  <div className="space-y-3">
                                    <div className="flex items-center gap-3">
                                      <Avatar className="w-10 h-10 rounded-full">
                                        <AvatarFallback className="text-sm bg-gray-100">
                                          {appointment.client ? appointment.client.charAt(0).toUpperCase() : "?"}
                                        </AvatarFallback>
                                      </Avatar>
                                      <div>
                                        <div className="font-medium text-gray-900">{appointment.client || "Unknown Client"}</div>
                                        <div className="text-sm text-gray-500">{t("staff.detail.appointments")}</div>
                                      </div>
                                    </div>
                                    <div className="grid grid-cols-2 gap-4 text-sm">
                                      <div>
                                        <span className="font-medium text-gray-500">{t("staff.detail.date")}:</span>
                                        <div className="text-gray-900">{date}</div>
                                      </div>
                                      <div>
                                        <span className="font-medium text-gray-500">{t("staff.detail.time")}:</span>
                                        <div className="text-gray-900">{time}</div>
                                      </div>
                                    </div>
                                    <div className="flex items-center justify-between">
                                      <Badge
                                        className={`${appointment.status === "confirmed"
                                          ? "bg-green-100 text-green-800"
                                          : appointment.status === "pending"
                                            ? "bg-yellow-100 text-yellow-800"
                                            : "bg-gray-100 text-gray-800"
                                          }`}
                                      >
                                        {appointment.status.charAt(0).toUpperCase() + appointment.status.slice(1)}
                                      </Badge>
                                      {(appointment.status === "confirmed" || appointment.status === "pending") && (
                                        <DropdownMenu>
                                          <DropdownMenuTrigger asChild>
                                            <Button variant="ghost" size="sm">
                                              <MoreHorizontal className="w-4 h-4" />
                                            </Button>
                                          </DropdownMenuTrigger>
                                          <DropdownMenuContent align="end">
                                            {(appointment.status === "confirmed" || appointment.status === "pending") && (
                                              <DropdownMenuItem
                                                variant="destructive"
                                                onClick={() => handleCancelAppointment(appointment._id)}
                                                disabled={modifyAppointment.isPending}
                                              >
                                                <X className="w-4 h-4 mr-2" />
                                                {t("staff.detail.cancelAppointment")}
                                              </DropdownMenuItem>
                                            )}
                                            {(appointment.status === "confirmed" || appointment.status === "pending") && new Date(appointment.start) < new Date() && (
                                              <DropdownMenuItem
                                                onClick={() => markAsNoShow.mutate(appointment._id)}
                                                disabled={markAsNoShow.isPending}
                                              >
                                                <AlertCircle className="w-4 h-4 mr-2" />
                                                {t("staff.detail.markAsNoShow")}
                                              </DropdownMenuItem>
                                            )}
                                          </DropdownMenuContent>
                                        </DropdownMenu>
                                      )}
                                    </div>
                                  </div>
                                </TableCell>

                                {/* Desktop Layout - Table Cells */}
                                <TableCell className="hidden md:table-cell">
                                  <div className="flex items-center gap-3">
                                    <Avatar className="w-8 h-8 rounded-full">
                                      <AvatarFallback className="text-xs bg-gray-100">
                                        {appointment.client ? appointment.client.charAt(0).toUpperCase() : "?"}
                                      </AvatarFallback>
                                    </Avatar>
                                    <span className="text-gray-900 text-sm font-normal">
                                      {appointment.client || "Unknown Client"}
                                    </span>
                                  </div>
                                </TableCell>
                                <TableCell className="hidden md:table-cell text-gray-900 text-sm">
                                  {date}
                                </TableCell>
                                <TableCell className="hidden md:table-cell text-gray-900 text-sm">
                                  {time}
                                </TableCell>
                                <TableCell className="hidden md:table-cell">
                                  <Badge
                                    className={`${appointment.status === "confirmed"
                                      ? "bg-green-100 text-green-800"
                                      : appointment.status === "pending"
                                        ? "bg-yellow-100 text-yellow-800"
                                        : "bg-gray-100 text-gray-800"
                                      }`}
                                  >
                                    {appointment.status.charAt(0).toUpperCase() + appointment.status.slice(1)}
                                  </Badge>
                                </TableCell>
                                <TableCell className="hidden md:table-cell text-center">
                                  {(appointment.status === "confirmed" || appointment.status === "pending") && (
                                    <DropdownMenu>
                                      <DropdownMenuTrigger asChild>
                                        <Button variant="ghost" size="sm" className="p-2">
                                          <MoreHorizontal className="w-4 h-4" />
                                        </Button>
                                      </DropdownMenuTrigger>
                                      <DropdownMenuContent align="end">
                                        {(appointment.status === "confirmed" || appointment.status === "pending") && (
                                          <DropdownMenuItem
                                            variant="destructive"
                                            onClick={() => handleCancelAppointment(appointment._id)}
                                            disabled={modifyAppointment.isPending}
                                          >
                                            <X className="w-4 h-4 mr-2" />
                                            {t("staff.detail.cancelAppointment")}
                                          </DropdownMenuItem>
                                        )}
                                        {(appointment.status === "confirmed" || appointment.status === "pending") && new Date(appointment.start) < new Date() && (
                                          <DropdownMenuItem
                                            onClick={() => markAsNoShow.mutate(appointment._id)}
                                            disabled={markAsNoShow.isPending}
                                          >
                                            <AlertCircle className="w-4 h-4 mr-2" />
                                            {t("staff.detail.markAsNoShow")}
                                          </DropdownMenuItem>
                                        )}
                                      </DropdownMenuContent>
                                    </DropdownMenu>
                                  )}
                                </TableCell>
                              </TableRow>
                            )
                          })
                        )}
                      </TableBody>
                    </Table>

                    {/* Pagination */}
                    {appointmentsData && appointmentsData.total > pageSize && (
                      <div className="flex items-center justify-between px-6 py-4 bg-gray-50 border-t">
                        <div className="text-sm text-gray-700">
                          {t("common.search")} {((currentPage - 1) * pageSize) + 1} {t("common.next")} {Math.min(currentPage * pageSize, appointmentsData.total)} {t("common.previous")} {appointmentsData.total} {t("staff.detail.appointments")}
                        </div>
                        <div className="flex items-center gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                            disabled={currentPage === 1}
                          >
                            <ChevronLeft className="w-4 h-4" />
                            {t("staff.detail.previous")}
                          </Button>
                          <span className="text-sm text-gray-600 px-3">
                            {t("staff.detail.page")} {currentPage} {t("staff.detail.of")} {Math.ceil(appointmentsData.total / pageSize)}
                          </span>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => setCurrentPage(prev => prev + 1)}
                            disabled={currentPage >= Math.ceil(appointmentsData.total / pageSize)}
                          >
                            {t("staff.detail.next")}
                            <ChevronRight className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    )}
                  </div>
                </TabsContent>

                <TabsContent value="cancelled">
                  <div className="rounded-lg bg-white overflow-hidden border">
                    <Table>
                      <TableHeader className="hidden md:table-header-group">
                        <TableRow className="bg-gray-50 border-b">
                          <TableHead className="text-gray-900 text-sm font-medium">{t("staff.detail.clientName")}</TableHead>
                          <TableHead className="text-gray-900 text-sm font-medium">{t("staff.detail.cancelledDate")}</TableHead>
                          <TableHead className="text-gray-900 text-sm font-medium">{t("staff.detail.reason")}</TableHead>
                          <TableHead className="text-gray-900 text-sm font-medium">{t("staff.detail.cancelledBy")}</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {cancelledLoading ? (
                          <TableRow>
                            <TableCell colSpan={4} className="text-center py-8">
                              <div className="flex items-center justify-center">
                                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mr-2"></div>
                                {t("common.loading")}...
                              </div>
                            </TableCell>
                          </TableRow>
                        ) : cancelledData?.length === 0 ? (
                          <TableRow>
                            <TableCell colSpan={4} className="text-center py-8 text-gray-500">
                              {t("staff.detail.noCancelledAppointments")}
                            </TableCell>
                          </TableRow>
                        ) : (
                          cancelledData?.map((cancelled) => (
                            <TableRow key={cancelled._id} className="border-b">
                              {/* Mobile Layout */}
                              <TableCell className="md:hidden p-4">
                                <div className="space-y-3">
                                  <div className="flex items-center gap-3">
                                    <Avatar className="w-10 h-10 rounded-full">
                                      <AvatarFallback className="text-sm bg-gray-100">
                                        {cancelled.client_name ? cancelled.client_name.charAt(0).toUpperCase() : "?"}
                                      </AvatarFallback>
                                    </Avatar>
                                    <div>
                                      <div className="font-medium text-gray-900">{cancelled.client_name || "Unknown Client"}</div>
                                    </div>
                                  </div>
                                  <div className="text-sm">
                                    <span className="font-medium text-gray-500">{t("staff.detail.cancelledDate")}:</span>
                                    <div className="text-gray-900">
                                      {new Date(cancelled.cancelledAt).toLocaleDateString('en-US', {
                                        year: 'numeric',
                                        month: 'long',
                                        day: 'numeric'
                                      })}
                                    </div>
                                  </div>
                                  <div className="text-sm">
                                    <span className="font-medium text-gray-500">{t("staff.detail.reason")}:</span>
                                    <div className="text-gray-900">{cancelled.reason}</div>
                                  </div>
                                  <Badge variant="outline" className="bg-red-50 text-red-700 border-red-100">
                                    {t("staff.detail.cancelledBy")} {cancelled.cancelledBy}
                                  </Badge>
                                </div>
                              </TableCell>

                              {/* Desktop Layout */}
                              <TableCell className="hidden md:table-cell">
                                <div className="flex items-center gap-3">
                                  <Avatar className="w-8 h-8 rounded-full">
                                    <AvatarFallback className="text-xs bg-gray-100">
                                      {cancelled.client_name ? cancelled.client_name.charAt(0).toUpperCase() : "?"}
                                    </AvatarFallback>
                                  </Avatar>
                                  <span className="text-gray-900 text-sm font-normal">
                                    {cancelled.client_name || "Unknown Client"}
                                  </span>
                                </div>
                              </TableCell>
                              <TableCell className="hidden md:table-cell text-gray-900 text-sm">
                                {new Date(cancelled.cancelledAt).toLocaleDateString('en-US', {
                                  year: 'numeric',
                                  month: 'long',
                                  day: 'numeric'
                                })}
                              </TableCell>
                              <TableCell className="hidden md:table-cell text-gray-900 text-sm">
                                <div className="flex items-center gap-2">
                                  <AlertCircle className="w-4 h-4 text-gray-400" />
                                  <span>{cancelled.reason}</span>
                                </div>
                              </TableCell>
                              <TableCell className="hidden md:table-cell">
                                <Badge variant="outline" className="bg-red-50 text-red-700 border-red-100 capitalize">
                                  {cancelled.cancelledBy}
                                </Badge>
                              </TableCell>
                            </TableRow>
                          ))
                        )}
                      </TableBody>
                    </Table>
                  </div>
                </TabsContent>
              </CustomTabs>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Edit Staff Modal */}
      <EditStaffModal
        open={isEditOpen}
        setOpen={closeEdit}
        stylist={stylist || null}
        openWorkingHours={openWorkingHours}
        workingHours={apiWorkingHours}
        isLoading={false}
      />

      {/* Working Hours Modal */}
      <AddWorkingHoursModal
        open={isWorkingHoursOpen}
        setOpen={closeWorkingHours}
        initialSchedule={modalWorkingHours}
        onSave={handleSaveWorkingHours}
      />

      {/* Add Vacation Modal */}
      <AddVacationModal
        open={isVacationOpen}
        setOpen={closeVacation}
        stylistId={id}
      />
    </div>
  )
}