"use client"
import React from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { UpdateStaffMain } from "./UpdateStaffMain"
import type { Stylist } from "@/types/stylists"
import { useTranslations } from "next-intl"

interface EditStaffModalProps {
  open: boolean
  setOpen: (open: boolean) => void
  stylist: Stylist | null
  openWorkingHours: () => void
  workingHours?: any[]
  isLoading?: boolean
}

export default function EditStaffModal({ open, setOpen, stylist, openWorkingHours, workingHours, isLoading }: EditStaffModalProps) {
  const t = useTranslations()

  if (!stylist) return null
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="sm:max-w-[600px] bg-white border-0 max-h-[90vh] [&>button]:top-5 [&>button]:right-5 [&>button]:text-white [&>button]:hover:text-gray-200 [&>button>svg]:stroke-[4px]">
        <DialogHeader className="bg-primary-gradient  -m-6 mb-0 px-6 py-3 rounded-t-lg">
          <DialogTitle className="text-white text-lg font-medium">{t("staff.modals.editStaff")}</DialogTitle>
        </DialogHeader>

        <div className="px-6 py-4 overflow-y-auto max-h-[70vh]">
          {isLoading ? (
            <div className="flex items-center justify-center py-8">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-blue"></div>
              <span className="ml-2 text-gray-600">{t("common.loading")}...</span>
            </div>
          ) : (
            <UpdateStaffMain
              stylist={stylist}
              onSuccess={() => setOpen(false)}
              onCancel={() => setOpen(false)}
              onOpenWorkingHours={openWorkingHours}
              workingHours={workingHours}
            />
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}