'use client';

import Navbar from "@/components/Navbar";

import Footer from "@/components/Footer";
import { buildBookingWhatsAppMessage } from '@/application/messaging/whatsapp-message-builder';
import { isBookingComplete } from '@/domain/booking/validation';
import type { BookingDetails, PreOrderLine } from '@/domain/booking/entities';
import {
  addOrderLine,
  calculateLineTotal,
  calculateOrderTotal,
  formatLineQuantityLabel,
  removeOrderLine,
  updateOrderLineQuantity,
} from '@/domain/shared/order-line';
import { buildCartLineFromMenuItem } from '@/application/cart/cart-line-builder';
import type { MenuItem } from '@/domain/menu/entities';
import {
  getMenuPosterSrc,
  getMenuPosterCandidates,
  applyNextImageFallback,
  SITE_ASSETS,
} from '@/lib/assets';
import { container } from '@/infrastructure/di/container';
import { useLanguage } from '@/presentation/providers/language-provider';
import { getTranslation } from '@/presentation/i18n/translations';
import {
  getMenuItemDescription,
  getMenuItemName,
  localizeOrderLineName,
} from '@/application/i18n/menu-localization';
import { useCallback, useEffect, useState } from 'react';
import { motion, AnimatePresence } from "framer-motion";
import { MapPin, Calendar, Clock, Users, User, Phone, Mail, MessageCircle, Plus, Minus, X, ArrowRight, Search, CheckCircle, UtensilsCrossed, PartyPopper, Building2, Sparkles } from "lucide-react";
import { useMenu } from "@/presentation/providers/menu-provider";
import { playAddSound, playHoverSound, playSuccessSound } from "@/lib/sounds";
import type { BookingMode, EventTypeId } from '@/domain/booking/event-types';
import { EVENT_GUEST_OPTIONS, TABLE_GUEST_OPTIONS } from '@/domain/booking/event-types';
import {
  getBookingEventsCopy,
  getEventTypeLabel,
  toBookingMessageCopy,
} from '@/presentation/i18n/booking-events';
import {
  getWhatsAppInquiryLanguage,
  getWhatsAppInquiryTranslation,
} from '@/application/messaging/inquiry-language';
import EventTypePicker from '@/components/reserve/EventTypePicker';
import { useCustomerAuth } from '@/presentation/providers/customer-auth-provider';

const RESERVE_DRAFT_STORAGE_KEY = 'shahi-reserve-draft';

function GoogleIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" aria-hidden="true">
      <path
        fill="#4285F4"
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
      />
      <path
        fill="#34A853"
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
      />
      <path
        fill="#FBBC05"
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
      />
      <path
        fill="#EA4335"
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
      />
    </svg>
  );
}

/**
 * =============================================================================
 * TABLE RESERVATION / BOOKING PAGE
 * =============================================================================
 * 
 * Beautiful, theme-matched table booking experience with optional pre-order.
 * - Swap implemented: Reserve Table now in central nav pills, Login is the gold CTA.
 * - Form first (location, date, time, guests, name, phone, email, notes).
 * - After form: full menu selector for pre-ordering (reuse menu-data).
 * - End: builds rich WhatsApp inquiry (booking + pre-order items) using same number as cart.
 * - Fully translated (sv default + en/hi/ur).
 * - Mobile-first, large targets, elegant cards matching /login and site theme.
 * - Uses framer-motion for reveals, lucide icons.
 * - No backend: client-side only, like staff login and cart WhatsApp.
 * 
 * Linked from navbar (after swap) and locations.
 */

const EMPTY_BOOKING: BookingDetails = {
  bookingMode: 'table',
  eventType: '',
  eventTypeOther: '',
  location: '',
  date: '',
  time: '',
  guests: '',
  name: '',
  phone: '',
  email: '',
  notes: '',
};

