'use client';
import React, { useState } from 'react';
import { Plus, Minus, CircleX } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent } from '../ui/dialog';
import { useForm } from 'react-hook-form';

type FormData = {
  table: string;
  seats: number;
};

type TableEntry = FormData & { id: number };

type Props = {
  capacityCount: number;
  bookingsCount: number;
  tableTypes: TableEntry[];
  setCapacityCount: (value: number) => void;
  setBookingsCount: (value: number) => void;
  setTableTypes: (tables: TableEntry[]) => void;
};

const SeatingandTimingsCounter: React.FC<Props> = ({
  capacityCount,
  bookingsCount,
  tableTypes,
  setCapacityCount,
  setBookingsCount,
  setTableTypes
}) => {
  const [isOpen, setIsOpen] = useState(false);


  const {
    register,
    handleSubmit,
    formState: { errors },
    reset
  } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    const newEntry: TableEntry = {
      table: data.table,
      seats: Number(data.seats),
      id: Date.now()
    };

    setTableTypes([...tableTypes, newEntry]);
    reset();
    setIsOpen(false);
  };

  // Capacity functions
  const incrementCapacity = () => {
    setCapacityCount(capacityCount + 1);
  };

  const decrementCapacity = () => {
    if (capacityCount > 1) {
      setCapacityCount(capacityCount - 1);
    }
  };

  // Booking buffer time functions
  const incrementBookingBuffer = () => {
    if (bookingsCount < 60) {
      setBookingsCount(Math.min(bookingsCount + 5, 60));
    }
  };

  const decrementBookingBuffer = () => {
    if (bookingsCount > 5) {
      setBookingsCount(Math.max(bookingsCount - 5, 5));
    }
  };


  const decrementTable = (id: number) => {
    setTableTypes(
      tableTypes
        .map((t) => {
          if (t.id === id) {
            const newCount = t.seats - 1;
            return newCount > 0 ? { ...t, seats: newCount } : null;
          }
          return t;
        })
        .filter(Boolean) as TableEntry[]
    );
  };

  const incrementTable = (id: number) => {
    setTableTypes(
      tableTypes.map((t) => (t.id === id ? { ...t, seats: t.seats + 1 } : t))
    );
  };

  return (
    <>
      {/* Global Capacity Counter */}
      <div className="mb-2 flex w-full items-center justify-between rounded-lg border p-4 shadow-sm">
        <div className="text-sm font-medium text-gray-900">
          Maximum Capacity Per Time Slot
        </div>

        <div className="flex items-center gap-4 rounded-md border bg-[var(--primary-brand)]/5 px-3 py-1.5">
          <Button
            variant="ghost"
            size="icon"
            onClick={decrementCapacity}
            className="text-[var(--primary-brand)] hover:text-[var(--primary-brand)]/80 hover:bg-[var(--primary-brand)]/10"
          >
            <Minus className="h-4 w-4" />
          </Button>

          <span className="text-base font-semibold">{capacityCount}</span>

          <Button
            variant="ghost"
            size="icon"
            onClick={incrementCapacity}
            className="text-[var(--primary-brand)] hover:text-[var(--primary-brand)]/80 hover:bg-[var(--primary-brand)]/10"
          >
            <Plus className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Buffer Time Between Bookings */}
      <div className="mb-2 flex w-full items-center justify-between rounded-lg border p-4 shadow-sm">
        <div className="text-sm font-medium text-gray-900">
          Buffer Time Between Bookings(in minutes)
        </div>

        <div className="flex items-center gap-4 rounded-md border bg-[var(--primary-brand)]/5 px-3 py-1.5">
          <Button
            variant="ghost"
            size="icon"
            onClick={decrementBookingBuffer}
            className="text-[var(--primary-brand)] hover:text-[var(--primary-brand)]/80 hover:bg-[var(--primary-brand)]/10"
          >
            <Minus className="h-4 w-4" />
          </Button>

          <span className="text-base font-semibold">{bookingsCount}</span>

          <Button
            variant="ghost"
            size="icon"
            onClick={incrementBookingBuffer}
            disabled={bookingsCount >= 60}
            className="text-[var(--primary-brand)] hover:text-[var(--primary-brand)]/80 hover:bg-[var(--primary-brand)]/10"
          >
            <Plus className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Dialog for Adding New Table Type */}
      <Dialog open={isOpen} onOpenChange={() => setIsOpen(false)}>
        <DialogContent className="h-[300px] border-none bg-white">
          <div className="flex w-full flex-row items-center justify-between">
            <span className="text-[16px] font-[600]">Add Table Type</span>
            <CircleX
              className="cursor-pointer"
              onClick={() => setIsOpen(false)}
            />
          </div>

          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
            {/* Table Type Field */}
            <div>
              <label className="block text-sm font-medium text-gray-700">
                Table Type
              </label>
              <input
                type="text"
                placeholder="Enter Table Type e.g 4-Seater, 5-Seater etc."
                {...register('table', {
                  required: 'Table type is required'
                })}
                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500"
              />
              {errors.table && (
                <p className="mt-1 text-sm text-red-500">
                  {errors.table.message}
                </p>
              )}
            </div>

            {/* Count Field */}
            <div>
              <label className="block text-sm font-medium text-gray-700">
                Count
              </label>
              <input
                type="number"
                placeholder="Enter Number of Tables"
                {...register('seats', {
                  required: 'Count is required',
                  min: { value: 1, message: 'Minimum 1 table required' }
                })}
                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500"
              />
              {errors.seats && (
                <p className="mt-1 text-sm text-red-500">
                  {errors.seats.message}
                </p>
              )}
            </div>

            <Button
              type="submit"
              className="h-11 w-full"
              variant={'theme'}
            >
              Save
            </Button>
          </form>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default SeatingandTimingsCounter;