"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  SortingState,
  useReactTable,
} from "@tanstack/react-table";
import { CalendarDays, ChevronDown, Filter, Search } from "lucide-react";
import { useMemo, useState } from "react";

export type EmployeeAttendanceLogRow = {
  id: string;
  date: string;
  day: string;
  punchIn: string;
  punchOut: string;
  production: string;
  breakTime: string;
  overtime: string;
  status: "on-time" | "late" | "absent";
};

const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] as const;

function buildStaticRows(): EmployeeAttendanceLogRow[] {
  const rows: EmployeeAttendanceLogRow[] = [];
  const statuses: EmployeeAttendanceLogRow["status"][] = ["on-time", "on-time", "late", "on-time", "absent", "on-time"];
  for (let i = 0; i < 18; i++) {
    const d = 15 - Math.floor(i / 2);
    const month = i < 10 ? "Apr" : "Mar";
    const dayName = DAYS[i % 7]!;
    const st = statuses[i % statuses.length]!;
    rows.push({
      id: String(i + 1),
      date: `${month} ${d}, 2026`,
      day: dayName,
      punchIn: st === "absent" ? "—" : st === "late" ? "10:18 AM" : "09:12 AM",
      punchOut: st === "absent" ? "—" : "06:05 PM",
      production: st === "absent" ? "—" : "08 hrs 40 min",
      breakTime: st === "absent" ? "—" : "1 hrs",
      overtime: i % 5 === 0 ? "30 min" : "0",
      status: st,
    });
  }
  return rows;
}

const STATIC_ROWS = buildStaticRows();

function StatusPill({ status }: { status: EmployeeAttendanceLogRow["status"] }) {
  if (status === "absent") {
    return (
      <span className="inline-flex rounded border border-[#D0D5DD] bg-[#F9FAFB] px-2 py-0.5 text-xs font-medium text-[#475467]">
        Absent
      </span>
    );
  }
  if (status === "late") {
    return (
      <span className="inline-flex items-center gap-1 rounded border border-[#F04438] px-2 py-0.5 text-xs font-medium text-[#F04438]">
        Late
        <ChevronDown className="size-3 opacity-80" aria-hidden />
      </span>
    );
  }
  return (
    <span className="inline-flex items-center gap-1 rounded border border-[#039855] px-2 py-0.5 text-xs font-medium text-[#039855]">
      On Time
      <ChevronDown className="size-3 opacity-80" aria-hidden />
    </span>
  );
}

const columns: ColumnDef<EmployeeAttendanceLogRow>[] = [
  {
    accessorKey: "id",
    header: () => <span className="capitalize">#</span>,
    cell: ({ row }) => (
      <span className="text-[13px] font-medium text-[#272833]">{row.original.id}</span>
    ),
    size: 48,
  },
  {
    accessorKey: "date",
    header: () => <span className="capitalize">Date</span>,
    cell: ({ row }) => (
      <span className="text-[13px] font-medium text-[#272833]">{row.original.date}</span>
    ),
  },
  {
    accessorKey: "day",
    header: () => <span className="capitalize">Day</span>,
    cell: ({ row }) => (
      <span className="text-[13px] font-medium text-[#16151C]">{row.original.day}</span>
    ),
  },
  {
    accessorKey: "punchIn",
    header: () => <span className="capitalize">Punch In</span>,
    cell: ({ row }) => (
      <span className="text-[13px] font-medium text-[#16151C]">{row.original.punchIn}</span>
    ),
  },
  {
    accessorKey: "punchOut",
    header: () => <span className="capitalize">Punch Out</span>,
    cell: ({ row }) => (
      <span className="text-[13px] font-medium text-[#16151C]">{row.original.punchOut}</span>
    ),
  },
  {
    accessorKey: "production",
    header: () => <span className="capitalize">Production</span>,
    cell: ({ row }) => (
      <span className="text-[13px] font-medium text-[#16151C]">{row.original.production}</span>
    ),
  },
  {
    accessorKey: "breakTime",
    header: () => <span className="capitalize">Break</span>,
    cell: ({ row }) => (
      <span className="text-[13px] font-medium text-[#16151C]">{row.original.breakTime}</span>
    ),
  },
  {
    accessorKey: "overtime",
    header: () => <span className="capitalize">Overtime</span>,
    cell: ({ row }) => (
      <span className="text-[13px] font-medium text-[#16151C]">{row.original.overtime}</span>
    ),
  },
  {
    accessorKey: "status",
    header: () => <span className="capitalize">Status</span>,
    cell: ({ row }) => <StatusPill status={row.original.status} />,
  },
];

function SummaryCard({
  label,
  value,
  sub,
}: {
  label: string;
  value: string;
  sub?: string;
}) {
  return (
    <div className="rounded-lg border border-[#EBEEF2] bg-[#F8F9FC] px-4 py-3">
      <p className="text-xs font-medium text-[#545D69]">{label}</p>
      <p className="mt-1 text-lg font-bold text-[#1C1D22]">{value}</p>
      {sub ? <p className="text-xs text-[#858C94]">{sub}</p> : null}
    </div>
  );
}

