'use client'

import { useState } from 'react'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Button } from '@/components/ui/button'
import {
  Eye,
  EyeOff,
  Trash2,
  GripVertical,
  MapPin,
  Minus,
  Square,
  Circle,
  Hexagon,
  Type,
  ArrowRight,
} from 'lucide-react'

export interface LayerItem {
  id: string
  kind: string
  name?: string
  isVisible: boolean
  iconId?: string
  properties?: Record<string, unknown>
}

interface LayerListProps {
  items: LayerItem[]
  selectedId: string | null
  onSelect: (id: string) => void
  onToggleVisibility: (id: string) => void
  onDelete: (id: string) => void
  canEdit: boolean
}

const kindIcons: Record<string, React.ReactNode> = {
  SYMBOL: <MapPin className="w-4 h-4" />,
  LINE: <Minus className="w-4 h-4" />,
  POLYGON: <Hexagon className="w-4 h-4" />,
  RECTANGLE: <Square className="w-4 h-4" />,
  CIRCLE: <Circle className="w-4 h-4" />,
  ARROW: <ArrowRight className="w-4 h-4" />,
  TEXT: <Type className="w-4 h-4" />,
}

const kindLabels: Record<string, string> = {
  SYMBOL: 'Symbol',
  LINE: 'Linie',
  POLYGON: 'Polygon',
  RECTANGLE: 'Rechteck',
  CIRCLE: 'Kreis',
  ARROW: 'Pfeil',
  TEXT: 'Text',
}

export function LayerList({
  items,
  selectedId,
  onSelect,
  onToggleVisibility,
  onDelete,
  canEdit,
}: LayerListProps) {
  return (
    <div className="flex flex-col h-full">
      <div className="p-3 border-b border-border">
        <h3 className="font-semibold text-sm">Objekte ({items.length})</h3>
      </div>
      <ScrollArea className="flex-1">
        <div className="p-2 space-y-1">
          {items.length === 0 ? (
            <p className="text-xs text-muted-foreground text-center py-4">
              Keine Objekte vorhanden
            </p>
          ) : (
            items.map((item) => (
              <div
                key={item.id}
                className={`flex items-center gap-2 p-2 rounded-md cursor-pointer transition-colors ${
                  selectedId === item.id
                    ? 'bg-primary/10 border border-primary/30'
                    : 'hover:bg-accent'
                } ${!item.isVisible ? 'opacity-50' : ''}`}
                onClick={() => onSelect(item.id)}
              >
                <GripVertical className="w-3 h-3 text-muted-foreground shrink-0" />
                <div className="shrink-0">
                  {kindIcons[item.kind] || <MapPin className="w-4 h-4" />}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm truncate">
                    {item.name || kindLabels[item.kind] || item.kind}
                  </p>
                </div>
                <div className="flex items-center gap-1 shrink-0">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-6 w-6"
                    onClick={(e) => {
                      e.stopPropagation()
                      onToggleVisibility(item.id)
                    }}
                  >
                    {item.isVisible ? (
                      <Eye className="w-3 h-3" />
                    ) : (
                      <EyeOff className="w-3 h-3" />
                    )}
                  </Button>
                  {canEdit && (
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 text-destructive"
                      onClick={(e) => {
                        e.stopPropagation()
                        onDelete(item.id)
                      }}
                    >
                      <Trash2 className="w-3 h-3" />
                    </Button>
                  )}
                </div>
              </div>
            ))
          )}
        </div>
      </ScrollArea>
    </div>
  )
}
