import { useEffect, useMemo, useState } from 'react';
import { api } from '@/api/client';
import type { Project, Session, WorkspacePane, WorkspaceTabKind } from '@/api/types';
import { sessionEvents } from '@/hooks/sessionEvents';
import { activePaneChatId, type UseWorkspacePanesResult } from '@/hooks/useWorkspacePanes';
import type { UseSessionChatsResult } from '@/hooks/useSessionChats';
import { useViewport } from '@/hooks/useViewport';
import { terminalsRegistry } from '@/lib/events';
import { ChatPane } from '@/components/panes/ChatPane';
import { SettingsPane } from '@/components/panes/SettingsPane';
import { TerminalPane } from '@/components/panes/TerminalPane';
import { CoderPane } from '@/components/panes/CoderPane';
import { MarkdownArtifactPane } from '@/components/MarkdownArtifactPane';
import { HtmlArtifactPane } from '@/components/HtmlArtifactPane';
import { OrchestratorPane } from '@/components/panes/OrchestratorPane';
import { ArenaPane } from '@/components/panes/ArenaPane';
import { ChatTabBar, type TabDescriptor } from '@/components/ChatTabBar';
import { SessionLandingPage } from '@/components/SessionLandingPage';
import { cn } from '@/lib/utils';

// Mixed tabs: the kind of tab `i` in a pane, with a legacy fallback to pane.kind.
function tabKindAt(pane: WorkspacePane, i: number): WorkspaceTabKind {
  const k = pane.tabKinds?.[i];
  if (k) return k;
  return pane.kind === 'coder' ? 'coder' : pane.kind === 'terminal' ? 'terminal' : 'chat';
}

interface Props {
  sessionId: string;
  projectId: string;
  // Batch 9: threaded down to ChatPane → ChatInput → AgentPicker.
  agentId?: string | null;
  onAgentChange?: (agentId: string | null) => void | Promise<void>;
  // v1.8: panes + chats hoisted into Session.tsx so the mobile header pill
  // (MobileTabSwitcher) can share state with the pane grid.
  panesHook: UseWorkspacePanesResult;
  chatsHook: UseSessionChatsResult;
  // v1.9: passed through to SettingsPane when one is mounted in the grid.
  session: Session;
  project: Project | null;
  /** New BooCode opens a fresh coder session; chat/terminal split in-place. */
  onAddPane: (kind: 'chat' | 'terminal' | 'coder') => void;
}

