import { Plus } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { useAppStore } from '@/store';

export function MiddlePanel() {
  const { conversations, activeConversationId, setActiveConversationId } = useAppStore();

  return (
    <aside className="w-60 flex flex-col border-r border-zinc-800">
      <div className="p-3 flex items-center justify-between">
        <Input
          placeholder="搜索对话..."
          className="h-8 text-xs bg-zinc-900 border-zinc-800"
        />
        <Button size="icon" variant="ghost" className="h-8 w-8 ml-1">
          <Plus size={16} />
        </Button>
      </div>
      <ScrollArea className="flex-1 px-2">
        {conversations.map((conv) => (
          <button
            key={conv.id}
            onClick={() => setActiveConversationId(conv.id)}
            className={`w-full text-left px-3 py-2 rounded-md text-sm truncate mb-0.5 transition-colors
              ${conv.id === activeConversationId ? 'bg-zinc-800 text-white' : 'text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-200'}`}
          >
            {conv.title}
          </button>
        ))}
        {conversations.length === 0 && (
          <p className="text-xs text-zinc-600 text-center mt-8">暂无对话</p>
        )}
      </ScrollArea>
    </aside>
  );
}