import React from 'react';
import { LayoutGrid, 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[];
}

export const ResearchToolbar: React.FC<ResearchToolbarProps> = ({
  workspace,
  visibleGhostCount,
  activeJobCount,
  density,
  onDensityChange,
  onToggleInspector,
  jobs,
}) => (
  <div className="flex flex-wrap items-center justify-between gap-4">
    <div>
      <div className="text-[11px] uppercase tracking-[0.2em] text-[#7e93ab]">Workspace</div>
      <div className="mt-1 text-lg font-semibold text-[var(--research-text-strong)]">
        {workspace?.name ?? 'Select a research workspace'}
      </div>
      <div className="mt-1 text-sm text-[var(--research-text-muted)]">
        {workspace
          ? `${workspace.primaryTicker} • ${visibleGhostCount} visible ghost notes • ${activeJobCount} active jobs`
          : 'Create or open a workspace to begin'}
      </div>
    </div>

    <div className="flex flex-wrap items-center gap-2">
      <div className="inline-flex items-center gap-2 rounded-2xl border border-[#1d2430] bg-[#0f141b] px-3 py-2">
        <LayoutGrid className="h-4 w-4 text-[#7e93ab]" />
        <select
          value={density}
          onChange={(event) => onDensityChange(event.target.value as ResearchDensityMode)}
          className="bg-transparent text-sm text-[#dcecff] outline-none"
        >
          {DENSITY_MODES.map((mode) => (
            <option key={mode} value={mode}>
              {mode}
            </option>
          ))}
        </select>
      </div>
      <button
        type="button"
        onClick={onToggleInspector}
        className="inline-flex items-center gap-2 rounded-2xl border border-[#1d2430] bg-[#0f141b] px-3 py-2 text-sm text-[#dcecff] transition-colors hover:border-[#4b698b]"
      >
        <PanelRightOpen className="h-4 w-4" />
        Inspector
      </button>
      <div className="inline-flex items-center gap-2 rounded-2xl border border-[#2f4867] bg-[#102032] px-3 py-2 text-sm text-[#a2ceff]">
        <Sparkles className="h-4 w-4" />
        {jobs.filter((job) => job.status === 'running' || job.status === 'queued').length} queued
      </div>
    </div>
  </div>
);
