fusion/packages/dashboard/app/components/Header.tsx

import { Settings, Pause, Play, Square, Download, LayoutGrid, List, Terminal, Lightbulb, Search, X, Activity } from "lucide-react";

interface HeaderProps {
  onOpenSettings?: () => void;
  onOpenGitHubImport?: () => void;
  onOpenPlanning?: () => void;
  onOpenUsage?: () => void;
  onToggleTerminal?: () => void;
  globalPaused?: boolean;
  enginePaused?: boolean;
  onToggleGlobalPause?: () => void;
  onToggleEnginePause?: () => void;
  view?: "board" | "list";
  onChangeView?: (view: "board" | "list") => void;
  searchQuery?: string;
  onSearchChange?: (query: string) => void;
}

export function Header({
  onOpenSettings,
  onOpenGitHubImport,
  onOpenPlanning,
  onOpenUsage,
  onToggleTerminal,
  globalPaused,
  enginePaused,
  onToggleGlobalPause,
  onToggleEnginePause,
  view = "board",
  onChangeView,
  searchQuery = "",
  onSearchChange,
}: HeaderProps) {
  return (
    <header className="header">
      <div className="header-left">
        <img src="/logo.svg" alt="Fusion logo" className="header-logo" width={24} height={24} />
        <h1 className="logo">Fusion</h1>
        <span className="logo-sub">tasks</span>
      </div>
      <div className="header-actions">
        {/* View Toggle */}
        {onChangeView && (
          <div className="view-toggle">
            <button
              className={`view-toggle-btn${view === "board" ? " active" : ""}`}
              onClick={() => onChangeView("board")}
              title="Board view"
              aria-label="Board view"
              aria-pressed={view === "board"}
            >
              <LayoutGrid size={16} />
            </button>
            <button
              className={`view-toggle-btn${view === "list" ? " active" : ""}`}
              onClick={() => onChangeView("list")}
              title="List view"
              aria-label="List view"
              aria-pressed={view === "list"}
            >
              <List size={16} />
            </button>
          </div>
        )}
        {/* Search - only show in board view */}
        {onSearchChange && view === "board" && (
          <div className="header-search">
            <Search size={14} className="header-search-icon" />
            <input
              type="text"
              placeholder="Search tasks..."
              value={searchQuery}
              onChange={(e) => onSearchChange(e.target.value)}
              className="header-search-input"
            />
            {searchQuery && (
              <button
                className="header-search-clear"
                onClick={() => onSearchChange("")}
                aria-label="Clear search"
              >
                <X size={14} />
              </button>
            )}
          </div>
        )}
        {onOpenUsage && (
          <button className="btn-icon" onClick={onOpenUsage} title="View usage">
            <Activity size={16} />
          </button>
        )}
        {/* Import from GitHub */}
        <button className="btn-icon" onClick={onOpenGitHubImport} title="Import from GitHub">
          <Download size={16} />
        </button>
        {/* Plan button - AI-guided task creation */}
        <button
          className="btn-icon"
          onClick={onOpenPlanning}
          title="Create a task with AI planning"
          data-testid="planning-btn"
        >
          <Lightbulb size={16} />
        </button>
        {/* Terminal button - always available for interactive shell access */}
        <button
          className="btn-icon btn-icon--terminal"
          onClick={onToggleTerminal}
          title="Open Terminal"
          data-testid="terminal-toggle-btn"
        >
          <Terminal size={16} />
        </button>
        {/* Pause button (soft pause): stops new work, lets agents finish */}
        <button
          className={`btn-icon${enginePaused ? " btn-icon--paused" : ""}`}
          onClick={onToggleEnginePause}
          title={enginePaused ? "Resume scheduling" : "Pause scheduling"}
          disabled={!!globalPaused}
        >
          {enginePaused ? <Play size={16} /> : <Pause size={16} />}
        </button>
        {/* Stop button (hard stop): kills all agents immediately */}
        <button
          className={`btn-icon${globalPaused ? " btn-icon--stopped" : ""}`}
          onClick={onToggleGlobalPause}
          title={globalPaused ? "Start AI engine" : "Stop AI engine"}
        >
          {globalPaused ? <Play size={16} /> : <Square size={16} />}
        </button>
        <button className="btn-icon" onClick={onOpenSettings} title="Settings">
          <Settings size={16} />
        </button>
      </div>
    </header>
  );
}