"use client";

import { cn } from "@/lib/utils";
import { Wifi, WifiOff, Radio, Menu, X } from "lucide-react";
import { useAgentStore } from "@/stores/agentStore";

export interface HeaderProps {
  title: string;
  isConnected?: boolean;
  showAgentStatus?: boolean;
  className?: string;
  onMenuClick?: () => void;
  isSidebarOpen?: boolean;
}

export function Header({
  title,
  isConnected = true,
  showAgentStatus = true,
  className,
  onMenuClick,
  isSidebarOpen = true,
}: HeaderProps) {
  const isAgentConnected = useAgentStore((state) => state.isConnected);

  return (
    <header
      className={cn(
        "h-16 bg-[#1e1e1e] border-b border-[#2c2c2c]",
        "flex items-center justify-between px-6",
        "sticky top-0 z-30",
        className,
      )}
    >
      <div className="flex items-center gap-4">
        <button
          onClick={onMenuClick}
          className="p-2 rounded-lg hover:bg-[#2c2c2c] transition-colors text-[#a0a0a0]"
          aria-label={isSidebarOpen ? "收起侧边栏" : "展开侧边栏"}
        >
          {isSidebarOpen ? (
            <X className="w-5 h-5" />
          ) : (
            <Menu className="w-5 h-5" />
          )}
        </button>
        <h1 className="text-[#e1e1e1] text-xl font-bold tracking-tight">{title}</h1>
      </div>

      <div className="flex items-center gap-4">
        {/* Agent WebSocket Status */}
        {showAgentStatus && (
          <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#121212] border border-[#2c2c2c]">
            <Radio className="w-3.5 h-3.5 text-[#00ffcc]" />
            {isAgentConnected ? (
              <>
                <span className="w-2 h-2 rounded-full bg-[#00ffcc] animate-pulse" />
                <span className="text-[#00ffcc] text-xs font-bold uppercase tracking-wider">
                  Agents
                </span>
              </>
            ) : (
              <>
                <span className="w-2 h-2 rounded-full bg-[#ff5252]" />
                <span className="text-[#ff5252] text-xs font-bold uppercase tracking-wider">Agents Off</span>
              </>
            )}
          </div>
        )}

        {/* General Connection Status */}
        <div className="flex items-center gap-2">
          {isConnected ? (
            <>
              <Wifi className="w-4 h-4 text-[#00ffcc]" />
              <span className="text-[#00ffcc] text-sm font-bold">
                Live
              </span>
            </>
          ) : (
            <>
              <WifiOff className="w-4 h-4 text-[#ff5252]" />
              <span className="text-[#ff5252] text-sm font-bold">
                Offline
              </span>
            </>
          )}
        </div>
      </div>
    </header>
  );
}
