"use client"

import { CheckCircle, Clock, Video, Mail, Globe } from "lucide-react"
import { useEffect, useState } from "react"
import {
  BookingSidebar,
  BookingCardFooter,
  BookingCardShell,
  ProfileHeader,
} from "@/components/booking-sidebar"

export default function Confirmation() {
  const [bookingDate, setBookingDate] = useState<string>("")
  const [bookingTime, setBookingTime] = useState<string>("")
  const [bookingName, setBookingName] = useState<string>("")
  const [bookingEmail, setBookingEmail] = useState<string>("")
  const [timezone, setTimezone] = useState<string>("")

  useEffect(() => {
    const date = sessionStorage.getItem("booking_date")
    const time = sessionStorage.getItem("booking_time")
    const name = sessionStorage.getItem("booking_name")
    const email = sessionStorage.getItem("booking_email")

    if (date) {
      setBookingDate(date)
    } else {
      const meetingDate = new Date()
      meetingDate.setDate(meetingDate.getDate() + 2)
      setBookingDate(
        meetingDate.toLocaleDateString("en-US", {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric",
        })
      )
    }

    setBookingTime(time || "3:30 PM")
    setBookingName(name || "Guest")
    setBookingEmail(email || "your email address")
    setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
  }, [])

  return (
    <BookingCardShell>
      <div className="flex flex-col md:flex-row">
        <BookingSidebar selectedDate={bookingDate} selectedTime={bookingTime} />

        <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 flex flex-col items-center justify-center text-center">
            <div className="w-[80px] h-[80px] rounded-full bg-[#e6f4ea] flex items-center justify-center mb-6 shadow-sm animate-[booking-fade-in_0.6s_ease-out]">
              <CheckCircle className="w-11 h-11 text-[#34A853]" strokeWidth={1.5} />
            </div>

            <h1 className="text-[26px] font-bold text-[#202124] mb-2">You are scheduled</h1>
            <p className="text-[14px] text-[#5f6368] mb-8 max-w-sm leading-relaxed">
              A calendar invitation has been sent to{" "}
              <span className="font-medium text-[#202124]">{bookingEmail}</span>
            </p>

            <div className="w-full max-w-md p-6 rounded-2xl border border-[#e8eaed] bg-[#f8f9fa] shadow-sm">
              <ProfileHeader compact />

              <div className="space-y-4 mt-6 pt-6 border-t border-[#e8eaed] text-left">
                <div className="flex items-start gap-3">
                  <div className="w-9 h-9 rounded-full bg-[#067ab4] flex items-center justify-center flex-shrink-0 shadow-sm">
                    <Clock className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <p className="text-[14px] font-semibold text-[#202124]">30 Minute Meeting</p>
                    <p className="text-[13px] text-[#5f6368]">
                      {bookingTime}, {bookingDate}
                    </p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-9 h-9 rounded-full bg-[#067ab4] flex items-center justify-center flex-shrink-0 shadow-sm">
                    <Globe className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <p className="text-[14px] font-semibold text-[#202124]">Time zone</p>
                    <p className="text-[13px] text-[#5f6368]">{timezone || "Central European Time"}</p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-9 h-9 rounded-full bg-[#067ab4] flex items-center justify-center flex-shrink-0 shadow-sm">
                    <Video className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <p className="text-[14px] font-semibold text-[#202124]">Web Conferencing</p>
                    <p className="text-[13px] text-[#5f6368]">Details provided upon confirmation</p>
                  </div>
                </div>

                <div className="flex items-start gap-3">
                  <div className="w-9 h-9 rounded-full bg-[#067ab4] flex items-center justify-center flex-shrink-0 shadow-sm">
                    <Mail className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <p className="text-[14px] font-semibold text-[#202124]">Guest</p>
                    <p className="text-[13px] text-[#5f6368]">
                      {bookingName} · {bookingEmail}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <BookingCardFooter />
    </BookingCardShell>
  )
}