export function Workspace({
  sessionId,
  projectId,
  agentId,
  onAgentChange,
  panesHook,
  chatsHook,
  session,
  project,
  onAddPane,
}: Props) {
  const {
    panes,
    tabNumbers,
    activePaneIdx,
    setActivePaneIdx,
    openChatInPane,
    switchTab,
    removeTab,
    closeOtherTabs,
    closeTabsToRight,
    closeAllTabs,
    historyPaneId,
    openSessionHistory,
    closeSessionHistory,
    createTab,
    removePane,
    reopenPane,
    hasClosedPanes,
    isPaneChatPending,
    handlePaneDragStart,
    handlePaneDragOver,
    handlePaneDragLeave,
    handlePaneDrop,
    handlePaneDragEnd,
    dragOverIdx,
    draggingIdxRef,
  } = panesHook;
  const {
    chats,
    archiveChat,
    unarchiveChat,
    deleteChat,
    renameChat,
    handleLandingSend,
    handleLandingSkill,
  } = chatsHook;

  const { isMobile } = useViewport();

  // v1.9: workspace-level maximize state for the settings pane. CSS-only:
  // sibling panes get display:none, the maximized pane fills the grid cell.
  // ESC listener only mounted while maximized. Mobile is always full-width
  // for a single pane so maximize doesn't apply.
  const [maximized, setMaximized] = useState(false);
  const settingsIdx = panes.findIndex((p) => p.kind === 'settings');

  // Esc semantics: maximized → restore; otherwise → close settings pane (only
  // when it's the active pane). Bail when the user is typing in a field or
  // inside an open dialog so we don't eat their cancel keystroke.
  useEffect(() => {
    if (settingsIdx < 0) return;
    function onKey(e: KeyboardEvent) {
      if (e.key !== 'Escape') return;
      const t = e.target;
      if (t instanceof HTMLElement) {
        if (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable) return;
        if (t.closest('[role="dialog"]')) return;
      }
      if (maximized) {
        setMaximized(false);
      } else if (activePaneIdx === settingsIdx) {
        removePane(settingsIdx);
      }
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [maximized, settingsIdx, activePaneIdx, removePane]);

  // If the settings pane was closed (no longer in panes) while maximized,
  // clear the maximize state so the grid renders normally.
  useEffect(() => {
    if (maximized && settingsIdx < 0) setMaximized(false);
  }, [maximized, settingsIdx]);

  function handleNewOrchestrator() {
    sessionEvents.emit({
      type: 'open_flow_launcher',
      project_id: projectId,
      placement: 'split',
    });
  }

  function handleNewArena() {
    sessionEvents.emit({
      type: 'open_arena_launcher',
      project_id: projectId,
      placement: 'split',
    });
  }

  // v1.10 booterm + mixed tabs: per-terminal-TAB label, keyed by the terminal
  // tab id (which keys its tmux session). Numbered across the workspace.
  const terminalLabels = useMemo(() => {
    const out = new Map<string, string>();
    let n = 0;
    for (const p of panes) {
      p.chatIds.forEach((id, i) => {
        if (tabKindAt(p, i) === 'terminal') {
          n += 1;
          out.set(id, `Terminal ${n}`);
        }
      });
    }
    return out;
  }, [panes]);

  // Mixed tabs: descriptors for the tab strip — each tab's id, kind, and label.
  // Terminal tabs have no chats row, so their label comes from terminalLabels.
  function paneTabs(pane: WorkspacePane): TabDescriptor[] {
    return pane.chatIds.map((id, i) => {
      const kind = tabKindAt(pane, i);
      const name =
        kind === 'terminal'
          ? terminalLabels.get(id) ?? 'Terminal'
          : chats.find((c) => c.id === id)?.name ?? null;
      return { id, kind, name };
    });
  }

  return (
    <div className="flex flex-col h-full min-h-0">
      <div
        className={cn('flex-1 min-h-0', isMobile ? 'flex' : 'grid')}
        style={
          isMobile
            ? undefined
            : maximized && settingsIdx >= 0
              ? { gridTemplateColumns: 'minmax(0, 1fr)' }
              : { gridTemplateColumns: `repeat(${panes.length}, minmax(0, 1fr))` }
        }
      >
        {panes.map((pane, idx) => {
          const isSettings = pane.kind === 'settings';
          const isTerminal = pane.kind === 'terminal';
          const isCoder = pane.kind === 'coder';
          const isOrchestrator = pane.kind === 'orchestrator';
          const isArena = pane.kind === 'arena';
          const isArtifact = pane.kind === 'markdown_artifact' || pane.kind === 'html_artifact';
          // v1.9: when maximized, hide every pane except the settings one.
          // display:none keeps the React tree mounted so streams / drafts
          // survive the toggle without re-mount cost.
          const hiddenForMaximize = !isMobile && maximized && idx !== settingsIdx;
          const visible = (!isMobile || idx === activePaneIdx) && !hiddenForMaximize;
          if (!visible) {
            if (hiddenForMaximize) {
              return <div key={pane.id} className="hidden" />;
            }
            return null;
          }
          // Terminal + coder + orchestrator + arena panes own their tab strip (no chats, no ChatTabBar).
          const isChromeless = isSettings || isTerminal || isCoder || isArtifact || isOrchestrator || isArena;
          return (
          <div
            key={pane.id}
            className={cn(
              'flex flex-col h-full min-h-0 border-r border-border last:border-r-0 relative',
              isMobile ? 'flex-1 w-full' : undefined,
              !isMobile && idx === activePaneIdx && 'ring-1 ring-inset ring-ring/20',
              !isMobile && dragOverIdx === idx && draggingIdxRef.current !== idx &&
                'before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-primary before:z-10'
            )}
            onClick={() => setActivePaneIdx(idx)}
            onDragOver={!isMobile && !isChromeless && panes.length > 1 ? handlePaneDragOver(idx) : undefined}
            onDragLeave={!isMobile && !isChromeless && panes.length > 1 ? handlePaneDragLeave : undefined}
            onDrop={!isMobile && !isChromeless && panes.length > 1 ? handlePaneDrop(idx) : undefined}
          >
            <div
              draggable={!isMobile && !isChromeless && panes.length > 1}
              onDragStart={!isMobile && !isChromeless && panes.length > 1 ? handlePaneDragStart(idx) : undefined}
              onDragEnd={!isMobile && !isChromeless && panes.length > 1 ? handlePaneDragEnd : undefined}
            >
              {/* Mixed tabs: one unified strip for every tabbed pane
                  (chat / coder / terminal / empty-landing). The "+" adds a tab
                  of any kind; Split adds a pane. Settings/artifact panes own
                  their own headers. Hidden on mobile (mobile uses pane panes). */}
              {!isMobile && !isSettings && !isArtifact && !isOrchestrator && !isArena && (
                <ChatTabBar
                  pane={pane}
                  tabs={paneTabs(pane)}
                  tabNumbers={tabNumbers}
                  onSwitchTab={(tabIdx) => switchTab(idx, tabIdx)}
                  onRemoveTab={(chatId) => removeTab(idx, chatId)}
                  onCloseOthers={(chatId) => closeOtherTabs(idx, chatId)}
                  onCloseToRight={(chatId) => closeTabsToRight(idx, chatId)}
                  onCloseAll={() => closeAllTabs(idx)}
                  onNewTab={(kind) => void createTab(idx, kind)}
                  onSplitPane={(kind) => onAddPane(kind)}
                  onNewOrchestrator={handleNewOrchestrator}
                  onNewArena={handleNewArena}
                  onReopenPane={hasClosedPanes ? reopenPane : undefined}
                  onShowHistory={() => openSessionHistory(idx)}
                  onRename={renameChat}
                  onRemovePane={panes.length > 1 ? () => removePane(idx) : undefined}
                  // iOS-safe terminal paste (real click is a user gesture), shown
                  // only while the active tab is a terminal.
                  onTerminalPaste={
                    isTerminal
                      ? () => terminalsRegistry.get(activePaneChatId(pane) ?? pane.id)?.paste()
                      : undefined
                  }
                />
              )}
            </div>

            <div className="flex-1 min-h-0 overflow-hidden">
              {isSettings && project ? (
                <SettingsPane
                  session={session}
                  project={project}
                  maximized={maximized}
                  onToggleMaximize={() => setMaximized((v) => !v)}
                  onClose={() => removePane(idx)}
                  isMobile={isMobile}
                />
              ) : isTerminal ? (
                <TerminalPane
                  key={activePaneChatId(pane) ?? pane.id}
                  sessionId={sessionId}
                  paneId={activePaneChatId(pane) ?? pane.id}
                  label={terminalLabels.get(activePaneChatId(pane) ?? pane.id) ?? 'Terminal'}
                  active={idx === activePaneIdx}
                  description={undefined}
                  parentAgent={undefined}
                />
              ) : pane.kind === 'coder' ? (
                <CoderPane
                  sessionId={sessionId}
                  paneId={pane.id}
                  chatId={activePaneChatId(pane)}
                  chatPending={isPaneChatPending(pane.id)}
                  projectPath={project?.path}
                />
              ) : pane.kind === 'orchestrator' && pane.orchestrator_state ? (
                <OrchestratorPane
                  state={pane.orchestrator_state}
                  onClose={() => removePane(idx)}
                />
              ) : pane.kind === 'arena' && pane.arena_state ? (
                <ArenaPane
                  state={pane.arena_state}
                  projectId={projectId}
                  onClose={() => removePane(idx)}
                />
              ) : pane.kind === 'markdown_artifact' && pane.markdown_artifact_state ? (
                <MarkdownArtifactPane
                  chatId={pane.markdown_artifact_state.chat_id}
                  state={pane.markdown_artifact_state}
                  onClose={() => removePane(idx)}
                />
              ) : pane.kind === 'html_artifact' && pane.html_artifact_state ? (
                <HtmlArtifactPane
                  chatId={pane.html_artifact_state.chat_id}
                  state={pane.html_artifact_state}
                  onClose={() => removePane(idx)}
                />
              ) : pane.kind === 'chat' && pane.chatId ? (
                <ChatPane
                  sessionId={sessionId}
                  chatId={pane.chatId}
                  projectId={projectId}
                  agentId={agentId}
                  onAgentChange={onAgentChange}
                  sessionChats={chats}
                  webSearchEnabled={session.web_search_enabled}
                />
              ) : (
                <SessionLandingPage
                  projectId={projectId}
                  sessionId={sessionId}
                  agentId={agentId}
                  onAgentChange={onAgentChange}
                  createChat={() => api.chats.create(sessionId)}
                  onSend={(content) => void handleLandingSend(idx, content)}
                  onSkillInvoke={(skillName, userMessage) => void handleLandingSkill(idx, skillName, userMessage)}
                  chats={chats}
                  onOpenChat={(chatId) => openChatInPane(idx, chatId)}
                  onUnarchiveChat={unarchiveChat}
                  onArchiveChat={archiveChat}
                  onDeleteChat={deleteChat}
                  openHistory={historyPaneId === pane.id}
                  onCloseHistory={closeSessionHistory}
                />
              )}
            </div>
          </div>
          );
        })}
      </div>
    </div>
  );
}
