import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Icons } from './landing/constants';
import MapBg from '../assets/images/hyper_intelligence_bg_image.jpg';
import IntelligenceSidePanel from './dashboard/IntelligenceSidePanel';

// Updated with Residential & Commercial mix
const hotspots = [
    {
        id: 1,
        top: '45%',
        left: '65%',
        address: 'Preston Royal Village',
        type: 'Commercial',
        problem: 'Roof Membrane Uplift',
        gain: '+$8.5M Value',
        weather: 'Hail Expected',
        status: 'Urgent',
        specs: { built: '1998', maintenance: '5 years since last coating' },
        management: { name: 'Sterling Properties', contact: 'Sign in for contact details' },
        photos: [
            { id: 1, url: '/assets/images/properties/Warehouse_Roof_Aerial.jpg', caption: 'Warehouse Roof Aerial' },
            { id: 2, url: '/assets/images/properties/Office_Roof_Top_View.jpg', caption: 'Office Roof Top' }
        ]
    },
    {
        id: 2,
        top: '28%',
        left: '42%',
        address: 'Highland Park Place',
        type: 'Commercial',
        problem: 'Critical Membrane Failure',
        gain: '$22.5 Million',
        weather: 'Clear',
        status: 'Monitoring',
        specs: { built: '1982', maintenance: '20 years since last roof replacement permit' },
        management: { name: 'Goldman Group', contact: 'Sign in for contact details' },
        photos: [
            { id: 3, url: '/assets/images/properties/Mall_Rooftop_HVAC_Units.jpg', caption: 'Rooftop HVAC Units' }
        ]
    },
    {
        id: 3,
        top: '55%',
        left: '25%',
        address: '4200 Beverly Dr',
        type: 'Residential',
        problem: 'Severe Hail Impact',
        gain: '$1.1M',
        weather: 'Rain Soon',
        status: 'Action Required',
        specs: { roofSize: '62 sq Roof', eventHistory: '8 years since last known hail event' },
        owner: { fico: '715', profile: 'Early Adopter / Long-term value' },
        photos: [
            { id: 4, url: '/assets/images/properties/Hail_Damaged_Shingles.jpg', caption: 'Hail Damage Close-up' },
            { id: 5, url: '/assets/images/properties/Broken_Roof_Surface.jpg', caption: 'Broken Surface' }
        ]
    },
    {
        id: 4,
        top: '70%',
        left: '48%',
        address: '3505 Lexington Ave',
        type: 'Residential',
        problem: 'Asphalt Shingle Loss',
        gain: '+$950k Home',
        weather: 'Windy',
        status: 'Low Priority',
        specs: { roofSize: '45 sq Roof', eventHistory: 'High Wind Zone' },
        owner: { fico: '680', profile: 'First-time Buyer' },
        photos: [
            { id: 6, url: '/assets/images/properties/Cracked_Asphalt_Shingles.jpg', caption: 'Cracked Shingles' },
            { id: 7, url: '/assets/images/properties/Curled_Aging_Shingles.jpg', caption: 'Aging Shingles' }
        ]
    },
];

