client/src/components/dashboard/DashboardHeader.tsx

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { DataFlowDiagram } from "./DataFlowDiagram";
import { Bot, RefreshCw, Filter, Settings } from "lucide-react";
import { cn } from "@/lib/utils";

interface DashboardHeaderProps {
  totalAgents: number;
  activeAgents: number;
  totalCalls: number;
  onRefresh: () => void;
  isRefreshing?: boolean;
  selectedFilter: string;
  onFilterChange: (value: string) => void;
  className?: string;
}

export function DashboardHeader({
  totalAgents,
  activeAgents,
  totalCalls,
  onRefresh,
  isRefreshing = false,
  selectedFilter,
  onFilterChange,
  className,
}: DashboardHeaderProps) {
  return (
    <header className={cn("border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-40", className)} data-testid="dashboard-header">
      <div className="px-6 py-4">
        <div className="flex items-center justify-between gap-4 flex-wrap mb-4">
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                <Bot className="h-5 w-5 text-primary" aria-hidden="true" />
              </div>
              <div>
                <h1 className="text-2xl font-semibold tracking-tight">AI Call Operations</h1>
                <p className="text-sm text-muted-foreground">Real-time monitoring dashboard</p>
              </div>
            </div>
          </div>
          
          <div className="flex items-center gap-4 flex-wrap">
            <div className="flex items-center gap-6">
              <div className="flex items-center gap-2">
                <span className="text-sm text-muted-foreground">AI Agents:</span>
                <Badge variant="secondary" data-testid="badge-agents-count">
                  {activeAgents}/{totalAgents}
                </Badge>
              </div>
              
              <div className="flex items-center gap-2">
                <span className="text-sm text-muted-foreground">Active Calls:</span>
                <Badge variant="default" data-testid="badge-calls-count">{totalCalls}</Badge>
              </div>
            </div>
            
            <div className="flex items-center gap-2">
              <Select value={selectedFilter} onValueChange={onFilterChange}>
                <SelectTrigger className="w-[140px]" data-testid="filter-select">
                  <Filter className="h-4 w-4 mr-2" aria-hidden="true" />
                  <SelectValue placeholder="Filter" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Agents</SelectItem>
                  <SelectItem value="active">Active Only</SelectItem>
                  <SelectItem value="waiting">Waiting Only</SelectItem>
                  <SelectItem value="issue">Issues Only</SelectItem>
                </SelectContent>
              </Select>
              
              <Button
                variant="outline"
                size="icon"
                onClick={onRefresh}
                disabled={isRefreshing}
                aria-label="Refresh data"
                data-testid="button-refresh"
              >
                <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
              </Button>
              
              <Button variant="outline" size="icon" aria-label="Settings" data-testid="button-settings">
                <Settings className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
        
        <div className="flex justify-center">
          <DataFlowDiagram />
        </div>
      </div>
    </header>
  );
}