import { Menu, Wifi, WifiOff, Sparkles } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { ThemeToggle } from './ThemeToggle'
import type { ConnectionStatus } from '@/store/useConnectionStore'
import { cn } from '@/lib/utils'

interface ChatHeaderProps {
  isMobile: boolean
  isSidebarCollapsed: boolean
  onOpenMobileSidebar: () => void
  onExpandDesktopSidebar: () => void
  connectionStatus: ConnectionStatus
  onToggleRightPanel: () => void
}

export function ChatHeader({
  isMobile,
  isSidebarCollapsed,
  onOpenMobileSidebar,
  onExpandDesktopSidebar,
  connectionStatus,
  onToggleRightPanel,
}: ChatHeaderProps) {
  return (
    <header className="h-14 border-b border-border/40 flex items-center justify-between px-4 font-semibold shrink-0 bg-background/80 backdrop-blur-md z-10">
      <div className="flex items-center gap-3">
        {(isMobile || isSidebarCollapsed) && (
          <Button
            variant="ghost"
            size="icon"
            className="h-9 w-9 rounded-full text-muted-foreground hover:text-foreground"
            onClick={isMobile ? onOpenMobileSidebar : onExpandDesktopSidebar}
          >
            <Menu className="w-5 h-5" />
          </Button>
        )}
      </div>

      {/* Connection Status & Actions */}
      <div className="flex items-center gap-2">
        <Badge
          variant="outline"
          className={cn(
            'gap-1.5 py-0.5 px-2.5 text-[11px] font-normal shadow-sm rounded-full transition-colors',
            connectionStatus === 'connected'
              ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-500'
              : connectionStatus === 'connecting'
              ? 'border-amber-500/30 bg-amber-500/10 text-amber-500 animate-pulse'
              : 'border-destructive/30 bg-destructive/10 text-destructive'
          )}
        >
          {connectionStatus === 'connected' ? (
            <>
              <Wifi className="w-3 h-3" />
              <span>Đã kết nối</span>
            </>
          ) : connectionStatus === 'connecting' ? (
            <span>Đang kết nối...</span>
          ) : (
            <>
              <WifiOff className="w-3 h-3" />
              <span>Ngoại tuyến</span>
            </>
          )}
        </Badge>

        <ThemeToggle />

        <TooltipProvider delayDuration={200}>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground"
                onClick={onToggleRightPanel}
              >
                <Sparkles className="w-4 h-4" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="bottom">
              <p className="text-xs">Thông tin hệ thống</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>
    </header>
  )
}
