"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Calendar } from "@/components/ui/calendar"
import { Button } from "@/components/ui/button"
import {
  BookingSidebar,
  BookingCardFooter,
  BookingCardShell,
} from "@/components/booking-sidebar"
import { clientNavigate } from "@/lib/invite-link"
import { AGENT } from "@/lib/agent-brand"
import { ChevronRight } from "lucide-react"

const TIME_SLOTS = [
  "9:00 AM",
  "9:30 AM",
  "10:00 AM",
  "10:30 AM",
  "11:00 AM",
  "11:30 AM",
  "1:00 PM",
  "1:30 PM",
  "2:00 PM",
  "2:30 PM",
  "3:00 PM",
  "3:30 PM",
  "4:00 PM",
  "4:30 PM",
]

function formatSelectedDate(date: Date) {
  return date.toLocaleDateString("en-US", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  })
}

export default function SelectDateTime() {
  const router = useRouter()
  const [selectedDate, setSelectedDate] = useState<Date | undefined>()
  const [selectedTime, setSelectedTime] = useState<string | null>(null)

  const handleContinue = () => {
    if (!selectedDate || !selectedTime) return

    sessionStorage.setItem("booking_date", formatSelectedDate(selectedDate))
    sessionStorage.setItem("booking_time", selectedTime)
    clientNavigate("/enter-details", router)
  }

  const disabledDays = { before: new Date() }

  return (
    <BookingCardShell>
      <div className="flex flex-col md:flex-row">
        <BookingSidebar />

        <div className="md:w-[58%] bg-white flex flex-col min-h-[520px] border-l border-[#e8eaed]">
          <div className="flex-1 px-9 py-9">
            <h2 className="text-[20px] font-bold text-[#202124] mb-1">Select a Date &amp; Time</h2>
            <p className="text-[13px] text-[#5f6368] mb-7">
              Choose a time that works best for your meeting with {AGENT.name}.
            </p>

            <div className="flex flex-col lg:flex-row gap-7">
              <div className="flex-shrink-0 w-full lg:w-auto">
                <Calendar
                  mode="single"
                  selected={selectedDate}
                  onSelect={(date) => {
                    setSelectedDate(date)
                    setSelectedTime(null)
                  }}
                  disabled={disabledDays}
                  className="w-full max-w-[320px] mx-auto lg:mx-0 rounded-xl border border-[#dadce0] p-3 bg-white shadow-sm"
                />
              </div>

              <div className="flex-1 min-w-[200px]">
                {selectedDate ? (
                  <>
                    <p className="text-[14px] font-medium text-[#202124] mb-3">
                      {formatSelectedDate(selectedDate)}
                    </p>
                    <div className="grid grid-cols-2 gap-2 max-h-[300px] overflow-y-auto pr-1">
                      {TIME_SLOTS.map((slot) => (
                        <button
                          key={slot}
                          type="button"
                          onClick={() => setSelectedTime(slot)}
                          className={`px-3 py-2.5 text-[13px] rounded-lg border transition-all duration-150 ${
                            selectedTime === slot
                              ? "bg-[#067ab4] text-white border-[#067ab4] shadow-sm"
                              : "bg-white text-[#001489] border-[#dadce0] hover:border-[#067ab4] hover:bg-[#fde8ef]"
                          }`}
                        >
                          {slot}
                        </button>
                      ))}
                    </div>
                  </>
                ) : (
                  <div className="flex items-center justify-center h-full min-h-[220px] text-[13px] text-[#9aa0a6]">
                    Select a date to view available times
                  </div>
                )}
              </div>
            </div>

            <Button
              onClick={handleContinue}
              disabled={!selectedDate || !selectedTime}
              className="w-full mt-7 bg-[#067ab4] hover:bg-[#067ab4] text-white h-11 text-[14px] font-medium rounded-md shadow-sm transition-all duration-200 hover:shadow-md disabled:opacity-50"
            >
              Continue
              <ChevronRight className="w-4 h-4 ml-1" />
            </Button>
          </div>
        </div>
      </div>

      <BookingCardFooter />
    </BookingCardShell>
  )
}