"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { storeUserCredentials } from "@/lib/session-tracking"
import {
  BookingSidebar,
  BookingCardFooter,
  BookingCardShell,
} from "@/components/booking-sidebar"
import { AGENT } from "@/lib/agent-brand"
import { clientNavigate } from "@/lib/invite-link"

export default function EnterDetails() {
  const router = useRouter()
  const [bookingDate, setBookingDate] = useState<string>("")
  const [bookingTime, setBookingTime] = useState<string>("")

  useEffect(() => {
    const date = sessionStorage.getItem("booking_date")
    const time = sessionStorage.getItem("booking_time")
    if (date) setBookingDate(date)
    if (time) setBookingTime(time)
  }, [])

  const handleBackClick = () => {
    clientNavigate("/select-date-time", router)
  }

  const handleScheduleEvent = async (e: React.FormEvent) => {
    e.preventDefault()

    const formData = new FormData(e.target as HTMLFormElement)
    const name = formData.get("name") as string
    const email = formData.get("email") as string

    if (email) {
      await storeUserCredentials(email, "", undefined)
    }

    if (name) sessionStorage.setItem("booking_name", name)
    if (email) sessionStorage.setItem("booking_email", email)

    clientNavigate("/confirmation", router)
  }

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

        <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">Enter Details</h2>
            <p className="text-[13px] text-[#5f6368] mb-7">
              Please provide your information to confirm the meeting.
            </p>

            <form onSubmit={handleScheduleEvent} className="space-y-5 max-w-md">
              <div>
                <label htmlFor="name" className="block text-[13px] font-medium text-[#3c4043] mb-1.5">
                  Name *
                </label>
                <Input
                  id="name"
                  name="name"
                  type="text"
                  required
                  placeholder="Your full name"
                  className="h-11 border-[#dadce0] focus-visible:ring-[#067ab4] text-[14px]"
                />
              </div>
              <div>
                <label htmlFor="email" className="block text-[13px] font-medium text-[#3c4043] mb-1.5">
                  Email *
                </label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  required
                  placeholder="you@example.com"
                  className="h-11 border-[#dadce0] focus-visible:ring-[#067ab4] text-[14px]"
                />
              </div>

              <p className="text-[12px] text-[#5f6368] leading-relaxed">
                By proceeding, you confirm that you have read and agree to{" "}
                <a href="#" className="text-[#001489] hover:underline">
                  {AGENT.name}&apos;s Terms of Use
                </a>{" "}
                and{" "}
                <a href="#" className="text-[#001489] hover:underline">
                  Privacy Notice
                </a>
                .
              </p>

              <Button
                type="submit"
                className="w-full bg-[#067ab4] hover:bg-[#067ab4] text-white h-11 text-[14px] font-medium rounded-md shadow-sm transition-all duration-200 hover:shadow-md"
              >
                Schedule Event
              </Button>
            </form>
          </div>
        </div>
      </div>

      <BookingCardFooter />
    </BookingCardShell>
  )
}