import React from 'react';
import type { LayerPanelProps } from '../types/ui.types';
import type { CADLayer, CADElement } from '../types/cad.types';
import type { TreeNode } from '../types/ui.types';
import TreeView from './TreeView';

const elementTypeLabels: Record<string, string> = {
  line: 'Linie',
  rect: 'Rechteck',
  circle: 'Kreis',
  arc: 'Bogen',
  polyline: 'Polylinie',
  polygon: 'Polygon',
  text: 'Text',
  dimension: 'Bemassung',
  leader: 'Hinweislinie',
  revcloud: 'Revisionswolke',
  hatch: 'Schraffur',
  chair: 'Stuhl',
  'seating-row': 'Reihe',
  'seating-block': 'Block',
  table: 'Tisch',
  stage: 'Buhne',
  'seating-template': 'Vorlage',
};

const layerIcon = (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <polygon points="12,2 22,8 12,14 2,8" />
    <polyline points="2,16 12,22 22,16" />
    <polyline points="2,12 12,18 22,12" />
  </svg>
);

const elementIcons: Record<string, React.ReactNode> = {
  line: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="4" y1="20" x2="20" y2="4"/></svg>,
  rect: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="4" width="16" height="16"/></svg>,
  circle: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="8"/></svg>,
  arc: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 20 A16 16 0 0 1 20 4"/></svg>,
  polyline: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="4,18 8,8 14,14 20,6"/></svg>,
  polygon: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="12,4 20,10 16,20 8,20 4,10"/></svg>,
  text: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>,
  dimension: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 16 L20 16 M4 16 L4 12 M20 16 L20 12 M8 16 L8 14 M16 16 L16 14"/></svg>,
  leader: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4 L12 12 L12 20"/><circle cx="4" cy="4" r="2"/></svg>,
  revcloud: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 16 Q6 12 10 14 Q12 10 16 14 Q20 12 20 16 Q20 20 16 20 L8 20 Q4 20 4 16Z"/></svg>,
  hatch: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="4" width="16" height="16"/><line x1="4" y1="8" x2="20" y2="8"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="16" x2="20" y2="16"/></svg>,
  chair: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 4v8h12V4 M6 12v8 M18 12v8 M4 12h16"/></svg>,
  'seating-row': <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="8" width="4" height="8"/><rect x="8" y="8" width="4" height="8"/><rect x="14" y="8" width="4" height="8"/><rect x="20" y="8" width="2" height="8"/></svg>,
  'seating-block': <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="4" width="6" height="6"/><rect x="10" y="4" width="6" height="6"/><rect x="2" y="12" width="6" height="6"/><rect x="10" y="12" width="6" height="6"/></svg>,
  table: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="6" width="16" height="12"/><line x1="4" y1="10" x2="20" y2="10"/><line x1="4" y1="14" x2="20" y2="14"/></svg>,
  stage: <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 18 L12 6 L20 18Z"/></svg>,
  'seating-template': <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="4" width="16" height="16"/><circle cx="8" cy="8" r="1"/><circle cx="12" cy="8" r="1"/><circle cx="16" cy="8" r="1"/><circle cx="8" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="16" cy="12" r="1"/></svg>,
};

const defaultIcon = <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="8"/></svg>;

