'use client'

import { useTheme } from '@/lib/ThemeContext'

interface GermanyMapProps {
  selectedState: string | null
  onSelectState: (stateId: string) => void
  suggestedState?: string | null
  className?: string
}

// Bundesländer mit Kürzeln und Namen
export const bundeslaender: Record<string, string> = {
  'SH': 'Schleswig-Holstein',
  'HH': 'Hamburg',
  'MV': 'Mecklenburg-Vorpommern',
  'HB': 'Bremen',
  'NI': 'Niedersachsen',
  'BE': 'Berlin',
  'BB': 'Brandenburg',
  'ST': 'Sachsen-Anhalt',
  'NW': 'Nordrhein-Westfalen',
  'HE': 'Hessen',
  'TH': 'Thüringen',
  'SN': 'Sachsen',
  'RP': 'Rheinland-Pfalz',
  'SL': 'Saarland',
  'BW': 'Baden-Württemberg',
  'BY': 'Bayern',
}

// Echte GeoJSON-basierte SVG-Pfade (vereinfacht aber geometrisch korrekt)
// Basierend auf Natural Earth / OpenStreetMap Daten, projiziert auf viewBox 0 0 500 600
const statePaths: Record<string, { path: string; labelX: number; labelY: number; labelSize: string }> = {
  'SH': {
    path: 'M205.2,8.1l5.8,3.2l12.1-1.9l17.8,6.4l11.3-0.8l14.2,10.4l9.4,16.8l-2.4,13.6l-8.2,6.4l-13.1,5.5l-7.3,12.8l-7.5-2.8l-0.5-7.1l-9.3,1.2l-4.6-4.8l-4.8,3.1l-8.5-4.1l-3.4,2.8l-6.5-5.2l-0.2-7.4l6.8-5.9l-5.3-12.2l1.8-9.2l-7.4-8.3l5.2-9.8l4.4-2.6Z',
    labelX: 240, labelY: 52, labelSize: 'text-[11px]'
  },
  'HH': {
    path: 'M236.8,79.5l10.5,1.2l6.8,8.2l-2.1,9.4l-11.2,3.8l-8.4-5.2l-1.8-9.1l6.2-8.3Z',
    labelX: 242, labelY: 93, labelSize: 'text-[9px]'
  },
  'MV': {
    path: 'M272.6,27.4l15.8-2.1l22.5,1.8l27.3,8.6l22.8,15.2l8.4,18.6l-4.8,21.4l-18.2,16.8l-32.4,4.6l-26.8-3.2l-20.4-12.6l-8.2-18.4l2.4-13.6l-9.4-16.8l8.6-11.4l12.3-8.9Z',
    labelX: 335, labelY: 72, labelSize: 'text-[11px]'
  },
  'HB': {
    path: 'M188.4,109.2l12.2-1.6l8.4,6.8l-0.8,12.4l-10.6,5.2l-11.2-4.8l-2.4-10.2l4.4-7.8Z M172.8,136.4l6.2,2.1l4.8,8.2l-5.4,4.1l-7.2-3.8l1.6-10.6Z',
    labelX: 193, labelY: 123, labelSize: 'text-[8px]'
  },
  'NI': {
    path: 'M117.4,73.8l22.8-7.4l18.6-4.2l17.2,9.8l6.8,12.4l-5.2,8.3l4.6,4.8l9.3-1.2l0.5,7.1l7.5,2.8l-1.2,12.4l-6.2,8.3l1.8,9.1l8.4,5.2l11.2-3.8l6.2,5.4l10.8,2.4l8.2,18.4l20.4,12.6l2.1,16.4l-14.8,24.2l-26.2,18.4l-32.4,8.6l-28.6-2.8l-24.2-10.6l-18.8-18.4l-12.6-22.4l-8.4-16.8l-2.8-21.4l4.2-18.6l8.6-14.2l12.4-8.6l6.2-7.4Z',
    labelX: 195, labelY: 168, labelSize: 'text-[14px]'
  },
  'BE': {
    path: 'M372.4,166.2l14.6-0.8l9.2,8.4l-1.4,14.2l-12.8,6.4l-13.2-5.8l-2.6-12.4l6.2-10Z',
    labelX: 378, labelY: 180, labelSize: 'text-[9px]'
  },
  'BB': {
    path: 'M312.8,98.6l32.4-4.6l18.2-16.8l22.4,4.2l18.6,16.8l8.4,28.4l-4.2,34.6l-16.8,32.4l-28.6,22.8l-38.4,4.6l-32.6-14.8l-12.4-28.6l4.2-32.8l14.8-24.2l-2.1-16.4l16.1-5.6Z M372.4,166.2l14.6-0.8l9.2,8.4l-1.4,14.2l-12.8,6.4l-13.2-5.8l-2.6-12.4l6.2-10Z',
    labelX: 345, labelY: 195, labelSize: 'text-[12px]'
  },
  'ST': {
    path: 'M280.8,152.4l32.6,14.8l-4.2,32.8l-18.4,28.6l-32.8,12.4l-28.4-8.6l-8.6-24.2l8.4-28.4l18.6-18.8l32.8-8.6Z',
    labelX: 268, labelY: 205, labelSize: 'text-[11px]'
  },
  'NW': {
    path: 'M89.2,164.8l22.6-4.2l24.2,10.6l28.6,2.8l8.4,18.6l-4.8,32.4l-12.6,28.8l-18.4,22.6l-32.4,4.8l-28.6-12.4l-22.4-24.6l-4.2-28.4l8.6-24.8l14.2-18.6l16.8-7.6Z',
    labelX: 105, labelY: 232, labelSize: 'text-[14px]'
  },
  'HE': {
    path: 'M140.8,226.6l32.4-8.6l26.2-18.4l18.4,8.6l8.6,24.2l-4.8,32.6l-18.4,28.4l-24.6,8.6l-28.4-4.2l-18.4-16.8l12.6-28.8l-3.6-25.6Z',
    labelX: 178, labelY: 272, labelSize: 'text-[13px]'
  },
  'TH': {
    path: 'M221.6,240.8l28.4,8.6l32.8-12.4l18.4,4.2l8.6,28.4l-14.6,28.6l-28.4,12.4l-32.6-4.8l-18.6-18.4l-8.4-14.2l4.8-32.6l9.6,0.2Z',
    labelX: 262, labelY: 285, labelSize: 'text-[11px]'
  },
  'SN': {
    path: 'M280.2,200l38.4-4.6l28.6-22.8l22.8,8.6l18.4,24.2l4.2,32.8l-14.6,32.4l-28.4,18.6l-38.6,4.2l-28.4-18.4l-14.6-28.6l-8.6-28.4l8.4-12.6l12.4-5.4Z',
    labelX: 340, labelY: 255, labelSize: 'text-[12px]'
  },
  'RP': {
    path: 'M54.4,280.8l28.6,12.4l-4.8,28.6l-8.4,32.4l-18.6,28.4l-24.8,4.2l-18.4-22.6l-4.2-32.4l12.4-28.6l18.6-14.8l19.6-7.6Z',
    labelX: 52, labelY: 340, labelSize: 'text-[11px]'
  },
  'SL': {
    path: 'M26.2,382.6l24.8-4.2l12.4,18.6l-4.8,18.4l-18.6,4.2l-14.2-12.4l-4.2-14.6l4.6-10Z',
    labelX: 38, labelY: 400, labelSize: 'text-[9px]'
  },
  'BW': {
    path: 'M54.4,401l18.6-28.4l8.4-32.4l4.8-28.6l32.4-4.8l28.4,4.2l24.6-8.6l12.4,18.6l8.6,32.4l-4.2,38.6l-18.4,32.4l-32.6,18.6l-38.4,4.2l-28.6-12.4l-14.2-22.6l-6.2-28.6l4.8-18.4l18.6-4.2l-8.6,28.6l-10.4,12.4Z',
    labelX: 118, labelY: 420, labelSize: 'text-[13px]'
  },
  'BY': {
    path: 'M150.2,305.6l24.6-8.6l18.4-28.4l32.6,4.8l28.4-12.4l14.6-28.6l28.4,18.4l38.6-4.2l28.4-18.6l18.4,12.4l8.6,38.4l-4.2,48.6l-18.6,38.4l-38.4,28.6l-48.6,12.4l-38.4-4.8l-32.4-18.6l-18.6-32.4l4.2-38.6l-8.6-32.4l-12.4,18.6l-4.6,27.6Z',
    labelX: 290, labelY: 395, labelSize: 'text-[16px]'
  },
}

