import React from 'react';
import { Plus, Search } 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;
  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,
  onCreateWorkspace,
  onSelectWorkspace,
  onSelectView,
  onFilterChange,
}) => {
  const activeWorkspace =
    workspaces.find((workspace) => workspace.id === activeWorkspaceId) ?? null;

  return (
    <div className="flex h-full flex-col">
      <div className="border-b border-[#1d2430] px-5 py-5">
        <div className="flex items-start justify-between gap-3">
          <div>
            <h2 className="text-lg font-semibold text-[var(--research-text-strong)]">Research</h2>
            <p className="mt-1 text-sm text-[var(--research-text-muted)]">
              Silent note enrichment and thesis development.
            </p>
          </div>
          <button
            type="button"
            onClick={onCreateWorkspace}
            className="inline-flex items-center gap-2 rounded-xl border border-[#2d4762] bg-[#122235] px-3 py-2 text-xs uppercase tracking-[0.18em] text-[#9fcfff] transition-colors hover:border-[#6ea5d7] hover:text-white"
          >
            <Plus className="h-3.5 w-3.5" />
            New
          </button>
        </div>

        <div className="mt-5">
          <label className="text-[10px] uppercase tracking-[0.2em] text-[#7d90a7]">
            Active workspace
          </label>
          <select
            value={activeWorkspaceId ?? ''}
            onChange={(event) => onSelectWorkspace(event.target.value)}
            className="mt-2 w-full rounded-2xl border border-[#1d2430] bg-[#0d1219] px-3 py-3 text-sm text-[#dcecff] outline-none focus:border-[#5b84b1]"
          >
            <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-[#1d2430] bg-[#111822] p-4">
              <div className="text-xs uppercase tracking-[0.18em] text-[#7d90a7]">
                {STAGE_LABELS[activeWorkspace.stage]}
              </div>
              <div className="mt-1 text-base font-semibold text-[#eef4ff]">
                {activeWorkspace.primaryTicker}
              </div>
              <div className="mt-1 text-sm text-[#7d90a7]">
                {activeWorkspace.pinnedNoteIds.length} pinned notes
              </div>
            </div>
          ) : null}
        </div>
      </div>

      <div className="border-b border-[#1d2430] px-5 py-4">
        <div className="flex items-center gap-2 rounded-2xl border border-[#1d2430] bg-[#0d1219] px-3 py-2">
          <Search className="h-4 w-4 text-[#708299]" />
          <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-[#dcecff] outline-none placeholder:text-[#617388]"
          />
        </div>
      </div>

      <nav className="flex-1 overflow-auto px-3 py-4">
        <div className="mb-3 px-2 text-[10px] uppercase tracking-[0.2em] text-[#7d90a7]">
          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-3 text-left transition-colors ${
                activeView === view.key
                  ? 'bg-[#132235] text-[#eef4ff]'
                  : 'text-[#8ea6c0] hover:bg-[#111822] hover:text-white'
              }`}
            >
              <span className="text-sm">{view.label}</span>
              <span className="text-[10px] uppercase tracking-[0.18em] text-[#6e849f]">
                {index + 1}
              </span>
            </button>
          ))}
        </div>

        <div className="mt-6 rounded-2xl border border-[#1d2430] bg-[#111822] p-4">
          <div className="text-[10px] uppercase tracking-[0.2em] text-[#7d90a7]">Display</div>
          <div className="mt-3 space-y-3 text-sm text-[#8ea6c0]">
            <label className="flex items-center justify-between gap-3">
              <span>Show archived</span>
              <input
                type="checkbox"
                checked={filters.showArchived}
                onChange={(event) => onFilterChange({ showArchived: event.target.checked })}
              />
            </label>
            <label className="flex items-center justify-between gap-3">
              <span>Show ghosts</span>
              <input
                type="checkbox"
                checked={filters.showGhosts}
                onChange={(event) => onFilterChange({ showGhosts: event.target.checked })}
              />
            </label>
          </div>
        </div>
      </nav>
    </div>
  );
};
