"use client";

import * as React from "react";
import {
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";

import {
  DataTablePagination,
  DataTableShell,
  useServerPagination,
  type ServerPaginationMeta,
} from "@/app/dashboard/_components/data-table";
import { useMasterListFilters } from "@/hooks/use-master-list-filters";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

import { bankHolidayColumns } from "./columns";
import {
  BANK_HOLIDAY_SOURCE_OPTIONS,
  type BankHolidayFilters,
  type BankHolidayRow,
} from "./schema";

type Props = {
  data: BankHolidayRow[];
  initialFilters: BankHolidayFilters;
  pagination: ServerPaginationMeta;
};

export function BankHolidaysTable({
  data,
  initialFilters,
  pagination: serverPagination,
}: Props) {
  const { filters, setFilter, resetPage } = useMasterListFilters(initialFilters, [
    "holiday_date",
    "name",
    "source",
  ] as const);
  const [toolbarSource, setToolbarSource] = React.useState(filters.source);
  const { pagination, onPaginationChange, totalCount } =
    useServerPagination(serverPagination);

  const applyToolbarSearch = () => {
    setFilter("source", toolbarSource);
    resetPage();
  };

  const table = useReactTable({
    data,
    columns: bankHolidayColumns,
    state: { pagination },
    onPaginationChange,
    manualPagination: true,
    pageCount: serverPagination.pageCount,
    rowCount: totalCount,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => String(row.id),
  });

  const updateFilter = <K extends keyof BankHolidayFilters>(key: K, value: BankHolidayFilters[K]) => {
    setFilter(key, value);
    resetPage();
  };

  return (
    <div className="space-y-3">
      <div className="flex flex-wrap items-end gap-3 rounded-lg border bg-muted/20 p-3">
        <div className="grid gap-1.5">
          <Label htmlFor="bh-date">Date</Label>
          <Input
            id="bh-date"
            type="date"
            value={filters.holiday_date}
            onChange={(e) => updateFilter("holiday_date", e.target.value)}
            className="h-9 w-[160px]"
          />
        </div>
        <div className="grid gap-1.5">
          <Label htmlFor="bh-name">Name</Label>
          <Input
            id="bh-name"
            value={filters.name}
            onChange={(e) => updateFilter("name", e.target.value)}
            placeholder="Holiday name"
            className="h-9 w-[200px]"
          />
        </div>
        <div className="grid gap-1.5">
          <Label>Source</Label>
          <Select value={toolbarSource} onValueChange={setToolbarSource}>
            <SelectTrigger className="h-9 w-[160px]">
              <SelectValue placeholder="Source" />
            </SelectTrigger>
            <SelectContent>
              {BANK_HOLIDAY_SOURCE_OPTIONS.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <Button type="button" size="sm" onClick={applyToolbarSearch}>
          Apply
        </Button>
      </div>

      <DataTableShell
        table={table}
        columnCount={bankHolidayColumns.length}
        emptyMessage="No bank holidays found."
      />
      <DataTablePagination
        table={table}
        totalRows={totalCount}
        itemNoun="holiday"
        itemNounPlural="holidays"
      />
    </div>
  );
}