import { Plus, PanelLeft, Sparkles, Search } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { ChatHistoryList } from './ChatHistoryList'
import { ChatUserProfile } from './ChatUserProfile'
import type { ConversationItem } from '@/hooks/useConversations'
import { cn } from '@/lib/utils'

interface ChatDesktopSidebarProps {
  isCollapsed: boolean
  onToggleCollapse: () => void
  conversations: ConversationItem[]
  activeId: string | null
  isLoading?: boolean
  onSelectConversation: (id: string) => void
  onCreateNewConversation: () => void
  onUpdateTitle?: (id: string, newTitle: string) => void
  onDeleteConversation?: (id: string) => void
}

export function ChatDesktopSidebar({
  isCollapsed,
  onToggleCollapse,
  conversations,
  activeId,
  isLoading,
  onSelectConversation,
  onCreateNewConversation,
  onUpdateTitle,
  onDeleteConversation,
}: ChatDesktopSidebarProps) {
  return (
    <aside
      className={cn(
        'h-full bg-card/70 border-r border-border/60 flex flex-col transition-all duration-300 shrink-0 relative z-10',
        isCollapsed ? 'w-16' : 'w-64'
      )}
    >
      {/* Sidebar Top: Collapse Toggle & Logo */}
      <div className="h-14 px-3 flex items-center justify-between border-b border-border/40">
        <TooltipProvider delayDuration={200}>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="h-9 w-9 rounded-full text-muted-foreground hover:text-foreground"
                onClick={onToggleCollapse}
              >
                <PanelLeft className="w-4 h-4" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="right">
              <p className="text-xs">{isCollapsed ? 'Mở rộng menu' : 'Thu gọn menu'}</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>

        {!isCollapsed && (
          <div className="flex items-center gap-2 pr-2 select-none">
            <Sparkles className="w-4 h-4 text-primary" />
            <span className="font-bold text-sm tracking-tight">Loyalty Agent</span>
          </div>
        )}
      </div>

      {/* New Chat Button */}
      <div className="p-3">
        <TooltipProvider delayDuration={200}>
          {isCollapsed ? (
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  onClick={onCreateNewConversation}
                  variant="secondary"
                  size="icon"
                  className="w-10 h-10 rounded-full mx-auto shadow-sm hover:bg-secondary/80 border border-border/60"
                >
                  <Plus className="w-4 h-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent side="right">
                <p className="text-xs font-medium">Trò chuyện mới</p>
              </TooltipContent>
            </Tooltip>
          ) : (
            <Button
              onClick={onCreateNewConversation}
              variant="secondary"
              className="w-full justify-start gap-2.5 rounded-full px-4 py-2.5 shadow-sm font-medium hover:bg-secondary/80 border border-border/60 text-xs"
            >
              <Plus className="w-4 h-4 text-primary" />
              <span>Trò chuyện mới</span>
            </Button>
          )}
        </TooltipProvider>
      </div>

      {/* Nav quick items */}
      {!isCollapsed && (
        <div className="px-3 py-1">
          <Button
            variant="ghost"
            className="w-full justify-start gap-3 rounded-full text-xs font-normal text-muted-foreground hover:text-foreground hover:bg-muted/60 h-9 px-3"
          >
            <Search className="w-4 h-4 shrink-0" />
            <span className="truncate">Tìm kiếm hội thoại</span>
          </Button>
        </div>
      )}

      {/* History Header Label */}
      {!isCollapsed && (
        <div className="px-4 pt-3 pb-1 font-semibold text-[11px] uppercase tracking-wider text-muted-foreground/80 select-none">
          Gần đây
        </div>
      )}

      {/* Conversations List */}
      <ChatHistoryList
        conversations={conversations}
        activeId={activeId}
        onSelect={onSelectConversation}
        onUpdateTitle={onUpdateTitle}
        onDelete={onDeleteConversation}
        isLoading={isLoading}
        collapsed={isCollapsed}
      />

      {/* User Profile Footer */}
      <ChatUserProfile collapsed={isCollapsed} />
    </aside>
  )
}
