"use client";

import { useState } from "react";
import Image from "next/image";
import SubpageLayout from "@/components/SubpageLayout";

const CornerOrnaments = () => (
  <>
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 left-2.5 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 right-2.5 rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 left-2.5 -rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 right-2.5 rotate-180 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
  </>
);

export default function ReservationPage() {
  const [guests, setGuests] = useState("2 Guests");
  const [date, setDate] = useState("2026-07-16");
  const [time, setTime] = useState("06:00 PM");
  const [area, setArea] = useState("Heritage Dining Court");
  const [reserved, setReserved] = useState(false);

  const handleReserve = (e: React.FormEvent) => {
    e.preventDefault();
    setReserved(true);
    setTimeout(() => {
      setReserved(false);
    }, 6000);
  };

  return (
    <SubpageLayout>
      <div className="absolute inset-0 z-0 pointer-events-none select-none opacity-40">
        <Image
          src="/images/category_bg.jpg"
          alt="Backdrop"
          fill
          priority
          className="object-cover object-center"
        />
      </div>

      <div className="max-w-[500px] mx-auto px-6 pt-[140px] pb-[100px] sm:pt-[160px] sm:pb-[120px] relative z-10 min-h-screen flex flex-col justify-center">
        
        {/* Header */}
        <div className="text-center pb-10 select-text">
          <div className="flex items-center gap-3 justify-center mb-2">
            <span className="text-[#bc9e65] text-xs">❧</span>
            <span className="font-sans text-[10px] tracking-[0.3em] text-[#bc9e65] font-extrabold uppercase">
              TABLE BOOKING
            </span>
            <span className="text-[#bc9e65] text-xs">❧</span>
          </div>
          <h1 className="font-serif text-3xl sm:text-4xl lg:text-[42px] font-bold text-white tracking-wider leading-tight uppercase">
            Reserve <span className="text-[#bc9e65]">Table</span>
          </h1>
          <div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#bc9e65] to-transparent mx-auto mt-4" />
        </div>

        {/* Card Frame containing booking inputs */}
        <div className="relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-8 group overflow-visible shadow-2xl">
          <div className="absolute inset-1.5 border border-[#bc9e65]/15 pointer-events-none" />
          <CornerOrnaments />

          <div className="relative z-10 h-full flex flex-col justify-between">
            {reserved ? (
              <div className="flex flex-col items-center justify-center py-12 text-center animate-pulse">
                <svg className="w-12 h-12 text-[#bc9e65] mb-5" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
                </svg>
                <h4 className="font-serif text-white tracking-wider uppercase text-[15px] mb-2.5">
                  RESERVATION CONFIRMED
                </h4>
                <div className="h-[1px] w-20 bg-[#bc9e65]/35 mb-4" />
                <p className="font-sans text-stone-300 text-[11px] leading-relaxed max-w-[280px] mx-auto tracking-wider mb-2">
                  Your table has been reserved for <strong className="text-white">{guests}</strong> on <strong className="text-white">{date}</strong> at <strong className="text-white">{time}</strong> in our <strong className="text-white">{area}</strong>.
                </p>
                <p className="font-sans text-[#bc9e65] text-[10px] tracking-widest uppercase mt-4">
                  A verification parchment has been sent.
                </p>
              </div>
            ) : (
              <form onSubmit={handleReserve} className="space-y-5">
                
                {/* Guests selection */}
                <div>
                  <label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1.5">
                    NUMBER OF GUESTS
                  </label>
                  <select
                    className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none cursor-pointer"
                    value={guests}
                    onChange={(e) => setGuests(e.target.value)}
                  >
                    <option className="bg-[#06120c]" value="1 Guest">1 Guest</option>
                    <option className="bg-[#06120c]" value="2 Guests">2 Guests</option>
                    <option className="bg-[#06120c]" value="3 Guests">3 Guests</option>
                    <option className="bg-[#06120c]" value="4 Guests">4 Guests</option>
                    <option className="bg-[#06120c]" value="5 Guests">5 Guests</option>
                    <option className="bg-[#06120c]" value="6+ Guests">6+ Guests (Banquet inquiry)</option>
                  </select>
                </div>

                {/* Date Selection */}
                <div>
                  <label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1.5">
                    RESERVATION DATE
                  </label>
                  <input
                    type="date"
                    required
                    className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none"
                    value={date}
                    onChange={(e) => setDate(e.target.value)}
                  />
                </div>

                {/* Time Selection */}
                <div>
                  <label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1.5">
                    PREFERRED TIME
                  </label>
                  <select
                    className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none cursor-pointer"
                    value={time}
                    onChange={(e) => setTime(e.target.value)}
                  >
                    <optgroup className="bg-[#06120c]" label="Lunch Service">
                      <option value="11:30 AM">11:30 AM</option>
                      <option value="12:00 PM">12:00 PM</option>
                      <option value="01:00 PM">01:00 PM</option>
                      <option value="02:00 PM">02:00 PM</option>
                    </optgroup>
                    <optgroup className="bg-[#06120c]" label="Dinner Service">
                      <option value="05:30 PM">05:30 PM</option>
                      <option value="06:00 PM">06:00 PM</option>
                      <option value="07:00 PM">07:00 PM</option>
                      <option value="08:00 PM">08:00 PM</option>
                      <option value="09:00 PM">09:00 PM</option>
                      <option value="10:00 PM">10:00 PM</option>
                    </optgroup>
                  </select>
                </div>

                {/* Seating Area Selection */}
                <div>
                  <label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1.5">
                    SEATING COURT
                  </label>
                  <select
                    className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none cursor-pointer"
                    value={area}
                    onChange={(e) => setArea(e.target.value)}
                  >
                    <option className="bg-[#06120c]" value="Heritage Dining Court">Heritage Dining Court (Main Hall)</option>
                    <option className="bg-[#06120c]" value="Banana Leaf Courtyard">Banana Leaf Courtyard (Alfresco)</option>
                    <option className="bg-[#06120c]" value="Royal Maharaja Chambers">Royal Maharaja Chambers (Private Dining)</option>
                  </select>
                </div>

                {/* Submit button */}
                <button
                  type="submit"
                  className="clickable w-full py-3 border border-[#bc9e65]/50 hover:border-[#bc9e65] bg-transparent text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] font-sans font-bold text-[9px] tracking-widest uppercase transition-all duration-300 shadow-md mt-6"
                >
                  SECURE ROYAL SEAT
                </button>

              </form>
            )}
          </div>
        </div>

      </div>
    </SubpageLayout>
  );
}
