'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,
} 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'
}

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. Du kannst sie jederzeit überspringen oder später im Benutzermenü erneut starten.',
  },
  {
    title: 'Einsatz erstellen',
    icon: <MapPin className="w-5 h-5 text-red-500" />,
    description: 'Erstelle über «Neuer Einsatz» ein neues Projekt. Gib eine Adresse ein — die Karte fliegt automatisch dorthin. Jeder Einsatz wird separat gespeichert und kann als PDF oder PNG exportiert werden.',
    targetSelector: '[data-tour="new-project"]',
    position: 'bottom',
  },
  {
    title: 'Zeichenwerkzeuge',
    icon: <Pencil className="w-5 h-5 text-blue-500" />,
    description: 'Die Werkzeugleiste links enthält alle Zeichentools: Punkte, Linien, Polygone, Freihand, Pfeile, Text, Radiergummi und mehr. Jedes Tool hat ein Tastenkürzel — drücke «?» für eine Übersicht.',
    targetSelector: '[data-tour="toolbar"]',
    position: 'right',
  },
  {
    title: 'Symbole & Sidebar',
    icon: <LayoutGrid className="w-5 h-5 text-orange-500" />,
    description: 'Rechts findest du über 100 taktische Feuerwehr-Symbole, sortiert nach Kategorien (Wasser, Feuer, Fahrzeuge usw.). Ziehe sie per Drag & Drop auf die Karte. Wechsle zwischen Symbolen und dem Einsatz-Journal.',
    targetSelector: '[data-tour="sidebar"]',
    position: 'left',
  },
  {
    title: 'Speichern & Export',
    icon: <Save className="w-5 h-5 text-green-500" />,
    description: 'Speichere deinen Einsatz mit Ctrl+S oder dem Speichern-Button. Exportiere als PNG (Bild) oder als druckfertiges PDF. Die letzte Kartenansicht wird automatisch gespeichert.',
    targetSelector: '[data-tour="save"]',
    position: 'bottom',
  },
  {
    title: 'Messen & Schlauch-Rechner',
    icon: <Ruler className="w-5 h-5 text-purple-500" />,
    description: 'Mit dem Messwerkzeug (Taste «M») misst du Distanzen direkt auf der Karte. Der Schlauch-Rechner im Admin-Bereich berechnet die benötigten Schlauchlängen und -typen für deinen Einsatz.',
  },
  {
    title: 'Live-Zusammenarbeit',
    icon: <Users className="w-5 h-5 text-cyan-500" />,
    description: 'Mehrere Benutzer können gleichzeitig am selben Einsatz arbeiten. Änderungen werden in Echtzeit synchronisiert — ideal für die Einsatzleitung mit mehreren Operateuren.',
  },
  {
    title: 'Tastenkürzel (CH)',
    icon: <Keyboard className="w-5 h-5 text-slate-500" />,
    description: 'Optimiert für Schweizer Tastaturen: Ctrl+Y = Rückgängig, Ctrl+Z = Wiederholen, Del = Löschen, Ctrl+S = Speichern. Drücke «?» oder F1 für die komplette Übersicht aller Kürzel.',
  },
  {
    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 → «Tour starten») erneut aufrufen. Viel Erfolg im Einsatz — Feuer frei!',
  },
]

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-4">
          {step.description}
        </p>

        {/* 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)
}