'use client'

import { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { cn } from '@/lib/utils'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'

export type LineKind = 'normal' | 'leitung' | 'rettungsachse'

// Zentrale Definition der Linientypen — Farbe/Stärke werden beim Zeichnen übernommen.
export const LINE_KINDS: { value: LineKind; label: string; color: string; width: number; dashed: boolean; hint: string }[] = [
  { value: 'normal', label: 'Normal', color: '', width: 0, dashed: false, hint: 'Freie Linie in gewählter Farbe' },
  { value: 'leitung', label: 'Leitung', color: '#2563eb', width: 4, dashed: false, hint: 'Schlauchleitung (blau)' },
  { value: 'rettungsachse', label: 'Rettungsachse', color: '#16a34a', width: 6, dashed: true, hint: 'Freihalten — Rettungs-/Zufahrtsachse (grün, gestrichelt)' },
]

interface LineLabelDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onConfirm: (label: string, kind: LineKind) => void
  onSkip: (kind: LineKind) => void
  lineType: 'linestring' | 'arrow' | 'polygon' | 'dangerzone'
}

export function LineLabelDialog({ open, onOpenChange, onConfirm, onSkip, lineType }: LineLabelDialogProps) {
  const [label, setLabel] = useState('')
  const [kind, setKind] = useState<LineKind>('normal')

  // Linientyp-Auswahl nur für echte Linien/Pfeile (nicht für Flächen/Gefahrenzonen)
  const showKindSelector = lineType === 'linestring' || lineType === 'arrow'

  useEffect(() => {
    if (open) {
      setLabel('')
      setKind('normal')
    }
  }, [open])

  const handleConfirm = () => {
    onConfirm(label.trim(), kind)
    setLabel('')
  }

  const handleSkip = () => {
    onSkip(kind)
    setLabel('')
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      if (label.trim()) {
        handleConfirm()
      } else {
        handleSkip()
      }
    }
  }

  const title = lineType === 'polygon' || lineType === 'dangerzone'
    ? 'Fläche beschriften'
    : showKindSelector ? 'Linie festlegen' : 'Leitung beschriften'
  const placeholder = lineType === 'polygon' || lineType === 'dangerzone'
    ? 'z.B. Brandzone, Sperrgebiet...'
    : 'z.B. 1, L2, Zuleitung...'

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-sm top-[12%] translate-y-0">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-2">
          {showKindSelector && (
            <div className="space-y-1.5">
              <Label>Linientyp</Label>
              <div className="grid grid-cols-3 gap-1.5">
                {LINE_KINDS.map((k) => (
                  <button
                    key={k.value}
                    type="button"
                    onClick={() => setKind(k.value)}
                    className={cn(
                      'flex flex-col items-center gap-1 rounded-lg border-2 px-1.5 py-2 text-xs font-medium transition-all',
                      kind === k.value
                        ? 'border-primary bg-primary/5'
                        : 'border-border hover:border-muted-foreground'
                    )}
                    title={k.hint}
                  >
                    <span
                      className="h-1 w-8 rounded-full"
                      style={{
                        backgroundColor: k.color || '#64748b',
                        ...(k.dashed
                          ? { background: `repeating-linear-gradient(90deg, ${k.color} 0 5px, transparent 5px 9px)` }
                          : {}),
                      }}
                    />
                    {k.label}
                  </button>
                ))}
              </div>
              <p className="text-[11px] text-muted-foreground">{LINE_KINDS.find(k => k.value === kind)?.hint}</p>
            </div>
          )}

          <div className="space-y-1.5">
            <Label htmlFor="line-label">Bezeichnung (optional)</Label>
            <Input
              id="line-label"
              value={label}
              onChange={(e) => setLabel(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder={placeholder}
              autoFocus={!showKindSelector}
            />
            <p className="text-[11px] text-muted-foreground">
              Wird am Mittelpunkt auf der Karte angezeigt. Leer lassen für keine Beschriftung.
            </p>
          </div>
        </div>
        <DialogFooter className="gap-2">
          <Button variant="outline" onClick={handleSkip}>
            {showKindSelector ? 'Übernehmen, ohne Label' : 'Ohne Label'}
          </Button>
          <Button onClick={handleConfirm} disabled={!label.trim()}>
            Beschriften
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
