resolutionflow/frontend/src/components/assistant/ChatSidebar.tsx

import { Plus, Pin, Trash2, MessageSquare } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { ChatListItem } from '@/types/assistant-chat'

interface ChatSidebarProps {
  chats: ChatListItem[]
  activeChatId: string | null
  onSelectChat: (id: string) => void
  onNewChat: () => void
  onDeleteChat: (id: string) => void
  onTogglePin: (id: string, pinned: boolean) => void
}

export function ChatSidebar({
  chats,
  activeChatId,
  onSelectChat,
  onNewChat,
  onDeleteChat,
  onTogglePin,
}: ChatSidebarProps) {
  const pinnedChats = chats.filter(c => c.pinned)
  const unpinnedChats = chats.filter(c => !c.pinned)

  return (
    <div
      className="w-72 shrink-0 flex flex-col border-r h-full"
      style={{ borderColor: 'var(--glass-border)' }}
    >
      {/* Header */}
      <div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
        <button
          onClick={onNewChat}
          className="w-full flex items-center justify-center gap-2 bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-4 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all"
        >
          <Plus size={16} />
          New Chat
        </button>
      </div>

      {/* Chat list */}
      <div className="flex-1 overflow-y-auto py-2">
        {pinnedChats.length > 0 && (
          <div className="px-3 mb-1">
            <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
              Pinned
            </span>
          </div>
        )}
        {pinnedChats.map(chat => (
          <ChatItem
            key={chat.id}
            chat={chat}
            isActive={chat.id === activeChatId}
            onSelect={() => onSelectChat(chat.id)}
            onDelete={() => onDeleteChat(chat.id)}
            onTogglePin={() => onTogglePin(chat.id, !chat.pinned)}
          />
        ))}

        {pinnedChats.length > 0 && unpinnedChats.length > 0 && (
          <div className="mx-3 my-2 border-b" style={{ borderColor: 'var(--glass-border)' }} />
        )}

        {unpinnedChats.map(chat => (
          <ChatItem
            key={chat.id}
            chat={chat}
            isActive={chat.id === activeChatId}
            onSelect={() => onSelectChat(chat.id)}
            onDelete={() => onDeleteChat(chat.id)}
            onTogglePin={() => onTogglePin(chat.id, !chat.pinned)}
          />
        ))}

        {chats.length === 0 && (
          <div className="px-4 py-8 text-center text-muted-foreground text-sm">
            No conversations yet
          </div>
        )}
      </div>
    </div>
  )
}

function ChatItem({
  chat,
  isActive,
  onSelect,
  onDelete,
  onTogglePin,
}: {
  chat: ChatListItem
  isActive: boolean
  onSelect: () => void
  onDelete: () => void
  onTogglePin: () => void
}) {
  return (
    <div
      onClick={onSelect}
      className={cn(
        'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors',
        isActive
          ? 'bg-primary/10 text-foreground'
          : 'text-muted-foreground hover:bg-white/[0.04] hover:text-foreground'
      )}
    >
      <MessageSquare size={14} className="shrink-0" />
      <div className="flex-1 min-w-0">
        <div className="text-[0.8125rem] font-medium truncate">{chat.title}</div>
        <div className="text-[0.6875rem] text-muted-foreground">
          {chat.message_count} messages
        </div>
      </div>
      <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
        <button
          onClick={e => { e.stopPropagation(); onTogglePin() }}
          className="p-1 rounded hover:bg-white/[0.08]"
          title={chat.pinned ? 'Unpin' : 'Pin'}
        >
          <Pin size={12} className={chat.pinned ? 'text-primary' : ''} />
        </button>
        <button
          onClick={e => { e.stopPropagation(); onDelete() }}
          className="p-1 rounded hover:bg-white/[0.08] text-muted-foreground hover:text-rose-400"
          title="Delete"
        >
          <Trash2 size={12} />
        </button>
      </div>
    </div>
  )
}