"use client"
import { useDeleteStylist, useGetStylists } from "@/lib/react-query/hooks/stylists"
import type { Stylist } from "@/types/stylists"
import { StaffProfile, StaffProfileCard } from "./StaffProfileCard"
import { StaffCardSkeleton } from "./StaffCardSkeleton"
import { StaffEmptyState } from "./StaffEmptyState"
import { useConfirm } from "@/context/ConfirmDialogContext"
import { useTranslations } from "next-intl"

interface StaffListProps {
  filter: "all" | "active" | "offDuty"
  onAddStaff?: () => void
  onEditStaff?: (stylist: Stylist) => void
}

export function StaffList({ filter, onAddStaff, onEditStaff }: StaffListProps) {
  const { data: stylists, isLoading } = useGetStylists(filter)
  const deleteStylist = useDeleteStylist()
  const t = useTranslations()

  const confirm = useConfirm()

  // Transform API data to match component interface
  const transformedStylists =
    stylists?.data?.map((stylist: Stylist) => ({
      id: stylist._id,
      name: stylist.name,
      title: stylist.role || stylist.services[0]?.name || "Stylist", // Use role if available, fallback to first service or default
      avatarUrl: stylist.image || "", // Use image field directly
      image: stylist.image,
      status: stylist.active ? "Active" : "Off Duty",
      services: stylist.services.map(service => service.name)
    })) || []

  // No need for client-side filtering anymore since it's done server-side
  const filteredStylists = transformedStylists

  // Check if all staff are currently active
  const allStaffActive = stylists?.data && stylists.data.length > 0 && stylists.data.every(stylist => stylist.active)

  const confirmDelete = (stylist: StaffProfile) => {
    confirm.show({
      title: `Delete stylist: ${stylist.name}`,
      description: `Are you sure you want to delete the stylist "${stylist.name}"? This action cannot be undone.`,
      confirmText: "Delete",
      cancelText: "Cancel",
      onConfirm: async () => {
        try {
          await deleteStylist.mutateAsync(stylist.id)
        } catch (e) {
          console.error("Delete failed", e)
        }
      }
    })
  }

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {[...Array(4)].map((_, i) => (
          <StaffCardSkeleton key={i} />
        ))}
      </div>
    )
  }

  if (filteredStylists.length === 0) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="md:col-span-2">
          <StaffEmptyState filter={filter} onAddStaff={onAddStaff} />
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {/* {filter === "active" && allStaffActive && (
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
          <p className="text-blue-800 text-sm">{t("staff.messages.allStaffActive")}</p>
        </div>
      )} */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {filteredStylists.map(stylist => {
          const fullStylist = stylists?.data?.find(s => s._id === stylist.id)
          return (
            <StaffProfileCard key={stylist.id} profile={stylist} stylist={fullStylist} confirmDelete={confirmDelete} onEdit={onEditStaff} />
          )
        })}
      </div>
    </div>
  )
}