'use client';

import { useEffect, useMemo, useState } from 'react';
import { PopoverTrigger } from '@radix-ui/react-popover';
import { format } from 'date-fns';
import { CalendarIcon } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent } from '@/components/ui/popover';
import { ScrollArea } from '@/components/ui/scroll-area';

export default function CustomDateTimePicker({
  value,
  onChange,
  timeStart = '08:00',
  timeEnd = '18:00',
  disabled = false,
}: {
  value: Date | undefined;
  onChange: (date: Date) => void;
  timeStart?: string;
  timeEnd?: string;
  disabled?: boolean;
}) {
  const today = new Date();
  const { t } = useTranslation();

  // Internal UI state (calendar selection + highlighted time button)
  const [date, setDate] = useState<Date | undefined>(value);
  const [time, setTime] = useState<string | undefined>(
    value ? format(value, 'HH:mm') : undefined,
  );

  // ✅ Keep internal state synced with external RHF value
  useEffect(() => {
    if (value) {
      setDate(value);
      setTime(format(value, 'HH:mm'));
    } else {
      setDate(undefined);
      setTime(undefined);
    }
  }, [value]);

  // 🕐 generate time slots between timeStart and timeEnd (every 30 min)
  const timeSlots = useMemo(() => {
    const slots: { time: string; available: boolean }[] = [];
    const [startHour, startMin] = timeStart.split(':').map(Number);
    const [endHour, endMin] = timeEnd.split(':').map(Number);

    const start = new Date();
    start.setHours(startHour, startMin, 0, 0);

    const end = new Date();
    end.setHours(endHour, endMin, 0, 0);

    let cursor = new Date(start);
    while (cursor <= end) {
      const formatted = cursor.toTimeString().slice(0, 5);
      slots.push({ time: formatted, available: true });
      cursor = new Date(cursor.getTime() + 30 * 60000);
    }

    return slots;
  }, [timeStart, timeEnd]);

  // 🧠 filter available slots depending on selected date and current time
  const filteredSlots = useMemo(() => {
    if (!date) return timeSlots;

    const isToday = date.toDateString() === today.toDateString();
    const now = new Date();
    const cutoff = new Date(now.getTime() + 2 * 60 * 60 * 1000);

    return timeSlots.filter(({ time }) => {
      const [h, m] = time.split(':').map(Number);

      // Compare slot time on the selected date (not "now" date)
      const slotDate = new Date(date);
      slotDate.setHours(h, m, 0, 0);

      return isToday ? slotDate >= cutoff : true;
    });
  }, [date, timeSlots, today]);

  return (
    <Popover>
      <PopoverTrigger asChild>
        <div className="relative w-full">
          <Button
            type="button"
            variant="outline"
            className="w-full justify-start"
            disabled={disabled}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />

            {value
              ? `${format(value, 'PPP')} - ${format(value, 'HH:mm')}`
              : t('requests.placeholders.data&time')}
          </Button>
        </div>
      </PopoverTrigger>

      <PopoverContent className="w-auto p-0" align="start">
        <div className="flex max-sm:flex-col" hidden={disabled}>
          <Calendar
            mode="single"
            selected={date}
            onSelect={(newDate) => {
              if (newDate) {
                setDate(newDate);
                setTime(undefined); // force user to pick time again
              }
            }}
            className="p-2 sm:pe-5"
            disabled={[{ before: today }]}
          />

          <div className="relative w-full max-sm:h-48 sm:w-40">
            <div className="absolute inset-0 py-4 max-sm:border-t">
              <ScrollArea className="h-full sm:border-s">
                <div className="space-y-3">
                  <div className="flex h-5 items-center px-5">
                    <p className="text-sm font-medium">
                      {date ? format(date, 'EEEE, d') : 'Pick a date'}
                    </p>
                  </div>

                  <div className="grid gap-1.5 px-5 max-sm:grid-cols-2">
                    {filteredSlots.map(({ time: timeSlot }) => (
                      <Button
                        key={timeSlot}
                        type="button"
                        variant={time === timeSlot ? 'primary' : 'outline'}
                        size="sm"
                        className="w-full"
                        onClick={() => {
                          if (!date) return;

                          setTime(timeSlot);

                          const [h, m] = timeSlot.split(':');
                          const d = new Date(date);
                          d.setHours(+h);
                          d.setMinutes(+m);
                          d.setSeconds(0);
                          d.setMilliseconds(0);
                          onChange(d);
                        }}
                      >
                        {timeSlot}
                      </Button>
                    ))}

                    {filteredSlots.length === 0 && (
                      <p className="text-xs text-muted-foreground text-center">
                        {t('requests.messages.no_time_today')}
                      </p>
                    )}
                  </div>
                </div>
              </ScrollArea>
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}