import React from 'react';
import {
  ChevronDown,
  LayoutGrid,
  Link as LinkIcon,
  Menu,
  PanelRightOpen,
  Plus,
  Settings,
  TerminalSquare,
} from 'lucide-react';
import type {
  PipelineJob,
  ResearchDensityMode,
  ResearchWorkspace,
  WorkspaceViewKind,
} from '../../types/research';
import { DENSITY_MODES, RESEARCH_VIEWS } from '../../types/research';
import type { ResearchMobilePane } from '../../research/researchUiStore';

interface ResearchHeaderProps {
  workspaces: ResearchWorkspace[];
  activeWorkspaceId: string | null;
  activeView: WorkspaceViewKind;
  density: ResearchDensityMode;
  jobs: PipelineJob[];
  sidebarCollapsed: boolean;
  inspectorPinned: boolean;
  canOpenInspector: boolean;
  mobilePane: ResearchMobilePane;
  onSelectWorkspace: (workspaceId: string) => void;
  onSelectView: (view: WorkspaceViewKind) => void;
  onOpenCapture: () => void;
  onOpenLinkCapture: () => void;
  onToggleSidebar: () => void;
  onToggleInspector: () => void;
  onSetMobilePane: (pane: ResearchMobilePane) => void;
  onDensityChange: (density: ResearchDensityMode) => void;
  onOpenTerminal?: () => void;
  onOpenSettings?: () => void;
}

