'use client'

import { useTranslations } from 'next-intl'
import { useState, useEffect } from 'react'

export default function ReservationPage() {
  const t = useTranslations('reservation')
  const [isSubmitted, setIsSubmitted] = useState(false)
  const [formData, setFormData] = useState({
    date: '',
    time: '',
    guests: '2',
    occasion: '',
    requests: ''
  })

  useEffect(() => {
    // Parallax effect for hero
    const handleScroll = () => {
      const scrolled = window.pageYOffset;
      const heroImage = document.querySelector('.hero-parallax') as HTMLElement;
      if (heroImage) {
        heroImage.style.transform = `scale(1.05) translateY(${scrolled * 0.3}px)`;
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitted(true)
  }

  return (
    <main>
      {/* Hero Section */}
      <section className="relative h-[1024px] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img alt="Teras Dining Room" className="hero-parallax w-full h-full object-cover blur-[4px] brightness-[0.3] scale-105 transition-transform" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAXZYL1k1MqQOOTVS2XFNUlHm_ujv_2XGjXeqDdqmW2cAzGhZ4YKMmCEyrzgsxhvecujJ71E-2WyhGynN2dOx7cTZN5kWr0OZHk1YS922FdQrqWKJqnyutqRVAiqO4lSs7jQM_4hVi9a2o4y6rFBXIlTFyHZlUWudF1sTQtjjBmk1Nbdr-YCx5t_lcmRArh0U9Q9y3J3wMuZS-Zl-rNtMzgXSyEnwtoLSPzaSFugpPM3nmzszmAAiAdhDXRJZzycQCK8oPbMuQ5JXqp" />
          <div className="absolute inset-0 chiaroscuro-gradient"></div>
        </div>

        {/* Booking Widget */}
        <div className="relative z-10 w-full max-w-2xl px-6" id="booking-container">
          {!isSubmitted ? (
            <div className="booking-card bg-surface-container/60 p-8 md:p-12 shadow-2xl transition-all duration-700 transform opacity-100 translate-y-0" id="reservation-form-wrapper">
              <div className="text-center mb-10">
                <span className="font-label-caps text-label-caps text-tertiary mb-4 block">{t('subtitle')}</span>
                <h1 className="font-headline-md text-headline-md text-on-surface">{t('title')}</h1>
                <div className="w-12 h-px bg-on-tertiary-container mx-auto mt-6"></div>
              </div>

              <form className="space-y-6" onSubmit={handleSubmit}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {/* Date */}
                  <div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
                    <label className="font-label-caps text-[10px] text-on-surface-variant">{t('date')}</label>
                    <input 
                      type="date" 
                      required 
                      className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2" 
                      value={formData.date}
                      onChange={e => setFormData({...formData, date: e.target.value})}
                    />
                  </div>
                  {/* Time */}
                  <div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
                    <label className="font-label-caps text-[10px] text-on-surface-variant">{t('time')}</label>
                    <input 
                      type="time" 
                      required 
                      className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2" 
                      value={formData.time}
                      onChange={e => setFormData({...formData, time: e.target.value})}
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {/* Guests */}
                  <div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
                    <label className="font-label-caps text-[10px] text-on-surface-variant">{t('guests')}</label>
                    <select 
                      required 
                      className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2 appearance-none"
                      value={formData.guests}
                      onChange={e => setFormData({...formData, guests: e.target.value})}
                    >
                      <option className="bg-surface" value="1">1 {t('person')}</option>
                      <option className="bg-surface" value="2">2 {t('person')}</option>
                      <option className="bg-surface" value="3">3 {t('person')}</option>
                      <option className="bg-surface" value="4">4 {t('person')}</option>
                      <option className="bg-surface" value="5+">5+ {t('person')}</option>
                    </select>
                  </div>
                  {/* Occasion */}
                  <div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
                    <label className="font-label-caps text-[10px] text-on-surface-variant">{t('occasion')}</label>
                    <select 
                      className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2 appearance-none"
                      value={formData.occasion}
                      onChange={e => setFormData({...formData, occasion: e.target.value})}
                    >
                      <option className="bg-surface" value="">{t('occasion_none')}</option>
                      <option className="bg-surface" value="birthday">{t('occasion_birthday')}</option>
                      <option className="bg-surface" value="anniversary">{t('occasion_anniversary')}</option>
                      <option className="bg-surface" value="business">{t('occasion_business')}</option>
                    </select>
                  </div>
                </div>

                {/* Special Requests */}
                <div className="space-y-2 copper-glow p-0.5 border-b border-outline-variant transition-all duration-300">
                  <label className="font-label-caps text-[10px] text-on-surface-variant">{t('requests')}</label>
                  <textarea 
                    rows={2} 
                    className="w-full bg-transparent border-none focus:ring-0 text-on-surface font-body-md p-0 pb-2 resize-none placeholder:text-outline-variant" 
                    placeholder={t('requests_placeholder')}
                    value={formData.requests}
                    onChange={e => setFormData({...formData, requests: e.target.value})}
                  ></textarea>
                </div>

                <button type="submit" className="w-full bg-secondary-container text-on-secondary-container py-4 font-label-caps text-label-caps tracking-[0.2em] hover:brightness-110 transition-all duration-300 shadow-lg mt-8 active:scale-[0.98]">
                  {t('submit')}
                </button>
              </form>
            </div>
          ) : (
            <div className="booking-card bg-surface-container/80 p-12 text-center shadow-2xl transition-all duration-700 opacity-100 transform translate-y-0" id="success-state">
              <div className="mb-8">
                <span className="material-symbols-outlined text-tertiary text-6xl" style={{ fontVariationSettings: "'wght' 200" }}>check_circle</span>
              </div>
              <h2 className="font-headline-md text-headline-md text-on-surface mb-4">{t('success_title')}</h2>
              <p className="text-on-surface-variant font-body-md mb-10 max-w-sm mx-auto">
                {t('success_desc')}
              </p>
              <div className="flex flex-col gap-4 max-w-xs mx-auto">
                <div className="flex justify-between border-b border-outline-variant/30 pb-2">
                  <span className="font-label-caps text-[10px] text-on-surface-variant">{t('guests')}</span>
                  <span className="font-body-md text-tertiary">{formData.guests} {t('person')}</span>
                </div>
                <div className="flex justify-between border-b border-outline-variant/30 pb-2">
                  <span className="font-label-caps text-[10px] text-on-surface-variant">{t('time')}</span>
                  <span className="font-body-md text-tertiary">{formData.time || '19:30'}</span>
                </div>
              </div>
              <button onClick={() => setIsSubmitted(false)} className="mt-12 text-secondary font-label-caps text-label-caps border-b border-secondary pb-1 hover:text-tertiary hover:border-tertiary transition-colors">
                {t('book_another')}
              </button>
            </div>
          )}
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-12 left-1/2 -translate-x-1/2 flex flex-col items-center gap-4">
          <div className="w-px h-16 bg-gradient-to-b from-transparent via-on-tertiary-container to-transparent"></div>
        </div>
      </section>

      {/* Informational Section */}
      <section className="bg-background py-[var(--spacing-section-padding)] px-[var(--spacing-gutter)]">
        <div className="max-w-[var(--spacing-container-max)] mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
          <div className="space-y-4">
            <span className="material-symbols-outlined text-tertiary text-4xl">local_fire_department</span>
            <h3 className="font-headline-sm text-headline-sm text-on-surface">{t('info_title1')}</h3>
            <p className="text-on-surface-variant text-body-md">{t('info_desc1')}</p>
          </div>
          <div className="space-y-4">
            <span className="material-symbols-outlined text-tertiary text-4xl">restaurant_menu</span>
            <h3 className="font-headline-sm text-headline-sm text-on-surface">{t('info_title2')}</h3>
            <p className="text-on-surface-variant text-body-md">{t('info_desc2')}</p>
          </div>
          <div className="space-y-4">
            <span className="material-symbols-outlined text-tertiary text-4xl">wine_bar</span>
            <h3 className="font-headline-sm text-headline-sm text-on-surface">{t('info_title3')}</h3>
            <p className="text-on-surface-variant text-body-md">{t('info_desc3')}</p>
          </div>
        </div>
      </section>
    </main>
  )
}