import React, { useState } from 'react';
import { Navbar } from './components/Navbar';
import { Hero } from './components/Hero';
import { VisualReferenceShowcase } from './components/VisualReferenceShowcase';
import { YachtDeckTour } from './components/YachtDeckTour';
import { VesselSpecifications } from './components/VesselSpecifications';
import { CateringAndBar } from './components/CateringAndBar';
import { WaterToys } from './components/WaterToys';
import { ItinerariesMap } from './components/ItinerariesMap';
import { LocationSection } from './components/LocationSection';
import { BookingCalculator } from './components/BookingCalculator';
import { SocialClub } from './components/SocialClub';
import { ReviewsAndPress } from './components/ReviewsAndPress';
import { YachtGallery } from './components/YachtGallery';
import { MatterportViewerModal } from './components/MatterportViewerModal';
import { GroupSplitModal } from './components/GroupSplitModal';
import { StoryModal } from './components/StoryModal';
import { BookingModal } from './components/BookingModal';
import { AiConcierge } from './components/AiConcierge';
import { AudioVibePlayer } from './components/AudioVibePlayer';
import { Footer } from './components/Footer';
import { CHARTER_PACKAGES } from './data/yachtData';

export default function App() {
  const [audioPlaying, setAudioPlaying] = useState(false);
  
  // Modals & Active States
  const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
  const [isSplitModalOpen, setIsSplitModalOpen] = useState(false);
  const [isAiConciergeOpen, setIsAiConciergeOpen] = useState(false);
  const [is3DModalOpen, setIs3DModalOpen] = useState(false);
  const [activeStoryId, setActiveStoryId] = useState<string | null>(null);

  const handleOpenBooking = () => {
    setIsBookingModalOpen(true);
  };

  // Booking details passed between calculator & modal
  const [currentBookingData, setCurrentBookingData] = useState<any>({
    package: CHARTER_PACKAGES[0],
    guests: 30,
    date: (() => {
      const d = new Date();
      d.setDate(d.getDate() + 14);
      return d.toISOString().split('T')[0];
    })(),
    departure: 'Central Pier 9',
    addOns: [],
    baseCharterTotal: 28800,
    addOnsTotal: 0,
    grandTotal: 28800,
    perPersonTotal: 960,
    specialRequests: ''
  });

  const [splitPartyDetails, setSplitPartyDetails] = useState<any>({
    packageName: CHARTER_PACKAGES[0].title,
    date: 'Upcoming Charter',
    guests: 30,
    totalAmount: 28800,
    perPerson: 960
  });

  const toggleAudio = () => {
    setAudioPlaying(prev => !prev);
  };

  const handleOpen3DView = () => {
    const el = document.getElementById('3d-space-section');
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' });
    } else {
      setIs3DModalOpen(true);
    }
  };

  const handleCalculatorComplete = (summary: any) => {
    setCurrentBookingData(summary);
    setIsBookingModalOpen(true);
  };

  const handleOpenSplitModalWithDetails = (partyDetails: any) => {
    setSplitPartyDetails(partyDetails);
    setIsSplitModalOpen(true);
  };

  const handleBookMixerTicket = (event: any) => {
    setCurrentBookingData({
      package: {
        title: `Public Mixer Sail: ${event.title}`,
        duration: event.time,
        basePriceHKD: event.pricePerTicketHKD,
        baseGuests: 1,
        extraGuestHKD: 0,
        maxGuests: 45
      },
      guests: 1,
      date: event.date,
      departure: event.departure,
      addOns: [],
      baseCharterTotal: event.pricePerTicketHKD,
      addOnsTotal: 0,
      grandTotal: event.pricePerTicketHKD,
      perPersonTotal: event.pricePerTicketHKD,
      specialRequests: `Mixer event RSVP: ${event.theme} (DJ: ${event.djLineup})`
    });
    setIsBookingModalOpen(true);
  };

  const handleSelectRouteForBooking = (routeName: string) => {
    setCurrentBookingData((prev: any) => ({
      ...prev,
      specialRequests: `Preferred Itinerary Route: ${routeName}`
    }));
    const el = document.getElementById('calculator');
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleSelectMenu = (menuName: string) => {
    setCurrentBookingData((prev: any) => ({
      ...prev,
      specialRequests: `${prev.specialRequests ? prev.specialRequests + ' | ' : ''}Menu Selection: ${menuName}`
    }));
    const el = document.getElementById('calculator');
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleAddToyToBooking = (toyName: string) => {
    setCurrentBookingData((prev: any) => ({
      ...prev,
      specialRequests: `${prev.specialRequests ? prev.specialRequests + ' | ' : ''}Requested Water Toy: ${toyName}`
    }));
    const el = document.getElementById('calculator');
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleSelectDeckForBooking = (deckId: string) => {
    setCurrentBookingData((prev: any) => ({
      ...prev,
      specialRequests: `${prev.specialRequests ? prev.specialRequests + ' | ' : ''}Deck Focus: ${deckId}`
    }));
    const el = document.getElementById('calculator');
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleAiPlanApplied = (plan: any) => {
    const pkg = CHARTER_PACKAGES.find(p => p.id === plan.packageId) || CHARTER_PACKAGES[0];
    setCurrentBookingData((prev: any) => ({
      ...prev,
      package: pkg,
      guests: plan.guests || 30
    }));
    const el = document.getElementById('calculator');
    if (el) {
      el.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div className="min-h-screen bg-[#080e18] text-slate-100 selection:bg-amber-400 selection:text-slate-950 font-sans">
      
      {/* Background Synthesizer Vibe Audio */}
      <AudioVibePlayer isPlaying={audioPlaying} />

      {/* Main Reference-Matching Luxury Navigation */}
      <Navbar
        onOpenBooking={handleOpenBooking}
        onOpenSplitModal={() => setIsSplitModalOpen(true)}
        onOpenAiConcierge={() => setIsAiConciergeOpen(true)}
        onOpen3DView={handleOpen3DView}
        audioPlaying={audioPlaying}
        toggleAudio={toggleAudio}
      />

      <main>
        {/* 1. Top-down Aerial Drone Hero with Top-Left Logo */}
        <Hero
          onOpenBooking={handleOpenBooking}
          onOpen3DView={handleOpen3DView}
        />

        {/* 2. Reference Visual Showcase (Flybridge, Matterport 3D, Aft Dining, Slate Cards, Bow Overview) */}
        <VisualReferenceShowcase
          onOpen3DView={handleOpen3DView}
          onOpenBooking={handleOpenBooking}
        />

        {/* 3. Multi-Deck Architectural Walkthrough */}
        <YachtDeckTour
          onSelectDeckForBooking={handleSelectDeckForBooking}
        />

        {/* 4. Official Vessel Specifications & Feature Overview */}
        <VesselSpecifications
          onOpenBooking={handleOpenBooking}
        />

        {/* 5. Hospitality, Marble Bar & Aft Teak Dining */}
        <CateringAndBar
          onSelectMenu={handleSelectMenu}
        />

        {/* 6. Premium Water Toys & Ocean Pool Fleet */}
        <WaterToys
          onAddToyToBooking={handleAddToyToBooking}
        />

        {/* 7. Hong Kong Scenic Routes & Itineraries Map */}
        <ItinerariesMap
          onSelectRouteForBooking={handleSelectRouteForBooking}
        />

        {/* 8. Official Aberdeen Mooring & Pier Pickup Location */}
        <LocationSection
          onOpenBooking={handleOpenBooking}
        />

        {/* 9. Instant Live Quotation & Booking Calculator */}
        <div id="calculator">
          <BookingCalculator
            onCompleteBooking={handleCalculatorComplete}
            onOpenSplitModalWithDetails={handleOpenSplitModalWithDetails}
            initialPackageId={currentBookingData.package?.id}
            initialGuests={currentBookingData.guests}
            initialDate={currentBookingData.date}
          />
        </div>

        {/* 10. Social Club, Community Feed & Public Mixer Charters */}
        <SocialClub
          onOpenStory={(storyId) => setActiveStoryId(storyId)}
          onBookMixerTicket={handleBookMixerTicket}
          onOpenSplitModal={() => setIsSplitModalOpen(true)}
        />

        {/* 11. Client Reviews & Corporate Trust */}
        <ReviewsAndPress />

        {/* 12. Authentic Yacht Photography Gallery with Lightbox */}
        <div id="gallery">
          <YachtGallery />
        </div>
      </main>

      {/* Luxury Footer with Pier Directory & FAQs */}
      <Footer
        onOpenBooking={handleOpenBooking}
        onOpenSplitModal={() => setIsSplitModalOpen(true)}
        onOpenAiConcierge={() => setIsAiConciergeOpen(true)}
      />

      {/* Matterport 3D Space Interactive Virtual Tour Modal */}
      <MatterportViewerModal
        isOpen={is3DModalOpen}
        onClose={() => setIs3DModalOpen(false)}
        onOpenBooking={handleOpenBooking}
      />

      {/* Booking Enquiry Modal */}
      <BookingModal
        isOpen={isBookingModalOpen}
        onClose={() => setIsBookingModalOpen(false)}
        bookingData={currentBookingData}
      />

      {/* Group Split Cost Modal */}
      <GroupSplitModal
        isOpen={isSplitModalOpen}
        onClose={() => setIsSplitModalOpen(false)}
        initialPartyDetails={splitPartyDetails}
      />

      {/* Story Reels Modal */}
      <StoryModal
        storyId={activeStoryId}
        onClose={() => setActiveStoryId(null)}
        onBookExperience={() => setIsBookingModalOpen(true)}
      />

      {/* AI Charter Concierge Drawer */}
      <AiConcierge
        isOpen={isAiConciergeOpen}
        onClose={() => setIsAiConciergeOpen(false)}
        onApplyPlanToBooking={handleAiPlanApplied}
      />

    </div>
  );
}