"use client"

import { ColumnDef } from "@tanstack/react-table"
import { Checkbox } from "@/shared/components/ui/checkbox"
import { Badge, type BadgeProps } from "@/shared/components/ui/badge"
import { cn, formatDate } from "@/shared/lib/utils"
import { Exam } from "../types"
import { ExamActions } from "./exam-actions"

type TranslationFn = (key: string, params?: Record<string, unknown>) => string

export function createExamColumns(t: TranslationFn): ColumnDef<Exam>[] {
  return [
    {
      id: "select",
      header: ({ table }) => (
        <Checkbox
          checked={table.getIsAllPageRowsSelected()}
          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
          aria-label={t("exam.actions.selectAll")}
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          onCheckedChange={(value) => row.toggleSelected(!!value)}
          aria-label={t("exam.actions.selectRow")}
        />
      ),
      enableSorting: false,
      enableHiding: false,
      size: 36,
    },
    {
      accessorKey: "title",
      header: t("exam.columns.examInfo"),
      cell: ({ row }) => (
        <div className="flex flex-col gap-1">
          <div className="flex items-center gap-2">
            <span className="font-semibold text-base">{row.original.title}</span>
            {row.original.tags && row.original.tags.length > 0 && (
              <div className="flex flex-wrap gap-1">
                {row.original.tags.slice(0, 2).map((tag, idx) => (
                  <Badge key={`${tag}-${idx}`} variant="secondary" className="h-5 px-1.5 text-[10px]">
                    {tag}
                  </Badge>
                ))}
                {row.original.tags.length > 2 && (
                  <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">+{row.original.tags.length - 2}</Badge>
                )}
              </div>
            )}
          </div>
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <span className="font-medium text-foreground/80">{row.original.subject}</span>
            <span>•</span>
            <span>{row.original.grade}</span>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "status",
      header: t("exam.columns.status"),
      cell: ({ row }) => {
        const status = row.original.status
        const variant: BadgeProps["variant"] =
          status === "published"
            ? "default"
            : status === "archived"
            ? "secondary"
            : "outline"

        return (
          <Badge
            variant={variant}
            className={cn(
              "capitalize",
              status === "published" && "bg-green-600 hover:bg-green-700 border-transparent",
              status === "draft" && "bg-amber-100 text-amber-800 hover:bg-amber-200 border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800"
            )}
          >
            {t(`exam.status.${status}`)}
          </Badge>
        )
      },
    },
    {
      id: "stats",
      header: t("exam.columns.stats"),
      cell: ({ row }) => (
        <div className="flex flex-col gap-1 text-xs text-muted-foreground">
          <div className="flex items-center gap-2">
            <span className="font-medium text-foreground">{row.original.questionCount} {t("exam.columns.questions")}</span>
            <span>•</span>
            <span>{row.original.totalScore} {t("exam.columns.points")}</span>
          </div>
          <div className="flex items-center gap-1">
            <span>{row.original.durationMin} min</span>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "difficulty",
      header: t("exam.columns.difficulty"),
      cell: ({ row }) => {
        const diff = row.original.difficulty
        return (
          <div className="flex flex-col gap-1">
            <div
              className="flex gap-0.5"
              role="img"
              aria-label={t("exam.difficulty.ariaLabel", { level: diff, label: t(`exam.difficulty.${diff}`) })}
            >
              {[1, 2, 3, 4, 5].map((level) => (
                <div
                  key={level}
                  className={cn(
                    "h-1.5 w-3 rounded-full",
                    level <= diff
                      ? diff <= 2 ? "bg-green-500" : diff === 3 ? "bg-yellow-500" : "bg-red-500"
                      : "bg-muted"
                  )}
                />
              ))}
            </div>
            <span className="text-[10px] text-muted-foreground font-medium">
              {t(`exam.difficulty.${diff}`)}
            </span>
          </div>
        )
      },
    },
    {
      id: "dates",
      header: t("exam.columns.date"),
      cell: ({ row }) => {
        const scheduled = row.original.scheduledAt
        const created = row.original.createdAt

        return (
          <div className="flex flex-col gap-0.5 text-xs">
            {scheduled ? (
               <>
                 <span className="font-medium text-blue-600 dark:text-blue-400">{t("exam.columns.scheduled")}</span>
                 <span className="text-muted-foreground">{formatDate(scheduled)}</span>
               </>
            ) : (
               <>
                 <span className="text-muted-foreground">{t("exam.columns.created")}</span>
                 <span>{formatDate(created)}</span>
               </>
            )}
          </div>
        )
      },
    },
    {
      id: "actions",
      cell: ({ row }) => <ExamActions exam={row.original} />,
    },
  ]
}