import { Plus, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ChatHistoryList } from './ChatHistoryList'
import { ChatUserProfile } from './ChatUserProfile'
import type { ConversationItem } from '@/hooks/useConversations'
import { cn } from '@/lib/utils'

interface ChatMobileSidebarProps {
  isOpen: boolean
  onClose: () => 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 ChatMobileSidebar({
  isOpen,
  onClose,
  conversations,
  activeId,
  isLoading,
  onSelectConversation,
  onCreateNewConversation,
  onUpdateTitle,
  onDeleteConversation,
}: ChatMobileSidebarProps) {
  return (
    <>
      {/* Mobile Drawer Overlay */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 md:hidden animate-in fade-in"
          onClick={onClose}
        />
      )}

      {/* Mobile Sidebar */}
      <aside
        className={cn(
          'fixed inset-y-0 left-0 w-72 bg-card border-r border-border z-50 flex flex-col md:hidden transition-transform duration-300 shadow-2xl',
          isOpen ? 'translate-x-0' : '-translate-x-full'
        )}
      >
        <div className="p-4 border-b border-border/60 flex items-center justify-between gap-2">
          <Button
            onClick={() => {
              onCreateNewConversation()
              onClose()
            }}
            variant="secondary"
            className="w-full justify-start gap-2.5 rounded-full shadow-sm font-medium"
          >
            <Plus className="w-4 h-4" />
            <span>Trò chuyện mới</span>
          </Button>

          <Button
            variant="ghost"
            size="icon"
            className="rounded-full"
            onClick={onClose}
          >
            <X className="w-5 h-5" />
          </Button>
        </div>

        <div className="px-4 pt-3 pb-1 font-semibold text-[11px] uppercase tracking-wider text-muted-foreground select-none">
          Gần đây
        </div>

        <ChatHistoryList
          conversations={conversations}
          activeId={activeId}
          onSelect={(id: string) => {
            onSelectConversation(id)
            onClose()
          }}
          onUpdateTitle={onUpdateTitle}
          onDelete={onDeleteConversation}
          isLoading={isLoading}
        />

        <ChatUserProfile className="border-t border-border/60 bg-muted/30" />
      </aside>
    </>
  )
}
