'use client'

import { ScrollArea } from '@/components/ui/scroll-area'

export interface LegendItem {
  id: string
  iconId?: string
  iconUrl?: string
  name: string
  kind: string
  count: number
  properties?: {
    unNummer?: string
    gefahrennummer?: string
    anzahlOpfer?: number
  }
}

interface LegendProps {
  items: LegendItem[]
}

export function Legend({ items }: LegendProps) {
  if (items.length === 0) return null

  // Group by kind and iconId
  const grouped = items.reduce((acc, item) => {
    const key = item.iconId || item.kind
    if (!acc[key]) {
      acc[key] = { ...item, count: 1 }
    } else {
      acc[key].count++
    }
    return acc
  }, {} as Record<string, LegendItem>)

  const legendItems = Object.values(grouped)

  return (
    <div className="bg-card border border-border rounded-lg shadow-lg p-3 min-w-[200px] max-w-[300px]">
      <h4 className="font-semibold text-sm mb-2 pb-2 border-b border-border">Legende</h4>
      <ScrollArea className="max-h-[300px]">
        <div className="space-y-2">
          {legendItems.map((item, index) => (
            <div key={index} className="flex items-start gap-2">
              {item.iconUrl ? (
                <img
                  src={item.iconUrl}
                  alt={item.name}
                  className="w-5 h-5 object-contain shrink-0 mt-0.5"
                />
              ) : (
                <div className="w-5 h-5 bg-primary/20 rounded shrink-0 mt-0.5" />
              )}
              <div className="flex-1 min-w-0">
                <p className="text-xs font-medium truncate">
                  {item.name}
                  {item.count > 1 && (
                    <span className="text-muted-foreground ml-1">({item.count})</span>
                  )}
                </p>
                {item.properties?.unNummer && (
                  <p className="text-xs text-orange-600">
                    UN {item.properties.unNummer}
                    {item.properties.gefahrennummer && ` / ${item.properties.gefahrennummer}`}
                  </p>
                )}
                {item.properties?.anzahlOpfer !== undefined && (
                  <p className="text-xs text-yellow-600">
                    {item.properties.anzahlOpfer} Opfer
                  </p>
                )}
              </div>
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  )
}

export function LegendExport({ items }: LegendProps) {
  if (items.length === 0) return null

  const grouped = items.reduce((acc, item) => {
    const key = item.iconId || item.kind
    if (!acc[key]) {
      acc[key] = { ...item, count: 1 }
    } else {
      acc[key].count++
    }
    return acc
  }, {} as Record<string, LegendItem>)

  const legendItems = Object.values(grouped)

  return (
    <div className="legend-export" style={{ fontFamily: 'Arial, sans-serif' }}>
      <h4 style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '8px', borderBottom: '1px solid #ccc', paddingBottom: '4px' }}>
        Legende
      </h4>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
        {legendItems.map((item, index) => (
          <div key={index} style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
            {item.iconUrl ? (
              <img
                src={item.iconUrl}
                alt={item.name}
                style={{ width: '16px', height: '16px', objectFit: 'contain' }}
              />
            ) : (
              <div style={{ width: '16px', height: '16px', background: '#ddd', borderRadius: '2px' }} />
            )}
            <div>
              <span style={{ fontSize: '11px' }}>
                {item.name}
                {item.count > 1 && ` (${item.count})`}
              </span>
              {item.properties?.unNummer && (
                <span style={{ fontSize: '10px', color: '#c2410c', marginLeft: '4px' }}>
                  UN {item.properties.unNummer}
                </span>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
