'use client'

import { useState, useEffect } from 'react'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { X } from 'lucide-react'

export interface ItemProperties {
  id: string
  kind: string
  name: string
  note: string
  status: string
  iconType?: string
  // Rettung fields
  anzahlOpfer?: number
  // Gefahrstoff fields
  unNummer?: string
  gefahrennummer?: string
  // Generic
  [key: string]: unknown
}

interface PropertiesPanelProps {
  item: ItemProperties | null
  onUpdate: (id: string, properties: Partial<ItemProperties>) => void
  onClose: () => void
  canEdit: boolean
}

const STATUS_OPTIONS = [
  { value: 'aktiv', label: 'Aktiv' },
  { value: 'inaktiv', label: 'Inaktiv' },
  { value: 'erledigt', label: 'Erledigt' },
  { value: 'geplant', label: 'Geplant' },
]

export function PropertiesPanel({
  item,
  onUpdate,
  onClose,
  canEdit,
}: PropertiesPanelProps) {
  const [name, setName] = useState('')
  const [note, setNote] = useState('')
  const [status, setStatus] = useState('aktiv')
  const [anzahlOpfer, setAnzahlOpfer] = useState('')
  const [unNummer, setUnNummer] = useState('')
  const [gefahrennummer, setGefahrennummer] = useState('')

  useEffect(() => {
    if (item) {
      setName(item.name || '')
      setNote(item.note || '')
      setStatus(item.status || 'aktiv')
      setAnzahlOpfer(item.anzahlOpfer?.toString() || '')
      setUnNummer(item.unNummer || '')
      setGefahrennummer(item.gefahrennummer || '')
    }
  }, [item])

  if (!item) return null

  const handleSave = () => {
    const updates: Partial<ItemProperties> = {
      name,
      note,
      status,
    }

    if (item.iconType === 'RETTUNG') {
      updates.anzahlOpfer = anzahlOpfer ? parseInt(anzahlOpfer) : undefined
    }

    if (item.iconType === 'GEFAHRSTOFF') {
      updates.unNummer = unNummer || undefined
      updates.gefahrennummer = gefahrennummer || undefined
    }

    onUpdate(item.id, updates)
  }

  const isRettung = item.iconType === 'RETTUNG'
  const isGefahrstoff = item.iconType === 'GEFAHRSTOFF'

  return (
    <div className="w-72 border-l border-border bg-card flex flex-col shrink-0">
      <div className="p-3 border-b border-border flex items-center justify-between">
        <h3 className="font-semibold text-sm">Eigenschaften</h3>
        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onClose}>
          <X className="w-4 h-4" />
        </Button>
      </div>
      <ScrollArea className="flex-1 p-3">
        <div className="space-y-4">
          <div>
            <Label className="text-xs">Typ</Label>
            <p className="text-sm text-muted-foreground">{item.kind}</p>
          </div>

          <div>
            <Label className="text-xs">Name / Bezeichnung</Label>
            <Input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="z.B. Einsatzleiter"
              disabled={!canEdit}
              className="h-8 text-sm"
            />
          </div>

          <div>
            <Label className="text-xs">Notiz</Label>
            <Input
              value={note}
              onChange={(e) => setNote(e.target.value)}
              placeholder="Zusätzliche Informationen"
              disabled={!canEdit}
              className="h-8 text-sm"
            />
          </div>

          <div>
            <Label className="text-xs">Status</Label>
            <Select value={status} onValueChange={setStatus} disabled={!canEdit}>
              <SelectTrigger className="h-8 text-sm">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {STATUS_OPTIONS.map((opt) => (
                  <SelectItem key={opt.value} value={opt.value}>
                    {opt.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Rettung specific fields */}
          {isRettung && (
            <div className="pt-2 border-t border-border">
              <div className="bg-yellow-500/10 p-2 rounded-md mb-3">
                <p className="text-xs font-medium text-yellow-600">Rettungs-Symbol</p>
              </div>
              <div>
                <Label className="text-xs">
                  Anzahl vermuteter Opfer <span className="text-destructive">*</span>
                </Label>
                <Input
                  type="number"
                  min="0"
                  value={anzahlOpfer}
                  onChange={(e) => setAnzahlOpfer(e.target.value)}
                  placeholder="0"
                  disabled={!canEdit}
                  className="h-8 text-sm"
                />
              </div>
            </div>
          )}

          {/* Gefahrstoff specific fields */}
          {isGefahrstoff && (
            <div className="pt-2 border-t border-border">
              <div className="bg-orange-500/10 p-2 rounded-md mb-3">
                <p className="text-xs font-medium text-orange-600">Gefahrstoff-Symbol</p>
              </div>
              <div className="space-y-3">
                <div>
                  <Label className="text-xs">
                    UN-Nummer <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    value={unNummer}
                    onChange={(e) => setUnNummer(e.target.value)}
                    placeholder="z.B. 1203"
                    disabled={!canEdit}
                    className="h-8 text-sm"
                  />
                </div>
                <div>
                  <Label className="text-xs">
                    Gefahrennummer <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    value={gefahrennummer}
                    onChange={(e) => setGefahrennummer(e.target.value)}
                    placeholder="z.B. 33"
                    disabled={!canEdit}
                    className="h-8 text-sm"
                  />
                </div>
              </div>
            </div>
          )}

          {canEdit && (
            <Button onClick={handleSave} className="w-full" size="sm">
              Speichern
            </Button>
          )}
        </div>
      </ScrollArea>
    </div>
  )
}
