import { useState, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  ChevronRight, MapPin, ZoomIn, ZoomOut, Maximize2, Minimize2,
  Download, Compass, Layers, Building2, CheckCircle2, Sparkles, X, Target
} from 'lucide-react';
import SectionTitle from '@/components/SectionTitle/SectionTitle';
import { CAMPUS_LOCATIONS } from '@/constants';
import * as LucideIcons from 'lucide-react';
import { Link } from 'react-router-dom';

interface LocationSpot {
  name: string;
  x: number; // percentage
  y: number; // percentage
  category: string;
  desc: string;
  area: string;
}

const BLUEPRINT_LEGEND = [
  { id: 'all', label: 'All Locations', color: '#F97316', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-300' },
  { id: 'a-block', label: 'A Block', color: '#60A5FA', bg: 'bg-blue-50/80', text: 'text-blue-900', border: 'border-blue-200' },
  { id: 'b-block', label: 'B Block', color: '#93C5FD', bg: 'bg-blue-50/60', text: 'text-blue-900', border: 'border-blue-200' },
  { id: 'c-block', label: 'C Block', color: '#BFDBFE', bg: 'bg-blue-50/40', text: 'text-blue-900', border: 'border-blue-200' },
  { id: 'admin', label: 'Admin / Facility', color: '#FDBA74', bg: 'bg-orange-50/80', text: 'text-orange-950', border: 'border-orange-200' },
  { id: 'hostel', label: 'Hostel / Mess', color: '#C084FC', bg: 'bg-purple-50/80', text: 'text-purple-950', border: 'border-purple-200' },
  { id: 'lab', label: 'Lab / Academic', color: '#FDE047', bg: 'bg-yellow-50/80', text: 'text-yellow-950', border: 'border-yellow-200' },
  { id: 'amenity', label: 'Amenity', color: '#BEF264', bg: 'bg-lime-50/80', text: 'text-lime-950', border: 'border-lime-200' },
  { id: 'parking', label: 'Parking Area', color: '#94A3B8', bg: 'bg-slate-100/80', text: 'text-slate-900', border: 'border-slate-300' },
  { id: 'green', label: 'Green Area', color: '#4ADE80', bg: 'bg-emerald-50/80', text: 'text-emerald-950', border: 'border-emerald-200' },
];

const LOCATION_SPOTS: LocationSpot[] = [
  { name: 'Girls Hostel', x: 8.2, y: 12.0, category: 'Hostel / Mess', desc: 'Residential Quarter for Women', area: 'Top Left' },
  { name: 'Playground', x: 32.5, y: 19.5, category: 'Amenity', desc: 'Main Sports & Athletic Field', area: 'Top Left' },
  { name: 'Canteen', x: 63.5, y: 13.5, category: 'Amenity', desc: 'Food Court & Refreshments', area: 'North Center' },
  { name: 'Statue', x: 61.0, y: 26.0, category: 'Amenity', desc: 'Landmark Monument', area: 'North Center' },
  { name: 'Boys Mess', x: 87.8, y: 10.5, category: 'Amenity', desc: 'Ground Floor Dining', area: 'Top Right' },
  { name: 'Staff Mess', x: 87.8, y: 22.0, category: 'Amenity', desc: 'First Floor Dining', area: 'Top Right' },
  { name: 'C Block', x: 87.8, y: 41.0, category: 'C Block', desc: 'Labs, Classrooms, Auditorium & Staff Rooms', area: 'East Block' },
  { name: 'Steve Jobs Block', x: 8.1, y: 38.5, category: 'Admin / Facility', desc: 'Auditorium, Labs & Staff Rooms', area: 'West Wing' },
  { name: 'Girls Mess', x: 8.1, y: 53.0, category: 'Amenity', desc: 'Dedicated Dining Hall for Women', area: 'West Wing' },
  { name: 'EPL Lab', x: 8.1, y: 65.5, category: 'Lab / Academic', desc: 'Engineering Practices Laboratory', area: 'South West' },
  { name: 'B Block', x: 32.5, y: 55.0, category: 'B Block', desc: 'Labs, Classrooms & Faculty Rooms', area: 'Central West' },
  { name: 'Hut', x: 62.7, y: 42.5, category: 'Amenity', desc: 'Student Discussion & Rest Area', area: 'Central Green' },
  { name: 'A Block', x: 70.3, y: 67.0, category: 'A Block', desc: 'Labs, Classrooms, Faculty Rooms, Principal Room & Exam Cell', area: 'Central East' },
  { name: 'RSB Block', x: 24.0, y: 81.5, category: 'Amenity', desc: 'Library, Auditorium & Accounts Room', area: 'South West' },
  { name: 'Side Parking', x: 5.5, y: 85.5, category: 'Parking Area', desc: 'Visitor & Staff Parking Zone', area: 'South West' },
  { name: 'Arcade', x: 41.5, y: 72.8, category: 'Amenity', desc: 'Student Hub & Stores', area: 'South Central' },
  { name: 'Security Booth', x: 45.9, y: 88.5, category: 'Amenity', desc: 'Main Gate Security Checkpoint', area: 'South Entrance' },
  { name: 'Parking Area', x: 73.0, y: 86.0, category: 'Parking Area', desc: 'Two-Wheeler & Four-Wheeler Parking', area: 'South East' },
  { name: 'Main Entrance', x: 51.8, y: 92.5, category: 'Amenity', desc: 'Primary Campus Security Gate', area: 'South Entrance' },
];

const CATEGORY_MAP_SPOTS: Record<string, string[]> = {
  dept: ['A Block', 'B Block', 'C Block'],
  library: ['RSB Block'],
  labs: ['Steve Jobs Block', 'A Block', 'B Block', 'C Block', 'EPL Lab'],
  hostel: ['Girls Hostel'],
  canteen: ['Canteen', 'Staff Mess', 'Girls Mess', 'Boys Mess'],
  auditorium: ['Steve Jobs Block', 'C Block', 'RSB Block'],
  sports: ['Playground'],
};

export default function Campus() {
  const mapRef = useRef<HTMLDivElement>(null);

  const scrollToMap = () => {
    setTimeout(() => {
      mapRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 100);
  };

  // Interactive Map State
  const [zoomLevel, setZoomLevel] = useState(1);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [activeLegend, setActiveLegend] = useState<string>('all');
  const [activeCategory, setActiveCategory] = useState<string | null>(null);
  const [selectedFacility, setSelectedFacility] = useState<LocationSpot | null>(null);

  const currentMapSrc = '/map.png';

  const handleZoomIn = () => setZoomLevel((prev) => Math.min(prev + 0.25, 2.5));
  const handleZoomOut = () => setZoomLevel((prev) => Math.max(prev - 0.25, 0.75));
  const handleResetZoom = () => setZoomLevel(1);

  const handleDownload = () => {
    const link = document.createElement('a');
    link.href = currentMapSrc;
    link.download = 'RIT_Campus_Blueprint.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleCategoryClick = (catId: string) => {
    if (activeCategory === catId) {
      setActiveCategory(null);
    } else {
      setActiveCategory(catId);
      setSelectedFacility(null);
      scrollToMap();
    }
  };

  const highlightedSpotNames = new Set<string>();
  if (selectedFacility) {
    highlightedSpotNames.add(selectedFacility.name);
  } else if (activeCategory && CATEGORY_MAP_SPOTS[activeCategory]) {
    CATEGORY_MAP_SPOTS[activeCategory].forEach((name) => highlightedSpotNames.add(name));
  } else if (activeLegend !== 'all') {
    LOCATION_SPOTS.forEach((spot) => {
      if (activeLegend === 'a-block' && spot.category === 'A Block') highlightedSpotNames.add(spot.name);
      if (activeLegend === 'b-block' && spot.category === 'B Block') highlightedSpotNames.add(spot.name);
      if (activeLegend === 'c-block' && spot.category === 'C Block') highlightedSpotNames.add(spot.name);
      if (activeLegend === 'admin' && spot.category === 'Admin / Facility') highlightedSpotNames.add(spot.name);
      if (activeLegend === 'hostel' && spot.category === 'Hostel / Mess') highlightedSpotNames.add(spot.name);
      if (activeLegend === 'lab' && spot.category === 'Lab / Academic') highlightedSpotNames.add(spot.name);
      if (activeLegend === 'amenity' && spot.category === 'Amenity') highlightedSpotNames.add(spot.name);
      if (activeLegend === 'parking' && spot.category === 'Parking Area') highlightedSpotNames.add(spot.name);
      if (activeLegend === 'green' && spot.area.includes('Green')) highlightedSpotNames.add(spot.name);
    });
  }

  const filteredFacilities = LOCATION_SPOTS.filter((fac) => {
    if (activeLegend === 'all') return true;
    if (activeLegend === 'a-block') return fac.category === 'A Block';
    if (activeLegend === 'b-block') return fac.category === 'B Block';
    if (activeLegend === 'c-block') return fac.category === 'C Block';
    if (activeLegend === 'admin') return fac.category === 'Admin / Facility';
    if (activeLegend === 'hostel') return fac.category === 'Hostel / Mess';
    if (activeLegend === 'lab') return fac.category === 'Lab / Academic';
    if (activeLegend === 'amenity') return fac.category === 'Amenity';
    if (activeLegend === 'parking') return fac.category === 'Parking Area';
    if (activeLegend === 'green') return fac.area.includes('Green');
    return true;
  });

  return (
    <div className="min-h-screen relative overflow-hidden bg-[#FAFAFA]">
      <div className="relative z-10">
        {/* Header */}
        <div className="bg-white border-b border-[#E5E7EB] py-10">
          <div className="container-custom">
            <div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3">
              <Link to="/" className="hover:text-[#F97316]">Home</Link>
              <ChevronRight className="w-3 h-3" />
              <span className="text-[#F97316]">Campus Map</span>
            </div>
            <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
              Explore{' '}
              <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                Campus Map
              </span>
            </h1>
            <p className="text-[#475569] text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
              Navigate campus layout, click location categories or blocks to spot exact places on the blueprint.
            </p>
          </div>
        </div>

        <div className="container-custom py-8">
          <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
            {/* Map Viewer Header Bar */}
            <div ref={mapRef} className="bg-[#0F172A] rounded-t-3xl p-4 md:p-6 text-white border-b border-slate-800 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-orange-500/20 text-orange-400 text-xs font-semibold border border-orange-500/30">
                    <Sparkles className="w-3 h-3" /> Official Blueprint
                  </span>
                  <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-semibold border border-emerald-500/30">
                    <CheckCircle2 className="w-3 h-3" /> Interactive Location Spotter
                  </span>
                </div>
                <h2 className="text-xl md:text-2xl font-bold tracking-tight" style={{ fontFamily: 'Playfair Display, serif' }}>
                  Rajalakshmi Institute of Technology
                </h2>
                <p className="text-xs md:text-sm text-slate-400 flex items-center gap-1.5 mt-0.5">
                  <MapPin className="w-3.5 h-3.5 text-orange-400" />
                  Kuthambakkam, Chennai • Interactive Map Spotting Enabled
                </p>
              </div>

              {/* Toolbar Controls */}
              <div className="flex items-center flex-wrap gap-2">
                <div className="flex items-center bg-slate-800/80 rounded-xl p-1 border border-slate-700">
                  <button onClick={handleZoomOut} title="Zoom Out" className="p-2 text-slate-300 hover:text-white hover:bg-slate-700/60 rounded-lg transition-colors cursor-pointer">
                    <ZoomOut className="w-4 h-4" />
                  </button>
                  <button onClick={handleResetZoom} title="Reset Zoom" className="px-2 text-xs font-semibold text-orange-400 hover:text-orange-300 transition-colors cursor-pointer">
                    {Math.round(zoomLevel * 100)}%
                  </button>
                  <button onClick={handleZoomIn} title="Zoom In" className="p-2 text-slate-300 hover:text-white hover:bg-slate-700/60 rounded-lg transition-colors cursor-pointer">
                    <ZoomIn className="w-4 h-4" />
                  </button>
                </div>

                <button onClick={() => setIsFullscreen(true)} className="p-2 bg-slate-800/80 hover:bg-slate-700/80 text-slate-200 hover:text-white rounded-xl border border-slate-700 transition-colors cursor-pointer" title="Expand to Fullscreen">
                  <Maximize2 className="w-4 h-4" />
                </button>

                <button onClick={handleDownload} className="flex items-center gap-1.5 px-3 py-2 bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white text-xs font-semibold rounded-xl shadow-lg shadow-orange-500/20 transition-all cursor-pointer" title="Download Blueprint Image">
                  <Download className="w-3.5 h-3.5" />
                  Download
                </button>
              </div>
            </div>

            {/* Blueprint Main Canvas Container */}
            <div className="bg-[#0B1120] rounded-b-3xl border border-slate-800 overflow-hidden shadow-xl mb-8 relative">
              <div
                className="w-full flex items-center justify-center p-2 sm:p-4 md:p-6 overflow-auto relative cursor-grab active:cursor-grabbing"
                style={{
                  backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0)',
                  backgroundSize: '24px 24px',
                }}
              >
                <motion.div animate={{ scale: zoomLevel }} transition={{ type: 'spring', stiffness: 260, damping: 25 }} className="relative w-full flex items-center justify-center transition-transform duration-200">
                  <div className="relative w-full rounded-2xl overflow-hidden border border-slate-700/60 shadow-2xl bg-slate-950">
                    <img src={currentMapSrc} alt="Rajalakshmi Institute of Technology Campus Blueprint" className="w-full h-auto block object-cover" style={{ boxShadow: '0 20px 40px -10px rgba(0, 0, 0, 0.7)' }} />

                    {LOCATION_SPOTS.map((spot) => {
                      const isHighlighted = highlightedSpotNames.has(spot.name);
                      const isSelected = selectedFacility?.name === spot.name;

                      return (
                        <div key={spot.name} style={{ left: `${spot.x}%`, top: `${spot.y}%` }} className="absolute -translate-x-1/2 -translate-y-1/2 z-20 group cursor-pointer" onClick={() => setSelectedFacility(spot)}>
                          {isHighlighted && (
                            <motion.span initial={{ scale: 0.6, opacity: 0.8 }} animate={{ scale: [1, 2.2, 1], opacity: [0.8, 0, 0.8] }} transition={{ repeat: Infinity, duration: 1.8, ease: 'easeInOut' }} className="absolute inset-0 -m-3 rounded-full bg-orange-500/50 blur-xs pointer-events-none" />
                          )}
                          <motion.div whileHover={{ scale: 1.3 }} animate={isHighlighted ? { scale: [1, 1.25, 1] } : { scale: 1 }} transition={isHighlighted ? { repeat: Infinity, duration: 2 } : {}} className={`relative flex items-center justify-center p-1.5 rounded-full shadow-lg border transition-all ${isSelected ? 'bg-gradient-to-r from-orange-500 to-amber-500 border-white ring-4 ring-orange-500/40 text-white z-30' : isHighlighted ? 'bg-orange-500 border-white text-white ring-2 ring-orange-400/60 z-20' : 'bg-slate-900/80 border-slate-600 text-orange-400 hover:bg-orange-50 hover:text-white opacity-75 hover:opacity-100'}`}>
                            <MapPin className="w-4 h-4" />
                            <div className={`absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2.5 py-1 rounded-xl text-[11px] font-bold whitespace-nowrap shadow-xl border pointer-events-none transition-all ${isHighlighted || isSelected ? 'bg-slate-900 text-orange-400 border-orange-500/40 opacity-100 scale-100' : 'bg-slate-900/90 text-white border-slate-700 opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100'}`}>{spot.name}</div>
                          </motion.div>
                        </div>
                      );
                    })}
                  </div>
                </motion.div>
              </div>

              {/* Active Spotting Info Banner Overlay */}
              <div className="absolute bottom-4 left-4 right-16 flex items-center justify-between pointer-events-none">
                {activeCategory ? (
                  <div className="bg-orange-500/90 backdrop-blur-md px-4 py-2 rounded-2xl text-white text-xs font-semibold flex items-center gap-2 shadow-xl pointer-events-auto">
                    <Target className="w-4 h-4 animate-pulse text-white" />
                    <span>Spotting Category: <strong>{CAMPUS_LOCATIONS.find((c) => c.id === activeCategory)?.name}</strong> ({highlightedSpotNames.size} Locations)</span>
                    <button onClick={() => setActiveCategory(null)} className="ml-2 hover:opacity-75 cursor-pointer"><X className="w-3.5 h-3.5" /></button>
                  </div>
                ) : selectedFacility ? (
                  <div className="bg-slate-900/90 backdrop-blur-md px-4 py-2 rounded-2xl text-white text-xs font-semibold flex items-center gap-2 shadow-xl pointer-events-auto border border-orange-500/40">
                    <MapPin className="w-4 h-4 text-orange-400" />
                    <span>Spotted: <strong>{selectedFacility.name}</strong> ({selectedFacility.area})</span>
                    <button onClick={() => setSelectedFacility(null)} className="ml-2 hover:opacity-75 cursor-pointer"><X className="w-3.5 h-3.5" /></button>
                  </div>
                ) : (
                  <div className="bg-slate-900/90 backdrop-blur-md px-3.5 py-2 rounded-2xl border border-slate-700/60 text-slate-300 text-xs flex items-center gap-2 shadow-xl">
                    <Compass className="w-4 h-4 text-orange-400" />
                    <span className="font-medium text-white">Click any category below to spot on map</span>
                  </div>
                )}
              </div>
            </div>

            {/* Quick Location Categories Bar */}
            <div className="bg-white rounded-3xl border border-[#E5E7EB] p-6 md:p-8 mb-8 shadow-xs">
              <div className="flex items-center justify-between mb-5">
                <h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>Quick Location Categories</h3>
                {activeCategory && (
                  <button onClick={() => setActiveCategory(null)} className="text-xs font-semibold text-orange-500 hover:text-orange-600 flex items-center gap-1 cursor-pointer"><X className="w-3.5 h-3.5" /> Clear Spot Filter</button>
                )}
              </div>
              <div className="grid grid-cols-3 sm:grid-cols-7 gap-4">
                {CAMPUS_LOCATIONS.map((loc) => {
                  const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<any>>)[loc.icon];
                  const isCatActive = activeCategory === loc.id;
                  return (
                    <motion.button key={loc.id} whileHover={{ y: -3 }} whileTap={{ scale: 0.95 }} onClick={() => handleCategoryClick(loc.id)} className={`flex flex-col items-center gap-2.5 p-3 rounded-2xl transition-all border cursor-pointer group ${isCatActive ? 'border-orange-500 bg-orange-500 text-white shadow-lg ring-2 ring-orange-400/30' : 'border-transparent hover:border-[#FED7AA] hover:bg-orange-50/50'}`}>
                      <div className={`w-12 h-12 rounded-full flex items-center justify-center border transition-colors ${isCatActive ? 'bg-white text-orange-500 border-white' : 'bg-[#F8FAFC] group-hover:bg-orange-100 text-[#F97316] border-[#E5E7EB] group-hover:border-orange-300'}`}>
                        {Icon && <Icon className="w-5 h-5" />}
                      </div>
                      <span className={`text-[11px] font-semibold text-center leading-tight ${isCatActive ? 'text-white' : 'text-[#475569] group-hover:text-[#F97316]'}`} style={{ fontFamily: 'Inter, sans-serif' }}>{loc.name}</span>
                    </motion.button>
                  );
                })}
              </div>
            </div>

            {/* Blueprint Legend & Color Key */}
            <div className="bg-white rounded-3xl border border-[#E5E7EB] p-6 md:p-8 mb-8 shadow-xs">
              <div className="flex items-center gap-2 mb-5">
                <Layers className="w-5 h-5 text-[#F97316]" />
                <h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>Blueprint Map Legend</h3>
              </div>
              <div className="flex flex-wrap gap-3">
                {BLUEPRINT_LEGEND.map((item) => {
                  const isActive = activeLegend === item.id;
                  return (
                    <button key={item.id} onClick={() => { setActiveLegend(item.id); setActiveCategory(null); setSelectedFacility(null); scrollToMap(); }} className={`flex items-center gap-2.5 px-4 py-2 rounded-full border transition-all cursor-pointer ${isActive ? 'border-[#F97316] bg-orange-500 text-white shadow-md scale-105' : `${item.border} ${item.bg} ${item.text} hover:scale-105`}`}>
                      <span className="w-3.5 h-3.5 rounded-full shrink-0 shadow-xs border border-black/10" style={{ backgroundColor: isActive ? 'white' : item.color }} />
                      <span className="text-xs font-semibold" style={{ fontFamily: 'Inter, sans-serif' }}>{item.label}</span>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Blueprint Facilities Index */}
            <div className="bg-white rounded-3xl border border-[#E5E7EB] p-6 md:p-8 mb-8 shadow-xs">
              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 mb-6">
                <div>
                  <div className="flex items-center gap-2">
                    <Building2 className="w-5 h-5 text-[#F97316]" />
                    <h3 className="text-xl font-bold text-[#1E293B]" style={{ fontFamily: 'Playfair Display, serif' }}>Campus Blocks & Facilities Index</h3>
                  </div>
                  <p className="text-xs text-[#64748B] mt-1" style={{ fontFamily: 'Inter, sans-serif' }}>Click any facility card below to spot its exact location on the campus map image.</p>
                </div>
                <span className="text-xs font-semibold text-[#F97316] bg-orange-50 px-3.5 py-1.5 rounded-full border border-orange-200">{filteredFacilities.length} Locations Mapped</span>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {filteredFacilities.map((facility) => {
                  const isSelected = selectedFacility?.name === facility.name;
                  const isHighlighted = highlightedSpotNames.has(facility.name);
                  return (
                    <motion.button key={facility.name} whileHover={{ scale: 1.02, y: -2 }} whileTap={{ scale: 0.98 }} onClick={() => { if (isSelected) setSelectedFacility(null); else { setSelectedFacility(facility); setActiveCategory(null); scrollToMap(); } }} className={`text-left p-4 rounded-2xl border transition-all cursor-pointer ${isSelected ? 'border-[#F97316] bg-orange-500 text-white shadow-lg ring-2 ring-orange-400/40' : isHighlighted ? 'border-[#F97316] bg-orange-50/90 shadow-md' : 'border-[#E5E7EB] bg-[#F8FAFC] hover:bg-white hover:border-orange-200 hover:shadow-xs'}`}>
                      <div className="flex items-start justify-between gap-1 mb-1.5">
                        <span className={`text-sm font-bold ${isSelected ? 'text-white' : 'text-[#1E293B]'}`} style={{ fontFamily: 'Poppins, sans-serif' }}>{facility.name}</span>
                        <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full shrink-0 border ${isSelected ? 'bg-white/20 border-white/30 text-white' : 'bg-white border-[#E5E7EB] text-[#475569]'}`}>{facility.area}</span>
                      </div>
                      <p className={`text-xs line-clamp-1 ${isSelected ? 'text-orange-100' : 'text-[#64748B]'}`} style={{ fontFamily: 'Inter, sans-serif' }}>{facility.desc}</p>
                    </motion.button>
                  );
                })}
              </div>
            </div>

            {/* Fullscreen Lightbox Modal */}
            <AnimatePresence>
              {isFullscreen && (
                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col p-4 md:p-8">
                  <div className="flex items-center justify-between text-white mb-4">
                    <div className="flex items-center gap-3">
                      <MapPin className="w-5 h-5 text-orange-500" />
                      <h3 className="text-lg font-bold">RIT Campus Blueprint — Fullscreen Spotter</h3>
                    </div>
                    <button onClick={() => setIsFullscreen(false)} className="p-2 rounded-xl bg-white/10 hover:bg-white/20 text-white transition-colors cursor-pointer"><Minimize2 className="w-5 h-5" /></button>
                  </div>
                  <div className="flex-1 flex items-center justify-center overflow-auto p-2 relative">
                    <div className="relative inline-block max-w-full max-h-full">
                      <img src={currentMapSrc} alt="RIT Campus Blueprint Fullscreen" className="max-w-full max-h-full object-contain rounded-xl shadow-2xl block" />
                      {LOCATION_SPOTS.map((spot) => {
                        const isHighlighted = highlightedSpotNames.has(spot.name);
                        const isSelected = selectedFacility?.name === spot.name;
                        return (
                          <div key={`fs-${spot.name}`} style={{ left: `${spot.x}%`, top: `${spot.y}%` }} className="absolute -translate-x-1/2 -translate-y-1/2 z-20 group cursor-pointer" onClick={() => setSelectedFacility(spot)}>
                            <div className={`relative flex items-center justify-center p-1.5 rounded-full shadow-lg border transition-all ${isSelected ? 'bg-orange-500 border-white text-white ring-4 ring-orange-500/40 z-30 scale-125' : isHighlighted ? 'bg-orange-500 border-white text-white ring-2 ring-orange-400/60 z-20' : 'bg-slate-900/80 border-slate-600 text-orange-400 hover:bg-orange-50 hover:text-white'}`}>
                              <MapPin className="w-4 h-4" />
                              <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 px-2 py-0.5 rounded-lg text-[10px] font-bold whitespace-nowrap bg-slate-900 text-white border border-slate-700 opacity-0 group-hover:opacity-100 transition-opacity">{spot.name}</div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>
        </div>
      </div>
    </div>
  );
}