"use client";

import { useState } from "react";
import { SelectedSlot, SelectedStore } from "./AppointmentPage";
import { Sun, Sunrise, Sunset } from "lucide-react";
import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";

interface Props {
  selectedStore: SelectedStore;
  selectedSlot: any
  onSelect: (slot: SelectedSlot) => void;
  onEditStore: () => void;
}

const timeSlots = [
  {
    slot: "Morning",
    key: "morning",
    icon: <Sunrise size={20} />,
    times: ["10:00 AM", "11:00 AM", "12:00 PM"],
  },
  {
    slot: "Afternoon",
    key: "afternoon",
    icon: <Sun size={20} />,
    times: ["01:00 PM", "02:00 PM", "03:00 PM"],
  },
  {
    slot: "Evening",
    key: "evening",
    icon: <Sunset size={20} />,
    times: ["04:00 PM", "05:00 PM", "06:00 PM"],
  },
];

export default function StepBookSlot({
  selectedStore,
  selectedSlot,
  onSelect,
  onEditStore,
}: Props) {
  const [date, setDate] = useState<Date | null>(selectedSlot?.date ? new Date(selectedSlot.date) : null);
  const [selectedPeriod, setSelectedPeriod] = useState<any>(timeSlots.find(
    (p) => p.key === selectedSlot?.slotPeriod
  ) ?? null);
  const [selectedTime, setSelectedTime] = useState(selectedSlot?.timeSlot ?? "");

  const handleConfirm = () => {
    if (!date || !selectedPeriod || !selectedTime) return;

    const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;

    onSelect({
      date: formattedDate,
      slotPeriod: selectedPeriod.key,
      timeSlot: selectedTime,
    });
  };

  return (
    <div className="bg-white border border-[rgba(var(--primary),0.3)] rounded-xl p-6 md:p-8 lg:space-y-8 grid lg:grid-cols-2 gap-8">
      {/* CALENDAR ALWAYS OPEN */}
      <div className="flex flex-col gap-3">
        <p className="text-sm md:text-lg font-semibold text-[rgba(var(--primary),1)]">Select Date</p>
        <Calendar
          minDate={new Date()}
          onChange={(newDate: any) => {
            setDate(newDate);
            setSelectedPeriod(null);
            setSelectedTime("");
          }}
          value={date}
          className="rounded-lg border shadow-sm p-3"
        />
      </div>

      {/* TIME PERIOD + SLOTS */}
      {date && <div className="flex flex-col gap-6">
        {/* PERIOD SELECTION */}
        <div className="flex flex-col gap-3">
          <p className="text-sm font-medium text-gray-700">Select Time Period</p>
          <div className="grid grid-cols-3 gap-3">
            {timeSlots.map((p) => (
              <button
                key={p.key}
                onClick={() => {
                  setSelectedPeriod(p);
                  setSelectedTime("");
                }}
                className={`border rounded-lg p-4 flex flex-col items-center gap-2 transition-all duration-200 ${
                  selectedPeriod?.key === p.key
                    ? "border-[rgba(var(--primary),1)] text-[rgba(var(--primary),1)]"
                    : "hover:border-[rgba(var(--primary),1)] hover:bg-[rgba(var(--primary),0.20)] text-[rgba(var(--primary),1)]"
                }`}
              >
                {p.icon}
                <span className="text-sm font-medium">{p.slot}</span>
              </button>
            ))}
          </div>
        </div>

        {/* TIME SLOTS */}
        {selectedPeriod && (
          <div className="flex flex-col gap-3">
            <p className="text-sm font-medium text-gray-700">Select Time Slot</p>
            <div className="grid grid-cols-3 gap-3">
              {selectedPeriod.times.map((t: string) => (
                <button
                  key={t}
                  onClick={() => setSelectedTime(t)}
                  className={`border rounded-lg p-3 text-sm font-medium transition-all duration-200 ${
                    selectedTime === t
                      ? "bg-[rgba(var(--primary),1)] text-white border-[rgba(var(--primary),1)]"
                      : "hover:border-[rgba(var(--primary),0.20)] hover:bg-[rgba(var(--primary),1)] hover:text-white text-gray-700"
                  }`}
                >
                  {t}
                </button>
              ))}
            </div>
          </div>
        )}

        {/* CONFIRM BUTTON ALWAYS VISIBLE */}
        <button
          onClick={handleConfirm}
          disabled={!selectedTime}
          className={`w-full py-3 rounded-lg font-semibold transition-all duration-200 ${
            selectedTime
              ? "bg-[rgba(var(--primary),1)] text-white hover:bg-[rgba(var(--primary),1)]"
              : "bg-gray-300 text-gray-500 cursor-not-allowed"
          }`}
        >
          Confirm
        </button>
      </div>}
    </div>
  );
}