const LayerPanel: React.FC<LayerPanelProps> = ({
  layers,
  elements = [],
  activeLayerId,
  onSelectLayer,
  onAddLayer,
  onToggleLayer,
  onDeleteLayer,
  onRenameLayer,
  onDuplicateLayer,
  onToggleLock,
  onReorder,
  onAddSubLayer,
  onElementsDeleted,
  onToggleElementVisible,
}) => {
  const buildTree = (parentId: string | null): TreeNode[] => {
    return layers
      .filter((l) => l.parentId === parentId)
      .sort((a, b) => a.sortOrder - b.sortOrder)
      .map((l) => {
        const layerElements = elements.filter((e) => e.layerId === l.id);
        const elementNodes: TreeNode[] = layerElements.map((e) => ({
          id: e.id,
          name: elementTypeLabels[e.type] || e.type,
          icon: elementIcons[e.type] || defaultIcon,
          expanded: false,
          active: false,
          children: [],
        }));
        const subLayerNodes = buildTree(l.id);
        return {
          id: l.id,
          name: l.name,
          icon: layerIcon,
          expanded: false,
          active: l.id === activeLayerId,
          children: [...subLayerNodes, ...elementNodes],
          count: layerElements.length > 0 ? layerElements.length : undefined,
        } as TreeNode;
      });
  };

  const tree = buildTree(null);

  const handleAddSubLayer = (parentId: string) => {
    if (onAddSubLayer) {
      onAddSubLayer(parentId);
    }
  };

  return (
    <div className="layer-panel" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', borderBottom: '1px solid var(--border-color, #333)' }}>
        <span style={{ fontWeight: 600, fontSize: '13px' }}>Ebenen</span>
        <button
          onClick={onAddLayer}
          title="Neue Ebene"
          style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-color, #ccc)', padding: '4px' }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="12" y1="5" x2="12" y2="19"/>
            <line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
        </button>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '4px 0' }}>
        {tree.length === 0 ? (
          <div style={{ padding: '12px', textAlign: 'center', color: 'var(--text-muted, #888)', fontSize: '12px' }}>
            Keine Ebenen vorhanden
          </div>
        ) : (
          <TreeView
            nodes={tree}
            selectedId={activeLayerId}
            onSelect={onSelectLayer}
            onReorder={onReorder}
            renderIcon={(node) => node.icon}
            renderActions={(node) => {
              const layer = layers.find((l) => l.id === node.id);
              if (layer) {
                return (
                  <div style={{ display: 'flex', gap: '2px', opacity: 0.6 }}>
                    <button
                      onClick={(e) => { e.stopPropagation(); onToggleLayer(layer.id); }}
                      title={layer.visible ? 'Sichtbar' : 'Versteckt'}
                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: layer.visible ? 'var(--text-color, #ccc)' : 'var(--text-muted, #666)' }}
                    >
                      {layer.visible ? '👁' : '🚫'}
                    </button>
                    <button
                      onClick={(e) => { e.stopPropagation(); onToggleLock?.(layer.id); }}
                      title={layer.locked ? 'Gesperrt' : 'Entsperrt'}
                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: layer.locked ? 'var(--accent, #f59e0b)' : 'var(--text-muted, #666)' }}
                    >
                      {layer.locked ? '🔒' : '🔓'}
                    </button>
                    <button
                      onClick={(e) => { e.stopPropagation(); handleAddSubLayer(layer.id); }}
                      title="Teilebene hinzufugen"
                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: 'var(--text-color, #ccc)' }}
                    >
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    </button>
                    <button
                      onClick={(e) => { e.stopPropagation(); onDuplicateLayer?.(layer.id); }}
                      title="Duplizieren"
                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: 'var(--text-color, #ccc)' }}
                    >
                      ⧉
                    </button>
                    <button
                      onClick={(e) => { e.stopPropagation(); onDeleteLayer?.(layer.id); }}
                      title="Loschen"
                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: '#f44336' }}
                    >
                      ✕
                    </button>
                  </div>
                );
              }
              const element = elements.find((el) => el.id === node.id);
              if (element) {
                const isVisible = element.properties?.visible !== false;
                return (
                  <div style={{ display: 'flex', gap: '2px', opacity: 0.6 }}>
                    <button
                      onClick={(e) => { e.stopPropagation(); onToggleElementVisible?.(element.id); }}
                      title={isVisible ? 'Sichtbar' : 'Versteckt'}
                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: isVisible ? 'var(--text-color, #ccc)' : 'var(--text-muted, #666)' }}
                    >
                      {isVisible ? '👁' : '🚫'}
                    </button>
                    <button
                      onClick={(e) => { e.stopPropagation(); onElementsDeleted?.([element.id]); }}
                      title="Loschen"
                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: '#f44336' }}
                    >
                      ✕
                    </button>
                  </div>
                );
              }
              return null;
            }}
          />
        )}
      </div>
    </div>
  );
};

export default LayerPanel;
