"use client"

import { useTranslations } from "next-intl"
import { ColumnDef } from "@tanstack/react-table"
import { useMemo } from "react"

import { Badge } from "@/shared/components/ui/badge"
import { Checkbox } from "@/shared/components/ui/checkbox"
import { StatusBadge } from "@/shared/components/ui/status-badge"
import { formatDate } from "@/shared/lib/utils"
import type { Question } from "../types"
import { QUESTION_TYPE_VARIANT } from "../types"
import { getQuestionPreview } from "../utils/parse-content"
import { QuestionActions } from "./question-actions"

/**
 * 题目表格列定义。
 *
 * 使用函数形式以获取 i18n 翻译函数。
 * 调用方通过 `useQuestionColumns()` 获取列定义。
 */
export function useQuestionColumns(): ColumnDef<Question>[] {
  const t = useTranslations("questions")

  return useMemo(() => [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={table.getIsAllPageRowsSelected()}
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label={t("actions.menuLabel")}
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label={t("actions.menuLabel")}
        />
      ),
      enableSorting: false,
      enableHiding: false,
    },
    {
      accessorKey: "type",
      header: t("table.type"),
      cell: ({ row }) => {
        const type = row.original.type
        return (
          <StatusBadge
            status={type}
            variantMap={QUESTION_TYPE_VARIANT}
            labelMap={{ [type]: t(`type.${type}`) }}
            className="whitespace-nowrap"
            capitalize={false}
          />
        )
      },
    },
    {
      accessorKey: "content",
      header: t("table.content"),
      cell: ({ row }) => {
        const preview = getQuestionPreview(row.original.content, 80)
        return (
          <div className="max-w-[400px] truncate font-medium" title={preview}>
            {preview}
          </div>
        )
      },
    },
    {
      accessorKey: "difficulty",
      header: t("table.difficulty"),
      cell: ({ row }) => {
        const diff = row.original.difficulty
        const label = t(`difficulty.${diff}`)
        return (
          <div className="flex items-center gap-2">
            <Badge variant="outline" className="tabular-nums">
              {label}
            </Badge>
            <span className="text-xs text-muted-foreground tabular-nums">({diff})</span>
          </div>
        )
      },
    },
    {
      accessorKey: "knowledgePoints",
      header: t("table.knowledgePoints"),
      cell: ({ row }) => {
        const kps = row.original.knowledgePoints
        if (!kps || kps.length === 0) return <span className="text-muted-foreground">-</span>

        return (
          <div className="flex flex-wrap gap-1">
            {kps.slice(0, 2).map((kp) => (
              <Badge key={kp.id} variant="outline" className="text-xs">
                {kp.name}
              </Badge>
            ))}
            {kps.length > 2 && (
              <Badge variant="outline" className="text-xs">
                +{kps.length - 2}
              </Badge>
            )}
          </div>
        )
      },
    },
    {
      accessorKey: "createdAt",
      header: t("table.created"),
      cell: ({ row }) => {
        const createdAt = row.original.createdAt
        return (
          <span className="text-muted-foreground text-xs whitespace-nowrap">
            {createdAt instanceof Date
              ? formatDate(createdAt)
              : typeof createdAt === "string"
                ? formatDate(createdAt)
                : "—"}
          </span>
        )
      },
    },
    {
      id: "actions",
      cell: ({ row }) => <QuestionActions question={row.original} />,
    },
  ], [t])
}
