import React from "react";
import {
  ChevronLeft,
  NotebookPen,
  Plus,
  Search,
  Settings,
  TerminalSquare,
} from "lucide-react";
import type {
  ResearchFilters,
  ResearchWorkspace,
  WorkspaceViewKind,
} from "../../types/research";
import { RESEARCH_VIEWS } from "../../types/research";
import { STAGE_LABELS } from "./primitives/researchMeta";

interface ResearchSidebarProps {
  workspaces: ResearchWorkspace[];
  activeWorkspaceId: string | null;
  activeView: WorkspaceViewKind;
  filters: ResearchFilters;
  onOpenTerminal?: () => void;
  onOpenSettings?: () => void;
  activeAppView?: "terminal" | "research" | "settings";
  isOpen: boolean;
  onToggle: () => void;
  onCreateWorkspace: () => void;
  onSelectWorkspace: (workspaceId: string) => void;
  onSelectView: (view: WorkspaceViewKind) => void;
  onFilterChange: (patch: Partial<ResearchFilters>) => void;
}

export const ResearchSidebar: React.FC<ResearchSidebarProps> = ({
  workspaces,
  activeWorkspaceId,
  activeView,
  filters,
  onOpenTerminal,
  onOpenSettings,
  activeAppView,
  isOpen,
  onToggle,
  onCreateWorkspace,
  onSelectWorkspace,
  onSelectView,
  onFilterChange,
}) => {
  const activeWorkspace =
    workspaces.find((workspace) => workspace.id === activeWorkspaceId) ?? null;

  if (!isOpen) {
    return (
      <div className="flex h-full min-h-0 flex-col bg-term-bg">
        <div className="flex justify-center border-b border-term-border p-3">
          <button
            type="button"
            onClick={onToggle}
            className="rounded border border-term-border bg-term-elevated p-2 text-term-text-tertiary transition-colors hover:border-info hover:text-term-text"
            title="Expand sidebar (Cmd+B)"
            aria-label="Expand sidebar"
          >
            <ChevronLeft className="h-4 w-4 rotate-180" />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-2">
          <div className="flex flex-col gap-2">
            <button
              type="button"
              onClick={onCreateWorkspace}
              className="group relative flex aspect-square w-full items-center justify-center border border-info/35 bg-info/10 text-info transition-colors hover:border-info hover:text-term-text"
              title="New workspace"
              aria-label="New workspace"
            >
              <Plus className="h-4 w-4" />
              <span className="pointer-events-none absolute left-full ml-2 whitespace-nowrap border border-term-border bg-term-highlight px-2 py-1 text-xs text-term-text opacity-0 transition-opacity group-hover:opacity-100">
                New workspace
              </span>
            </button>
            {RESEARCH_VIEWS.map((view) => (
              <button
                key={view.key}
                type="button"
                onClick={() => onSelectView(view.key)}
                className={`group relative flex aspect-square w-full items-center justify-center border text-xs font-mono transition-colors ${
                  activeView === view.key
                    ? "border-info bg-info/10 text-info"
                    : "border-term-border bg-term-elevated text-term-text-tertiary hover:border-info/60 hover:text-term-text"
                }`}
                title={view.label}
                aria-label={view.label}
              >
                <span>{view.shortLabel.slice(0, 2).toUpperCase()}</span>
                <span className="pointer-events-none absolute left-full ml-2 whitespace-nowrap border border-term-border bg-term-highlight px-2 py-1 text-xs text-term-text opacity-0 transition-opacity group-hover:opacity-100">
                  {view.label}
                </span>
              </button>
            ))}
          </div>
        </div>

        <div className="border-t border-term-border p-2">
          <div className="mb-2 flex flex-col gap-2">
            <button
              type="button"
              onClick={onOpenTerminal}
              className={`group relative flex w-full items-center justify-center border px-2 py-3 transition-colors ${
                activeAppView === "terminal"
                  ? "border-info bg-info/10 text-info"
                  : "border-term-border bg-term-elevated text-term-text-tertiary hover:border-info hover:text-term-text"
              }`}
              title="Open terminal"
              aria-label="Open terminal"
            >
              <TerminalSquare className="h-4 w-4" />
              <span className="pointer-events-none absolute left-full ml-2 whitespace-nowrap border border-term-border bg-term-highlight px-2 py-1 text-xs text-term-text opacity-0 transition-opacity group-hover:opacity-100">
                Terminal
              </span>
            </button>
            <button
              type="button"
              disabled
              className="flex w-full items-center justify-center border border-info bg-info/10 px-2 py-3 text-info"
              title="Research"
              aria-label="Research"
            >
              <NotebookPen className="h-4 w-4" />
            </button>
          </div>
          <button
            type="button"
            onClick={onOpenSettings}
            className={`group relative flex w-full items-center justify-center border px-2 py-3 transition-colors ${
              activeAppView === "settings"
                ? "border-info bg-info/10 text-info"
                : "border-term-border bg-term-elevated text-term-text-tertiary hover:border-info hover:text-term-text"
            }`}
            title="Open settings"
            aria-label="Open settings"
          >
            <Settings className="h-4 w-4" />
            <span className="pointer-events-none absolute left-full ml-2 whitespace-nowrap border border-term-border bg-term-highlight px-2 py-1 text-xs text-term-text opacity-0 transition-opacity group-hover:opacity-100">
              Settings
            </span>
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full min-h-0 flex-col">
      <div className="border-b border-term-border px-4 py-4 sm:px-5 sm:py-5">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0 flex-1">
            <h2 className="text-base font-semibold text-[var(--research-text-strong)] sm:text-lg">
              Research
            </h2>
            <p className="mt-1 text-xs text-[var(--research-text-muted)] sm:mt-1.5 sm:text-sm">
              Silent note enrichment and thesis development.
            </p>
          </div>
          <button
            type="button"
            onClick={onToggle}
            className="inline-flex items-center gap-2 border border-term-border bg-term-surface px-3 py-2 text-xs font-mono text-term-text-tertiary transition-colors hover:border-info hover:text-term-text"
            title="Collapse sidebar (Cmd+B)"
            aria-label="Collapse sidebar"
          >
            <ChevronLeft className="h-4 w-4" />
            <span>Collapse</span>
          </button>
        </div>

        <div className="mt-3 flex justify-end">
          <button
            type="button"
            onClick={onCreateWorkspace}
            className="inline-flex shrink-0 items-center gap-1.5 rounded-xl border border-info/40 bg-info/10 px-2.5 py-2 text-xs uppercase tracking-[0.18em] text-info transition-colors hover:border-info hover:text-term-text sm:gap-2 sm:px-3"
          >
            <Plus className="h-3.5 w-3.5" />
            <span className="hidden sm:inline">New</span>
          </button>
        </div>

        <div className="mt-4 sm:mt-5">
          <label className="text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">
            Active workspace
          </label>
          <select
            value={activeWorkspaceId ?? ""}
            onChange={(event) => onSelectWorkspace(event.target.value)}
            className="mt-2 w-full rounded-2xl border border-term-border bg-term-bg px-3 py-2.5 text-sm text-term-text outline-none transition-colors focus:border-info sm:py-3"
          >
            <option value="">Select workspace</option>
            {workspaces.map((workspace) => (
              <option key={workspace.id} value={workspace.id}>
                {workspace.name}
              </option>
            ))}
          </select>
          {activeWorkspace ? (
            <div className="mt-3 rounded-2xl border border-term-border bg-term-surface p-3 sm:p-4">
              <div className="text-xs uppercase tracking-[0.18em] text-term-text-tertiary">
                {STAGE_LABELS[activeWorkspace.stage]}
              </div>
              <div className="mt-1 truncate text-base font-semibold text-term-text">
                {activeWorkspace.primaryTicker}
              </div>
              <div className="mt-1 text-sm text-term-text-muted">
                {activeWorkspace.pinnedNoteIds.length} pinned notes
              </div>
            </div>
          ) : null}
        </div>
      </div>

      <div className="border-b border-term-border px-4 py-3 sm:px-5 sm:py-4">
        <div className="flex items-center gap-2 rounded-2xl border border-term-border bg-term-bg px-3 py-2">
          <Search className="h-4 w-4 shrink-0 text-term-text-tertiary" />
          <input
            id="research-sidebar-search"
            value={filters.search}
            onChange={(event) => onFilterChange({ search: event.target.value })}
            placeholder="Search notes, ghosts, or evidence"
            className="min-w-0 flex-1 bg-transparent text-sm text-term-text outline-none placeholder:text-term-text-tertiary"
          />
        </div>
      </div>

      <nav className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
        <div className="mb-3 px-2 text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">
          Views
        </div>
        <div className="space-y-1">
          {RESEARCH_VIEWS.map((view, index) => (
            <button
              key={view.key}
              type="button"
              onClick={() => onSelectView(view.key)}
              className={`flex w-full items-center justify-between rounded-2xl px-3 py-2.5 text-left transition-colors sm:py-3 ${
                activeView === view.key
                  ? "border border-info/35 bg-info/10 text-term-text"
                  : "border border-transparent text-term-text-muted hover:bg-term-surface hover:text-term-text"
              }`}
            >
              <span className="text-sm">{view.label}</span>
              <span className="text-[10px] uppercase tracking-[0.18em] text-term-text-tertiary">
                {index + 1}
              </span>
            </button>
          ))}
        </div>

        <div className="mt-6 rounded-2xl border border-term-border bg-term-surface p-4">
          <div className="text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">
            Display
          </div>
          <div className="mt-3 space-y-3 text-sm text-term-text-muted">
            <label className="flex items-center justify-between gap-3">
              <span className="text-xs sm:text-sm">Show archived</span>
              <input
                type="checkbox"
                checked={filters.showArchived}
                onChange={(event) =>
                  onFilterChange({ showArchived: event.target.checked })
                }
                className="h-4 w-4 shrink-0 accent-[var(--semantic-info)]"
              />
            </label>
            <label className="flex items-center justify-between gap-3">
              <span className="text-xs sm:text-sm">Show ghosts</span>
              <input
                type="checkbox"
                checked={filters.showGhosts}
                onChange={(event) =>
                  onFilterChange({ showGhosts: event.target.checked })
                }
                className="h-4 w-4 shrink-0 accent-[var(--semantic-info)]"
              />
            </label>
          </div>
        </div>
      </nav>

      {onOpenTerminal && onOpenSettings ? (
        <div className="border-t border-term-border px-4 py-4">
          <div className="mb-3 px-2 text-[10px] uppercase tracking-[0.2em] text-term-text-tertiary">
            Navigation
          </div>
          <div className="grid grid-cols-3 gap-2">
            <button
              type="button"
              onClick={onOpenTerminal}
              className={`flex items-center justify-center gap-2 border px-3 py-2 text-center text-xs font-mono transition-colors ${
                activeAppView === "terminal"
                  ? "border-info bg-info text-term-bg"
                  : "border-term-border bg-term-surface text-term-text-tertiary hover:border-info/60 hover:text-term-text"
              }`}
              title="Switch to Terminal (Cmd+T)"
            >
              {/* <TerminalSquare className="h-4 w-4" /> */}
              Terminal
            </button>
            <button
              type="button"
              disabled
              className="flex items-center justify-center gap-2 border border-info bg-info/10 px-3 py-2 text-center text-xs font-mono text-info"
              title="Research"
            >
              {/* <NotebookPen className="h-4 w-4" /> */}
              Research
            </button>
            <button
              type="button"
              onClick={onOpenSettings}
              className={`flex items-center justify-center gap-2 border px-3 py-2 text-center text-xs font-mono transition-colors ${
                activeAppView === "settings"
                  ? "border-info bg-info text-term-bg"
                  : "border-term-border bg-term-surface text-term-text-tertiary hover:border-info/60 hover:text-term-text"
              }`}
            >
              {/* <Settings className="h-4 w-4" /> */}
              Settings
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
};
