import { useCallback } from 'react'
import { ArrowUpRight, Bug, ChevronDown, MessageSquare, MoreHorizontal, Plus } from 'lucide-react'
import { toast } from 'sonner'

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { TokenUsageMenu } from '@/components/token-usage-menu'
import type { TokenUsage } from '@/lib/chat-conversation'
import { hasTokenUsage } from '@/lib/token-usage'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { formatRelativeTime } from '@/lib/relative-time'

export interface ChatHeaderRecentRun {
  id: string
  title?: string
  createdAt: string
}

export interface ChatHeaderProps {
  activeTitle: string
  onNewChatTab: () => void
  recentRuns?: ChatHeaderRecentRun[]
  activeRunId?: string | null
  sessionUsage?: TokenUsage
  onSelectRun?: (runId: string) => void
  onOpenChatHistory?: () => void
}

/**
 * Header controls for the copilot/chat surface: the active-chat title with a
 * recent-chats history dropdown, plus the new-chat button. Rendered identically
 * whether the chat lives in the side pane (ChatSidebar) or full screen (App
 * content header). There is a single chat conversation at a time — switching
 * between chats happens through the history dropdown.
 */
export function ChatHeader({
  activeTitle,
  onNewChatTab,
  recentRuns = [],
  activeRunId,
  sessionUsage,
  onSelectRun,
  onOpenChatHistory,
}: ChatHeaderProps) {
  const hasHistory = recentRuns.length > 0 || Boolean(onOpenChatHistory)
  const showUsage = hasTokenUsage(sessionUsage)

  const handleDownloadChatLog = useCallback(async () => {
    if (!activeRunId) {
      toast.error('No chat log available yet')
      return
    }
    try {
      // Session-first (new runtime); legacy runs fallback covers old
      // background tabs until stage 7 removes the runs runtime.
      let result: { success: boolean; error?: string }
      try {
        result = await window.ipc.invoke('sessions:downloadLog', { sessionId: activeRunId })
      } catch {
        result = await window.ipc.invoke('runs:downloadLog', { runId: activeRunId })
      }
      if (result.success) {
        toast.success('Chat log saved')
      } else if (result.error) {
        toast.error(result.error)
      }
    } catch (err) {
      console.error('Download chat log failed:', err)
      toast.error('Failed to download chat log')
    }
  }, [activeRunId])

  return (
    <>
      {hasHistory ? (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              className="titlebar-no-drag flex min-w-0 flex-1 items-center gap-2 rounded-md px-3 text-sm font-medium text-foreground outline-none hover:bg-accent/60"
              aria-label="Chat history"
            >
              <MessageSquare className="size-4 shrink-0 text-muted-foreground" />
              <span className="truncate">{activeTitle}</span>
              <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" className="w-72">
            {recentRuns.length > 0 && (
              <DropdownMenuLabel className="text-[10.5px] font-semibold uppercase tracking-wider text-muted-foreground">
                Recent
              </DropdownMenuLabel>
            )}
            {recentRuns.slice(0, 6).map((run) => (
              <DropdownMenuItem
                key={run.id}
                onClick={() => onSelectRun?.(run.id)}
                className={cn('gap-2', activeRunId === run.id && 'bg-accent')}
              >
                <span className="min-w-0 flex-1 truncate">{run.title || '(Untitled chat)'}</span>
                <span className="shrink-0 text-[11px] text-muted-foreground">
                  {formatRelativeTime(run.createdAt)}
                </span>
              </DropdownMenuItem>
            ))}
            {onOpenChatHistory && (
              <>
                {recentRuns.length > 0 && <DropdownMenuSeparator />}
                <DropdownMenuItem onClick={onOpenChatHistory} className="gap-2 text-primary">
                  <ArrowUpRight className="size-4" />
                  View all chats
                </DropdownMenuItem>
              </>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      ) : (
        <div className="flex min-w-0 flex-1 items-center gap-2 px-3 text-sm font-medium text-foreground">
          <MessageSquare className="size-4 shrink-0 text-muted-foreground" />
          <span className="truncate">{activeTitle}</span>
        </div>
      )}
      {showUsage && (
        <TokenUsageMenu
          usage={sessionUsage}
          scope="session"
          className="titlebar-no-drag my-1 shrink-0"
          align="end"
        />
      )}
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            onClick={onNewChatTab}
            className="titlebar-no-drag my-1 h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
            aria-label="New chat"
          >
            <Plus className="size-5" />
          </Button>
        </TooltipTrigger>
        <TooltipContent side="bottom">New chat</TooltipContent>
      </Tooltip>
      <DropdownMenu>
        <Tooltip>
          <TooltipTrigger asChild>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="titlebar-no-drag my-1 h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
                aria-label="Chat options"
              >
                <MoreHorizontal className="size-5" />
              </Button>
            </DropdownMenuTrigger>
          </TooltipTrigger>
          <TooltipContent side="bottom">Chat options</TooltipContent>
        </Tooltip>
        <DropdownMenuContent align="end" className="min-w-48">
          <DropdownMenuItem
            disabled={!activeRunId}
            onSelect={() => {
              void handleDownloadChatLog()
            }}
          >
            <Bug className="size-4" />
            Download chat log
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  )
}
