﻿import React, { useState } from 'react';
import { Head, useForm } from '@inertiajs/react';
import { PublicLayout } from '@/Layouts/PublicLayout';
import { CurrencyPrice } from '@/Components/CurrencyPrice';
import { Briefcase, Users, Maximize, Check, Calendar, ArrowRight, ShieldCheck } from 'lucide-react';

interface Props {
    venues: any[];
}

export default function Events({ venues = [] }: Props) {
    const proposalForm = useForm({
        event_venue_id: '',
        client_name: '',
        company_name: '',
        email: '',
        phone: '',
        event_type: 'Corporate Conference',
        event_date: new Date().toISOString().split('T')[0],
        end_date: '',
        attendees_count: 20,
        setup_style: 'Boardroom',
        estimated_budget_usd: '',
        requirements_notes: '',
    });

    const handleRfpSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        proposalForm.post('/events/request-proposal', {
            preserveScroll: true,
            onSuccess: () => proposalForm.reset(),
        });
    };

    return (
        <PublicLayout>
            <Head title="Meetings, Conferences & Banquets — Primon Hotel Naalya" />

            {/* Header Hero */}
            <section className="relative py-28 bg-[#1A1A1A] text-[#FBF9F5] text-center border-b border-[#C5A880]/20">
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
                    <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                        Diplomatic & Corporate MICE
                    </span>
                    <h1 className="font-serif text-4xl sm:text-6xl font-light text-white">
                        Conferences & Executive Events
                    </h1>
                    <p className="text-sm sm:text-base text-gray-300 font-light max-w-2xl mx-auto leading-relaxed">
                        State-of-the-art boardrooms, hybrid video conference suites, and rooftop terrace banquets situated in Kampala's serene diplomatic corridor.
                    </p>
                </div>
            </section>

            {/* Venues Grid */}
            <section className="py-20 bg-[#FBF9F5]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
                    <div className="text-center max-w-2xl mx-auto space-y-2">
                        <span className="text-xs uppercase tracking-[0.25em] text-[#C5A880] font-semibold">
                            Venue Portfolio
                        </span>
                        <h2 className="font-serif text-3xl sm:text-4xl font-light">
                            Meeting Spaces & Banquet Halls
                        </h2>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
                        {venues.map((venue) => (
                            <div
                                key={venue.id}
                                className="bg-[#F3EFEA] rounded-3xl overflow-hidden border border-[#C5A880]/20 shadow-lg flex flex-col"
                            >
                                <div className="h-64 sm:h-72 overflow-hidden">
                                    <img
                                        src={venue.image || 'https://images.unsplash.com/photo-1517502884422-41eaead166d4?auto=format&fit=crop&w=1200&q=80'}
                                        alt={venue.name}
                                        className="w-full h-full object-cover"
                                    />
                                </div>
                                <div className="p-8 flex-1 flex flex-col justify-between space-y-6">
                                    <div className="space-y-3">
                                        <div className="flex items-center justify-between">
                                            <span className="text-xs uppercase tracking-wider text-[#C5A880] font-semibold">
                                                {venue.size_sqm} m² Venue
                                            </span>
                                            <span className="font-serif text-xl font-medium text-[#1A1A1A]">
                                                From <CurrencyPrice amountUsd={venue.daily_rate_usd} /> <span className="text-xs text-gray-500 font-normal">/ day</span>
                                            </span>
                                        </div>
                                        <h3 className="font-serif text-2xl font-normal text-[#1A1A1A]">
                                            {venue.name}
                                        </h3>
                                        <p className="text-xs text-gray-600 font-light leading-relaxed">
                                            {venue.description}
                                        </p>
                                    </div>

                                    {venue.features && (
                                        <div className="grid grid-cols-2 gap-2 pt-3 border-t border-gray-300">
                                            {venue.features.map((f: string, i: number) => (
                                                <div key={i} className="flex items-center gap-2 text-xs text-gray-700">
                                                    <Check className="h-3.5 w-3.5 text-[#C5A880] shrink-0" />
                                                    <span className="truncate">{f}</span>
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* Proposal RFP Form */}
                    <div className="bg-[#1A1A1A] text-[#FBF9F5] rounded-3xl p-8 sm:p-12 border border-[#C5A880]/30 shadow-2xl space-y-8">
                        <div className="max-w-2xl space-y-2">
                            <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                                Request a Proposal (RFP)
                            </span>
                            <h3 className="font-serif text-3xl sm:text-4xl font-light text-white">
                                Plan Your Event With Primon
                            </h3>
                            <p className="text-xs sm:text-sm text-gray-300 font-light leading-relaxed">
                                Submit your event parameters below. Our banquet sales director will generate a comprehensive itemized quotation within 4 business hours.
                            </p>
                        </div>

                        <form onSubmit={handleRfpSubmit} className="space-y-6">
                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Organizer / Contact Name
                                    </label>
                                    <input
                                        type="text"
                                        required
                                        value={proposalForm.data.client_name}
                                        onChange={(e) => proposalForm.setData('client_name', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Organization / Company
                                    </label>
                                    <input
                                        type="text"
                                        value={proposalForm.data.company_name}
                                        onChange={(e) => proposalForm.setData('company_name', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Email Address
                                    </label>
                                    <input
                                        type="email"
                                        required
                                        value={proposalForm.data.email}
                                        onChange={(e) => proposalForm.setData('email', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Phone / WhatsApp
                                    </label>
                                    <input
                                        type="text"
                                        required
                                        value={proposalForm.data.phone}
                                        onChange={(e) => proposalForm.setData('phone', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Event Type
                                    </label>
                                    <select
                                        value={proposalForm.data.event_type}
                                        onChange={(e) => proposalForm.setData('event_type', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    >
                                        <option value="Corporate Conference" className="bg-[#1A1A1A]">Corporate Conference</option>
                                        <option value="Executive Board Meeting" className="bg-[#1A1A1A]">Executive Board Meeting</option>
                                        <option value="Diplomatic Reception" className="bg-[#1A1A1A]">Diplomatic Reception</option>
                                        <option value="Private Dinner & Banquet" className="bg-[#1A1A1A]">Private Dinner & Banquet</option>
                                        <option value="Wedding / Celebration" className="bg-[#1A1A1A]">Wedding / Celebration</option>
                                    </select>
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Attendees Count
                                    </label>
                                    <input
                                        type="number"
                                        min={2}
                                        required
                                        value={proposalForm.data.attendees_count}
                                        onChange={(e) => proposalForm.setData('attendees_count', parseInt(e.target.value))}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Event Date
                                    </label>
                                    <input
                                        type="date"
                                        required
                                        value={proposalForm.data.event_date}
                                        onChange={(e) => proposalForm.setData('event_date', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    />
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                        Setup Style
                                    </label>
                                    <select
                                        value={proposalForm.data.setup_style}
                                        onChange={(e) => proposalForm.setData('setup_style', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    >
                                        <option value="Boardroom" className="bg-[#1A1A1A]">Boardroom Style</option>
                                        <option value="Classroom" className="bg-[#1A1A1A]">Classroom Style</option>
                                        <option value="Theatre" className="bg-[#1A1A1A]">Theatre Style</option>
                                        <option value="Banquet Rounds" className="bg-[#1A1A1A]">Banquet Round Tables</option>
                                        <option value="Cocktail Standing" className="bg-[#1A1A1A]">Cocktail Standing</option>
                                    </select>
                                </div>

                                <div>
                                    <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] font-semibold block mb-1">
                                        Preferred Venue
                                    </label>
                                    <select
                                        value={proposalForm.data.event_venue_id}
                                        onChange={(e) => proposalForm.setData('event_venue_id', e.target.value)}
                                        className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                    >
                                        <option value="" className="bg-[#1A1A1A]">Let Sales Recommend</option>
                                        {venues.map((v) => (
                                            <option key={v.id} value={v.id} className="bg-[#1A1A1A]">{v.name}</option>
                                        ))}
                                    </select>
                                </div>
                            </div>

                            <div>
                                <label className="text-xs font-semibold uppercase tracking-wider text-[#C5A880] block mb-1">
                                    Catering, Audio-Visual & Specific Requirements
                                </label>
                                <textarea
                                    rows={3}
                                    placeholder="e.g. Morning coffee break with pastries, 3-course delegate lunch, hybrid zoom camera setup, 5 guest rooms required"
                                    value={proposalForm.data.requirements_notes}
                                    onChange={(e) => proposalForm.setData('requirements_notes', e.target.value)}
                                    className="w-full bg-white/10 border border-white/20 text-white rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-[#C5A880]"
                                />
                            </div>

                            <button
                                type="submit"
                                disabled={proposalForm.processing}
                                className="bg-[#C5A880] hover:bg-[#DFC7A5] text-[#1A1A1A] px-10 py-3.5 rounded-full text-xs font-bold uppercase tracking-widest transition-all shadow-xl"
                            >
                                Submit Request for Proposal
                            </button>
                        </form>
                    </div>
                </div>
            </section>
        </PublicLayout>
    );
}
