'use client';
import React, { useEffect, useState } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import AuthLayout from '@/components/layout/layout';
import authBanner from '@/assets/images/AuthImages/timing.png';
import { useRouter, useSearchParams } from 'next/navigation';
import apis from '@/utils/apis';

interface TimeSlotUpdate {
  day: string;
  index: number;
  field: 'startTime' | 'endTime';
  value: string;
}
interface TimeSlot {
  startTime: string;
  endTime: string;
}

interface DaySettings {
  enabled: boolean;
  slots: TimeSlot[];
}

interface DaySettingsState {
  [key: string]: DaySettings;
}

const generateTimeSlots = () => {
  const slots = [];
  for (let hour = 0; hour < 24; hour++) {
    for (let minute = 0; minute < 60; minute += 30) {
      const time = `${hour.toString().padStart(2, '0')}:${minute
        .toString()
        .padStart(2, '0')}`;
      slots.push(time);
    }
  }
  return slots;
};

const WeeklyTimeSlots = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const category = searchParams.get("category");
  const timeSlots = generateTimeSlots();
  const daysOfWeek = [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday'
  ];

  const [expandedDays, setExpandedDays] = useState(['Monday']);
  const [daySettings, setDaySettings] = useState<DaySettingsState>(
    daysOfWeek.reduce(
      (acc, day) => ({
        ...acc,
        [day]: {
          enabled: day === 'Monday',
          slots: [{ startTime: '09:00', endTime: '22:00' }]
        }
      }),
      {} as DaySettingsState
    )
  );
  const [copyToAll, setCopyToAll] = useState(false);

  const toggleDay = (day: string): void => {
    setExpandedDays((prev: string[]) =>
      prev.includes(day)
        ? prev.filter((d: string) => d !== day)
        : [...prev, day]
    );
  };

  useEffect(() => {
    let token: any = sessionStorage.getItem('token')
    if (!token) {
      router.replace(`/auth/login`)
    }
  }, [])

  const updateTimeSlot = ({
    day,
    index,
    field,
    value
  }: TimeSlotUpdate): void => {
    setDaySettings((prev: DaySettingsState) => ({
      ...prev,
      [day]: {
        ...prev[day],
        slots: prev[day].slots.map((slot: TimeSlot, i: number) =>
          i === index ? { ...slot, [field]: value } : slot
        )
      }
    }));
  };

  const handleCopyToAllChange = (checked: boolean): void => {
    setCopyToAll(checked);
    if (checked) {
      const mondaySettings: DaySettings = daySettings['Monday'];
      setDaySettings((prev: DaySettingsState) => {
        const newSettings: DaySettingsState = { ...prev };
        daysOfWeek.forEach((day: string) => {
          if (day !== 'Monday') {
            newSettings[day] = {
              ...mondaySettings,
              enabled: prev[day].enabled
            };
          }
        });
        return newSettings;
      });
    }
  };



  const handleSave = async () => {
    let foodId: any = sessionStorage.getItem('foodId')
    const daysOfWeekWithIds = [
      { day: "Monday", day_id: "1" },
      { day: "Tuesday", day_id: "2" },
      { day: "Wednesday", day_id: "3" },
      { day: "Thursday", day_id: "4" },
      { day: "Friday", day_id: "5" },
      { day: "Saturday", day_id: "6" },
      { day: "Sunday", day_id: "7" },
    ];

    const formattedData = daysOfWeekWithIds.map(({ day, day_id }) => ({
      day,
      day_id,
      start_time: daySettings[day].slots[0].startTime,
      end_time: daySettings[day].slots[0].endTime,
    }));
    let payload = {
      item_timing: formattedData,
    }
    try {
      const apiRes = await apis.Food.add(payload, foodId);
      if (apiRes?.data) {
        sessionStorage.setItem('food', 'complete')
        router.replace(`/auth/restaurant/itemList?category=${category}`);
      }
    } catch (error) { }

  };

  return (
    <div className="mx-auto max-w-2xl space-y-4">
      {daysOfWeek.map((day) => (
        <div key={day} className="rounded-lg border">
          <div
            className="flex cursor-pointer items-center justify-between p-4"
            onClick={() => toggleDay(day)}
          >
            <div className="flex items-center gap-2">
              {expandedDays.includes(day) ? (
                <ChevronUp className="h-5 w-5" />
              ) : (
                <ChevronDown className="h-5 w-5" />
              )}
              <span className="font-medium">{day}</span>
            </div>
          </div>

          {expandedDays.includes(day) && (
            <div className="space-y-4 border-t p-4">
              {daySettings[day].slots.map((slot, index) => (
                <div key={index} className="flex items-center gap-4">
                  <Select
                    value={slot.startTime}
                    onValueChange={(value) =>
                      updateTimeSlot({ day, index, field: 'startTime', value })
                    }
                  >
                    <SelectTrigger className="w-32">
                      <SelectValue placeholder="Start Time" />
                    </SelectTrigger>
                    <SelectContent className='h-[30vh]'>
                      {timeSlots.map((time) => (
                        <SelectItem key={time} value={time}>
                          {time}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>

                  <Select
                    value={slot.endTime}
                    onValueChange={(value) =>
                      updateTimeSlot({ day, index, field: 'endTime', value })
                    }
                  >
                    <SelectTrigger className="w-32">
                      <SelectValue placeholder="End Time" />
                    </SelectTrigger>
                    <SelectContent className='h-[30vh]'>
                      {timeSlots.map((time) => (
                        <SelectItem key={time} value={time}>
                          {time}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>


                </div>
              ))}

              {day === 'Monday' && (
                <div className="flex items-center gap-2 pt-4">
                  <Checkbox
                    id="copyAll"
                    checked={copyToAll}
                    onCheckedChange={handleCopyToAllChange}
                  />
                  <label htmlFor="copyAll" className="text-sm text-gray-600">
                    Copy above timings for all days
                  </label>
                </div>
              )}
            </div>
          )}
        </div>
      ))}

      <Button
        className="w-full bg-yellow-400 text-black hover:bg-[var(--primary-brand)]"
        onClick={handleSave}
      >
        Save
      </Button>
    </div>
  );
};

// export default WeeklyTimeSlots;

export default function BankDetails() {
  return (
    <AuthLayout
      title="Item Timings"
      des="Item is available at same time for all days of the week."
      image={authBanner.src}
    >
      <WeeklyTimeSlots />
    </AuthLayout>
  );
}