'use client';
import React, { useState } from 'react';
import { ChevronDown, ChevronUp, Plus, Trash2 } from 'lucide-react';
import { Switch } from '@/components/ui/switch';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import { useRouter } from 'next/navigation';
import apis from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';

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 EditTimings = () => {
  const router = useRouter();
  const { Toast, userInfo } = useGlobalContext();
  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]
    );
  };

  const toggleDayEnabled = (day: string): void => {
    setDaySettings((prev: DaySettingsState) => ({
      ...prev,
      [day]: {
        ...prev[day],
        enabled: !prev[day].enabled
      }
    }));
  };

  const addTimeSlot = (day: string): void => {
    setDaySettings((prev: DaySettingsState) => ({
      ...prev,
      [day]: {
        ...prev[day],
        slots: [...prev[day].slots, { startTime: '09:00', endTime: '22:00' }]
      }
    }));
  };

  const removeTimeSlot = (day: string, index: number): void => {
    setDaySettings((prev: DaySettingsState) => ({
      ...prev,
      [day]: {
        ...prev[day],
        slots: prev[day].slots.filter((_, i) => i !== index)
      }
    }));
  };

  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 transformDaySettings = (daySettings: any) => {
    const dayIds: { [key: string]: string } = {
      Monday: "1",
      Tuesday: "2",
      Wednesday: "3",
      Thursday: "4",
      Friday: "5",
      Saturday: "6",
      Sunday: "7",
    };
  
    const formatDateTime = (time: string) => `2024-01-01T${time}:00.000`;
  
    const workingDays = Object.entries(daySettings).map(([day, data]: any) => {
      const timing = data.enabled
        ? data.slots.map((slot: any) => ({
            start_time: formatDateTime(slot.startTime),
            end_time: formatDateTime(slot.endTime),
          }))
        : [];
  
      return {
        day,
        day_id: dayIds[day],
        is_24_hrs: false,
        timing,
      };
    });
  
    return { working_day: workingDays };
  };

  const handleSave = async () => {
    const formattedData = transformDaySettings(daySettings);
    try {
      const apiRes = await apis.restaurant.update(userInfo?.restaurant_id?._id, formattedData);
      // console.log("apiRes>>>>>>>", apiRes);
      if (apiRes) {
        Toast.success("Profile updated successfully");
        // setUserInfo(apiRes.data);
      } else {
        Toast.error(apiRes?.message);
      }
    } catch (error) {
      Toast.error(error);
    }
    // router.push(`/auth/complete-profile`)
    // Handle save logic here
  };

  return (
    <div className="mx-auto max-w-2xl space-y-4 ">
      <span className="text-[#000] font-[400] text-[16px]">Set your delivery hours so customers know when
        they can order.</span>
      {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>
            <Switch
              checked={daySettings[day].enabled}
              onCheckedChange={() => toggleDayEnabled(day)}
            />
          </div>

          {expandedDays.includes(day) && daySettings[day].enabled && (
            <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-[40vh]'>
                      {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-[40vh]'>
                      {timeSlots.map((time) => (
                        <SelectItem key={time} value={time}>
                          {time}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>

                  {daySettings[day].slots.length > 1 && (
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => removeTimeSlot(day, index)}
                    >
                      <Trash2 className="h-4 w-4 text-red-500" />
                    </Button>
                  )}
                </div>
              ))}

              <Button
                variant="ghost"
                className="flex items-center gap-2 text-blue-500"
                onClick={() => addTimeSlot(day)}
              >
                <Plus className="h-4 w-4" />
                Add time slots
              </Button>

              {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-yellow-500"
        onClick={handleSave}
      >
        Save
      </Button>
    </div>
  );
};

// export default WeeklyTimeSlots;

export default EditTimings;