'use client'

import { useState, useEffect, useCallback } from 'react'
import { Button } from '@/components/ui/button'
import {
  X, ChevronRight, ChevronLeft, SkipForward,
  MapPin, Pencil, LayoutGrid, Save, Ruler, Users, Keyboard, Rocket,
  MousePointer2, CircleDot, Minus, Pentagon, Square, Circle, MoveRight, Type, Eraser,
  Lock, ClipboardList, Download, AlertTriangle,
} from 'lucide-react'

const TOUR_STORAGE_KEY = 'lageplan-onboarding-completed'

interface TourStep {
  title: string
  description: string
  icon?: React.ReactNode
  targetSelector?: string
  position?: 'top' | 'bottom' | 'left' | 'right'
  tools?: { icon: React.ReactNode; label: string; shortcut?: string }[]
}

const TOUR_STEPS: TourStep[] = [
  {
    title: 'Willkommen bei Lageplan!',
    icon: <Rocket className="w-5 h-5 text-red-500" />,
    description: 'Lageplan ist deine taktische Lageskizzen-App für den Feuerwehr-Einsatz. Diese kurze Tour zeigt dir die wichtigsten Funktionen.',
  },
  {
    title: 'Einsatz erstellen',
    icon: <MapPin className="w-5 h-5 text-red-500" />,
    description: 'Erstelle über «Neuer Einsatz» ein Projekt. Gib eine Adresse ein — die Karte fliegt automatisch dorthin.',
    targetSelector: '[data-tour="new-project"]',
    position: 'bottom',
  },
  {
    title: 'Bearbeitung starten',
    icon: <Lock className="w-5 h-5 text-green-500" />,
    description: 'Klicke auf «Bearbeitung starten» um die Karte zu bearbeiten. Nur ein Benutzer gleichzeitig kann bearbeiten — andere sehen deine Änderungen live.',
    targetSelector: '[data-tour="edit-toggle"]',
    position: 'bottom',
  },
  {
    title: 'Zeichenwerkzeuge',
    icon: <Pencil className="w-5 h-5 text-blue-500" />,
    description: 'Links findest du alle Werkzeuge. Jedes hat ein Tastenkürzel:',
    targetSelector: '[data-tour="toolbar"]',
    position: 'right',
    tools: [
      { icon: <MousePointer2 className="w-3.5 h-3.5" />, label: 'Auswählen', shortcut: 'V' },
      { icon: <CircleDot className="w-3.5 h-3.5" />, label: 'Punkt', shortcut: 'P' },
      { icon: <Minus className="w-3.5 h-3.5" />, label: 'Linie / Schlauch', shortcut: 'L' },
      { icon: <Pentagon className="w-3.5 h-3.5" />, label: 'Polygon', shortcut: 'G' },
      { icon: <Square className="w-3.5 h-3.5" />, label: 'Rechteck', shortcut: 'R' },
      { icon: <Circle className="w-3.5 h-3.5" />, label: 'Kreis', shortcut: 'C' },
      { icon: <Pencil className="w-3.5 h-3.5" />, label: 'Freihand', shortcut: 'F' },
      { icon: <MoveRight className="w-3.5 h-3.5" />, label: 'Pfeil / Route', shortcut: 'A' },
      { icon: <Type className="w-3.5 h-3.5" />, label: 'Text', shortcut: 'T' },
      { icon: <Eraser className="w-3.5 h-3.5" />, label: 'Radiergummi', shortcut: 'E' },
      { icon: <Ruler className="w-3.5 h-3.5" />, label: 'Messen', shortcut: 'M' },
      { icon: <AlertTriangle className="w-3.5 h-3.5" />, label: 'Gefahrenzone', shortcut: 'D' },
    ],
  },
  {
    title: 'Symbole (Drag & Drop)',
    icon: <LayoutGrid className="w-5 h-5 text-orange-500" />,
    description: 'Rechts findest du taktische Feuerwehr-Symbole. Deine eigenen Symbole stehen zuoberst. Ziehe Symbole per Drag & Drop auf die Karte. Klicke auf ein platziertes Symbol um es zu drehen, skalieren oder löschen.',
    targetSelector: '[data-tour="sidebar"]',
    position: 'left',
  },
  {
    title: 'Journal & Rapport',
    icon: <ClipboardList className="w-5 h-5 text-indigo-500" />,
    description: 'Wechsle rechts zum Journal-Tab für das Einsatz-Journal. Erfasse Einträge, SOMA-Checkliste und Pendenzen. Erstelle einen druckfertigen Einsatzrapport als PDF.',
    targetSelector: '[data-tour="sidebar"]',
    position: 'left',
  },
  {
    title: 'Speichern & Export',
    icon: <Save className="w-5 h-5 text-green-500" />,
    description: 'Speichere mit dem Speichern-Button oder Ctrl+S. Exportiere die Karte als PNG oder PDF über das Menü.',
    targetSelector: '[data-tour="save"]',
    position: 'bottom',
    tools: [
      { icon: <Save className="w-3.5 h-3.5" />, label: 'Speichern', shortcut: 'Ctrl+S' },
      { icon: <Download className="w-3.5 h-3.5" />, label: 'Export als PNG/PDF' },
    ],
  },
  {
    title: 'Live-Zusammenarbeit',
    icon: <Users className="w-5 h-5 text-cyan-500" />,
    description: 'Mehrere Benutzer arbeiten gleichzeitig am selben Einsatz. Änderungen werden in Echtzeit synchronisiert.',
  },
  {
    title: 'Tastenkürzel',
    icon: <Keyboard className="w-5 h-5 text-slate-500" />,
    description: 'Wichtige Kürzel:',
    tools: [
      { icon: <span className="text-[10px] font-mono font-bold">Ctrl+Z</span>, label: 'Rückgängig' },
      { icon: <span className="text-[10px] font-mono font-bold">Ctrl+Y</span>, label: 'Wiederholen' },
      { icon: <span className="text-[10px] font-mono font-bold">Del</span>, label: 'Symbol löschen' },
      { icon: <span className="text-[10px] font-mono font-bold">Ctrl+S</span>, label: 'Speichern' },
      { icon: <span className="text-[10px] font-mono font-bold">?</span>, label: 'Alle Kürzel anzeigen' },
    ],
  },
  {
    title: 'Bereit für den Einsatz!',
    icon: <Rocket className="w-5 h-5 text-red-500" />,
    description: 'Du bist startklar! Diese Tour kannst du jederzeit über dein Benutzermenü (oben rechts) erneut starten. Viel Erfolg!',
  },
]