const BlockViewEmployeeAttendance = () => {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [globalFilter, setGlobalFilter] = useState("");

  const stats = useMemo(() => {
    const present = STATIC_ROWS.filter((r) => r.status === "on-time").length;
    const late = STATIC_ROWS.filter((r) => r.status === "late").length;
    const absent = STATIC_ROWS.filter((r) => r.status === "absent").length;
    return { present, late, absent, total: STATIC_ROWS.length };
  }, []);

  const table = useReactTable({
    data: STATIC_ROWS,
    columns,
    state: { sorting, globalFilter },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: { pagination: { pageSize: 8 } },
    getRowId: (row) => row.id,
    globalFilterFn: (row, _id, filter) => {
      const q = String(filter).toLowerCase().trim();
      if (!q) return true;
      const r = row.original;
      return (
        r.date.toLowerCase().includes(q) ||
        r.day.toLowerCase().includes(q) ||
        r.punchIn.toLowerCase().includes(q) ||
        r.punchOut.toLowerCase().includes(q) ||
        r.status.toLowerCase().includes(q)
      );
    },
  });

  const pageCount = Math.max(1, table.getPageCount());
  const pageIndex = table.getState().pagination.pageIndex;

  return (
    <Card className="border-gray-100 shadow-sm">
      <CardContent className="space-y-6 p-4 sm:p-6">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <h2 className="text-lg font-bold capitalize text-[#383E49]">Attendance</h2>
          <div className="flex flex-wrap items-center gap-3">
            <div className="flex h-9 min-w-[160px] max-w-full flex-1 items-center gap-2 rounded border border-[#CFD3D4] px-2 sm:max-w-[220px]">
              <Search className="size-4 shrink-0 text-[#ABAFB1]" aria-hidden />
              <Input
                placeholder="Search"
                value={globalFilter}
                onChange={(e) => setGlobalFilter(e.target.value)}
                className="h-8 border-0 bg-transparent p-0 text-xs text-[#383E49] placeholder:text-[#ABAFB1] focus-visible:ring-0"
                aria-label="Search attendance"
              />
            </div>
            <Button
              type="button"
              variant="outline"
              className="h-9 gap-1 rounded-md border-[#E0E0E0] bg-[#FCFCFC] px-4 text-sm font-medium text-[#4F4F4F]"
              disabled
            >
              <Filter className="size-4" aria-hidden />
              Filters
            </Button>
            <Button
              type="button"
              variant="outline"
              className="h-9 gap-1 rounded-md border-[#E0E0E0] bg-[#FCFCFC] px-4 text-sm font-medium text-[#858C94]"
              disabled
            >
              <CalendarDays className="size-4" aria-hidden />
              filters
            </Button>
          </div>
        </div>

        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <SummaryCard label="Present days" value={String(stats.present)} sub="this period" />
          <SummaryCard label="Late" value={String(stats.late)} />
          <SummaryCard label="Absent" value={String(stats.absent)} />
          <SummaryCard label="Logged days" value={String(stats.total)} />
        </div>

        <div className="overflow-hidden rounded-md border border-[#EBEEF2] bg-white">
          <Table>
            <TableHeader>
              {table.getHeaderGroups().map((headerGroup) => (
                <TableRow key={headerGroup.id} className="border-0 hover:bg-transparent">
                  {headerGroup.headers.map((header) => (
                    <TableHead
                      key={header.id}
                      className={cn(
                        "h-12 bg-white px-3 py-3 text-left text-sm font-bold capitalize text-[#272833]",
                        "first:pl-4 last:pr-4",
                      )}
                    >
                      {header.isPlaceholder
                        ? null
                        : flexRender(header.column.columnDef.header, header.getContext())}
                    </TableHead>
                  ))}
                </TableRow>
              ))}
            </TableHeader>
            <TableBody>
              {table.getRowModel().rows.length ? (
                table.getRowModel().rows.map((row) => (
                  <TableRow
                    key={row.id}
                    className="border-b border-[#EBEEF2] last:border-0 hover:bg-[#F9FAFB]"
                  >
                    {row.getVisibleCells().map((cell) => (
                      <TableCell key={cell.id} className="px-3 py-3 align-middle first:pl-4 last:pr-4">
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </TableCell>
                    ))}
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={columns.length} className="h-24 text-center text-[#8B8D97]">
                    No attendance matches your search.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>

        <div className="flex flex-col items-stretch justify-center gap-4 sm:flex-row sm:items-center sm:justify-between">
          <Button
            type="button"
            variant="outline"
            className="h-[34px] rounded-md border border-[#E0E0E0] bg-[#FCFCFC] px-6 text-xs font-medium text-[#4F4F4F]"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            Previous
          </Button>
          <p className="text-center text-xs font-medium capitalize text-[#858C94] opacity-70">
            page {pageIndex + 1} of {pageCount}
          </p>
          <Button
            type="button"
            variant="outline"
            className="h-[34px] rounded-md border border-[#E0E0E0] bg-[#FCFCFC] px-6 text-xs font-medium text-[#4F4F4F]"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            Next
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};

export default BlockViewEmployeeAttendance;