import React from 'react';
import type { RightSidebarProps, RightPanel } from '../types/ui.types';
import PropertiesPanel from './PropertiesPanel';
import LayerPanel from './LayerPanel';
import BlockLibrary from './BlockLibrary';
import KICopilot from './KICopilot';

const tabs: Array<{ id: RightPanel; label: string; svg: React.ReactNode; badge?: number }> = [
  { id: 'tool', label: 'Werkzeug', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg> },
  { id: 'layer', label: 'Layer', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg> },
  { id: 'library', label: 'Bibliothek', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><line x1="3" y1="12" x2="21" y2="12"/></svg> },
  { id: 'ki', label: 'KI', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>, badge: 2 },
];

const RightSidebar: React.FC<RightSidebarProps> = ({
  activePanel, onPanelChange, selectedElement, layers, blocks,
  className,
  activeLayerId, onSelectLayer, onAddLayer, onToggleLayer,
  onDeleteLayer, onRenameLayer, onDuplicateLayer, onToggleLock,
  onReorder, onAddSubLayer,
          onElementsDeleted, onToggleElementVisible,
          elements,
  onRenameBlock, onDuplicateBlock, onDeleteBlock, onSvgImport, onSaveGroupAsBlock,
  onBlockCategoryChange, onBlockSearch, onDragBlock,
  kiMessages, kiSuggestions, onKISend, onKISuggestionClick, kiLoading, onUpdateElement,
}) => {
  return (
    <aside className={`rightbar${className ? ' ' + className : ''}`} aria-label="Eigenschaften-Panels">
      <div className="rightbar-tabs" role="tablist">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`rightbar-tab${activePanel === tab.id ? ' active' : ''}`}
            data-panel={tab.id}
            role="tab"
            aria-selected={activePanel === tab.id}
            onClick={() => onPanelChange(tab.id)}
          >
            {tab.svg}
            <span>{tab.label}</span>
            {tab.badge !== undefined && <span className="rightbar-tab-badge">{tab.badge}</span>}
          </button>
        ))}
      </div>

      <div className="rightbar-content">
        <div className={`rightbar-panel${activePanel === 'tool' ? ' active' : ''}`} data-panel-content="tool">
          {activePanel === 'tool' && <PropertiesPanel selectedElement={selectedElement} layers={layers} onUpdateProperty={(key, value) => {
          if (!selectedElement || !onUpdateElement) return;
          const updated = { ...selectedElement };
          if (key === 'x' || key === 'y' || key === 'width' || key === 'height') {
            (updated as any)[key] = value as number;
          } else if (key === 'layerId') {
            updated.layerId = value as string;
          } else {
            updated.properties = { ...updated.properties, [key]: value };
          }
          onUpdateElement(updated);
        }} />}
        </div>
        <div className={`rightbar-panel${activePanel === 'layer' ? ' active' : ''}`} data-panel-content="layer">
          {activePanel === 'layer' && <LayerPanel layers={layers} elements={elements} onElementsDeleted={onElementsDeleted} onToggleElementVisible={onToggleElementVisible} activeLayerId={activeLayerId} onSelectLayer={onSelectLayer ?? (() => {})} onAddLayer={onAddLayer ?? (() => {})} onToggleLayer={onToggleLayer ?? (() => {})} onDeleteLayer={onDeleteLayer} onRenameLayer={onRenameLayer} onDuplicateLayer={onDuplicateLayer} onToggleLock={onToggleLock} onReorder={onReorder} onAddSubLayer={onAddSubLayer} />}
        </div>
        <div className={`rightbar-panel${activePanel === 'library' ? ' active' : ''}`} data-panel-content="library">
          {activePanel === 'library' && <BlockLibrary blocks={blocks} category="Alle" onCategoryChange={onBlockCategoryChange ?? (() => {})} onSearch={onBlockSearch ?? (() => {})} onDragBlock={onDragBlock ?? (() => {})} onRenameBlock={onRenameBlock} onDuplicateBlock={onDuplicateBlock} onDeleteBlock={onDeleteBlock} onSvgImport={onSvgImport} onSaveGroupAsBlock={onSaveGroupAsBlock} />}
        </div>
        <div className={`rightbar-panel${activePanel === 'ki' ? ' active' : ''}`} data-panel-content="ki">
          {activePanel === 'ki' && <KICopilot messages={kiMessages ?? []} suggestions={kiSuggestions ?? []} onSend={onKISend ?? (() => {})} onSuggestionClick={onKISuggestionClick ?? (() => {})} loading={kiLoading} />}
        </div>
      </div>
    </aside>
  );
};

export default RightSidebar;