"use client"

import { getCurrentPersonData } from "@/components/label/api/project"
import {
  SettingContentPanel,
  SettingPage,
  SettingPanel,
} from "@/components/setting/PageSurface"
import { Stack, Text } from "@mantine/core"
import dayjs from "dayjs"
import duration from "dayjs/plugin/duration"
import { useEffect, useMemo, useState } from "react"
import PersonalProjectTable from "./components/PersonalProjectTable"
import PersonalTaskTable from "./components/PersonalTaskTable"
import classes from "./page.module.css"

dayjs.extend(duration)

function monthText(month: string) {
  const list = [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ]
  const idx = Number(month) - 1
  return list[idx] ?? ""
}

function formatDurationSeconds(seconds?: number | null) {
  const value = seconds ?? 0
  if (!value) return "-"
  const durationObj = dayjs.duration(value, "seconds")
  const hours = durationObj.hours()
  const minutes = durationObj.minutes()
  if (hours) return `${hours}小时${minutes}分钟`
  if (minutes) return `${minutes}分钟`
  return "-"
}

export default function PersonDashboardPage() {
  const [data, setData] = useState<{
    label_data_size: number
    label_work_time: number
    review1_data_size: number
    review1_work_time: number
    review2_data_size: number
    review2_work_time: number
  } | null>(null)

  useEffect(() => {
    const run = async () => {
      const res = await getCurrentPersonData({
        date: dayjs().format("YYYY-MM-DD"),
      })
      setData(res)
    }
    run()
  }, [])

  const dataText = useMemo(() => {
    return {
      label: formatDurationSeconds(data?.label_work_time ?? 0),
      review1: formatDurationSeconds(data?.review1_work_time ?? 0),
      review2: formatDurationSeconds(data?.review2_work_time ?? 0),
    }
  }, [data])

  const summaryItems = useMemo(
    () => [
      {
        title: "标注工时",
        value: dataText.label,
        metaLabel: "标注数据量",
        metaValue: data?.label_data_size ?? 0,
      },
      {
        title: "审核工时",
        value: dataText.review1,
        metaLabel: "审核数据量",
        metaValue: data?.review1_data_size ?? 0,
      },
      {
        title: "复审工时",
        value: dataText.review2,
        metaLabel: "复审数据量",
        metaValue: data?.review2_data_size ?? 0,
      },
    ],
    [
      data?.label_data_size,
      data?.review1_data_size,
      data?.review2_data_size,
      dataText,
    ]
  )

  return (
    <SettingPage>
      <Stack className={classes.pageIntro}>
        <Text className={classes.breadcrumb}>
          个人工作台 /{" "}
          <span className={classes.breadcrumbCurrent}>个人看板</span>
        </Text>
      </Stack>

      <SettingPanel p={0}>
        <div className={classes.summaryGrid}>
          <div className={classes.summaryDateCell}>
            <Text className={classes.summaryDateLabel}>今日</Text>
            <Text className={classes.summaryDateValue}>
              {dayjs().format("DD")}
            </Text>
            <Text className={classes.summaryDateMeta}>
              {monthText(dayjs().format("MM"))} · {dayjs().format("YYYY")}
            </Text>
          </div>

          {summaryItems.map((item) => (
            <div key={item.title} className={classes.summaryMetricCell}>
              <Text className={classes.summaryMetricLabel}>{item.title}</Text>
              <Text className={classes.summaryMetricValue}>{item.value}</Text>
              <div className={classes.summaryMetricMeta}>
                <Text className={classes.summaryMetricMetaLabel}>
                  {item.metaLabel}
                </Text>
                <Text className={classes.summaryMetricMetaValue}>
                  {item.metaValue}
                </Text>
              </div>
            </div>
          ))}
        </div>
      </SettingPanel>

      <div className={classes.tableGrid}>
        <SettingContentPanel p={0} className={classes.dashboardPanel}>
          <div className={classes.dashboardPanelBody}>
            <PersonalTaskTable />
          </div>
        </SettingContentPanel>

        <SettingContentPanel p={0} className={classes.dashboardPanel}>
          <div className={classes.dashboardPanelBody}>
            <PersonalProjectTable />
          </div>
        </SettingContentPanel>
      </div>
    </SettingPage>
  )
}