import React, { useState } from 'react';
import { 
  X, 
  RotateCw, 
  ChevronLeft, 
  ChevronRight,
  Info,
  ExternalLink
} from 'lucide-react';
import { REAL_YACHT_PHOTOS, BOOKING_FORM_URL } from '../data/yachtData';

interface MatterportViewerModalProps {
  isOpen: boolean;
  onClose: () => void;
  onOpenBooking: () => void;
}

interface DeckHotspot {
  id: string;
  name: string;
  deck: string;
  image: string;
  description: string;
  features: string[];
}

export const MatterportViewerModal: React.FC<MatterportViewerModalProps> = ({
  isOpen,
  onClose,
  onOpenBooking
}) => {
  const [activeDeckIndex, setActiveDeckIndex] = useState(0);
  const [rotationAngle, setRotationAngle] = useState(0);
  const [showInfo, setShowInfo] = useState(true);

  if (!isOpen) return null;

  const deckViews: DeckHotspot[] = [
    {
      id: 'saloon-bar',
      name: 'Main Saloon & Illuminated Marble Bar',
      deck: 'Main Deck (Interior)',
      image: REAL_YACHT_PHOTOS.saloonMarbleBar,
      description: 'Air-conditioned luxury saloon with curved backlit onyx marble bar, brass high-top stools, cobalt blue banquettes, and surround Pioneer DJ integration.',
      features: ['Backlit Onyx Marble', '5 Brass Stools', 'Full Marine A/C', 'Pioneer DJ Hub']
    },
    {
      id: 'upper-flybridge',
      name: 'Upper Sky Lounge & Blue Canopy',
      deck: 'Upper Deck (Exterior)',
      image: REAL_YACHT_PHOTOS.flybridgeLounge,
      description: 'Panoramic elevated flybridge with signature deep blue sun canopy, turquoise sunbeds with slate pillows, and 360-degree ocean view vantage point.',
      features: ['Navy Bimini Canopy', 'Double Sunbeds', 'Elevated Helm', '360° Panorama']
    },
    {
      id: 'aft-dining',
      name: 'Aft Deck Teak Dining Banquet',
      deck: 'Main Deck (Stern)',
      image: REAL_YACHT_PHOTOS.aftDiningTable,
      description: 'Solid 10-seater teak dining table set with custom orange stemware and stainless champagne cooler, sheltered by the upper deck overhang.',
      features: ['10-Seater Solid Teak', 'Alfresco Dining', 'Champagne Station', 'Harbour Vistas']
    },
    {
      id: 'bow-lounge',
      name: 'Bow Foredeck Cocktail Lounge',
      deck: 'Foredeck (Bow)',
      image: REAL_YACHT_PHOTOS.bowLoungeClose,
      description: 'Sun-drenched front deck featuring turquoise banquettes, orange accent pillows, fluted solid teak cocktail cubes, and ocean horizon views.',
      features: ['Turquoise Banquettes', 'Fluted Teak Tables', 'Sunbathing Area', 'Bow Horizon']
    },
    {
      id: 'saloon-aft-view',
      name: 'Saloon Panoramic Vista & Stairs',
      deck: 'Main Deck Looking Upper',
      image: REAL_YACHT_PHOTOS.saloonViewAft,
      description: 'Spacious transition between the indoor saloon and the upper deck staircase, framed by floor-to-ceiling glass windows.',
      features: ['Floor-to-Ceiling Glass', 'Staircase Access', 'Lounge Sofas', 'Night Glow']
    }
  ];

  const currentView = deckViews[activeDeckIndex];

  const handleNext = () => {
    setActiveDeckIndex((prev) => (prev + 1) % deckViews.length);
  };

  const handlePrev = () => {
    setActiveDeckIndex((prev) => (prev - 1 + deckViews.length) % deckViews.length);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 bg-slate-950/95 backdrop-blur-xl animate-fadeIn">
      <div className="relative w-full max-w-6xl h-[90vh] bg-[#1e2a38] border border-[#517e8a]/30 rounded-3xl overflow-hidden shadow-2xl flex flex-col">
        
        {/* Top Header Bar */}
        <div className="px-4 sm:px-6 py-3 bg-[#2b3b4e] border-b border-[#517e8a]/20 flex items-center justify-between z-20">
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-[#1e2a38] border border-[#517e8a]/40 text-[#517e8a] text-xs font-mono">
              <span className="w-2 h-2 rounded-full bg-[#e17f52] animate-ping"></span>
              <span className="font-bold">3D SPACE TOUR</span>
            </div>
            <div className="hidden sm:block">
              <span className="text-white text-sm font-semibold">{currentView.name}</span>
              <span className="text-slate-300 text-xs font-mono ml-2">({currentView.deck})</span>
            </div>
          </div>

          <div className="flex items-center gap-2 sm:gap-4">
            {/* Matterport Badge */}
            <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-[#1e2a38] border border-[#517e8a]/30 text-slate-300 text-[11px] font-mono">
              <svg className="w-3.5 h-3.5 text-white" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
              </svg>
              <span>Matterport 3D</span>
            </div>

            <button
              onClick={() => setShowInfo(!showInfo)}
              className={`p-2 rounded-xl text-xs font-medium border transition-colors ${
                showInfo ? 'bg-[#e17f52] text-white border-[#e17f52]' : 'bg-[#1e2a38] text-slate-300 border-[#517e8a]/30'
              }`}
              title="Toggle Area Specs"
            >
              <Info className="w-4 h-4" />
            </button>

            <button
              onClick={onClose}
              className="p-2 rounded-xl bg-[#1e2a38] hover:bg-[#2b3b4e] text-slate-300 hover:text-white border border-[#517e8a]/30 transition-colors cursor-pointer"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* 3D Panoramic Canvas / Visual Stage */}
        <div className="relative flex-1 bg-slate-950 overflow-hidden flex items-center justify-center">
          
          {/* Main Visual with Smooth Pan Effect */}
          <div 
            className="w-full h-full relative transition-transform duration-700 ease-out"
            style={{ transform: `scale(1.05) rotate(${rotationAngle}deg)` }}
          >
            <img
              src={currentView.image}
              alt={currentView.name}
              className="w-full h-full object-cover select-none filter brightness-95"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-slate-950/40" />
          </div>

          {/* Interactive Navigation Arrows */}
          <button
            onClick={handlePrev}
            className="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-[#1e2a38]/80 hover:bg-[#2b3b4e] text-white border border-[#517e8a]/30 flex items-center justify-center shadow-xl transition-all hover:scale-110 active:scale-95 cursor-pointer"
            title="Previous Space"
          >
            <ChevronLeft className="w-6 h-6" />
          </button>

          <button
            onClick={handleNext}
            className="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-[#1e2a38]/80 hover:bg-[#2b3b4e] text-white border border-[#517e8a]/30 flex items-center justify-center shadow-xl transition-all hover:scale-110 active:scale-95 cursor-pointer"
            title="Next Space"
          >
            <ChevronRight className="w-6 h-6" />
          </button>

          {/* Floating Information Card */}
          {showInfo && (
            <div className="absolute bottom-20 left-4 right-4 sm:right-auto sm:left-6 sm:max-w-md p-5 rounded-2xl bg-[#2b3b4e]/95 backdrop-blur-md border border-[#e17f52]/40 text-white shadow-2xl animate-fadeIn">
              <div className="flex items-center justify-between mb-2">
                <span className="text-[10px] uppercase font-mono tracking-widest text-[#517e8a]">
                  {currentView.deck}
                </span>
                <span className="text-xs font-bold text-[#e17f52] font-mono">
                  Space {activeDeckIndex + 1} of {deckViews.length}
                </span>
              </div>
              <h3 className="text-lg font-bold text-white mb-1.5 font-heading">
                {currentView.name}
              </h3>
              <p className="text-xs text-slate-100 leading-relaxed mb-3 font-light">
                {currentView.description}
              </p>
              <div className="flex flex-wrap gap-1.5 pt-2 border-t border-[#517e8a]/30">
                {currentView.features.map((feat, idx) => (
                  <span key={idx} className="px-2 py-0.5 rounded-md bg-[#1e2a38]/80 text-[10px] text-slate-200 font-mono border border-[#517e8a]/20">
                    ✓ {feat}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Rotate / Pan Control */}
          <div className="absolute top-4 right-4 flex items-center gap-2">
            <button
              onClick={() => setRotationAngle(r => (r === 0 ? 2 : 0))}
              className="px-3 py-1.5 rounded-xl bg-[#1e2a38]/80 hover:bg-[#2b3b4e] text-slate-300 text-xs font-mono border border-[#517e8a]/30 flex items-center gap-1.5 transition-colors cursor-pointer"
            >
              <RotateCw className="w-3.5 h-3.5 text-[#517e8a]" />
              <span>360° Pan</span>
            </button>
          </div>
        </div>

        {/* Bottom Deck Switcher Strip */}
        <div className="p-3 sm:p-4 bg-[#2b3b4e] border-t border-[#517e8a]/20 flex items-center justify-between gap-4 overflow-x-auto">
          <div className="flex items-center gap-2 sm:gap-3">
            {deckViews.map((view, idx) => {
              const isCurrent = idx === activeDeckIndex;
              return (
                <button
                  key={view.id}
                  onClick={() => setActiveDeckIndex(idx)}
                  className={`flex items-center gap-2 px-3 py-2 rounded-xl border text-left transition-all shrink-0 cursor-pointer ${
                    isCurrent
                      ? 'bg-[#1e2a38] border-[#e17f52] text-white shadow-lg'
                      : 'bg-[#2b3b4e]/80 border-[#517e8a]/30 text-slate-300 hover:text-white hover:bg-[#1e2a38]'
                  }`}
                >
                  <img
                    src={view.image}
                    alt={view.name}
                    className="w-8 h-8 rounded-lg object-cover border border-[#517e8a]/20"
                  />
                  <div className="text-left">
                    <div className="text-[11px] font-bold text-white line-clamp-1">{view.name}</div>
                    <div className="text-[9px] text-[#517e8a] uppercase font-mono">{view.deck}</div>
                  </div>
                </button>
              );
            })}
          </div>

          <button
            onClick={() => {
              onClose();
              onOpenBooking();
            }}
            className="px-5 py-2.5 rounded-xl bg-[#e17f52] hover:bg-[#ea8e64] text-white font-bold text-xs uppercase tracking-wider shrink-0 transition-colors shadow-lg shadow-[#e17f52]/20 cursor-pointer inline-flex items-center gap-1.5"
          >
            <span>Enquire For Charter</span>
          </button>
        </div>

      </div>
    </div>
  );
};