'use client';

import React, { useState, useRef, useCallback, useMemo } from 'react';
import { MapPin, ArrowUpRight } from 'lucide-react';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import dynamic from 'next/dynamic';
import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
import { Location, projectLocations } from '@/lib/map-data';
import { standorteLocations } from '@/lib/standorte-data';
import { useLocale, useTranslations } from 'next-intl';

const InteractiveMapPins = dynamic(() => import('./InteractiveMapPins'), {
  ssr: false,
});

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

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

const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => (
  <div
    className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
    style={{
      left: `${loc.x}%`,
      top: `${loc.y}%`,
      transform: 'translate(-50%, -50%)',
    }}
    onMouseEnter={() => onEnter(loc)}
    onMouseLeave={onLeave}
    onTouchStart={() => onEnter(loc)}
    onClick={() => onEnter(loc)}
  >
    <div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${isActive ? 'bg-white scale-150 shadow-[0_0_10px_rgba(130,237,32,1)]' : 'bg-primary/80 group-hover/minor:bg-white group-hover/minor:scale-150'}`} />
    <div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
  </div>
));
MinorNode.displayName = 'MinorNode';

const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: Location, isActive: boolean, idx: number, onEnter: (loc: Location) => void, onLeave: () => void }) => {
  const isHQ = loc.type === 'hq';
  const isBranch = loc.type === 'branch';
  return (
    <div
      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 hover:z-40'}`}
      style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
      onMouseEnter={() => onEnter(loc)}
      onMouseLeave={onLeave}
      onTouchStart={() => onEnter(loc)}
      onClick={() => onEnter(loc)}
    >
      {(isHQ || isBranch) && (
        <div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
      )}
      <m.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" />}
      </m.div>
    </div>
  );
});
MajorNode.displayName = 'MajorNode';

export function InteractiveGermanyMap({
  badge,
  title,
  description,
  stats,
  locations = projectLocations,
  isHero = false,
  hideStandorte = false
}: InteractiveGermanyMapProps) {
  const [activeLocation, setActiveLocation] = useState<Location | null>(null);
  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  const handleMouseEnter = useCallback((loc: Location) => {
    if (hoverTimeoutRef.current) {
      clearTimeout(hoverTimeoutRef.current);
      hoverTimeoutRef.current = null;
    }
    setActiveLocation(loc);
  }, []);

  const handleMouseLeave = useCallback(() => {
    const timeout = setTimeout(() => {
      setActiveLocation(null);
    }, 200);
    hoverTimeoutRef.current = timeout;
  }, []);

  const pathname = usePathname();
  const locale = useLocale();
  const t = useTranslations('InteractiveGermanyMap');
  const tStandard = useTranslations('StandardPage');

  const finalStats = stats || [
    { value: '100', suffix: '%', label: locale === 'en' ? 'Nationwide Reach' : 'Überregionale Reichweite' },
    { value: '3', suffix: '', label: locale === 'en' ? 'Operational Locations' : 'Operative Standorte', href: `/${locale}/standorte` },
  ];

  const finalBadge = badge || tStandard('badge');
  const finalTitle = title || (locale === 'en' ? <>Nationwide<br/>in operation for you.</> : <>Deutschlandweit<br/>für Sie im Einsatz.</>);
  const finalDescription = description || (locale === 'en' ? 'From our strategic locations in Guben, Kirchheilingen and Bülstedt, we control and implement complex infrastructure projects nationwide.' : 'Von unseren strategischen Standorten in Guben, Kirchheilingen und Bülstedt steuern und realisieren wir komplexe Infrastrukturprojekte im gesamten Bundesgebiet.');

  const finalLocations = useMemo(() => {
    if (hideStandorte) return locations;
    const base = [...locations];
    standorteLocations.forEach(sl => {
      if (!base.some(l => l.id === sl.id)) {
        base.push(sl as Location);
      }
    });
    return base;
  }, [locations, hideStandorte]);

  const mapBackground = useMemo(() => (
    <div className="absolute inset-0 opacity-[0.25] mix-blend-screen drop-shadow-2xl brightness-200 pointer-events-none transform-gpu">
      <Image
        src="/germany-map.svg"
        alt={locale === 'en' ? "Map of Germany" : "Deutschlandkarte"}
        fill
        className="object-cover"
        priority
        fetchPriority="high"
      />
    </div>
  ), [locale]);

  return (
    <div key={isHero ? `hero-map-${pathname}` : undefined} className={isHero ? "relative w-full" : "relative w-full max-w-7xl mx-auto py-12 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`}>
        {!isHero && <AnimatedGlossyBorder opacity={0.7} className="z-30" />}
        
        <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'}`}>
          
          <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>{finalBadge}</span>
            </div>
            
            {isHero ? (
              <h1 className="font-heading text-3xl md: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 text-balance">
                {finalTitle}
              </h1>
            ) : (
              <h3 className="font-heading text-3xl md: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 text-balance">
                {finalTitle}
              </h3>
            )}
            
            <p className="text-white/60 text-lg mb-12 leading-relaxed">
              {finalDescription}
            </p>

            <div className="grid grid-cols-2 gap-4">
              {finalStats.map((stat, i) => {
                const StatCard = () => (
                  <div className={`bg-white/5 border border-white/10 rounded-2xl p-6 backdrop-blur-md relative overflow-hidden group h-full ${stat.href ? 'cursor-pointer' : ''}`}>
                    <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 flex flex-col h-full justify-between">
                      <div className="text-3xl md: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 flex items-center ${stat.href ? 'group-hover:text-primary transition-colors' : ''}`}>
                        {stat.label}
                        {stat.href && <ArrowUpRight className="w-4 h-4 ml-1 opacity-0 -translate-y-1 translate-x-1 group-hover:opacity-100 group-hover:translate-y-0 group-hover:translate-x-0 transition-all duration-300" />}
                      </div>
                    </div>
                  </div>
                );

                return stat.href ? (
                  <Link key={i} href={stat.href} className="block group/link hover:-translate-y-1 transition-transform duration-300">
                    <StatCard />
                  </Link>
                ) : (
                  <div key={i}>
                    <StatCard />
                  </div>
                );
              })}
            </div>
          </div>

          <div className="xl:col-span-7 relative flex items-center justify-center min-h-[500px] lg:min-h-[700px] z-10 pointer-events-none">
            <div className="relative w-full max-w-[600px] aspect-square group pointer-events-auto">
              
              {mapBackground}

              <InteractiveMapPins
                locations={finalLocations}
                locale={locale}
                t={t}
                activeLocation={activeLocation}
                handleMouseEnter={handleMouseEnter}
                handleMouseLeave={handleMouseLeave}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}