import React from "react";
import {
  LayoutGrid,
  Menu,
  PanelLeft,
  PanelRightOpen,
  Sparkles,
} from "lucide-react";
import type {
  PipelineJob,
  ResearchDensityMode,
  ResearchWorkspace,
} from "../../types/research";
import { DENSITY_MODES } from "../../types/research";

interface ResearchToolbarProps {
  workspace: ResearchWorkspace | null;
  visibleGhostCount: number;
  activeJobCount: number;
  density: ResearchDensityMode;
  onDensityChange: (density: ResearchDensityMode) => void;
  onToggleInspector: () => void;
  jobs: PipelineJob[];
  extraActions?: React.ReactNode;
  onToggleSidebar?: () => void;
  onToggleInspectorMobile?: () => void;
  isSidebarOpen?: boolean;
  isInspectorOpen?: boolean;
}

export const ResearchToolbar: React.FC<ResearchToolbarProps> = ({
  workspace,
  visibleGhostCount,
  activeJobCount,
  density,
  onDensityChange,
  onToggleInspector,
  jobs,
  extraActions,
  onToggleSidebar,
  onToggleInspectorMobile,
  isSidebarOpen = false,
  isInspectorOpen = false,
}) => (
  <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
    {/* Mobile toggle buttons */}
    <div className="flex items-center gap-2 lg:hidden">
      <button
        type="button"
        onClick={onToggleSidebar}
        className={`inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm transition-colors ${
          isSidebarOpen
            ? "border-info bg-info text-term-bg"
            : "border-term-border bg-term-surface text-term-text hover:border-info/60"
        }`}
        aria-label="Toggle sidebar"
      >
        <Menu className="h-4 w-4" />
      </button>
      <button
        type="button"
        onClick={onToggleInspectorMobile}
        className={`inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-sm transition-colors ${
          isInspectorOpen
            ? "border-info bg-info text-term-bg"
            : "border-term-border bg-term-surface text-term-text hover:border-info/60"
        }`}
        aria-label="Toggle inspector"
      >
        <PanelLeft className="h-4 w-4" />
      </button>
    </div>

    {/* Workspace Info */}
    <div className="min-w-0 flex-1">
      <div className="text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary sm:text-[11px]">
        Workspace
      </div>
      <div className="mt-0.5 text-base font-semibold text-[var(--research-text-strong)] sm:mt-1 sm:text-lg">
        {workspace?.name ?? "Select a research workspace"}
      </div>
      <div className="mt-0.5 text-xs text-[var(--research-text-muted)] sm:mt-1 sm:text-sm">
        {workspace
          ? `${workspace.primaryTicker} • ${visibleGhostCount} ghosts • ${activeJobCount} jobs`
          : "Create or open a workspace to begin"}
      </div>
    </div>

    {/* Controls */}
    <div className="flex flex-wrap items-center gap-2 lg:justify-end">
      {extraActions}
      <div className="inline-flex items-center gap-2 rounded-2xl border border-term-border bg-term-surface px-2 py-2 sm:px-3">
        <LayoutGrid className="h-3.5 w-3.5 text-term-text-tertiary sm:h-4 sm:w-4" />
        <select
          value={density}
          onChange={(event) =>
            onDensityChange(event.target.value as ResearchDensityMode)
          }
          className="bg-transparent text-xs text-term-text outline-none sm:text-sm"
        >
          {DENSITY_MODES.map((mode) => (
            <option key={mode} value={mode}>
              {mode}
            </option>
          ))}
        </select>
      </div>
      <button
        type="button"
        onClick={onToggleInspector}
        className="hidden items-center gap-2 rounded-2xl border border-term-border bg-term-surface px-3 py-2 text-sm text-term-text transition-colors hover:border-info/60 sm:inline-flex"
      >
        <PanelRightOpen className="h-4 w-4" />
        <span className="hidden lg:inline">Inspector</span>
      </button>
      <div className="inline-flex items-center gap-1.5 rounded-2xl border border-info/35 bg-info/10 px-2 py-2 sm:gap-2 sm:px-3">
        <Sparkles className="h-3.5 w-3.5 text-info sm:h-4 sm:w-4" />
        <span className="text-xs text-info sm:text-sm">
          {
            jobs.filter(
              (job) => job.status === "running" || job.status === "queued",
            ).length
          }
        </span>
      </div>
    </div>
  </div>
);