export const ResearchHeader: React.FC<ResearchHeaderProps> = ({
  workspaces,
  activeWorkspaceId,
  activeView,
  density,
  jobs,
  sidebarCollapsed,
  inspectorPinned,
  canOpenInspector,
  mobilePane,
  onSelectWorkspace,
  onSelectView,
  onOpenCapture,
  onOpenLinkCapture,
  onToggleSidebar,
  onToggleInspector,
  onSetMobilePane,
  onDensityChange,
  onOpenTerminal,
  onOpenSettings,
}) => {
  const activeWorkspaceName =
    workspaces.find((workspace) => workspace.id === activeWorkspaceId)?.name ??
    'Select a workspace';
  const activeJobCount = jobs.filter(
    (job) => job.status === 'queued' || job.status === 'running',
  ).length;

  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div className="flex min-w-0 items-center gap-3">
          <button
            type="button"
            onClick={onToggleSidebar}
            className="hidden h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-term-border bg-term-bg text-term-text-tertiary transition-colors hover:border-info/60 hover:text-term-text lg:inline-flex"
            title={sidebarCollapsed ? 'Show workspace rail' : 'Hide workspace rail'}
          >
            <Menu className="h-4 w-4" />
          </button>
          <button
            type="button"
            onClick={() => onSetMobilePane(mobilePane === 'filters' ? 'none' : 'filters')}
            className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-term-border bg-term-bg text-term-text-tertiary transition-colors hover:border-info/60 hover:text-term-text lg:hidden"
            title="Open workspace filters"
          >
            <Menu className="h-4 w-4" />
          </button>
          <label className="min-w-0">
            <div className="text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">
              Research Workspace
            </div>
            <div className="relative mt-0.5 max-w-[min(64vw,28rem)]">
              <select
                aria-label="Select research workspace"
                value={activeWorkspaceId ?? ''}
                onChange={(event) => onSelectWorkspace(event.target.value)}
                className="w-full appearance-none truncate bg-transparent py-0 pr-7 text-lg font-semibold leading-6 text-term-text outline-none transition-colors hover:text-info focus:text-info"
              >
                <option value="">{activeWorkspaceName}</option>
                {workspaces.map((workspace) => (
                  <option key={workspace.id} value={workspace.id}>
                    {workspace.name}
                  </option>
                ))}
              </select>
              <ChevronDown className="pointer-events-none absolute right-0 top-1/2 h-4 w-4 -translate-y-1/2 text-term-text-tertiary" />
            </div>
          </label>
        </div>

        <div className="flex flex-wrap items-stretch justify-start gap-2 lg:justify-end">
          <div className="flex items-stretch">
            <label className="inline-flex h-10 min-w-0 items-center gap-2 rounded-l-lg border border-term-border bg-term-bg px-3 text-xs uppercase tracking-[0.16em] text-term-text-tertiary">
              <span>View</span>
              <select
                value={activeView}
                onChange={(event) => onSelectView(event.target.value as WorkspaceViewKind)}
                className="max-w-32 bg-transparent text-sm normal-case tracking-normal text-term-text outline-none"
              >
                {RESEARCH_VIEWS.map((view) => (
                  <option key={view.key} value={view.key}>
                    {view.label}
                  </option>
                ))}
              </select>
            </label>

            <label className="-ml-px inline-flex h-10 items-center gap-2 rounded-r-lg border border-term-border bg-term-bg px-3 text-term-text-tertiary">
              <LayoutGrid className="h-3.5 w-3.5" />
              <select
                value={density}
                aria-label="Research density"
                onChange={(event) => onDensityChange(event.target.value as ResearchDensityMode)}
                className="max-w-28 bg-transparent text-sm text-term-text outline-none"
              >
                {DENSITY_MODES.map((mode) => (
                  <option key={mode} value={mode}>
                    {mode}
                  </option>
                ))}
              </select>
            </label>
          </div>

          <div className="flex items-stretch">
            <div
              className="inline-flex h-10 min-w-10 items-center justify-center rounded-l-lg border border-info/35 bg-info/10 px-3 text-sm text-info"
              title="Active research jobs"
              aria-label={`${activeJobCount} active research jobs`}
            >
              {activeJobCount}
            </div>

            <button
              type="button"
              onClick={onToggleInspector}
              className="-ml-px hidden h-10 w-10 items-center justify-center rounded-r-lg border border-term-border bg-term-bg text-term-text-tertiary transition-colors hover:border-info/60 hover:text-term-text lg:inline-flex"
              title={inspectorPinned ? 'Hide inspector pane' : 'Show inspector pane'}
            >
              <PanelRightOpen className="h-4 w-4" />
            </button>
            {canOpenInspector ? (
              <button
                type="button"
                onClick={() =>
                  onSetMobilePane(mobilePane === 'inspector' ? 'none' : 'inspector')
                }
                className="-ml-px inline-flex h-10 w-10 items-center justify-center rounded-r-lg border border-term-border bg-term-bg text-term-text-tertiary transition-colors hover:border-info/60 hover:text-term-text lg:hidden"
                title="Open inspector"
              >
                <PanelRightOpen className="h-4 w-4" />
              </button>
            ) : null}
          </div>

          <div className="flex items-stretch">
            {onOpenTerminal ? (
              <button
                type="button"
                onClick={onOpenTerminal}
                className="inline-flex h-10 items-center gap-2 rounded-l-lg border border-term-border bg-term-bg px-3 text-xs uppercase tracking-[0.16em] text-term-text-tertiary transition-colors hover:border-info/60 hover:text-term-text"
              >
                <TerminalSquare className="h-3.5 w-3.5" />
                Terminal
              </button>
            ) : null}
            {onOpenSettings ? (
              <button
                type="button"
                onClick={onOpenSettings}
                className={`${onOpenTerminal ? '-ml-px' : ''} inline-flex h-10 items-center gap-2 border border-term-border bg-term-bg px-3 text-xs uppercase tracking-[0.16em] text-term-text-tertiary transition-colors hover:border-info/60 hover:text-term-text`}
              >
                <Settings className="h-3.5 w-3.5" />
                Settings
              </button>
            ) : null}
            <button
              type="button"
              onClick={onOpenCapture}
              className={`${onOpenTerminal || onOpenSettings ? '-ml-px' : ''} inline-flex h-10 items-center gap-2 border border-info/40 bg-info/10 px-3 text-xs uppercase tracking-[0.16em] text-info transition-colors hover:border-info hover:text-term-text`}
            >
              <Plus className="h-3.5 w-3.5" />
              Capture
            </button>
            <button
              type="button"
              onClick={onOpenLinkCapture}
              className="-ml-px inline-flex h-10 items-center gap-2 rounded-r-lg border border-info/40 bg-info/10 px-3 text-xs uppercase tracking-[0.16em] text-info transition-colors hover:border-info hover:text-term-text"
            >
              <LinkIcon className="h-3.5 w-3.5" />
              Link Note
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};
