"use client"

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

import type { SchoolListItem } from "../types"
import { useSchoolData } from "../hooks/use-school-data"
import { SchoolDeleteDialog } from "./school-delete-dialog"
import { SchoolFormDialog } from "./school-form-dialog"
import { SchoolListToolbar } from "./school-list-toolbar"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent } from "@/shared/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/shared/components/ui/table"
import { EmptyState } from "@/shared/components/ui/empty-state"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { formatDate } from "@/shared/lib/utils"

export function SchoolsClient({ schools }: { schools: SchoolListItem[] }) {
  const t = useTranslations("school")
  const router = useRouter()
  const {
    createOpen,
    editItem,
    deleteItem,
    setCreateOpen,
    setEditItem,
    setDeleteItem,
    isWorking,
  } = useSchoolData()

  const handleSuccess = (): void => {
    router.refresh()
  }

  const handleFormOpenChange = (open: boolean): void => {
    if (!open) {
      setCreateOpen(false)
      setEditItem(null)
    }
  }

  const handleDeleteOpenChange = (open: boolean): void => {
    if (!open) {
      setDeleteItem(null)
    }
  }

  return (
    <>
      <SchoolListToolbar
        count={schools.length}
        onCreate={() => setCreateOpen(true)}
        isWorking={isWorking}
      />

      <Card className="shadow-none">
        <CardContent>
          {schools.length === 0 ? (
            <EmptyState
              title={t("schools.empty.title")}
              description={t("schools.empty.description")}
              className="h-auto border-none shadow-none"
            />
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>{t("schools.column.name")}</TableHead>
                  <TableHead>{t("schools.column.code")}</TableHead>
                  <TableHead>{t("schools.column.updated")}</TableHead>
                  <TableHead className="w-[60px]" />
                </TableRow>
              </TableHeader>
              <TableBody>
                {schools.map((s) => (
                  <TableRow key={s.id}>
                    <TableCell className="font-medium">{s.name}</TableCell>
                    <TableCell className="text-muted-foreground">{s.code || "-"}</TableCell>
                    <TableCell className="text-muted-foreground">{formatDate(s.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={() => setEditItem(s)}>
                            <Pencil className="mr-2 h-4 w-4" />
                            {t("schools.actions.edit")}
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem
                            className="text-destructive focus:text-destructive"
                            onClick={() => setDeleteItem(s)}
                          >
                            <Trash2 className="mr-2 h-4 w-4" />
                            {t("schools.actions.delete")}
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      <SchoolFormDialog
        open={createOpen || Boolean(editItem)}
        onOpenChange={handleFormOpenChange}
        editItem={editItem}
        onSuccess={handleSuccess}
      />

      <SchoolDeleteDialog
        deleteItem={deleteItem}
        onOpenChange={handleDeleteOpenChange}
        onSuccess={handleSuccess}
      />
    </>
  )
}
