'use client';

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { MapPin, Factory, Zap, CheckCircle2, ArrowUpRight } from 'lucide-react';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
import { Location, defaultLocations, minorLocations } from '@/lib/map-data';
import { useLocale } from 'next-intl';

const allLocations = [...defaultLocations, ...minorLocations];

interface Stat {
  value: string;
  suffix?: string;
  label: string;
}

interface InteractiveGermanyMapProps {
  badge?: string;
  title?: React.ReactNode;
  description?: string;
  stats?: Stat[];
  locations?: Location[];
  isHero?: boolean;
}

export function InteractiveGermanyMap({
  badge = 'Einsatzgebiete',
  title = <>Deutschlandweit<br/>für Sie im Einsatz.</>,
  description = 'Von unseren strategischen Standorten in Guben und Bülstedt steuern und realisieren wir komplexe Infrastrukturprojekte im gesamten Bundesgebiet.',
  stats = [
    { value: '100', suffix: '%', label: 'Überregionale Reichweite' },
    { value: '2', suffix: '+', label: 'Operative Standorte' },
  ],
  locations = allLocations,
  isHero = false
}: InteractiveGermanyMapProps) {
  const [activeLocation, setActiveLocation] = useState<Location | null>(null);
  const router = useRouter();
  const locale = useLocale();

  const hq = locations.find((l) => l.type === 'hq');
  const branch = locations.find((l) => l.type === 'branch');
  const projects = locations.filter((l) => l.type === 'project');
  const minorNodes = locations.filter((l) => l.type === 'minor_node');

  return (
    <div className={isHero ? "relative w-full" : "relative w-full max-w-7xl mx-auto py-16 md:py-24 px-4 sm:px-6 mt-16 md:mt-20"}>
      <div className={`bg-[#050B14] ${isHero ? 'pt-32 pb-16 md:pt-40 md:pb-24' : 'rounded-[2.5rem] md:rounded-[3.5rem] shadow-2xl border border-white/5'} overflow-visible relative group/map`}>
        {/* Animated Border Glow */}
        {!isHero && <AnimatedGlossyBorder opacity={0.7} className="z-30" />}
        
        {/* Background Effects */}
        <div className={`absolute inset-0 bg-gradient-to-br from-[#050B14] via-[#0A1322] to-[#050B14] ${!isHero && 'rounded-[2.5rem] md:rounded-[3.5rem]'} overflow-hidden`} />
        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[120px] pointer-events-none translate-x-1/3 -translate-y-1/3 overflow-hidden" />
        
        <div className={`relative z-10 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-12 gap-12 items-center min-h-[600px] ${isHero ? 'max-w-7xl mx-auto px-4 sm:px-6' : 'p-8 md:p-12 lg:p-16'}`}>
          
          {/* Content Left */}
          <div className="xl:col-span-5 text-white z-20">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider mb-8">
              <MapPin className="w-4 h-4" />
              <span>{badge}</span>
            </div>
            
            {isHero ? (
              <h1 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 break-words [hyphens:auto]">
                {title}
              </h1>
            ) : (
              <h3 className="font-heading text-4xl lg:text-5xl xl:text-6xl font-extrabold mb-6 leading-[1.1] text-transparent bg-clip-text bg-gradient-to-r from-white to-white/70 break-words [hyphens:auto]">
                {title}
              </h3>
            )}
            
            <p className="text-white/60 text-lg mb-12 leading-relaxed">
              {description}
            </p>

            {/* Industrial Stats Grid */}
            <div className="grid grid-cols-2 gap-4">
              {stats.map((stat, i) => (
                <div key={i} className="bg-white/5 border border-white/10 rounded-2xl p-6 backdrop-blur-md relative overflow-hidden group">
                  <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                  <div className="relative z-10">
                    <div className="text-4xl font-extrabold text-white mb-1 flex items-baseline gap-1">
                      {stat.value}<span className="text-xl text-primary">{stat.suffix}</span>
                    </div>
                    <div className="text-sm text-white/50 font-medium">{stat.label}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Map Right */}
          <div className="xl:col-span-7 relative flex items-center justify-center min-h-[500px] lg:min-h-[700px] z-10 pointer-events-none">
            {/* Map Container - Enforce strict aspect ratio matching the SVG (1024x1024) */}
            <div className="relative w-full max-w-[600px] aspect-square group pointer-events-auto">
              
              {/* Map SVG */}
              <div className="absolute inset-0 opacity-[0.25] mix-blend-screen drop-shadow-2xl brightness-200 pointer-events-none">
                <Image
                  src="/germany-map.svg"
                  alt={locale === 'en' ? "Map of Germany" : "Deutschlandkarte"}
                  fill
                  className="object-cover"
                  priority
                />
              </div>

              {/* Minor Location Markers (The 100+ generic projects) */}
              {locations.filter(l => l.type === 'minor_node').map((loc, idx) => (
                <div
                  key={`minor-${idx}`}
                  className="absolute z-10 group/minor cursor-pointer w-10 h-10 flex items-center justify-center"
                  style={{
                    left: `${loc.x}%`,
                    top: `${loc.y}%`,
                    transform: 'translate(-50%, -50%)',
                  }}
                  onMouseEnter={() => setActiveLocation(loc)}
                  onMouseLeave={() => setActiveLocation(null)}
                >
                  <div className="w-1.5 h-1.5 bg-primary/80 rounded-full group-hover/minor:bg-white group-hover/minor:scale-150 transition-all duration-300" />
                  <div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
                </div>
              ))}

              {/* Major & Reference Location Markers (HQ, Branch, Project) */}
              {locations.filter(l => l.type !== 'minor_node').map((loc, idx) => {
                const isHQ = loc.type === 'hq';
                const isBranch = loc.type === 'branch';
                const isActive = activeLocation?.id === loc.id;

                return (
                  <div
                    key={loc.id}
                    className={`absolute transform -translate-x-1/2 -translate-y-1/2 group/pin cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20'}`}
                    style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
                    onMouseEnter={() => setActiveLocation(loc)}
                    onMouseLeave={() => setActiveLocation(null)}
                    onClick={() => {
                      if (loc.href) router.push(loc.href);
                    }}
                  >
                    {/* Ping Animation for HQ / Branch */}
                    {(isHQ || isBranch) && (
                      <div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
                    )}

                    {/* Elegant Marker Dot */}
                    <motion.div
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      transition={{ type: 'spring', delay: idx * 0.1 }}
                      className={`relative flex items-center justify-center rounded-full shadow-[0_0_20px_rgba(130,237,32,0.6)] transition-transform duration-300 ${
                        isActive ? 'scale-125 z-30 ring-4 ring-primary/40' : 'scale-100 group-hover/pin:scale-110'
                      } ${
                        isHQ || isBranch
                          ? 'w-7 h-7 bg-primary text-[#050B14]'
                          : 'w-4 h-4 bg-white ring-[3px] ring-primary'
                      }`}
                    >
                      {(isHQ || isBranch) && <MapPin className="w-4 h-4" />}
                    </motion.div>
                  </div>
                );
              })}

              {/* Global Tooltip */}
              <AnimatePresence>
                {activeLocation && (
                  <motion.div
                    key="tooltip"
                    initial={{ opacity: 0, y: 10, scale: 0.95 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={{ opacity: 0, y: 10, scale: 0.95 }}
                    transition={{ duration: 0.2 }}
                    className="absolute z-[9999] pointer-events-none"
                    style={{
                      left: `${activeLocation.x}%`,
                      top: `${activeLocation.y}%`,
                      transform: activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
                    }}
                  >
                    <div className="bg-[#050B14]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl min-w-[200px] w-max max-w-[300px] text-white overflow-hidden">
                      
                      {activeLocation.featuredImage && (
                        <div className="relative w-full h-32 bg-neutral-900">
                          <Image
                            src={activeLocation.featuredImage}
                            alt={activeLocation.name}
                            fill
                            className="object-cover"
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-[#050B14] to-transparent opacity-90" />
                        </div>
                      )}

                      <div className="p-4">
                        <div className="flex items-center gap-2 mb-1">
                          <MapPin className="w-3.5 h-3.5 text-primary" />
                          <span className="text-xs font-bold text-primary uppercase tracking-wider">
                            {activeLocation.type === 'hq' ? 'Hauptsitz' : 
                             activeLocation.type === 'branch' ? 'Niederlassung' : 
                             activeLocation.type === 'minor_node' ? 'Projekt' : 'Referenz'}
                          </span>
                        </div>
                        <div className="font-heading font-bold text-lg leading-tight mb-2">
                          {activeLocation.name}
                        </div>
                        {activeLocation.type !== 'minor_node' ? (
                          <div className="text-white/60 text-sm line-clamp-3 mb-3">
                            {activeLocation.description}
                          </div>
                        ) : (
                          <div className="text-white/60 text-xs mb-3">
                            {activeLocation.description === 'wind' ? 'Errichtung Leitungstrassen & Netzanbindung für Windpark-Infrastruktur.' :
                             activeLocation.description === 'pv' ? 'Bau von Mittelspannungstrassen zur Einspeisung der PV-Anlage.' :
                             activeLocation.description === 'fiber' ? 'Komplexer FTTx Breitbandausbau inkl. LWL-Montage & Tiefbau.' :
                             activeLocation.description === 'power' ? '110kV Hochspannungstrasse Erdkabelverlegung.' :
                             activeLocation.description === 'battery' ? 'Infrastrukturausbau für BESS (Batteriespeicher).' :
                             'Komplexes Infrastrukturprojekt (Tiefbau & HDD).'}
                          </div>
                        )}
                        
                        {(activeLocation.details || activeLocation.type === 'minor_node') && (
                          <ul className="mb-3 space-y-1.5 border-t border-white/10 pt-3">
                            {activeLocation.type === 'minor_node' ? (
                              <>
                                <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
                                  <span>{
                                    activeLocation.description === 'wind' ? 'Netzanbindung Windpark' :
                                    activeLocation.description === 'pv' ? 'Einspeisung PV-Anlage' :
                                    activeLocation.description === 'fiber' ? 'FTTx Infrastruktur' :
                                    activeLocation.description === 'power' ? '110kV Trasse' :
                                    activeLocation.description === 'battery' ? 'BESS Anschluss' : 'Infrastrukturprojekt'
                                  }</span>
                                </li>
                                <li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
                                  <span>Tiefbau & Spülbohrung (HDD)</span>
                                </li>
                              </>
                            ) : (
                              activeLocation.details?.map((detail, i) => (
                                <li key={i} className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
                                  <CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
                                  <span>{detail}</span>
                                </li>
                              ))
                            )}
                          </ul>
                        )}

                        {activeLocation.href && (
                          <div className="inline-flex items-center text-xs font-bold text-primary">
                            {locale === 'en' ? 'Learn more' : 'Zum Projekt'}
                            <ArrowUpRight className="w-3.5 h-3.5 ml-1" />
                          </div>
                        )}
                      </div>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}