"use client"
import { StaffTabs } from "./StaffTabs"
import { useDisclosure } from "@/hooks/useDisclosure"
import dynamic from "next/dynamic"
import { useState, useEffect } from "react"
import type { Stylist } from "@/types/stylists"
import { useGetStylists, useGetStylistById } from "@/lib/react-query/hooks/stylists"

const AddStaffModal = dynamic(() => import("./AddStaffModal"), { ssr: false })
const EditStaffModal = dynamic(() => import("./EditStaffModal"), { ssr: false })
const AddWorkingHoursModal = dynamic(() => import("./AddWorkingHoursModal"), { ssr: false })

export function MainStaff() {
  const { isOpen, open, close } = useDisclosure()
  const { isOpen: isWorkingHoursOpen, open: openWorkingHours, close: closeWorkingHours } = useDisclosure()
  const { isOpen: isEditOpen, open: openEdit, close: closeEdit } = useDisclosure()
  const [selectedStylist, setSelectedStylist] = useState<Stylist | null>(null)
  const [editingStylistId, setEditingStylistId] = useState<string | null>(null)
  const [apiWorkingHours, setApiWorkingHours] = useState<any[]>([
    {
      day: "monday",
      enabled: true,
      slots: [{ start: "09:00", end: "18:00" }]
    }
  ])
  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" }] }
  })

  // Get all stylists data (which includes images)
  const { data: stylists, isLoading: isLoadingStylists } = useGetStylists()

  // Get individual stylist details for working hours when editing
  const { data: stylistDetails, isLoading: isLoadingStylist } = useGetStylistById(editingStylistId || "")

  // Update working hours when stylist details are loaded
  useEffect(() => {
    if (stylistDetails && stylistDetails.workingHours) {
      // Transform API format to modal format
      const modalFormat = stylistDetails.workingHours.reduce((acc: any, wh: any) => {
        const dayName = wh.day.charAt(0).toUpperCase() + wh.day.slice(1) // Capitalize first letter
        acc[dayName] = {
          enabled: wh.enabled,
          timeSlots: wh.slots
        }
        return acc
      }, {})
      setModalWorkingHours(modalFormat)
      setApiWorkingHours(stylistDetails.workingHours)
    }
  }, [stylistDetails])

  const handleEditStaff = (stylist: Stylist) => {
    setEditingStylistId(stylist._id)
    // Set the stylist data immediately from the list (includes images)
    setSelectedStylist(stylist)
    // Working hours will be loaded via useEffect when stylistDetails is available
    openEdit()
  }

  const handleCloseEdit = () => {
    closeEdit()
    setEditingStylistId(null)
    setSelectedStylist(null)
  }

  const handleSaveWorkingHours = (newWorkingHours: any[]) => {
    setApiWorkingHours(newWorkingHours)
    // Also update modal format for consistency
    const modalFormat = newWorkingHours.reduce((acc: any, wh: any) => {
      const dayName = wh.day.charAt(0).toUpperCase() + wh.day.slice(1)
      acc[dayName] = {
        enabled: wh.enabled,
        timeSlots: wh.slots
      }
      return acc
    }, {})
    setModalWorkingHours(modalFormat)
  }

  return (
    <>
      <StaffTabs onAddStaff={open} onEditStaff={handleEditStaff} />
      <AddStaffModal open={isOpen} setOpen={close} openWorkingHours={openWorkingHours} workingHours={apiWorkingHours} />
      <EditStaffModal
        open={isEditOpen}
        setOpen={handleCloseEdit}
        stylist={selectedStylist}
        openWorkingHours={openWorkingHours}
        workingHours={apiWorkingHours}
        isLoading={isLoadingStylists || isLoadingStylist}
      />
      <AddWorkingHoursModal
        open={isWorkingHoursOpen}
        setOpen={closeWorkingHours}
        onSave={handleSaveWorkingHours}
        initialSchedule={modalWorkingHours}
      />
    </>
  )
}