const IntelligenceMap = () => {
    const navigate = useNavigate();
    const [activeSpot, setActiveSpot] = useState(null);
    const [showRescheduleDialog, setShowRescheduleDialog] = useState(false);

    useEffect(() => {
        // Simulate incoming weather alert
        const timer = setTimeout(() => {
            setShowRescheduleDialog(true);
        }, 2500);
        return () => clearTimeout(timer);
    }, []);

    return (
        <section className="py-24 bg-gray-900 border-t border-white/5 relative overflow-hidden">
            <div className="container mx-auto px-4 relative z-10">
                <div className="mb-12 text-center max-w-4xl mx-auto">
                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-400/10 border border-cyan-400/20 mb-4">
                        <div className="w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse"></div>
                        <span className="text-cyan-400 text-xs font-mono font-bold uppercase tracking-widest">Live CRM Data Feed</span>
                    </div>
                    <h2 className="text-3xl md:text-5xl font-heading font-bold text-white mb-6">Hyper-Local Sales Intelligence</h2>
                    <p className="text-gray-400 text-lg max-w-2xl mx-auto">
                        Our systems overlay live NOAA weather data with property value insights. Maximize revenue by targeting neighborhoods directly in the storm path.
                    </p>
                </div>

                {/* Map Container Frame */}
                <div className="relative w-full h-[650px] bg-black rounded-2xl border border-white/20 shadow-2xl overflow-hidden group isolate ring-1 ring-white/10">

                    {/* Map Background - DFW Satellite Style */}
                    <div className="absolute inset-0 bg-[#0f172a]">
                        {/* Aerial/Satellite View of a Grid City */}
                        <img
                            src={MapBg}
                            alt="DFW Metroplex Map Overlay"
                            className="w-full h-full object-cover opacity-60 mix-blend-luminosity hover:scale-105 transition-transform duration-[20s]"
                        />

                        {/* Map Grid Overlay */}
                        <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
                        <div className="absolute inset-0 bg-grid-pattern opacity-10 bg-[length:40px_40px] border-t border-white/5"></div>

                        {/* Region Indicator - HUD Style */}
                        <div className="absolute top-6 left-6 z-30">
                            <div className="bg-slate-900/80 backdrop-blur-md text-white pl-4 pr-6 py-2 rounded-r-lg border-l-4 border-cyan-400 shadow-[0_0_15px_rgba(0,229,255,0.2)] flex items-center gap-3">
                                <div>
                                    <div className="text-[10px] text-cyan-400 font-bold uppercase tracking-widest mb-0.5">Active Region</div>
                                    <div className="font-heading font-bold text-lg leading-none">DFW Zone 2</div>
                                </div>
                            </div>
                        </div>

                        {/* Weather Overlay Widget */}
                        <div className="absolute top-0 right-0 w-full h-full bg-gradient-to-bl from-slate-900/80 via-transparent to-transparent pointer-events-none"></div>
                        <div className="absolute top-6 right-6 p-4 bg-black/60 backdrop-blur-md rounded-lg border border-white/10 max-w-xs z-30">
                            <div className="flex items-center gap-4">
                                <div className="bg-white/10 p-2 rounded-full text-white">
                                    <span className="text-2xl">⛈</span>
                                </div>
                                <div>
                                    <div className="font-bold text-white text-sm">Severe Hail Watch</div>
                                    <div className="text-xs text-cyan-400 animate-pulse">Approaching Tarrant County</div>
                                    <div className="text-[10px] text-gray-500 font-mono mt-1">ETA: 15 MINS</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Interactive Pins */}
                    {hotspots.map((spot) => (
                        <div
                            key={spot.id}
                            className="absolute group/pin z-20 cursor-pointer"
                            style={{ top: spot.top, left: spot.left }}
                            onClick={() => setActiveSpot(spot)}
                        >
                            {/* Radar Ripple Effect */}
                            <div className={`absolute -inset-4 rounded-full animate-ping opacity-75 ${spot.type === 'Commercial' ? 'bg-purple-500/20' : 'bg-cyan-400/20'}`}></div>

                            {/* Price Tag Pin */}
                            <div className="relative flex flex-col items-center transform group-hover/pin:scale-110 transition-transform duration-200">
                                <div className={`bg-slate-900/90 backdrop-blur text-[10px] font-mono font-bold px-2 py-1 rounded border shadow-[0_0_10px_rgba(0,0,0,0.5)] whitespace-nowrap mb-1 opacity-0 group-hover/pin:opacity-100 transition-opacity ${spot.type === 'Commercial' ? 'text-purple-400 border-purple-400/30' : 'text-cyan-400 border-cyan-400/30'}`}>
                                    {spot.gain}
                                </div>

                                {/* Pin Head */}
                                <div className={`w-3 h-3 rounded-full border-2 border-white shadow-lg relative z-10 ${spot.type === 'Commercial' ? 'bg-purple-500 shadow-[0_0_15px_rgba(168,85,247,0.6)]' : 'bg-cyan-400 shadow-[0_0_15px_rgba(0,229,255,0.6)]'}`}></div>

                                {/* Pin Line */}
                                <div className="w-[1px] h-8 bg-gradient-to-b from-white to-transparent opacity-50"></div>

                                {/* Ground Shadow */}
                                <div className="absolute bottom-0 w-6 h-1.5 bg-black/60 blur-sm rounded-[100%] translate-y-1"></div>
                            </div>
                        </div>
                    ))}

                    {/* Reschedule Dialog Overlay */}
                    {showRescheduleDialog && (
                        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 md:left-8 md:translate-x-0 z-50 w-[90%] md:w-96">
                            <div className="bg-white/95 backdrop-blur-xl rounded-xl shadow-2xl p-6 border-l-4 border-red-600 animate-[slideUp_0.5s_ease-out]">
                                <div className="flex justify-between items-start mb-3">
                                    <div className="flex items-center gap-3">
                                        <div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center text-red-600 font-bold text-lg">!</div>
                                        <div>
                                            <h4 className="font-bold text-slate-900 text-sm uppercase tracking-wide">Schedule Conflict</h4>
                                        </div>
                                    </div>
                                    <button onClick={() => setShowRescheduleDialog(false)} className="text-gray-400 hover:text-black">✕</button>
                                </div>

                                <p className="text-gray-600 text-sm mb-4 leading-relaxed">
                                    <strong>Heavy rainfall expected in Plano at 2:00 PM.</strong> <br />
                                    This conflicts with the inspection at <span className="text-slate-900 font-semibold">Legacy West</span>.
                                </p>

                                <div className="flex gap-3">
                                    <button onClick={() => navigate('/login')} className="flex-1 bg-slate-900 text-white text-xs font-bold py-2.5 rounded hover:bg-slate-800 transition-colors uppercase tracking-wider">
                                        Reschedule
                                    </button>
                                    <button onClick={() => setShowRescheduleDialog(false)} className="flex-1 bg-gray-100 text-gray-600 text-xs font-bold py-2.5 rounded hover:bg-gray-200 transition-colors uppercase tracking-wider">
                                        Dismiss
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Right Sidebar Panel (Glass Detail View) */}
                    {activeSpot && (
                        <IntelligenceSidePanel
                            data={activeSpot}
                            onClose={() => setActiveSpot(null)}
                        />
                    )}

                </div>
            </div>

            <style>{`
        @keyframes slideUp {
          from { opacity: 0; transform: translate(-50%, 20px); }
          to { opacity: 1; transform: translate(-50%, 0); }
        }
        @media (min-width: 768px) {
           @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
          } 
        }
      `}</style>
        </section>
    );
};

export default IntelligenceMap;