"use client"

import { ColumnDef } from "@tanstack/react-table"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Eye, CheckSquare } from "lucide-react"
import { ExamSubmission } from "../types"
import Link from "next/link"
import { formatDate } from "@/shared/lib/utils"

export const submissionColumns: ColumnDef<ExamSubmission>[] = [
  {
    accessorKey: "studentName",
    header: "Student",
  },
  {
    accessorKey: "examTitle",
    header: "Exam",
  },
  {
    accessorKey: "submittedAt",
    header: "Submitted",
    cell: ({ row }) => (
      <span className="text-muted-foreground text-xs whitespace-nowrap">
        {formatDate(row.original.submittedAt)}
      </span>
    ),
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => {
      const status = row.original.status
      const variant = status === "graded" ? "secondary" : "outline"
      return <Badge variant={variant} className="capitalize">{status}</Badge>
    },
  },
  {
    accessorKey: "score",
    header: "Score",
    cell: ({ row }) => (
      <span className="text-muted-foreground text-xs">{row.original.score ?? "-"}</span>
    ),
  },
  {
    id: "actions",
    cell: ({ row }) => (
      <div className="flex items-center gap-2">
        <Button variant="ghost" size="sm" asChild>
          <Link href={`/teacher/exams/grading/${row.original.id}`}>
            <Eye className="h-4 w-4 mr-1" /> View
          </Link>
        </Button>
        <Button variant="outline" size="sm" asChild>
          <Link href={`/teacher/exams/grading/${row.original.id}`}>
            <CheckSquare className="h-4 w-4 mr-1" /> Grade
          </Link>
        </Button>
      </div>
    ),
  },
]