import { useState } from 'react';
import { useGatewayStore } from '../store/gatewayStore';
import { Settings, MessageSquare, Clock, Bot, Radio } from 'lucide-react';
import { CloneManager } from './CloneManager';
import { ConversationList } from './ConversationList';
import { ChannelList } from './ChannelList';
import { TaskList } from './TaskList';

interface SidebarProps {
  onOpenSettings?: () => void;
}

type Tab = 'chats' | 'clones' | 'channels' | 'tasks';

const TABS: { key: Tab; label: string; icon: typeof MessageSquare }[] = [
  { key: 'chats', label: '对话', icon: MessageSquare },
  { key: 'clones', label: '分身', icon: Bot },
  { key: 'channels', label: '频道', icon: Radio },
  { key: 'tasks', label: '任务', icon: Clock },
];

export function Sidebar({ onOpenSettings }: SidebarProps) {
  const { connectionState } = useGatewayStore();
  const [activeTab, setActiveTab] = useState<Tab>('chats');

  const connected = connectionState === 'connected';

  return (
    <aside className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
      {/* 顶部标签 */}
      <div className="flex border-b border-gray-200 bg-white">
        {TABS.map(({ key, label }) => (
          <button
            key={key}
            className={`flex-1 py-3 px-2 text-xs font-medium transition-colors ${
              activeTab === key
                ? 'text-orange-600 border-b-2 border-orange-500'
                : 'text-gray-500 hover:text-gray-700'
            }`}
            onClick={() => setActiveTab(key)}
          >
            {label}
          </button>
        ))}
      </div>

      {/* Tab content */}
      <div className="flex-1 overflow-hidden">
        {activeTab === 'chats' && <ConversationList />}
        {activeTab === 'clones' && <CloneManager />}
        {activeTab === 'channels' && <ChannelList onOpenSettings={onOpenSettings} />}
        {activeTab === 'tasks' && <TaskList />}
      </div>

      {/* 底部用户 */}
      <div className="p-3 border-t border-gray-200 bg-gray-50">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
            🦞
          </div>
          <div className="flex-1 min-w-0">
            <span className="font-medium text-gray-700 text-sm">用户7141</span>
            <div className={`text-xs ${connected ? 'text-green-500' : 'text-gray-400'}`}>
              {connected ? '已连接' : '未连接'}
            </div>
          </div>
          <button className="text-gray-400 hover:text-gray-600" onClick={onOpenSettings}>
            <Settings className="w-4 h-4" />
          </button>
        </div>
      </div>
    </aside>
  );
}
