"use client"

import { useEffect } from "react"
import { Card } from "@/components/ui/card"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { usePagination, TablePagination } from "@/components/ui/pagination"
import type { EmployeeListItem } from "@/features/employees/types"

export default function EmployeeList({ employees }: { employees: EmployeeListItem[] }) {
  const { page, pageSize, setPage, setPageSize, totalPages, paginate, resetPage } =
    usePagination(employees, 10)

  useEffect(() => { resetPage() }, [employees.length])

  const visible = paginate(employees)

  return (
    <Card className="w-full overflow-hidden">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Email</TableHead>
            <TableHead>Phone</TableHead>
            <TableHead>Department</TableHead>
            <TableHead>Company</TableHead>
            <TableHead>Position</TableHead>
            <TableHead className="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {visible.map((e) => (
            <TableRow key={e.id}>
              <TableCell className="font-medium">{e.fullName}</TableCell>
              <TableCell className="text-muted-foreground">{e.email || "-"}</TableCell>
              <TableCell className="text-muted-foreground">{e.phone || "-"}</TableCell>
              <TableCell className="text-muted-foreground">{e.departmentName || "-"}</TableCell>
              <TableCell className="text-muted-foreground">{e.branchName || "-"}</TableCell>
              <TableCell className="text-muted-foreground">{e.position || "-"}</TableCell>
              <TableCell className="text-right">
                <div className="flex items-center justify-end gap-1">
                  <Button asChild variant="ghost" size="sm">
                    <a href={`/employees/${e.id}`}>View</a>
                  </Button>
                  <Button asChild variant="ghost" size="sm">
                    <a href={`/employees/edit/${e.id}`}>Edit</a>
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      <TablePagination
        total={employees.length}
        page={page}
        pageSize={pageSize}
        totalPages={totalPages}
        onPageChange={setPage}
        onPageSizeChange={setPageSize}
      />
    </Card>
  )
}