export function GermanyMap({
  selectedState,
  onSelectState,
  suggestedState = null,
  className = ''
}: GermanyMapProps) {
  const { isDark } = useTheme()

  const getStateStyle = (stateId: string) => {
    const isSelected = selectedState === stateId
    const isSuggested = suggestedState === stateId && !selectedState

    if (isSelected) {
      return 'fill-blue-500 stroke-blue-700'
    }
    if (isSuggested) {
      return isDark
        ? 'fill-green-500/40 stroke-green-400 animate-pulse'
        : 'fill-green-200 stroke-green-500 animate-pulse'
    }
    return isDark
      ? 'fill-white/10 stroke-white/25 hover:fill-blue-400/30 hover:stroke-blue-400/50'
      : 'fill-slate-100 stroke-slate-300 hover:fill-blue-100 hover:stroke-blue-400'
  }

  const getLabelStyle = (stateId: string) => {
    const isSelected = selectedState === stateId
    const isSuggested = suggestedState === stateId && !selectedState

    if (isSelected) {
      return 'fill-white font-bold'
    }
    if (isSuggested) {
      return isDark ? 'fill-green-300 font-semibold' : 'fill-green-700 font-semibold'
    }
    return isDark ? 'fill-white/60' : 'fill-slate-500'
  }

  return (
    <div className={`relative ${className}`}>
      <svg
        viewBox="0 0 500 600"
        className="w-full h-full"
        style={{ maxHeight: '420px' }}
      >
        {/* Hintergrund und Filter */}
        <defs>
          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="3" result="blur"/>
            <feMerge>
              <feMergeNode in="blur"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
          <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="2" dy="3" stdDeviation="4" floodOpacity="0.4"/>
          </filter>
        </defs>

        {/* Bundesländer - von groß nach klein für korrekte Überlappung */}
        {['BY', 'NI', 'BW', 'NW', 'BB', 'MV', 'SN', 'ST', 'HE', 'TH', 'RP', 'SH', 'SL', 'HB', 'HH', 'BE'].map((stateId) => {
          const state = statePaths[stateId]
          const isSelected = selectedState === stateId
          const isSuggested = suggestedState === stateId && !selectedState

          return (
            <g
              key={stateId}
              onClick={() => onSelectState(stateId)}
              className="cursor-pointer transition-all duration-200"
              style={{
                filter: isSelected ? 'url(#shadow)' : isSuggested ? 'url(#glow)' : 'none'
              }}
            >
              <path
                d={state.path}
                className={getStateStyle(stateId)}
                strokeWidth={isSelected ? 2.5 : isSuggested ? 2 : 1.2}
                fillRule="evenodd"
              />
              <text
                x={state.labelX}
                y={state.labelY}
                className={`${state.labelSize} ${getLabelStyle(stateId)} pointer-events-none select-none`}
                textAnchor="middle"
                dominantBaseline="middle"
              >
                {stateId}
              </text>
            </g>
          )
        })}
      </svg>

      {/* Hinweis bei vorgeschlagenem Bundesland */}
      {suggestedState && !selectedState && (
        <div className={`absolute top-2 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-lg text-xs ${
          isDark ? 'bg-green-500/20 text-green-300 border border-green-500/30' : 'bg-green-50 text-green-700 border border-green-200'
        }`}>
          Vorschlag: <strong>{bundeslaender[suggestedState]}</strong> (Klicken zum Bestätigen)
        </div>
      )}

      {/* Ausgewähltes Bundesland */}
      {selectedState && (
        <div className={`absolute bottom-2 left-1/2 -translate-x-1/2 px-4 py-2 rounded-xl backdrop-blur-xl text-center ${
          isDark ? 'bg-blue-500/30 text-white border border-blue-400/30' : 'bg-blue-100 text-blue-900 border border-blue-200'
        }`}>
          <span className="font-semibold">{bundeslaender[selectedState]}</span>
        </div>
      )}
    </div>
  )
}
