"use client"

import { MoreHorizontal, Pencil, Trash2 } from "lucide-react"
import { useTranslations } from "next-intl"

import type { AdminClassListItem } from "../types"
import { formatSubjectTeachers } from "./class-form-utils"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { formatDate } from "@/shared/lib/utils"

export function ClassListTable({
  classes,
  onEdit,
  onDelete,
  isWorking,
  emptyDescription,
}: {
  classes: AdminClassListItem[]
  onEdit: (item: AdminClassListItem) => void
  onDelete: (item: AdminClassListItem) => void
  isWorking: boolean
  emptyDescription?: string
}) {
  const t = useTranslations("classes")
  return (
    <Card className="shadow-none">
      <CardHeader className="flex flex-row items-center justify-between space-y-0">
        <CardTitle className="text-base">{t("list.title")}</CardTitle>
      </CardHeader>
      <CardContent>
        {classes.length === 0 ? (
          <EmptyState
            title={t("list.empty.title")}
            description={emptyDescription ?? t("list.empty.description")}
            className="h-auto border-none shadow-none"
          />
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>{t("list.column.school")}</TableHead>
                <TableHead>{t("list.column.name")}</TableHead>
                <TableHead>{t("list.column.grade")}</TableHead>
                <TableHead>{t("list.column.homeroomLabel")}</TableHead>
                <TableHead>{t("list.column.room")}</TableHead>
                <TableHead>{t("list.column.homeroom")}</TableHead>
                <TableHead>{t("list.column.subjectTeachers")}</TableHead>
                <TableHead className="text-right">{t("list.column.studentCount")}</TableHead>
                <TableHead>{t("list.column.updated")}</TableHead>
                <TableHead className="w-[60px]" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {classes.map((c) => (
                <TableRow key={c.id}>
                  <TableCell className="text-muted-foreground">{c.schoolName ?? "-"}</TableCell>
                  <TableCell className="font-medium">{c.name}</TableCell>
                  <TableCell className="text-muted-foreground">{c.grade}</TableCell>
                  <TableCell className="text-muted-foreground">{c.homeroom ?? "-"}</TableCell>
                  <TableCell className="text-muted-foreground">{c.room ?? "-"}</TableCell>
                  <TableCell className="text-muted-foreground">{c.teacher.name}</TableCell>
                  <TableCell className="text-muted-foreground">{formatSubjectTeachers(c.subjectTeachers)}</TableCell>
                  <TableCell className="text-muted-foreground tabular-nums text-right">{c.studentCount}</TableCell>
                  <TableCell className="text-muted-foreground">{formatDate(c.updatedAt)}</TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8" disabled={isWorking}>
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => onEdit(c)}>
                          <Pencil className="mr-2 h-4 w-4" />
                          {t("list.actions.edit")}
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          className="text-destructive focus:text-destructive"
                          onClick={() => onDelete(c)}
                        >
                          <Trash2 className="mr-2 h-4 w-4" />
                          {t("list.actions.delete")}
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </CardContent>
    </Card>
  )
}