export default function ReservePage() {
  const { categories: menuCategories } = useMenu();
  const { language } = useLanguage();
  const t = getTranslation(language);
  const eventsCopy = getBookingEventsCopy(language);
  const { email: customerEmail, name: customerName, isAuthenticated, isLoading: isAuthLoading } =
    useCustomerAuth();

  const [booking, setBooking] = useState<BookingDetails>(EMPTY_BOOKING);
  const [draftRestored, setDraftRestored] = useState(false);
  const [preOrder, setPreOrder] = useState<PreOrderLine[]>([]);
  const [showMenu, setShowMenu] = useState(false);
  const [search, setSearch] = useState('');
  const [sent, setSent] = useState(false);

  const handleBookingChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setBooking((prev) => ({ ...prev, [name]: value }));
  };

  const persistReserveDraft = useCallback((draft: BookingDetails) => {
    try {
      sessionStorage.setItem(RESERVE_DRAFT_STORAGE_KEY, JSON.stringify(draft));
    } catch {
      // Ignore storage errors.
    }
  }, []);

  const handleGoogleSignInForBooking = () => {
    persistReserveDraft(booking);
    window.location.href = '/api/auth/google?returnTo=%2Freserve';
  };

  useEffect(() => {
    if (draftRestored) return;

    try {
      const raw = sessionStorage.getItem(RESERVE_DRAFT_STORAGE_KEY);
      if (!raw) {
        setDraftRestored(true);
        return;
      }

      const parsed = JSON.parse(raw) as Partial<BookingDetails>;
      setBooking((prev) => ({
        ...prev,
        bookingMode: parsed.bookingMode === 'event' ? 'event' : 'table',
        eventType: typeof parsed.eventType === 'string' ? parsed.eventType : '',
        eventTypeOther: typeof parsed.eventTypeOther === 'string' ? parsed.eventTypeOther : '',
        location: typeof parsed.location === 'string' ? parsed.location : '',
        date: typeof parsed.date === 'string' ? parsed.date : '',
        time: typeof parsed.time === 'string' ? parsed.time : '',
        guests: typeof parsed.guests === 'string' ? parsed.guests : '',
        name: typeof parsed.name === 'string' ? parsed.name : '',
        phone: typeof parsed.phone === 'string' ? parsed.phone : '',
        notes: typeof parsed.notes === 'string' ? parsed.notes : '',
      }));
      sessionStorage.removeItem(RESERVE_DRAFT_STORAGE_KEY);
    } catch {
      sessionStorage.removeItem(RESERVE_DRAFT_STORAGE_KEY);
    } finally {
      setDraftRestored(true);
    }
  }, [draftRestored]);

  useEffect(() => {
    if (!isAuthenticated || !customerEmail) return;

    setBooking((prev) => ({
      ...prev,
      email: customerEmail,
      name: prev.name.trim() ? prev.name : customerName?.trim() ?? prev.name,
    }));
  }, [isAuthenticated, customerEmail, customerName]);

  const validateForm = (): boolean => isBookingComplete(booking);

  const setBookingMode = (mode: BookingMode) => {
    setBooking((prev) => ({
      ...prev,
      bookingMode: mode,
      eventType: mode === 'table' ? '' : prev.eventType,
      eventTypeOther: mode === 'table' ? '' : prev.eventTypeOther,
      guests: '',
    }));
  };

  const selectEventType = (eventType: EventTypeId) => {
    setBooking((prev) => ({
      ...prev,
      eventType,
      eventTypeOther: eventType === 'other' ? prev.eventTypeOther : '',
    }));
  };

  const handleContinue = (e: React.FormEvent) => {
    e.preventDefault();
    if (booking.bookingMode === 'event' && !booking.eventType) {
      alert(eventsCopy.eventTypeRequired);
      return;
    }
    if (booking.bookingMode === 'event' && booking.eventType === 'other' && !booking.eventTypeOther.trim()) {
      alert(eventsCopy.eventTypeOtherRequired);
      return;
    }
    if (validateForm()) {
      setShowMenu(true);
      setTimeout(() => {
        const menuEl = document.getElementById('preorder-menu');
        if (menuEl) menuEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 100);
    } else {
      alert('Please fill in all required fields (location, date, time, guests, name, phone).');
    }
  };

  // Flatten menu for selector (with search)
  const allDishes = menuCategories.flatMap((cat) => cat.items);

  const filteredDishes = allDishes.filter((dish) => {
    const q = search.toLowerCase();
    const localizedName = getMenuItemName(language, dish).toLowerCase();
    const localizedDescription = getMenuItemDescription(language, t, dish).toLowerCase();
    return (
      localizedName.includes(q) ||
      localizedDescription.includes(q) ||
      dish.name.toLowerCase().includes(q)
    );
  });

  const addToPreOrder = (dish: MenuItem) => {
    setPreOrder((prev) => addOrderLine(prev, buildCartLineFromMenuItem(dish)));
  };

  const updatePreOrderQty = (id: string, newQty: number) => {
    setPreOrder((prev) => updateOrderLineQuantity(prev, id, newQty));
  };

  const removeFromPreOrder = (id: string) => {
    setPreOrder((prev) => removeOrderLine(prev, id));
  };

  const getPreOrderTotal = () => calculateOrderTotal(preOrder);

  const handleSendInquiry = () => {
    if (!validateForm()) {
      alert('Please complete the booking form first.');
      return;
    }

    playSuccessSound();

    const inquiryLang = getWhatsAppInquiryLanguage(language);
    const inquiryT = getWhatsAppInquiryTranslation(language);
    const inquiryEventsCopy = getBookingEventsCopy(inquiryLang);
    const message = buildBookingWhatsAppMessage(
      booking,
      preOrder,
      toBookingMessageCopy(inquiryEventsCopy, {
        askim: inquiryT.booking.askim,
        backaplan: inquiryT.booking.backaplan,
      }),
      booking.eventType ? getEventTypeLabel(inquiryLang, booking.eventType) : '',
      inquiryLang,
    );
    if (!message) return;
    container.messagingGateway.openWhatsApp(message);
    setSent(true);
  };

  const resetAll = () => {
    setBooking(EMPTY_BOOKING);
    setPreOrder([]);
    setShowMenu(false);
    setSearch('');
    setSent(false);
  };

  const guestOptions =
    booking.bookingMode === 'event' ? EVENT_GUEST_OPTIONS : TABLE_GUEST_OPTIONS;

  const editBooking = () => {
    setShowMenu(false);
    setSent(false);
  };

  // Location options from translations
  const locationOptions = [
    { value: 'askim', label: t.booking.askim },
    { value: 'backaplan', label: t.booking.backaplan },
  ];

  return (
    <div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
      <Navbar />

      <main className="pb-20">
        {/* Hero */}
        <div className="relative overflow-hidden">
          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(201,154,46,0.12),transparent_55%)]" />
          <div className="relative mx-auto max-w-5xl px-4 py-8 text-center sm:px-6 sm:py-14">
            <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-[#c99a2e]/25 bg-[#fff6dc] px-4 py-1.5 text-[10px] font-bold uppercase tracking-[0.28em] text-[#8a6a25]">
              <Sparkles className="h-3.5 w-3.5" />
              {eventsCopy.heroBadge}
            </div>
            <h1 className="mb-4 font-serif text-3xl leading-[1.1] tracking-[-0.8px] text-[#101724] sm:text-4xl md:text-5xl">
              {eventsCopy.heroTitle}
            </h1>
            <p className="mx-auto max-w-2xl text-sm leading-relaxed text-[#6B665F] md:text-base">
              {eventsCopy.heroSubtitle}
            </p>
          </div>
        </div>

        <div className="mx-auto max-w-5xl px-4 sm:px-6">
          {/* Experience pillars */}
          <div className="mb-10 grid gap-4 sm:grid-cols-3">
            {[
              { icon: UtensilsCrossed, title: eventsCopy.experienceDiningTitle, desc: eventsCopy.experienceDiningDesc, accent: 'from-[#0f5a4a]/10 to-[#0f5a4a]/5' },
              { icon: PartyPopper, title: eventsCopy.experienceCelebrateTitle, desc: eventsCopy.experienceCelebrateDesc, accent: 'from-[#c99a2e]/15 to-[#fff6dc]' },
              { icon: Building2, title: eventsCopy.experienceCorporateTitle, desc: eventsCopy.experienceCorporateDesc, accent: 'from-[#101724]/8 to-[#101724]/3' },
            ].map((item) => (
              <div
                key={item.title}
                className={`rounded-3xl border border-[#EDE6D9] bg-gradient-to-br ${item.accent} p-5 shadow-sm`}
              >
                <div className="mb-3 flex h-11 w-11 items-center justify-center rounded-2xl bg-white shadow-sm">
                  <item.icon className="h-5 w-5 text-[#B38B4D]" />
                </div>
                <h2 className="mb-1 font-serif text-lg tracking-tight text-[#101724]">{item.title}</h2>
                <p className="text-sm leading-relaxed text-[#6B665F]">{item.desc}</p>
              </div>
            ))}
          </div>

          <AnimatePresence mode="wait">
            {!sent ? (
              <div className="max-w-4xl mx-auto space-y-8">
                {/* Booking Form Card - now wider (full in max-w-4xl) */}
                <div className="rounded-3xl border border-[#EDE6D9] bg-white p-4 shadow-xl sm:p-8 md:p-10">
                  {/* Booking mode toggle */}
                  <div className="mb-6 grid grid-cols-1 gap-3 sm:mb-8 sm:grid-cols-2">
                    {([
                      { mode: 'table' as const, label: eventsCopy.modeTable, desc: eventsCopy.modeTableDesc, icon: UtensilsCrossed },
                      { mode: 'event' as const, label: eventsCopy.modeEvent, desc: eventsCopy.modeEventDesc, icon: PartyPopper },
                    ]).map((option) => {
                      const active = booking.bookingMode === option.mode;
                      return (
                        <button
                          key={option.mode}
                          type="button"
                          onClick={() => setBookingMode(option.mode)}
                          className={`flex min-h-[72px] touch-manipulation items-start gap-3 rounded-2xl border p-3.5 text-left transition-all active:scale-[0.99] sm:gap-4 sm:p-4 ${
                            active
                              ? 'border-[#c99a2e] bg-gradient-to-br from-[#fff6dc] to-white shadow-md ring-2 ring-[#c99a2e]/25'
                              : 'border-[#EDE6D9] bg-[#FFFCF7] hover:border-[#c99a2e]/40'
                          }`}
                        >
                          <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${active ? 'bg-[#c99a2e] text-[#241806]' : 'bg-[#F8F5F0] text-[#B38B4D]'}`}>
                            <option.icon className="h-5 w-5" />
                          </div>
                          <div>
                            <div className="font-semibold text-[#101724]">{option.label}</div>
                            <div className="text-sm text-[#6B665F]">{option.desc}</div>
                          </div>
                        </button>
                      );
                    })}
                  </div>

                  {booking.bookingMode === 'event' && (
                    <>
                      <EventTypePicker
                        language={language}
                        selected={booking.eventType}
                        onSelect={selectEventType}
                        title={eventsCopy.eventPickerTitle}
                        subtitle={eventsCopy.eventPickerSubtitle}
                      />
                      {booking.eventType === 'other' && (
                        <div className="mb-8">
                          <label htmlFor="eventTypeOther" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">
                            {eventsCopy.eventTypeOtherLabel}
                          </label>
                          <input
                            id="eventTypeOther"
                            name="eventTypeOther"
                            type="text"
                            value={booking.eventTypeOther}
                            onChange={handleBookingChange}
                            placeholder={eventsCopy.eventTypeOtherPlaceholder}
                            className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] px-4 py-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                          />
                        </div>
                      )}
                    </>
                  )}

                  {isAuthLoading ? (
                    <div className="rounded-2xl border border-[#EDE6D9] bg-[#FFFCF7] px-4 py-8 text-center text-sm text-[#6B665F] sm:px-6 sm:py-10">
                      Checking your account…
                    </div>
                  ) : !isAuthenticated ? (
                    <div className="rounded-2xl border border-[#EDE6D9] bg-gradient-to-br from-[#FFFCF7] to-[#FFF6DC]/40 px-4 py-8 text-center sm:px-8 sm:py-10">
                      <h2 className="mb-2 font-serif text-xl tracking-tight text-[#101724] sm:text-3xl">
                        {t.booking.signInRequiredTitle}
                      </h2>
                      <p className="mx-auto mb-6 max-w-md text-sm leading-relaxed text-[#6B665F] sm:mb-8 sm:text-base">
                        {t.booking.signInRequiredSubtitle}
                      </p>
                      <button
                        type="button"
                        onClick={handleGoogleSignInForBooking}
                        className="mx-auto flex w-full max-w-md min-h-[52px] touch-manipulation items-center justify-center gap-3 rounded-2xl border border-[#EDE6D9] bg-white px-4 py-4 text-base font-semibold text-[#101724] shadow-sm transition hover:border-[#c99a2e]/40 hover:bg-[#FFFCF7] active:scale-[0.985] sm:px-5"
                      >
                        <GoogleIcon className="h-5 w-5 shrink-0" />
                        <span className="text-left leading-snug">{t.auth.customer.signInWithGoogle}</span>
                      </button>
                    </div>
                  ) : (
                    <>
                      <div className="mb-5 flex items-center gap-3 rounded-2xl border border-[#c99a2e]/25 bg-gradient-to-r from-[#FFF6DC] to-[#FFFCF7] px-3 py-3 sm:mb-6 sm:px-4">
                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#101724] text-sm font-bold text-white">
                          {(customerEmail ?? '?').charAt(0).toUpperCase()}
                        </div>
                        <div className="min-w-0">
                          <p className="text-xs font-semibold uppercase tracking-wide text-[#8f6b22]">
                            {t.booking.signedInAs}
                          </p>
                          <p className="truncate text-sm font-medium text-[#101724]">{customerEmail ?? ''}</p>
                        </div>
                      </div>

                      <h2 className="mb-2 font-serif text-xl tracking-tight sm:text-3xl">{t.booking.formTitle}</h2>
                      <p className="mb-6 text-sm text-[#6B665F] sm:mb-8 sm:text-base">
                        {booking.bookingMode === 'event'
                          ? eventsCopy.formSubtitleEvent
                          : eventsCopy.formSubtitleTable}
                      </p>

                    <form onSubmit={handleContinue} className="space-y-6">
                      {/* Location */}
                      <div>
                        <label htmlFor="location" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">{t.booking.locationLabel}</label>
                        <div className="relative">
                          <MapPin className="pointer-events-none absolute start-4 top-4 z-10 h-5 w-5 text-[#B38B4D]" />
                          <select
                            id="location"
                            name="location"
                            value={booking.location}
                            onChange={handleBookingChange}
                            required
                            className="w-full cursor-pointer appearance-none rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-10 text-[17px] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                          >
                            <option value="">{t.booking.locationPlaceholder}</option>
                            {locationOptions.map((opt) => (
                              <option key={opt.value} value={opt.value}>{opt.label}</option>
                            ))}
                          </select>
                          <div className="pointer-events-none absolute end-4 top-4 text-[#B38B4D]">▾</div>
                        </div>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        {/* Date */}
                        <div>
                          <label htmlFor="date" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">{t.booking.dateLabel}</label>
                          <div className="relative">
                            <Calendar className="pointer-events-none absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
                            <input
                              id="date"
                              name="date"
                              type="date"
                              value={booking.date}
                              onChange={handleBookingChange}
                              min={new Date().toISOString().split('T')[0]}
                              required
                              className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-4 text-[17px] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                            />
                          </div>
                        </div>

                        {/* Time */}
                        <div>
                          <label htmlFor="time" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">{t.booking.timeLabel}</label>
                          <div className="relative">
                            <Clock className="pointer-events-none absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
                            <input
                              id="time"
                              name="time"
                              type="time"
                              value={booking.time}
                              onChange={handleBookingChange}
                              required
                              className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-4 text-[17px] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                            />
                          </div>
                        </div>
                      </div>

                      {/* Guests */}
                      <div>
                        <label htmlFor="guests" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">{t.booking.guestsLabel}</label>
                        <div className="relative">
                          <Users className="pointer-events-none absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
                          <select
                            id="guests"
                            name="guests"
                            value={booking.guests}
                            onChange={handleBookingChange}
                            required
                            className="w-full cursor-pointer appearance-none rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-10 text-[17px] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                          >
                            <option value="">Select</option>
                            {guestOptions.map((n) => (
                              <option key={n} value={n}>
                                {booking.bookingMode === 'event' ? `${n} guests` : n}
                              </option>
                            ))}
                          </select>
                          <div className="pointer-events-none absolute end-4 top-4 text-[#B38B4D]">▾</div>
                        </div>
                      </div>

                      {/* Name */}
                      <div>
                        <label htmlFor="name" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">{t.booking.nameLabel}</label>
                        <div className="relative">
                          <User className="pointer-events-none absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
                          <input
                            id="name"
                            name="name"
                            type="text"
                            value={booking.name}
                            onChange={handleBookingChange}
                            placeholder={t.booking.namePlaceholder}
                            required
                            className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                          />
                        </div>
                      </div>

                      {/* Phone */}
                      <div>
                        <label htmlFor="phone" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">{t.booking.phoneLabel}</label>
                        <div className="relative">
                          <Phone className="pointer-events-none absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
                          <input
                            id="phone"
                            name="phone"
                            type="tel"
                            value={booking.phone}
                            onChange={handleBookingChange}
                            placeholder={t.booking.phonePlaceholder}
                            required
                            className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                          />
                        </div>
                      </div>

                      {/* Email */}
                      <div>
                        <label htmlFor="email" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">{t.booking.emailLabel}</label>
                        <div className="relative">
                          <Mail className="pointer-events-none absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
                          <input
                            id="email"
                            name="email"
                            type="email"
                            value={booking.email}
                            onChange={handleBookingChange}
                            placeholder={t.booking.emailPlaceholder}
                            readOnly={Boolean(customerEmail)}
                            className={`w-full rounded-2xl border border-[#EDE6D9] py-4 ps-12 pe-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20 ${
                              customerEmail ? 'bg-[#F8F5F0]/80 text-[#6B665F] cursor-default' : 'bg-[#F8F5F0]'
                            }`}
                          />
                        </div>
                      </div>

                      {/* Notes */}
                      <div>
                        <label htmlFor="notes" className="mb-2 block text-sm font-semibold tracking-wide text-[#6B665F]">{t.booking.notesLabel}</label>
                        <div className="relative">
                          <MessageCircle className="pointer-events-none absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
                          <textarea
                            id="notes"
                            name="notes"
                            value={booking.notes}
                            onChange={handleBookingChange}
                            placeholder={t.booking.notesPlaceholder}
                            rows={3}
                            className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20 resize-y"
                          />
                        </div>
                      </div>

                      <button
                        type="submit"
                        className="btn-primary mt-2 flex w-full items-center justify-center gap-3 rounded-2xl py-4 text-base font-semibold tracking-[0.5px] active:scale-[0.985] transition"
                      >
                        {t.booking.continueBtn}
                        <ArrowRight className="h-5 w-5" />
                      </button>
                    </form>
                    </>
                  )}
                  </div>

                  {/* Pre-Order Menu Section - revealed after form */}
                  <AnimatePresence>
                    {showMenu && isAuthenticated && (
                      <motion.div
                        id="preorder-menu"
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0 }}
                        className="rounded-3xl border border-[#EDE6D9] bg-white p-6 sm:p-8 shadow-xl md:p-10"
                      >
                        <h2 className="text-2xl sm:text-3xl tracking-tight font-serif mb-2">{t.booking.menuTitle}</h2>
                        <p className="text-[#6B665F] mb-6">{t.booking.menuSubtitle}</p>

                        {/* Search */}
                        <div className="relative mb-6">
                          <Search className="pointer-events-none absolute start-4 top-4 h-5 w-5 text-[#B38B4D]" />
                          <input
                            type="text"
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                            placeholder={t.booking.searchPlaceholder}
                            className="w-full rounded-2xl border border-[#EDE6D9] bg-[#F8F5F0] py-4 ps-12 pe-4 text-[17px] placeholder:text-[#8A8478] transition-all outline-none focus:border-[#B38B4D] focus:bg-white focus:ring-1 focus:ring-[#B38B4D]/20"
                          />
                        </div>

                        {/* Dishes Grid - improved visualization: Name, Poster below, Desc under poster, price, nice Add button */}
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-h-[320px] sm:max-h-[420px] overflow-auto pr-2">
                          {filteredDishes.length > 0 ? (
                            filteredDishes.map((dish) => {
                              const posterSrc = getMenuPosterSrc(dish);
                              const dishName = getMenuItemName(language, dish);
                              const dishDescription = getMenuItemDescription(language, t, dish);
                              const shortDesc = dishDescription
                                ? (dishDescription.length > 80 ? dishDescription.slice(0, 80) + '...' : dishDescription)
                                : '';
                              const isAdded = preOrder.some((p) => p.id === dish.id);
                              return (
                                <motion.div
                                  key={dish.id}
                                  whileHover={{ y: -2, boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)" }}
                                  className="flex flex-col border border-[#EDE6D9] rounded-2xl p-3 bg-white hover:border-[#B38B4D]/50 transition-all overflow-hidden"
                                  onMouseEnter={() => playHoverSound()}
                                >
                                  {/* Item Name */}
                                  <div className="font-semibold tracking-[-0.3px] text-base mb-1 text-[#2C2A26] line-clamp-1">{dishName}</div>

                                  {/* Poster under name */}
                                  <div className="relative w-full h-24 sm:h-28 md:h-32 rounded-xl overflow-hidden border border-[#EDE6D9] mb-2 bg-[#F8F5F0]">
                                    <img
                                      src={posterSrc}
                                      alt={dishName}
                                      className="absolute inset-0 w-full h-full object-cover"
                                      loading="lazy"
                                      onError={(e) => {
                                        applyNextImageFallback(
                                          e.target as HTMLImageElement,
                                          getMenuPosterCandidates(dish),
                                          (e.target as HTMLImageElement).src
                                        );
                                      }}
                                    />
                                    <div className="absolute inset-0 bg-gradient-to-b from-black/5 via-transparent to-black/10" />
                                  </div>

                                  {/* Description under the poster */}
                                  <div className="text-xs text-[#6B665F] leading-snug mb-2 flex-1 line-clamp-2">{shortDesc}</div>

                                  <div className="flex items-center justify-between mt-auto pt-1">
                                    <span className="text-[#B38B4D] font-semibold text-sm tabular-nums leading-tight text-right">
                                      {dish.pricing === 'weight' ? (
                                        <>
                                          <span className="block">{dish.pricePerHalfKg} kr / ½ kg</span>
                                          <span className="block text-xs text-[#8A8478]">{dish.pricePerKg} {t.menu.perKg}</span>
                                        </>
                                      ) : (
                                        <span>{dish.price} kr</span>
                                      )}
                                    </span>
                                    {/* Improved graphics for add button */}
                                    <button
                                      onClick={() => {
                                        playAddSound();
                                        addToPreOrder(dish);
                                      }}
                                      className={`flex items-center gap-1.5 rounded-full px-4 py-2.5 text-xs font-semibold shadow-sm active:scale-[0.96] transition-all min-h-[44px] touch-manipulation ${
                                        isAdded 
                                          ? "bg-[#3F5C4A] text-white hover:bg-[#2a4033]" 
                                          : "bg-[#B38B4D] text-white hover:bg-[#8f6b22] hover:shadow-md"
                                      }`}
                                    >
                                      <Plus className="h-3.5 w-3.5" />
                                      {isAdded ? "Add More" : t.booking.addToPreOrder}
                                    </button>
                                  </div>
                                </motion.div>
                              );
                            })
                          ) : (
                            <p className="text-[#6B665F] col-span-full text-center py-8">No dishes match your search.</p>
                          )}
                        </div>

                        {/* Pre-Order Summary */}
                        <div className="mt-8 border-t border-[#EDE6D9] pt-6">
                          <h3 className="font-semibold tracking-wide mb-4 flex items-center gap-2">{t.booking.yourPreOrder} <span className="text-xs text-[#B38B4D] font-normal">({preOrder.length})</span></h3>

                          {preOrder.length === 0 ? (
                            <p className="text-sm text-[#6B665F] italic">{t.booking.emptyPreOrder}</p>
                          ) : (
                            <div className="space-y-3 mb-4">
                              {preOrder.map((item) => {
                                const dishInfo = allDishes.find((d) => d.id === item.id);
                                const thumb = dishInfo ? getMenuPosterSrc(dishInfo) : SITE_ASSETS.fallbacks.logo;
                                return (
                                  <div key={item.id} className="flex items-center gap-3 bg-[#F8F5F0] rounded-2xl px-3 py-2">
                                    {/* Small poster thumbnail in summary for better visualization */}
                                    <img 
                                      src={thumb} 
                                      alt={localizeOrderLineName(language, item)} 
                                      className="w-10 h-10 object-cover rounded-lg border border-[#EDE6D9] flex-shrink-0" 
                                    />
                                    <div className="flex-1 min-w-0">
                                      <div className="font-medium text-sm truncate">{localizeOrderLineName(language, item)}</div>
                                      <div className="text-[10px] text-[#6B665F]">
                                        {item.pricingMode === 'weight'
                                          ? `${item.pricePerHalfKg ?? item.price} kr / ½ kg · ${formatLineQuantityLabel(item)}`
                                          : `${item.price} kr × ${item.quantity}`}
                                        {' '}= {calculateLineTotal(item)} kr
                                      </div>
                                    </div>
                                    <div className="flex items-center gap-1 flex-shrink-0">
                                      <button onClick={() => updatePreOrderQty(item.id, item.quantity - 1)} className="min-w-11 min-h-11 flex items-center justify-center border border-[#EDE6D9] rounded-lg text-sm hover:bg-white active:bg-white active:scale-95 touch-manipulation">-</button>
                                      <span className="min-w-10 text-center font-medium text-sm tabular-nums">
                                        {formatLineQuantityLabel(item)}
                                      </span>
                                      <button onClick={() => updatePreOrderQty(item.id, item.quantity + 1)} className="min-w-11 min-h-11 flex items-center justify-center border border-[#EDE6D9] rounded-lg text-sm hover:bg-white active:bg-white active:scale-95 touch-manipulation">+</button>
                                      <button onClick={() => removeFromPreOrder(item.id)} className="ml-1 text-[#B38B4D] hover:text-red-600 p-0.5 active:scale-95"><X className="h-4 w-4" /></button>
                                    </div>
                                  </div>
                                );
                              })}
                            </div>
                          )}

                          <div className="flex justify-between text-lg font-medium border-t border-[#EDE6D9] pt-4">
                            <span>{t.booking.total}</span>
                            <span>{getPreOrderTotal()} kr</span>
                          </div>

                          <button
                            onClick={handleSendInquiry}
                            disabled={!validateForm()}
                            className="mt-6 w-full py-4 rounded-2xl text-base font-semibold tracking-[0.5px] flex items-center justify-center gap-3 bg-gradient-to-r from-[#B38B4D] via-[#c99a2e] to-[#B38B4D] text-white shadow-lg hover:brightness-105 active:brightness-95 active:scale-[0.985] transition-all disabled:opacity-60 disabled:cursor-not-allowed disabled:brightness-100"
                          >
                            {t.booking.sendInquiry}
                            <MessageCircle className="h-5 w-5" />
                          </button>
                          <p className="mt-3 text-center text-[11px] text-[#8A8478]">{t.booking.inquiryNote}</p>
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
              </div>
            ) : (
              /* Success State */
              <div className="max-w-4xl mx-auto">
              <motion.div
                initial={{ opacity: 0, scale: 0.98 }}
                animate={{ opacity: 1, scale: 1 }}
                className="max-w-md mx-auto text-center py-12"
              >
                <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-[#B38B4D]/10">
                  <CheckCircle className="h-10 w-10 text-[#B38B4D]" />
                </div>
                <h2 className="text-2xl sm:text-3xl md:text-4xl tracking-tight font-serif mb-4 break-words">{t.booking.successTitle}</h2>
                <p className="text-[#6B665F] mb-8 leading-relaxed">{t.booking.successMessage}</p>

                <div className="flex flex-col sm:flex-row gap-3 justify-center">
                  <button onClick={editBooking} className="btn-outline px-8 py-3 rounded-full text-sm font-medium">
                    {t.booking.editBooking}
                  </button>
                  <button onClick={resetAll} className="btn-primary px-8 py-3 rounded-full text-sm font-medium">
                    {t.booking.backHome}
                  </button>
                </div>
              </motion.div>
              </div>
            )}
          </AnimatePresence>
        </div>
      </main>

      <Footer />
    </div>
  );
}