import {
  Blocks, Coins, LayoutTemplate, ShieldCheck, Route, Globe,
  Bot, Terminal, History, Settings
} from 'lucide-react';
import type { ActivityTab } from '../types';

const tabs: { id: ActivityTab; icon: typeof Blocks; label: string }[] = [
  { id: 'builder', icon: Blocks, label: 'Builder' },
  { id: 'assets', icon: Coins, label: 'Assets' },
  { id: 'templates', icon: LayoutTemplate, label: 'Templates' },
  { id: 'compliance', icon: ShieldCheck, label: 'Compliance' },
  { id: 'routes', icon: Route, label: 'Routes' },
  { id: 'protocols', icon: Globe, label: 'Protocols' },
  { id: 'agents', icon: Bot, label: 'Agents' },
  { id: 'terminal', icon: Terminal, label: 'Terminal' },
  { id: 'audit', icon: History, label: 'Audit' },
  { id: 'settings', icon: Settings, label: 'Settings' },
];

interface ActivityBarProps {
  activeTab: ActivityTab;
  onTabChange: (tab: ActivityTab) => void;
  leftPanelOpen: boolean;
  onToggleLeftPanel: () => void;
}

export default function ActivityBar({ activeTab, onTabChange, leftPanelOpen, onToggleLeftPanel }: ActivityBarProps) {
  return (
    <div className="activity-bar">
      <div className="activity-bar-top">
        {tabs.slice(0, 7).map(tab => {
          const Icon = tab.icon;
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              className={`activity-btn ${isActive && leftPanelOpen ? 'active' : ''}`}
              title={tab.label}
              onClick={() => {
                if (isActive && leftPanelOpen) {
                  onToggleLeftPanel();
                } else {
                  onTabChange(tab.id);
                  if (!leftPanelOpen) onToggleLeftPanel();
                }
              }}
            >
              <Icon size={20} />
            </button>
          );
        })}
      </div>
      <div className="activity-bar-bottom">
        {tabs.slice(7).map(tab => {
          const Icon = tab.icon;
          return (
            <button
              key={tab.id}
              className={`activity-btn ${activeTab === tab.id && leftPanelOpen ? 'active' : ''}`}
              title={tab.label}
              onClick={() => {
                if (activeTab === tab.id && leftPanelOpen) {
                  onToggleLeftPanel();
                } else {
                  onTabChange(tab.id);
                  if (!leftPanelOpen) onToggleLeftPanel();
                }
              }}
            >
              <Icon size={20} />
            </button>
          );
        })}
      </div>
    </div>
  );
}