interface OnboardingTourProps {
  forceShow?: boolean
  onComplete?: () => void
}

export function OnboardingTour({ forceShow = false, onComplete }: OnboardingTourProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [highlightRect, setHighlightRect] = useState<DOMRect | null>(null)

  useEffect(() => {
    if (forceShow) {
      setIsVisible(true)
      setCurrentStep(0)
      return
    }
    const completed = localStorage.getItem(TOUR_STORAGE_KEY)
    if (!completed) {
      // Small delay so the app renders first
      const timer = setTimeout(() => setIsVisible(true), 1500)
      return () => clearTimeout(timer)
    }
  }, [forceShow])

  const updateHighlight = useCallback(() => {
    const step = TOUR_STEPS[currentStep]
    if (step.targetSelector) {
      const el = document.querySelector(step.targetSelector)
      if (el) {
        setHighlightRect(el.getBoundingClientRect())
        return
      }
    }
    setHighlightRect(null)
  }, [currentStep])

  useEffect(() => {
    if (!isVisible) return
    updateHighlight()
    window.addEventListener('resize', updateHighlight)
    return () => window.removeEventListener('resize', updateHighlight)
  }, [isVisible, currentStep, updateHighlight])

  const completeTour = useCallback(() => {
    localStorage.setItem(TOUR_STORAGE_KEY, 'true')
    setIsVisible(false)
    onComplete?.()
  }, [onComplete])

  const nextStep = () => {
    if (currentStep < TOUR_STEPS.length - 1) {
      setCurrentStep(currentStep + 1)
    } else {
      completeTour()
    }
  }

  const prevStep = () => {
    if (currentStep > 0) setCurrentStep(currentStep - 1)
  }

  if (!isVisible) return null

  const step = TOUR_STEPS[currentStep]
  const isFirst = currentStep === 0
  const isLast = currentStep === TOUR_STEPS.length - 1

  // Calculate tooltip position based on highlight
  const getTooltipStyle = (): React.CSSProperties => {
    if (!highlightRect) {
      // Center on screen
      return {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
      }
    }
    const pos = step.position || 'bottom'
    const gap = 12
    switch (pos) {
      case 'bottom':
        return {
          position: 'fixed',
          top: highlightRect.bottom + gap,
          left: Math.max(16, Math.min(highlightRect.left, window.innerWidth - 360)),
        }
      case 'top':
        return {
          position: 'fixed',
          bottom: window.innerHeight - highlightRect.top + gap,
          left: Math.max(16, Math.min(highlightRect.left, window.innerWidth - 360)),
        }
      case 'right':
        return {
          position: 'fixed',
          top: Math.max(16, highlightRect.top),
          left: highlightRect.right + gap,
        }
      case 'left':
        return {
          position: 'fixed',
          top: Math.max(16, highlightRect.top),
          right: window.innerWidth - highlightRect.left + gap,
        }
      default:
        return { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }
    }
  }

  return (
    <>
      {/* Backdrop overlay */}
      <div
        className="fixed inset-0 z-[99998]"
        style={{ background: 'rgba(0,0,0,0.5)' }}
        onClick={completeTour}
      />

      {/* Highlight cutout */}
      {highlightRect && (
        <div
          className="fixed z-[99999] pointer-events-none rounded-lg"
          style={{
            top: highlightRect.top - 4,
            left: highlightRect.left - 4,
            width: highlightRect.width + 8,
            height: highlightRect.height + 8,
            boxShadow: '0 0 0 9999px rgba(0,0,0,0.5)',
            border: '2px solid rgba(59,130,246,0.7)',
          }}
        />
      )}

      {/* Tooltip card */}
      <div
        className="z-[100000] w-[340px] bg-card border border-border rounded-xl shadow-2xl p-5"
        style={getTooltipStyle()}
      >
        <div className="flex items-start justify-between mb-2">
          <div className="flex items-center gap-2">
            {step.icon}
            <h3 className="font-semibold text-base">{step.title}</h3>
          </div>
          <button
            onClick={completeTour}
            className="text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
        <p className="text-sm text-muted-foreground leading-relaxed mb-2">
          {step.description}
        </p>
        {step.tools && (
          <div className="grid grid-cols-2 gap-x-3 gap-y-0.5 mb-3 text-xs">
            {step.tools.map((t, i) => (
              <div key={i} className="flex items-center gap-1.5 py-0.5">
                <span className="text-muted-foreground shrink-0">{t.icon}</span>
                <span className="truncate">{t.label}</span>
                {t.shortcut && <kbd className="ml-auto shrink-0 px-1 py-0.5 bg-muted rounded border border-border font-mono text-[9px]">{t.shortcut}</kbd>}
              </div>
            ))}
          </div>
        )}

        {/* Progress dots */}
        <div className="flex items-center justify-between">
          <div className="flex gap-1">
            {TOUR_STEPS.map((_, i) => (
              <div
                key={i}
                className={`w-1.5 h-1.5 rounded-full transition-colors ${
                  i === currentStep ? 'bg-primary' : i < currentStep ? 'bg-primary/40' : 'bg-muted-foreground/20'
                }`}
              />
            ))}
          </div>

          <div className="flex items-center gap-1.5">
            {!isFirst && (
              <Button variant="ghost" size="sm" className="h-8 px-2" onClick={prevStep}>
                <ChevronLeft className="w-4 h-4" />
              </Button>
            )}
            {isFirst && (
              <Button variant="ghost" size="sm" className="h-8 text-xs text-muted-foreground" onClick={completeTour}>
                <SkipForward className="w-3 h-3 mr-1" />
                Überspringen
              </Button>
            )}
            <Button size="sm" className="h-8 px-3" onClick={nextStep}>
              {isLast ? 'Fertig' : 'Weiter'}
              {!isLast && <ChevronRight className="w-4 h-4 ml-0.5" />}
            </Button>
          </div>
        </div>
      </div>
    </>
  )
}

/** Reset the onboarding tour so it shows again next time */
export function resetOnboardingTour() {
  localStorage.removeItem(TOUR_STORAGE_KEY)
}
