"use client";

import { Plus, Trash2 } from "lucide-react";
import { Controller, type Control, type UseFormRegister } from "react-hook-form";
import { useFieldArray } from "react-hook-form";

import { DatePicker } from "@/components/date-range-picker";
import { formDatePickerClass } from "@/components/form/common/form-layout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

import type { AccumulatorFormValues } from "./schema";

type Props = {
  control: Control<AccumulatorFormValues>;
  register: UseFormRegister<AccumulatorFormValues>;
};

export function AccumulatorChildTable({ control, register }: Props) {
  const { fields, append, remove } = useFieldArray({
    control,
    name: "children",
  });

  return (
    <div className="space-y-3">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <h4 className="font-semibold text-sm">Child records</h4>
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="gap-1.5"
          onClick={() => append({ srNo: "", date: "", quantityPerPeriod: "" })}
        >
          <Plus className="size-3.5" />
          Add row
        </Button>
      </div>

      <div className="overflow-x-auto rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-28 text-xs">Sr no</TableHead>
              <TableHead className="text-xs">Date</TableHead>
              <TableHead className="text-xs">Quantity per period</TableHead>
              <TableHead className="w-16" />
            </TableRow>
          </TableHeader>
          <TableBody>
            {fields.length === 0 ? (
              <TableRow>
                <TableCell colSpan={4} className="text-muted-foreground text-sm">
                  No child rows. Use Add row to create schedule entries.
                </TableCell>
              </TableRow>
            ) : (
              fields.map((field, index) => (
                <TableRow key={field.id}>
                  <TableCell>
                    <Input
                      className="h-8 text-xs"
                      placeholder="Sr no"
                      {...register(`children.${index}.srNo`)}
                    />
                  </TableCell>
                  <TableCell>
                    <Controller
                      control={control}
                      name={`children.${index}.date`}
                      render={({ field: dateField }) => (
                        <DatePicker
                          value={dateField.value ?? ""}
                          onChange={dateField.onChange}
                          className={cn(formDatePickerClass, "h-8 text-xs")}
                        />
                      )}
                    />
                  </TableCell>
                  <TableCell>
                    <Input
                      className="h-8 text-xs"
                      placeholder="Quantity"
                      {...register(`children.${index}.quantityPerPeriod`)}
                    />
                  </TableCell>
                  <TableCell>
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon-sm"
                      className="text-destructive"
                      onClick={() => remove(index)}
                      aria-label="Remove row"
                    >
                      <Trash2 className="size-3.5" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}