"use client";

import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import avatarImage from "@/assets/images/avatar.jpeg";
import Image from "next/image";
import { MoreVertical } from "lucide-react";

export type PolicyTableRow = {
  id: string;
  employeeName: string;
  days: string;
};

const defaultRows: PolicyTableRow[] = [
  { id: "1", employeeName: "Janet Adebayo", days: "05" },
  { id: "2", employeeName: "Samuel Johnson", days: "08" },
];

type Props = {
  rows?: PolicyTableRow[];
  selectionKey: string;
  selected: Record<string, boolean>;
  onToggleAll: (checked: boolean) => void;
  onToggleRow: (id: string, checked: boolean) => void;
};

export default function LeaveSettingsPolicyTable({
  rows = defaultRows,
  selectionKey,
  selected,
  onToggleAll,
  onToggleRow,
}: Props) {
  const allSelected = rows.length > 0 && rows.every((r) => selected[`${selectionKey}-${r.id}`]);

  return (
    <div className="overflow-hidden rounded-lg border border-[#EBEEF2] bg-white">
      <Table>
        <TableHeader>
          <TableRow className="border-0 hover:bg-transparent">
            <TableHead className="h-12 w-12 pl-4 text-center">
              <input
                type="checkbox"
                className="size-4 cursor-pointer rounded-sm border border-[#074473] accent-[#074473]"
                checked={allSelected}
                onChange={(e) => onToggleAll(e.target.checked)}
                aria-label="Select all policies"
              />
            </TableHead>
            <TableHead className="h-12 text-left text-sm font-bold capitalize text-[#272833]">
              Image
            </TableHead>
            <TableHead className="h-12 text-left text-sm font-bold capitalize text-[#272833]">
              Employee Name
            </TableHead>
            <TableHead className="h-12 text-left text-sm font-bold capitalize text-[#272833]">Days</TableHead>
            <TableHead className="h-12 pr-4 text-left text-sm font-bold capitalize text-[#272833]">Action</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id} className="border-b border-[#EBEEF2] last:border-0 hover:bg-[#F9FAFB]">
              <TableCell className="pl-4 align-middle">
                <div className="flex justify-center">
                  <input
                    type="checkbox"
                    className="size-4 cursor-pointer rounded-sm border border-[#074473] accent-[#074473]"
                    checked={!!selected[`${selectionKey}-${row.id}`]}
                    onChange={(e) => onToggleRow(row.id, e.target.checked)}
                    aria-label={`Select ${row.employeeName}`}
                  />
                </div>
              </TableCell>
              <TableCell className="align-middle">
                <Image
                  className="size-11 rounded-full bg-[#E6ECF1] object-cover"
                  alt=""
                  src={avatarImage}
                  width={44}
                  height={44}
                />
              </TableCell>
              <TableCell className="align-middle">
                <span className="text-[13px] font-medium text-[#272833]">{row.employeeName}</span>
              </TableCell>
              <TableCell className="align-middle">
                <span className="text-[13px] font-medium tabular-nums text-[#16151C]">{row.days}</span>
              </TableCell>
              <TableCell className="pr-4 align-middle">
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="size-8 text-[#858C94] hover:bg-[#F4F5FA]"
                  aria-label="Actions"
                >
                  <MoreVertical className="size-4" aria-hidden />
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}