import React, { useState } from 'react';
import { ITINERARY_ROUTES } from '../data/yachtData';
import { 
  Compass, 
  MapPin, 
  Clock, 
  Sparkles, 
  Anchor, 
  ArrowRight, 
  Waves, 
  Sun, 
  Sunset,
  CheckCircle2
} from 'lucide-react';

interface ItinerariesMapProps {
  onSelectRouteForBooking: (routeName: string) => void;
}

export const ItinerariesMap: React.FC<ItinerariesMapProps> = ({ onSelectRouteForBooking }) => {
  const [activeRouteId, setActiveRouteId] = useState<string>('sai-kung-paradise');

  const activeRoute = ITINERARY_ROUTES.find(r => r.id === activeRouteId) || ITINERARY_ROUTES[0];

  return (
    <section id="itineraries" className="py-24 bg-[#0a0f1b] border-t border-white/5 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Header */}
        <div className="text-center max-w-3xl mx-auto space-y-4 mb-16">
          <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-slate-900 border border-white/10 text-slate-300 text-xs font-semibold uppercase tracking-wider font-mono">
            <Compass className="w-3.5 h-3.5 text-amber-400" />
            <span>Hong Kong Island & Archipelago Itineraries</span>
          </div>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
            Curated <span className="text-amber-400 font-serif-luxury font-normal">Cruising Routes</span>
          </h2>
          <p className="text-slate-400 text-base sm:text-lg font-light leading-relaxed">
            From the turquoise secluded lagoons of Sai Kung to the evening skyline glow of Victoria Harbour, each voyage is charted for scenic stability and luxury anchorages.
          </p>
        </div>

        {/* Interactive Route Navigation Cards */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-10">
          {ITINERARY_ROUTES.map((route) => {
            const isSelected = route.id === activeRouteId;
            return (
              <button
                key={route.id}
                onClick={() => setActiveRouteId(route.id)}
                className={`p-4 rounded-2xl border text-left transition-all duration-200 ${
                  isSelected
                    ? 'bg-slate-900 border-amber-400 shadow-lg'
                    : 'bg-slate-950/60 border-white/10 hover:border-white/20 hover:bg-slate-900/40'
                }`}
              >
                <div className="flex items-center justify-between mb-2">
                  <span className={`text-[10px] font-mono uppercase tracking-wider ${isSelected ? 'text-amber-400 font-bold' : 'text-slate-400'}`}>
                    {route.vibe}
                  </span>
                  {isSelected && <Anchor className="w-4 h-4 text-amber-400" />}
                </div>
                <h3 className="text-sm font-bold text-white mb-1">
                  {route.name}
                </h3>
                <p className="text-xs text-slate-400 line-clamp-1 font-mono">
                  {route.cruisingTime}
                </p>
              </button>
            );
          })}
        </div>

        {/* Active Route Deep-Dive Presentation */}
        <div className="rounded-3xl overflow-hidden border border-white/15 bg-slate-900 shadow-2xl">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-0">
            
            {/* Visual Route Showcase with Real Yacht Photo */}
            <div className="lg:col-span-7 relative min-h-[380px] sm:min-h-[460px] overflow-hidden bg-slate-950">
              <img
                src={activeRoute.image}
                alt={activeRoute.name}
                className="w-full h-full object-cover filter brightness-95"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/30 to-transparent" />

              {/* Waypoints list on image */}
              <div className="absolute bottom-4 left-4 right-4 p-4 rounded-2xl bg-slate-950/90 backdrop-blur-md border border-white/10">
                <span className="text-[10px] font-mono uppercase tracking-wider text-slate-400 block mb-2">
                  Key Anchorage Stops & Waypoints:
                </span>
                <div className="flex flex-wrap gap-2">
                  {activeRoute.stops.map((stop, i) => (
                    <span key={i} className="px-2.5 py-1 rounded-lg bg-slate-900 border border-white/10 text-slate-200 text-xs font-mono">
                      ⚓ {stop}
                    </span>
                  ))}
                </div>
              </div>
            </div>

            {/* Description & Route Action */}
            <div className="lg:col-span-5 p-6 sm:p-8 flex flex-col justify-between space-y-6 bg-slate-900">
              <div className="space-y-4">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-950 border border-white/10 text-amber-400 text-xs font-mono">
                  <Waves className="w-3.5 h-3.5 text-amber-400" />
                  <span>{activeRoute.vibe}</span>
                </div>

                <h3 className="text-2xl font-bold text-white">
                  {activeRoute.name}
                </h3>

                <p className="text-xs text-amber-300/90 font-medium">
                  {activeRoute.tagline}
                </p>

                <p className="text-sm text-slate-300 leading-relaxed font-light">
                  {activeRoute.description}
                </p>

                <div className="p-4 rounded-2xl bg-slate-950 border border-white/10 space-y-1.5">
                  <span className="text-[10px] font-mono uppercase tracking-wider text-slate-400 block">
                    Recommended Atmosphere:
                  </span>
                  <p className="text-xs text-slate-200 font-medium">
                    {activeRoute.bestFor}
                  </p>
                </div>
              </div>

              <button
                onClick={() => onSelectRouteForBooking(activeRoute.name)}
                className="w-full py-3.5 px-5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-bold text-xs uppercase tracking-wider transition-all flex items-center justify-center gap-2"
              >
                <span>Charter This Route Aboard Entourage</span>
                <ArrowRight className="w-4 h-4 text-slate-950" />
              </button>
            </div>

          </div>
        </div>

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