"use client"

import {
  SettingPage,
  settingSurfaceClassNames,
  settingTabsClassNames,
  settingTabsStyles,
} from "@/components/setting/PageSurface"
import { Stack, Tabs, Text } from "@mantine/core"
import { useState } from "react"
import LabelWorkloadTable from "./LabelWorkloadTable"
import Review1WorkloadTable from "./Review1WorkloadTable"
import Review2WorkloadTable from "./Review2WorkloadTable"

type WorkloadTab = "label" | "review1" | "review2"

function createVisitedTabs() {
  return {
    label: true,
    review1: false,
    review2: false,
    task: false,
  }
}

export default function TeamWorkloadPage() {
  const moduleTitle = "个人中心"
  const [activeTab, setActiveTab] = useState<WorkloadTab>("label")
  const [visitedTabs, setVisitedTabs] = useState(createVisitedTabs)

  const handleTabChange = (value: string | null) => {
    if (!value) return

    const nextTab = value as WorkloadTab
    setActiveTab(nextTab)
    setVisitedTabs((current) =>
      current[nextTab] ? current : { ...current, [nextTab]: true }
    )
  }

  return (
    <SettingPage>
      <Stack className={settingSurfaceClassNames.pageIntro}>
        <Text className={settingSurfaceClassNames.breadcrumb}>
          {moduleTitle} /{" "}
          <span className={settingSurfaceClassNames.breadcrumbCurrent}>
            工时列表
          </span>
        </Text>
      </Stack>
      <Tabs
        value={activeTab}
        onChange={handleTabChange}
        variant="pills"
        color="#1874FF"
        autoContrast
        radius="sm"
        classNames={settingTabsClassNames}
        styles={{
          root: {
            flex: 1,
            minHeight: 0,
            minWidth: 0,
            display: "flex",
            flexDirection: "column",
          },
          ...settingTabsStyles,
        }}>
        <Tabs.List>
          <Tabs.Tab value="label">标注工时</Tabs.Tab>
          <Tabs.Tab value="review1">审核工时</Tabs.Tab>
          <Tabs.Tab value="review2">复审工时</Tabs.Tab>
        </Tabs.List>

        <Tabs.Panel value="label">
          {visitedTabs.label ? <LabelWorkloadTable /> : null}
        </Tabs.Panel>
        <Tabs.Panel value="review1">
          {visitedTabs.review1 ? <Review1WorkloadTable /> : null}
        </Tabs.Panel>
        <Tabs.Panel value="review2">
          {visitedTabs.review2 ? <Review2WorkloadTable /> : null}
        </Tabs.Panel>
      </Tabs>
    </SettingPage>
  )
}