NextEdu/src/modules/exams/components/exam-columns.tsx

"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"

export const examColumns: ColumnDef<Exam>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
    size: 36,
  },
  {
    accessorKey: "title",
    header: "Exam Info",
    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((t, idx) => (
                <Badge key={`${t}-${idx}`} variant="secondary" className="h-5 px-1.5 text-[10px]">
                  {t}
                </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: "Status",
    cell: ({ row }) => {
      const status = row.original.status
      // Use 'default' as base for published/success to ensure type safety, 
      // but override with className below
      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"
          )}
        >
          {status}
        </Badge>
      )
    },
  },
  {
    id: "stats",
    header: "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} Qs</span>
          <span>•</span>
          <span>{row.original.totalScore} Pts</span>
        </div>
        <div className="flex items-center gap-1">
          <span>{row.original.durationMin} min</span>
        </div>
      </div>
    ),
  },
  {
    accessorKey: "difficulty",
    header: "Difficulty",
    cell: ({ row }) => {
      const diff = row.original.difficulty
      return (
        <div className="flex flex-col gap-1">
          <div className="flex gap-0.5">
            {[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">
            {diff === 1 ? "Easy" : diff === 2 ? "Easy-Med" : diff === 3 ? "Medium" : diff === 4 ? "Med-Hard" : "Hard"}
          </span>
        </div>
      )
    },
  },
  {
    id: "dates",
    header: "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">Scheduled</span>
               <span className="text-muted-foreground">{formatDate(scheduled)}</span>
             </>
          ) : (
             <>
               <span className="text-muted-foreground">Created</span>
               <span>{formatDate(created)}</span>
             </>
          )}
        </div>
      )
    },
  },
  {
    id: "actions",
    cell: ({ row }) => <ExamActions exam={row.original} />,
  },
]