"use client"
import { useState } from "react"
import { CustomTabs, TabItem, TabsContent } from "@/components/common/CustomTabs"
import { StaffList } from "./StaffList"
import { useGetStylists } from "@/lib/react-query/hooks/stylists"
import type { Stylist } from "@/types/stylists"
import { useTranslations } from "next-intl"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"

export function StaffTabs({ onAddStaff, onEditStaff }: { onAddStaff?: () => void; onEditStaff?: (stylist: Stylist) => void }) {
  const [activeTab, setActiveTab] = useState<"all" | "active" | "offDuty">("all")
  // Always fetch all stylists here to calculate correct counts for the tabs
  const { data: stylists } = useGetStylists("all")
  const { data: offDutyStylists } = useGetStylists("offDuty")
  const t = useTranslations()

  const tabItems: TabItem[] = [
    { value: "all", label: t("staff.tabs.all"), count: stylists?.meta?.total || 0 },
    { value: "active", label: t("staff.tabs.active"), count: stylists?.meta?.total_active || 0 },
    { value: "offDuty", label: t("staff.tabs.offDuty"), count: offDutyStylists?.meta?.total_on_vacation || 0 }
  ]

  const handleTabChange = (value: string) => {
    setActiveTab(value as "all" | "active" | "offDuty")
  }

  return (
    <div className="w-full mt-0">
      <CustomTabs
        items={tabItems}
        activeValue={activeTab}
        onTabChange={handleTabChange}
        rightContent={
          <Button
            onClick={onAddStaff}
            className="flex items-center gap-2 px-4 h-10 bg-primary-gradient text-white font-semibold shadow-none rounded-sm"
          >
            <Plus className="w-5 h-5 text-white" />
            {t("staff.addStaff")}
          </Button>
        }
      >
        <div className="" />
        <TabsContent value="all">
          <StaffList filter="all" onAddStaff={onAddStaff} onEditStaff={onEditStaff} />
        </TabsContent>
        <TabsContent value="active">
          <StaffList filter="active" onAddStaff={onAddStaff} onEditStaff={onEditStaff} />
        </TabsContent>
        <TabsContent value="offDuty">
          <StaffList filter="offDuty" onAddStaff={onAddStaff} onEditStaff={onEditStaff} />
        </TabsContent>
      </CustomTabs>
    </div>
  )
}