"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;
  onSelect: (slot: SelectedSlot) => void;
  onEditStore: () => void;
}

const timeSlots = [
  {
    slot: "Morning",
    key: "morning",
    icon: <Sunrise size={20} />,
    times: ["10:00 AM", "11:00 AM"],
  },
  {
    slot: "Afternoon",
    key: "afternoon",
    icon: <Sun size={20} />,
    times: ["1:00 PM", "3:00 PM"],
  },
  {
    slot: "Evening",
    key: "evening",
    icon: <Sunset size={20} />,
    times: ["5:00 PM", "6:00 PM", "7:00 PM"],
  },
];

export default function StepBookSlot({
  selectedStore,
  onSelect,
  onEditStore,
}: Props) {
  const [date, setDate] = useState<Date | null>(null);
  const [selectedPeriod, setSelectedPeriod] = useState<any>(null);
  const [selectedTime, setSelectedTime] = useState("");

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

    const formattedDate = date.toISOString().split("T")[0]; // YYYY-MM-DD

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

  return (
    <div className="bg-white border rounded-xl p-8 space-y-8 shadow-sm max-w-4xl mx-auto grid grid-cols-2 gap-8">
      {/* CALENDAR ALWAYS OPEN */}
      <div className="flex flex-col gap-3">
        <p className="text-sm font-medium text-gray-700">Select Date</p>
        <Calendar
          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-red-500 text-red-500"
                    : "hover:bg-orange-50 text-gray-700"
                }`}
              >
                {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-red-500 text-white border-red-500"
                      : "hover:bg-red-500 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-red-500 text-white hover:bg-red-600"
              : "bg-gray-300 text-gray-500 cursor-not-allowed"
          }`}
        >
          Confirm
        </button>
      </div>}
    </div>
  );
}