"use client";

import { motion } from "framer-motion";
import { Calendar, Users, Coffee, Mail } from "lucide-react";
import { useState } from "react";
import { submitContactMessage } from "@/app/actions";

export default function Reservation() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [status, setStatus] = useState<{ type: 'success' | 'error', message: string } | null>(null);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsSubmitting(true);
    setStatus(null);

    const form = e.currentTarget;
    const formData = new FormData(form);
    
    // Construct message from reservation fields
    const date = formData.get('date') as string;
    const guests = formData.get('guests') as string;
    const serviceType = formData.get('serviceType') as string;
    const name = formData.get('name') as string;
    const phone = formData.get('phone') as string;
    const email = formData.get('email') as string;

    const messageBody = `REZERVASYON TALEBİ
Tarih: ${date}
Kişi Sayısı: ${guests}
Hizmet Tipi: ${serviceType}
Telefon: ${phone}`;

    const contactFormData = new FormData();
    contactFormData.append('name', name);
    contactFormData.append('email', email);
    contactFormData.append('subject', 'Yeni Rezervasyon Talebi');
    contactFormData.append('message', messageBody);

    const result = await submitContactMessage(contactFormData);

    if (result.error) {
      setStatus({ type: 'error', message: result.error });
    } else {
      setStatus({ type: 'success', message: 'Rezervasyon talebiniz alınmıştır. Ekibimiz en kısa sürede sizinle iletişime geçecektir.' });
      form.reset();
    }
    setIsSubmitting(false);
  };

  return (
    <section id="reservation" className="py-24 bg-white relative overflow-hidden">
      {/* Decorative background blobs */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-sand-light rounded-full blur-3xl opacity-60 -translate-y-1/2 translate-x-1/3 pointer-events-none" />
      <div className="absolute bottom-0 left-0 w-[380px] h-[380px] bg-coral-light/15 rounded-full blur-3xl opacity-50 translate-y-1/2 -translate-x-1/3 pointer-events-none" />

      <div className="container mx-auto px-6 max-w-5xl relative z-10">
        <div className="bg-sea-dark rounded-[2.5rem] p-8 md:p-14 shadow-2xl overflow-hidden relative">
          {/* Inner glow */}
          <div className="absolute top-0 right-0 w-72 h-72 bg-sea-light rounded-full blur-3xl opacity-25 -translate-y-1/2 translate-x-1/2 pointer-events-none" />

          <div className="text-center mb-12 relative z-10 text-white">
            <div className="flex items-center justify-center gap-3 mb-4">
              <span className="w-8 h-px bg-coral/70" />
              <h2 className="text-sm font-bold tracking-widest uppercase text-coral">Hemen Yerinizi Ayırtın</h2>
              <span className="w-8 h-px bg-coral/70" />
            </div>
            <h3 className="text-4xl md:text-5xl font-serif mb-4">Rezervasyon Talebi</h3>
            <p className="text-sand-light/80 max-w-2xl mx-auto text-sm leading-relaxed">
              Unutulmaz bir Ege deneyimi için hemen formumuzu doldurun, ekibimiz en kısa sürede sizinle iletişime geçsin.
            </p>
          </div>

          <motion.form
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="relative z-10 bg-white p-7 md:p-10 rounded-2xl shadow-xl max-w-4xl mx-auto"
            onSubmit={handleSubmit}
          >
            <div className="grid md:grid-cols-3 gap-5 mb-6">
              {/* Date */}
              <div className="space-y-1.5">
                <label className="text-xs font-semibold text-gray-600 uppercase tracking-wide flex items-center gap-1.5">
                  <Calendar size={13} className="text-coral" /> Tarih
                </label>
                <input
                  type="date"
                  name="date"
                  required
                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors text-sm"
                />
              </div>

              {/* Guests */}
              <div className="space-y-1.5">
                <label className="text-xs font-semibold text-gray-600 uppercase tracking-wide flex items-center gap-1.5">
                  <Users size={13} className="text-coral" /> Kişi Sayısı
                </label>
                <select name="guests" className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors bg-white text-sm">
                  <option value="1 Kişi">1 Kişi</option>
                  <option value="2 Kişi">2 Kişi</option>
                  <option value="3 Kişi">3 Kişi</option>
                  <option value="4 Kişi">4 Kişi</option>
                  <option value="5+ Kişi">5+ Kişi</option>
                </select>
              </div>

              {/* Service type */}
              <div className="space-y-1.5">
                <label className="text-xs font-semibold text-gray-600 uppercase tracking-wide flex items-center gap-1.5">
                  <Coffee size={13} className="text-coral" /> Hizmet Tipi
                </label>
                <select name="serviceType" className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors bg-white text-sm">
                  <option value="Beach Club (Şezlong/Loca)">Beach Club (Şezlong/Loca)</option>
                  <option value="Restoran Akşam Yemeği">Restoran Akşam Yemeği</option>
                  <option value="Konaklama">Konaklama</option>
                  <option value="Özel Etkinlik / Organizasyon">Özel Etkinlik / Organizasyon</option>
                </select>
              </div>
            </div>

            <div className="grid md:grid-cols-3 gap-5 mb-7">
              <input
                type="text"
                name="name"
                required
                placeholder="Adınız Soyadınız"
                className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors text-sm"
              />
              <input
                type="tel"
                name="phone"
                required
                placeholder="Telefon Numaranız"
                className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors text-sm"
              />
              <input
                type="email"
                name="email"
                required
                placeholder="E-Posta Adresiniz"
                className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-coral/40 focus:border-coral transition-colors text-sm"
              />
            </div>

            {status && (
              <div className={`p-4 mb-6 rounded-xl text-sm ${status.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'}`}>
                {status.message}
              </div>
            )}

            <button
              type="submit"
              disabled={isSubmitting}
              className="btn-shimmer w-full bg-coral hover:bg-coral-dark text-white font-medium py-4 rounded-xl transition-colors shadow-lg hover:shadow-xl text-sm tracking-wide uppercase disabled:opacity-70 flex justify-center items-center"
            >
              {isSubmitting ? 'Talebiniz Gönderiliyor...' : 'Rezervasyon Talebi Gönder'}
            </button>

            <p className="text-[11px] text-center text-gray-400 mt-4">
              Bu form ön rezervasyon talebidir. Kesin onay için ekibimiz sizinle iletişime geçecektir.
            </p>
          </motion.form>
        </div>
      </div>
    </section>
  );
}