import chalk from 'chalk';
import figures from 'figures';
import Fuse from 'fuse.js';
import React from 'react';
import { getOriginalCwd, getSessionId } from '../bootstrap/state.js';
import { useExitOnCtrlCDWithKeybindings } from '../hooks/useExitOnCtrlCDWithKeybindings.js';
import { useSearchInput } from '../hooks/useSearchInput.js';
import { useTerminalSize } from '../hooks/useTerminalSize.js';
import {
  applyColor,
  Box,
  Text,
  useInput,
  useTerminalFocus,
  useTheme,
  type Color,
  Byline,
  Divider,
  KeyboardShortcutHint,
} from '@anthropic/ink';
import { useKeybinding } from '../keybindings/useKeybinding.js';
import { logEvent } from '../services/analytics/index.js';
import type { LogOption, SerializedMessage } from '../types/logs.js';
import { formatLogMetadata, truncateToWidth } from '../utils/format.js';
import { getWorktreePaths } from '../utils/getWorktreePaths.js';
import { getBranch } from '../utils/git.js';
import { getLogDisplayTitle } from '../utils/log.js';
import {
  getFirstMeaningfulUserMessageTextContent,
  getSessionIdFromLog,
  isCustomTitleEnabled,
  saveCustomTitle,
} from '../utils/sessionStorage.js';
import { getTheme } from '../utils/theme.js';
import { ConfigurableShortcutHint } from './ConfigurableShortcutHint.js';
import { Select } from './CustomSelect/select.js';
import { SearchBox } from './SearchBox.js';
import { SessionPreview } from './SessionPreview.js';
import { Spinner } from './Spinner.js';
import { TagTabs } from './TagTabs.js';
import TextInput from './TextInput.js';
import { type TreeNode, TreeSelect } from './ui/TreeSelect.js';

type AgenticSearchState =
  | { status: 'idle' }
  | { status: 'searching' }
  | { status: 'results'; results: LogOption[]; query: string }
  | { status: 'error'; message: string };

export type LogSelectorProps = {
  logs: LogOption[];
  maxHeight?: number;
  forceWidth?: number;
  onCancel?: () => void;
  onSelect: (log: LogOption) => void;
  onLogsChanged?: () => void;
  onLoadMore?: (count: number) => void;
  initialSearchQuery?: string;
  showAllProjects?: boolean;
  onToggleAllProjects?: () => void;
  onAgenticSearch?: (query: string, logs: LogOption[], signal?: AbortSignal) => Promise<LogOption[]>;
};

type LogTreeNode = TreeNode<{ log: LogOption; indexInFiltered: number }>;

function normalizeAndTruncateToWidth(text: string, maxWidth: number): string {
  const normalized = text.replace(/\s+/g, ' ').trim();
  return truncateToWidth(normalized, maxWidth);
}

// Width of prefixes that TreeSelect will add
const PARENT_PREFIX_WIDTH = 2; // '▼ ' or '▶ '
const CHILD_PREFIX_WIDTH = 4; // '  ▸ '

// Deep search constants
const DEEP_SEARCH_MAX_MESSAGES = 2000;
const DEEP_SEARCH_CROP_SIZE = 1000;
const DEEP_SEARCH_MAX_TEXT_LENGTH = 50000; // Cap searchable text per session
const FUSE_THRESHOLD = 0.3;
const DATE_TIE_THRESHOLD_MS = 60 * 1000; // 1 minute - use relevance as tie-breaker within this window
const SNIPPET_CONTEXT_CHARS = 50; // Characters to show before/after match

type Snippet = { before: string; match: string; after: string };

function formatSnippet({ before, match, after }: Snippet, highlightColor: (text: string) => string): string {
  return chalk.dim(before) + highlightColor(match) + chalk.dim(after);
}

function extractSnippet(text: string, query: string, contextChars: number): Snippet | null {
  // Find exact query occurrence (case-insensitive).
  // Note: Fuse does fuzzy matching, so this may miss some fuzzy matches.
  // This is acceptable for now - in the future we could use Fuse's includeMatches
  // option and work with the match indices directly.
  const matchIndex = text.toLowerCase().indexOf(query.toLowerCase());
  if (matchIndex === -1) return null;

  const matchEnd = matchIndex + query.length;
  const snippetStart = Math.max(0, matchIndex - contextChars);
  const snippetEnd = Math.min(text.length, matchEnd + contextChars);

  const beforeRaw = text.slice(snippetStart, matchIndex);
  const matchText = text.slice(matchIndex, matchEnd);
  const afterRaw = text.slice(matchEnd, snippetEnd);

  return {
    before: (snippetStart > 0 ? '…' : '') + beforeRaw.replace(/\s+/g, ' ').trimStart(),
    match: matchText.trim(),
    after: afterRaw.replace(/\s+/g, ' ').trimEnd() + (snippetEnd < text.length ? '…' : ''),
  };
}

function buildLogLabel(
  log: LogOption,
  maxLabelWidth: number,
  options?: {
    isGroupHeader?: boolean;
    isChild?: boolean;
    forkCount?: number;
  },
): string {
  const { isGroupHeader = false, isChild = false, forkCount = 0 } = options || {};

  // TreeSelect will add the prefix, so we just need to account for its width
  const prefixWidth = isGroupHeader && forkCount > 0 ? PARENT_PREFIX_WIDTH : isChild ? CHILD_PREFIX_WIDTH : 0;

  const sessionCountSuffix =
    isGroupHeader && forkCount > 0 ? ` (+${forkCount} other ${forkCount === 1 ? 'session' : 'sessions'})` : '';

  const sidechainSuffix = log.isSidechain ? ' (sidechain)' : '';

  const maxSummaryWidth = maxLabelWidth - prefixWidth - sidechainSuffix.length - sessionCountSuffix.length;
  const truncatedSummary = normalizeAndTruncateToWidth(getLogDisplayTitle(log), maxSummaryWidth);
  return `${truncatedSummary}${sidechainSuffix}${sessionCountSuffix}`;
}

function buildLogMetadata(log: LogOption, options?: { isChild?: boolean; showProjectPath?: boolean }): string {
  const { isChild = false, showProjectPath = false } = options || {};
  // Match the child prefix width for proper alignment
  const childPadding = isChild ? '    ' : ''; // 4 spaces to match '  ▸ '
  const baseMetadata = formatLogMetadata(log);
  const projectSuffix = showProjectPath && log.projectPath ? ` · ${log.projectPath}` : '';
  return childPadding + baseMetadata + projectSuffix;
}

export function LogSelector({
  logs,
  maxHeight = Infinity,
  forceWidth,
  onCancel,
  onSelect,
  onLogsChanged,
  onLoadMore,
  initialSearchQuery,
  showAllProjects = false,
  onToggleAllProjects,
  onAgenticSearch,
}: LogSelectorProps): React.ReactNode {
  const terminalSize = useTerminalSize();
  const columns = forceWidth === undefined ? terminalSize.columns : forceWidth;
  const exitState = useExitOnCtrlCDWithKeybindings(onCancel);
  const isTerminalFocused = useTerminalFocus();
  const isResumeWithRenameEnabled = isCustomTitleEnabled();
  const isDeepSearchEnabled = process.env.USER_TYPE === 'ant';
  const [themeName] = useTheme();
  const theme = getTheme(themeName);
  const highlightColor = React.useMemo(
    () => (text: string) => applyColor(text, theme.warning as Color),
    [theme.warning],
  );
  const isAgenticSearchEnabled = process.env.USER_TYPE === 'ant';

  const [currentBranch, setCurrentBranch] = React.useState<string | null>(null);
  const [branchFilterEnabled, setBranchFilterEnabled] = React.useState(false);
  const [showAllWorktrees, setShowAllWorktrees] = React.useState(false);
  const [hasMultipleWorktrees, setHasMultipleWorktrees] = React.useState(false);
  const currentCwd = React.useMemo(() => getOriginalCwd(), []);
  const [renameValue, setRenameValue] = React.useState('');
  const [renameCursorOffset, setRenameCursorOffset] = React.useState(0);
  const [expandedGroupSessionIds, setExpandedGroupSessionIds] = React.useState<Set<string>>(new Set());
  const [focusedNode, setFocusedNode] = React.useState<LogTreeNode | null>(null);
  // Track focused index for scroll position display in title
  const [focusedIndex, setFocusedIndex] = React.useState(1);
  const [viewMode, setViewMode] = React.useState<'list' | 'preview' | 'rename' | 'search'>('list');
  const [previewLog, setPreviewLog] = React.useState<LogOption | null>(null);
  const prevFocusedIdRef = React.useRef<string | null>(null);
  const [selectedTagIndex, setSelectedTagIndex] = React.useState(0);

  // Agentic search state
  const [agenticSearchState, setAgenticSearchState] = React.useState<AgenticSearchState>({ status: 'idle' });
  // Track if the "Search deeply using Claude" option is focused
  const [isAgenticSearchOptionFocused, setIsAgenticSearchOptionFocused] = React.useState(false);
  // AbortController for cancelling agentic search
  const agenticSearchAbortRef = React.useRef<AbortController | null>(null);

  const {
    query: searchQuery,
    setQuery: setSearchQuery,
    cursorOffset: searchCursorOffset,
  } = useSearchInput({
    isActive: viewMode === 'search' && agenticSearchState.status !== 'searching',
    onExit: () => {
      setViewMode('list');
      logEvent('tengu_session_search_toggled', { enabled: false });
    },
    onExitUp: () => {
      setViewMode('list');
      logEvent('tengu_session_search_toggled', { enabled: false });
    },
    passthroughCtrlKeys: ['n'],
    initialQuery: initialSearchQuery || '',
  });

  // Debounce transcript search for performance (title search is instant)
  const deferredSearchQuery = React.useDeferredValue(searchQuery);

  // Additional debounce for deep search - wait 300ms after typing stops
  const [debouncedDeepSearchQuery, setDebouncedDeepSearchQuery] = React.useState('');
  React.useEffect(() => {
    if (!deferredSearchQuery) {
      setDebouncedDeepSearchQuery('');
      return;
    }
    const timeoutId = setTimeout(setDebouncedDeepSearchQuery, 300, deferredSearchQuery);
    return () => clearTimeout(timeoutId);
  }, [deferredSearchQuery]);

  // State for async deep search results
  const [deepSearchResults, setDeepSearchResults] = React.useState<{
    results: Array<{ log: LogOption; score?: number; searchableText: string }>;
    query: string;
  } | null>(null);
  const [isSearching, setIsSearching] = React.useState(false);

  React.useEffect(() => {
    void getBranch().then(branch => setCurrentBranch(branch));
    void getWorktreePaths(currentCwd).then(paths => {
      setHasMultipleWorktrees(paths.length > 1);
    });
  }, [currentCwd]);

  // Memoize searchable text extraction - only recompute when logs change
  const searchableTextByLog = React.useMemo(() => new Map(logs.map(log => [log, buildSearchableText(log)])), [logs]);

  // Pre-build Fuse index once when logs change (not on every search query)
  const fuseIndex = React.useMemo(() => {
    if (!isDeepSearchEnabled) return null;

    const logsWithText = logs
      .map(log => ({
        log,
        searchableText: searchableTextByLog.get(log) ?? '',
      }))
      .filter(item => item.searchableText);

    return new Fuse(logsWithText, {
      keys: ['searchableText'],
      threshold: FUSE_THRESHOLD,
      ignoreLocation: true,
      includeScore: true,
    });
  }, [logs, searchableTextByLog, isDeepSearchEnabled]);

  // Compute unique tags from logs (before any filtering)
  const uniqueTags = React.useMemo(() => getUniqueTags(logs), [logs]);
  const hasTags = uniqueTags.length > 0;
  const tagTabs = React.useMemo(() => (hasTags ? ['All', ...uniqueTags] : []), [hasTags, uniqueTags]);

  // Clamp out-of-bounds index (e.g., after logs change) without an extra render
  const effectiveTagIndex = tagTabs.length > 0 && selectedTagIndex < tagTabs.length ? selectedTagIndex : 0;
  const selectedTab = tagTabs[effectiveTagIndex];
  const tagFilter = selectedTab === 'All' ? undefined : selectedTab;

  // Tag tabs are now a single line with horizontal scrolling
  const tagTabsLines = hasTags ? 1 : 0;

  // Base filtering (instant) - applies tag, branch, and resume filters
  const baseFilteredLogs = React.useMemo(() => {
    let filtered = logs;
    if (isResumeWithRenameEnabled) {
      filtered = logs.filter(log => {
        const currentSessionId = getSessionId();
        const logSessionId = getSessionIdFromLog(log);
        const isCurrentSession = currentSessionId && logSessionId === currentSessionId;
        // Always show current session
        if (isCurrentSession) {
          return true;
        }
        // Always show sessions with custom titles (e.g., loop mode sessions)
        if (log.customTitle) {
          return true;
        }
        // For full logs, check messages array
        const fromMessages = getFirstMeaningfulUserMessageTextContent(log.messages);
        if (fromMessages) {
          return true;
        }
        // All logs reaching this component are enriched — include if
        // they have a prompt or custom title
        if (log.firstPrompt || log.customTitle) {
          return true;
        }
        return false;
      });
    }

    // Apply tag filter if specified
    if (tagFilter !== undefined) {
      filtered = filtered.filter(log => log.tag === tagFilter);
    }

    if (branchFilterEnabled && currentBranch) {
      filtered = filtered.filter(log => log.gitBranch === currentBranch);
    }

    if (hasMultipleWorktrees && !showAllWorktrees) {
      filtered = filtered.filter(log => log.projectPath === currentCwd);
    }

    return filtered;
  }, [
    logs,
    isResumeWithRenameEnabled,
    tagFilter,
    branchFilterEnabled,
    currentBranch,
    hasMultipleWorktrees,
    showAllWorktrees,
    currentCwd,
  ]);

  // Instant title/branch/tag/PR filtering (runs on every keystroke, but is fast)
  const titleFilteredLogs = React.useMemo(() => {
    if (!searchQuery) {
      return baseFilteredLogs;
    }
    const query = searchQuery.toLowerCase();
    return baseFilteredLogs.filter(log => {
      const displayedTitle = getLogDisplayTitle(log).toLowerCase();
      const branch = (log.gitBranch || '').toLowerCase();
      const tag = (log.tag || '').toLowerCase();
      const prInfo = log.prNumber ? `pr #${log.prNumber} ${log.prRepository || ''}`.toLowerCase() : '';
      return displayedTitle.includes(query) || branch.includes(query) || tag.includes(query) || prInfo.includes(query);
    });
  }, [baseFilteredLogs, searchQuery]);

  // Show searching indicator when query is pending debounce
  React.useEffect(() => {
    if (isDeepSearchEnabled && deferredSearchQuery && deferredSearchQuery !== debouncedDeepSearchQuery) {
      setIsSearching(true);
    }
  }, [deferredSearchQuery, debouncedDeepSearchQuery, isDeepSearchEnabled]);

  // Async deep search effect - runs after 300ms debounce
  React.useEffect(() => {
    if (!isDeepSearchEnabled || !debouncedDeepSearchQuery || !fuseIndex) {
      setDeepSearchResults(null);
      setIsSearching(false);
      return;
    }

    // Use setTimeout(0) to yield to the event loop - prevents UI freeze
    const timeoutId = setTimeout(
      (fuseIndex, debouncedDeepSearchQuery, setDeepSearchResults, setIsSearching) => {
        const results = fuseIndex.search(debouncedDeepSearchQuery);

        // Sort by date (newest first), with relevance as tie-breaker within same minute
        results.sort((a, b) => {
          const aTime = new Date(a.item.log.modified).getTime();
          const bTime = new Date(b.item.log.modified).getTime();
          const timeDiff = bTime - aTime;
          if (Math.abs(timeDiff) > DATE_TIE_THRESHOLD_MS) {
            return timeDiff;
          }
          // Within same minute window, use relevance score (lower is better)
          return (a.score ?? 1) - (b.score ?? 1);
        });

        setDeepSearchResults({
          results: results.map(r => ({
            log: r.item.log,
            score: r.score,
            searchableText: r.item.searchableText,
          })),
          query: debouncedDeepSearchQuery,
        });
        setIsSearching(false);
      },
      0,
      fuseIndex,
      debouncedDeepSearchQuery,
      setDeepSearchResults,
      setIsSearching,
    );

    return () => {
      clearTimeout(timeoutId);
    };
  }, [debouncedDeepSearchQuery, fuseIndex, isDeepSearchEnabled]);

  // Merge title matches with async deep search results
  const { filteredLogs, snippets } = React.useMemo(() => {
    const snippetMap = new Map<LogOption, Snippet>();

    // Start with instant title matches
    let filtered = titleFilteredLogs;

    // Merge in deep search results if available and query matches
    if (deepSearchResults && debouncedDeepSearchQuery && deepSearchResults.query === debouncedDeepSearchQuery) {
      // Extract snippets from deep search results
      for (const result of deepSearchResults.results) {
        if (result.searchableText) {
          const snippet = extractSnippet(result.searchableText, debouncedDeepSearchQuery, SNIPPET_CONTEXT_CHARS);
          if (snippet) {
            snippetMap.set(result.log, snippet);
          }
        }
      }

      // Add transcript-only matches (not already in title matches)
      const titleMatchIds = new Set(filtered.map(log => log.messages[0]?.uuid));
      const transcriptOnlyMatches = deepSearchResults.results
        .map(r => r.log)
        .filter(log => !titleMatchIds.has(log.messages[0]?.uuid));
      filtered = [...filtered, ...transcriptOnlyMatches];
    }

    return { filteredLogs: filtered, snippets: snippetMap };
  }, [titleFilteredLogs, deepSearchResults, debouncedDeepSearchQuery]);

  // Use agentic search results when available and non-empty, otherwise use regular filtered logs
  const displayedLogs = React.useMemo(() => {
    if (agenticSearchState.status === 'results' && agenticSearchState.results.length > 0) {
      return agenticSearchState.results;
    }
    return filteredLogs;
  }, [agenticSearchState, filteredLogs]);

  // Calculate available width for the summary text
  const maxLabelWidth = Math.max(30, columns - 4);

  // Build tree nodes for grouped view
  const treeNodes = React.useMemo<LogTreeNode[]>(() => {
    if (!isResumeWithRenameEnabled) {
      return [];
    }

    const sessionGroups = groupLogsBySessionId(displayedLogs);

    return Array.from(sessionGroups.entries()).map(([sessionId, groupLogs]): LogTreeNode => {
      const latestLog = groupLogs[0]!;
      const indexInFiltered = displayedLogs.indexOf(latestLog);
      const snippet = snippets.get(latestLog);
      const snippetStr = snippet ? formatSnippet(snippet, highlightColor) : null;

      if (groupLogs.length === 1) {
        // Single log - no children
        const metadata = buildLogMetadata(latestLog, {
          showProjectPath: showAllProjects,
        });
        return {
          id: `log:${sessionId}:0`,
          value: { log: latestLog, indexInFiltered },
          label: buildLogLabel(latestLog, maxLabelWidth),
          description: snippetStr ? `${metadata}\n  ${snippetStr}` : metadata,
          dimDescription: true,
        };
      }

      // Multiple logs - parent with children
      const forkCount = groupLogs.length - 1;
      const children: LogTreeNode[] = groupLogs.slice(1).map((log, index) => {
        const childIndexInFiltered = displayedLogs.indexOf(log);
        const childSnippet = snippets.get(log);
        const childSnippetStr = childSnippet ? formatSnippet(childSnippet, highlightColor) : null;
        const childMetadata = buildLogMetadata(log, {
          isChild: true,
          showProjectPath: showAllProjects,
        });
        return {
          id: `log:${sessionId}:${index + 1}`,
          value: { log, indexInFiltered: childIndexInFiltered },
          label: buildLogLabel(log, maxLabelWidth, { isChild: true }),
          description: childSnippetStr ? `${childMetadata}\n      ${childSnippetStr}` : childMetadata,
          dimDescription: true,
        };
      });

      const parentMetadata = buildLogMetadata(latestLog, {
        showProjectPath: showAllProjects,
      });
      return {
        id: `group:${sessionId}`,
        value: { log: latestLog, indexInFiltered },
        label: buildLogLabel(latestLog, maxLabelWidth, {
          isGroupHeader: true,
          forkCount,
        }),
        description: snippetStr ? `${parentMetadata}\n  ${snippetStr}` : parentMetadata,
        dimDescription: true,
        children,
      };
    });
  }, [isResumeWithRenameEnabled, displayedLogs, maxLabelWidth, showAllProjects, snippets, highlightColor]);

  // Build options for old flat list view
  const flatOptions = React.useMemo(() => {
    if (isResumeWithRenameEnabled) {
      return [];
    }

    return displayedLogs.map((log, index) => {
      const rawSummary = getLogDisplayTitle(log);
      const summaryWithSidechain = rawSummary + (log.isSidechain ? ' (sidechain)' : '');
      const summary = normalizeAndTruncateToWidth(summaryWithSidechain, maxLabelWidth);

      const baseDescription = formatLogMetadata(log);
      const projectSuffix = showAllProjects && log.projectPath ? ` · ${log.projectPath}` : '';
      const snippet = snippets.get(log);
      const snippetStr = snippet ? formatSnippet(snippet, highlightColor) : null;

      return {
        label: summary,
        description: snippetStr
          ? `${baseDescription}${projectSuffix}\n  ${snippetStr}`
          : baseDescription + projectSuffix,
        dimDescription: true,
        value: index.toString(),
      };
    });
  }, [isResumeWithRenameEnabled, displayedLogs, highlightColor, maxLabelWidth, showAllProjects, snippets]);

  // Derive the focused log from focusedNode
  const focusedLog = focusedNode?.value.log ?? null;

  const getExpandCollapseHint = (): string => {
    if (!isResumeWithRenameEnabled || !focusedLog) return '';
    const sessionId = getSessionIdFromLog(focusedLog);
    if (!sessionId) return '';

    const sessionLogs = displayedLogs.filter(log => getSessionIdFromLog(log) === sessionId);
    const hasMultipleLogs = sessionLogs.length > 1;

    if (!hasMultipleLogs) return '';

    const isExpanded = expandedGroupSessionIds.has(sessionId);
    const isChildNode = sessionLogs.indexOf(focusedLog) > 0;

    if (isChildNode) {
      return '← to collapse';
    }

    return isExpanded ? '← to collapse' : '→ to expand';
  };

  const handleRenameSubmit = React.useCallback(async () => {
    const sessionId = focusedLog ? getSessionIdFromLog(focusedLog) : undefined;
    if (!focusedLog || !sessionId) {
      setViewMode('list');
      setRenameValue('');
      return;
    }

    if (renameValue.trim()) {
      // Pass fullPath for cross-project sessions (different worktrees)
      await saveCustomTitle(sessionId, renameValue.trim(), focusedLog.fullPath);
      if (isResumeWithRenameEnabled && onLogsChanged) {
        onLogsChanged();
      }
    }
    setViewMode('list');
    setRenameValue('');
  }, [focusedLog, renameValue, onLogsChanged, isResumeWithRenameEnabled]);

  const exitSearchMode = React.useCallback(() => {
    setViewMode('list');
    logEvent('tengu_session_search_toggled', { enabled: false });
  }, []);

  const enterSearchMode = React.useCallback(() => {
    setViewMode('search');
    logEvent('tengu_session_search_toggled', { enabled: true });
  }, []);

  // Handler for triggering agentic search
  const handleAgenticSearch = React.useCallback(async () => {
    if (!searchQuery.trim() || !onAgenticSearch || !isAgenticSearchEnabled) {
      return;
    }

    // Abort any previous search
    agenticSearchAbortRef.current?.abort();
    const abortController = new AbortController();
    agenticSearchAbortRef.current = abortController;

    setAgenticSearchState({ status: 'searching' });
    logEvent('tengu_agentic_search_started', {
      query_length: searchQuery.length,
    });

    try {
      const results = await onAgenticSearch(searchQuery, logs, abortController.signal);
      // Check if aborted before updating state
      if (abortController.signal.aborted) {
        return;
      }
      setAgenticSearchState({ status: 'results', results, query: searchQuery });
      logEvent('tengu_agentic_search_completed', {
        query_length: searchQuery.length,
        results_count: results.length,
      });
    } catch (error) {
      // Don't show error for aborted requests
      if (abortController.signal.aborted) {
        return;
      }
      setAgenticSearchState({
        status: 'error',
        message: error instanceof Error ? error.message : 'Search failed',
      });
      logEvent('tengu_agentic_search_error', {
        query_length: searchQuery.length,
      });
    }
  }, [searchQuery, onAgenticSearch, isAgenticSearchEnabled, logs]);

  // Clear agentic search results/error when query changes
  React.useEffect(() => {
    if (agenticSearchState.status !== 'idle' && agenticSearchState.status !== 'searching') {
      // Clear if the query has changed from the one used for results/error
      if (
        (agenticSearchState.status === 'results' && agenticSearchState.query !== searchQuery) ||
        agenticSearchState.status === 'error'
      ) {
        setAgenticSearchState({ status: 'idle' });
      }
    }
  }, [searchQuery, agenticSearchState]);

  // Cleanup: abort any in-progress agentic search on unmount
  React.useEffect(() => {
    return () => {
      agenticSearchAbortRef.current?.abort();
    };
  }, []);

  // Focus first item when agentic search completes with results
  const prevAgenticStatusRef = React.useRef(agenticSearchState.status);
  React.useEffect(() => {
    const prevStatus = prevAgenticStatusRef.current;
    prevAgenticStatusRef.current = agenticSearchState.status;

    // When search just completed, focus the first item in the list
    if (prevStatus === 'searching' && agenticSearchState.status === 'results') {
      if (isResumeWithRenameEnabled && treeNodes.length > 0) {
        setFocusedNode(treeNodes[0]!);
      } else if (!isResumeWithRenameEnabled && displayedLogs.length > 0) {
        const firstLog = displayedLogs[0]!;
        setFocusedNode({
          id: '0',
          value: { log: firstLog, indexInFiltered: 0 },
          label: '',
        });
      }
    }
  }, [agenticSearchState.status, isResumeWithRenameEnabled, treeNodes, displayedLogs]);

  const handleFlatOptionsSelectFocus = React.useCallback(
    (value: string) => {
      const index = parseInt(value, 10);
      const log = displayedLogs[index];
      if (!log || prevFocusedIdRef.current === index.toString()) {
        return;
      }
      prevFocusedIdRef.current = index.toString();
      setFocusedNode({
        id: index.toString(),
        value: { log, indexInFiltered: index },
        label: '',
      });
      setFocusedIndex(index + 1);
    },
    [displayedLogs],
  );

  const handleTreeSelectFocus = React.useCallback(
    (node: LogTreeNode) => {
      setFocusedNode(node);
      // Update focused index for scroll position display
      const index = displayedLogs.findIndex(log => getSessionIdFromLog(log) === getSessionIdFromLog(node.value.log));
      if (index >= 0) {
        setFocusedIndex(index + 1);
      }
    },
    [displayedLogs],
  );

  // Escape to abort agentic search in progress
  useKeybinding(
    'confirm:no',
    () => {
      agenticSearchAbortRef.current?.abort();
      setAgenticSearchState({ status: 'idle' });
      logEvent('tengu_agentic_search_cancelled', {});
    },
    {
      context: 'Confirmation',
      isActive: viewMode !== 'preview' && agenticSearchState.status === 'searching',
    },
  );

  // Escape in rename mode - exit rename mode
  // Use Settings context so 'n' key doesn't exit (allows typing 'n' in rename input)
  useKeybinding(
    'confirm:no',
    () => {
      setViewMode('list');
      setRenameValue('');
    },
    {
      context: 'Settings',
      isActive: viewMode === 'rename' && agenticSearchState.status !== 'searching',
    },
  );

  // Escape when agentic search option focused - clear and cancel
  useKeybinding(
    'confirm:no',
    () => {
      setSearchQuery('');
      setIsAgenticSearchOptionFocused(false);
      onCancel?.();
    },
    {
      context: 'Confirmation',
      isActive:
        viewMode !== 'preview' &&
        viewMode !== 'rename' &&
        viewMode !== 'search' &&
        isAgenticSearchOptionFocused &&
        agenticSearchState.status !== 'searching',
    },
  );

  // Handle non-escape input
  useInput(
    (input, key) => {
      if (viewMode === 'preview') {
        // Preview mode handles its own input
        return;
      }

      // Agentic search abort is now handled via keybinding
      if (agenticSearchState.status === 'searching') {
        return;
      }

      if (viewMode === 'rename') {
        // Rename mode escape is now handled via keybinding
        // This branch only handles non-escape input in rename mode (via TextInput)
      } else if (viewMode === 'search') {
        // Text input is handled by useSearchInput hook
        if (input.toLowerCase() === 'n' && key.ctrl) {
          exitSearchMode();
        } else if (key.return || key.downArrow) {
          // Focus agentic search option if applicable
          if (
            searchQuery.trim() &&
            onAgenticSearch &&
            isAgenticSearchEnabled &&
            agenticSearchState.status !== 'results'
          ) {
            setIsAgenticSearchOptionFocused(true);
          }
        }
      } else {
        // Handle agentic search option when focused (escape handled via keybinding)
        if (isAgenticSearchOptionFocused) {
          if (key.return) {
            // Trigger agentic search
            void handleAgenticSearch();
            setIsAgenticSearchOptionFocused(false);
            return;
          } else if (key.downArrow) {
            // Move focus to the session list
            setIsAgenticSearchOptionFocused(false);
            return;
          } else if (key.upArrow) {
            // Go back to search mode
            setViewMode('search');
            setIsAgenticSearchOptionFocused(false);
            return;
          }
        }

        // Handle tab cycling for tag tabs
        if (hasTags && key.tab) {
          const offset = key.shift ? -1 : 1;
          setSelectedTagIndex(prev => {
            const current = prev < tagTabs.length ? prev : 0;
            const newIndex = (current + tagTabs.length + offset) % tagTabs.length;
            const newTab = tagTabs[newIndex];
            logEvent('tengu_session_tag_filter_changed', {
              is_all: newTab === 'All',
              tag_count: uniqueTags.length,
            });
            return newIndex;
          });
          return;
        }

        const keyIsNotCtrlOrMeta = !key.ctrl && !key.meta;
        const lowerInput = input.toLowerCase();
        // Ctrl+letter shortcuts for actions (freeing up plain letters for type-to-search)
        if (lowerInput === 'a' && key.ctrl && onToggleAllProjects) {
          onToggleAllProjects();
          logEvent('tengu_session_all_projects_toggled', {
            enabled: !showAllProjects,
          });
        } else if (lowerInput === 'b' && key.ctrl) {
          const newEnabled = !branchFilterEnabled;
          setBranchFilterEnabled(newEnabled);
          logEvent('tengu_session_branch_filter_toggled', {
            enabled: newEnabled,
          });
        } else if (lowerInput === 'w' && key.ctrl && hasMultipleWorktrees) {
          const newValue = !showAllWorktrees;
          setShowAllWorktrees(newValue);
          logEvent('tengu_session_worktree_filter_toggled', {
            enabled: newValue,
          });
        } else if (lowerInput === '/' && keyIsNotCtrlOrMeta) {
          setViewMode('search');
          logEvent('tengu_session_search_toggled', { enabled: true });
        } else if (lowerInput === 'r' && key.ctrl && focusedLog) {
          setViewMode('rename');
          setRenameValue('');
          logEvent('tengu_session_rename_started', {});
        } else if (lowerInput === 'v' && key.ctrl && focusedLog) {
          setPreviewLog(focusedLog);
          setViewMode('preview');
          logEvent('tengu_session_preview_opened', {
            messageCount: focusedLog.messageCount,
          });
        } else if (focusedLog && keyIsNotCtrlOrMeta && input.length > 0 && !/^\s+$/.test(input)) {
          // Any printable character enters search mode and starts typing
          setViewMode('search');
          setSearchQuery(input);
          logEvent('tengu_session_search_toggled', { enabled: true });
        }
      }
    },
    { isActive: true },
  );

  const filterIndicators = [];
  if (branchFilterEnabled && currentBranch) {
    filterIndicators.push(currentBranch);
  }
  if (hasMultipleWorktrees && !showAllWorktrees) {
    filterIndicators.push('current worktree');
  }

  const showAdditionalFilterLine = filterIndicators.length > 0 && viewMode !== 'search';

  // Search box takes 3 lines (border top, content, border bottom)
  const searchBoxLines = 3;
  const headerLines = 5 + searchBoxLines + (showAdditionalFilterLine ? 1 : 0) + tagTabsLines;
  const footerLines = 2;
  const visibleCount = Math.max(1, Math.floor((maxHeight - headerLines - footerLines) / 3));

  // Progressive loading: request more logs when user scrolls near the end
  React.useEffect(() => {
    if (!onLoadMore) return;
    const buffer = visibleCount * 2;
    if (focusedIndex + buffer >= displayedLogs.length) {
      onLoadMore(visibleCount * 3);
    }
  }, [focusedIndex, visibleCount, displayedLogs.length, onLoadMore]);

  // Early return if no logs
  if (logs.length === 0) {
    return null;
  }

  // Show preview mode if active
  if (viewMode === 'preview' && previewLog && isResumeWithRenameEnabled) {
    return (
      <SessionPreview
        log={previewLog}
        onExit={() => {
          setViewMode('list');
          setPreviewLog(null);
        }}
        onSelect={onSelect}
      />
    );
  }

  return (
    <Box flexDirection="column" height={maxHeight - 1}>
      <Box flexShrink={0}>
        <Divider color="suggestion" />
      </Box>
      <Box flexShrink={0}>
        <Text> </Text>
      </Box>

      {hasTags ? (
        <TagTabs
          tabs={tagTabs}
          selectedIndex={effectiveTagIndex}
          availableWidth={columns}
          showAllProjects={showAllProjects}
        />
      ) : (
        <Box flexShrink={0}>
          <Text bold color="suggestion">
            Resume Session
            {viewMode === 'list' && displayedLogs.length > visibleCount && (
              <Text dimColor>
                {' '}
                ({focusedIndex} of {displayedLogs.length})
              </Text>
            )}
          </Text>
        </Box>
      )}
      <SearchBox
        query={searchQuery}
        isFocused={viewMode === 'search'}
        isTerminalFocused={isTerminalFocused}
        cursorOffset={searchCursorOffset}
      />
      {filterIndicators.length > 0 && viewMode !== 'search' && (
        <Box flexShrink={0} paddingLeft={2}>
          <Text dimColor>
            <Byline>{filterIndicators}</Byline>
          </Text>
        </Box>
      )}
      <Box flexShrink={0}>
        <Text> </Text>
      </Box>

      {/* Agentic search loading state */}
      {agenticSearchState.status === 'searching' && (
        <Box paddingLeft={1} flexShrink={0}>
          <Spinner />
          <Text> Searching…</Text>
        </Box>
      )}

      {/* Results header when agentic search completed with results */}
      {agenticSearchState.status === 'results' && agenticSearchState.results.length > 0 && (
        <Box paddingLeft={1} marginBottom={1} flexShrink={0}>
          <Text dimColor italic>
            Claude found these results:
          </Text>
        </Box>
      )}

      {/* Fallback message when agentic search found no results and deep search also has nothing */}
      {agenticSearchState.status === 'results' &&
        agenticSearchState.results.length === 0 &&
        filteredLogs.length === 0 && (
          <Box paddingLeft={1} marginBottom={1} flexShrink={0}>
            <Text dimColor italic>
              No matching sessions found.
            </Text>
          </Box>
        )}

      {/* Error message when agentic search failed and deep search also has nothing */}
      {agenticSearchState.status === 'error' && filteredLogs.length === 0 && (
        <Box paddingLeft={1} marginBottom={1} flexShrink={0}>
          <Text dimColor italic>
            No matching sessions found.
          </Text>
        </Box>
      )}

      {/* Agentic search option - first item in list when searching */}
      {Boolean(searchQuery.trim()) &&
        onAgenticSearch &&
        isAgenticSearchEnabled &&
        agenticSearchState.status !== 'searching' &&
        agenticSearchState.status !== 'results' &&
        agenticSearchState.status !== 'error' && (
          <Box flexShrink={0} flexDirection="column">
            <Box flexDirection="row" gap={1}>
              <Text color={isAgenticSearchOptionFocused ? 'suggestion' : undefined}>
                {isAgenticSearchOptionFocused ? figures.pointer : ' '}
              </Text>
              <Text color={isAgenticSearchOptionFocused ? 'suggestion' : undefined} bold={isAgenticSearchOptionFocused}>
                Search deeply using Claude →
              </Text>
            </Box>
            <Box height={1} />
          </Box>
        )}

      {/* Hide session list when agentic search is in progress */}
      {agenticSearchState.status === 'searching' ? null : viewMode === 'rename' && focusedLog ? (
        <Box paddingLeft={2} flexDirection="column">
          <Text bold>Rename session:</Text>
          <Box paddingTop={1}>
            <TextInput
              value={renameValue}
              onChange={setRenameValue}
              onSubmit={handleRenameSubmit}
              placeholder={getLogDisplayTitle(focusedLog!, 'Enter new session name')}
              columns={columns}
              cursorOffset={renameCursorOffset}
              onChangeCursorOffset={setRenameCursorOffset}
              showCursor={true}
            />
          </Box>
        </Box>
      ) : isResumeWithRenameEnabled ? (
        <TreeSelect
          nodes={treeNodes}
          onSelect={node => {
            onSelect(node.value.log);
          }}
          onFocus={handleTreeSelectFocus}
          onCancel={onCancel}
          focusNodeId={focusedNode?.id}
          visibleOptionCount={visibleCount}
          layout="expanded"
          isDisabled={viewMode === 'search' || isAgenticSearchOptionFocused}
          hideIndexes={false}
          isNodeExpanded={nodeId => {
            // Always expand if in search or branch filter mode
            if (viewMode === 'search' || branchFilterEnabled) {
              return true;
            }
            // Extract sessionId from node ID (format: "group:sessionId")
            const sessionId = typeof nodeId === 'string' && nodeId.startsWith('group:') ? nodeId.substring(6) : null;
            return sessionId ? expandedGroupSessionIds.has(sessionId) : false;
          }}
          onExpand={nodeId => {
            const sessionId = typeof nodeId === 'string' && nodeId.startsWith('group:') ? nodeId.substring(6) : null;
            if (sessionId) {
              setExpandedGroupSessionIds(prev => new Set(prev).add(sessionId));
              logEvent('tengu_session_group_expanded', {});
            }
          }}
          onCollapse={nodeId => {
            const sessionId = typeof nodeId === 'string' && nodeId.startsWith('group:') ? nodeId.substring(6) : null;
            if (sessionId) {
              setExpandedGroupSessionIds(prev => {
                const newSet = new Set(prev);
                newSet.delete(sessionId);
                return newSet;
              });
            }
          }}
          onUpFromFirstItem={enterSearchMode}
        />
      ) : (
        <Select
          options={flatOptions}
          onChange={value => {
            // Old flat list mode - index directly maps to displayedLogs
            const itemIndex = parseInt(value, 10);
            const log = displayedLogs[itemIndex];
            if (log) {
              onSelect(log);
            }
          }}
          visibleOptionCount={visibleCount}
          onCancel={onCancel}
          onFocus={handleFlatOptionsSelectFocus}
          defaultFocusValue={focusedNode?.id.toString()}
          layout="expanded"
          isDisabled={viewMode === 'search' || isAgenticSearchOptionFocused}
          onUpFromFirstItem={enterSearchMode}
        />
      )}
      <Box paddingLeft={2}>
        {exitState.pending ? (
          <Text dimColor>Press {exitState.keyName} again to exit</Text>
        ) : viewMode === 'rename' ? (
          <Text dimColor>
            <Byline>
              <KeyboardShortcutHint shortcut="Enter" action="save" />
              <ConfigurableShortcutHint
                action="confirm:no"
                context="Confirmation"
                fallback="Esc"
                description="cancel"
              />
            </Byline>
          </Text>
        ) : agenticSearchState.status === 'searching' ? (
          <Text dimColor>
            <Byline>
              <Text>Searching with Claude…</Text>
              <ConfigurableShortcutHint
                action="confirm:no"
                context="Confirmation"
                fallback="Esc"
                description="cancel"
              />
            </Byline>
          </Text>
        ) : isAgenticSearchOptionFocused ? (
          <Text dimColor>
            <Byline>
              <KeyboardShortcutHint shortcut="Enter" action="search" />
              <KeyboardShortcutHint shortcut="↓" action="skip" />
              <ConfigurableShortcutHint
                action="confirm:no"
                context="Confirmation"
                fallback="Esc"
                description="cancel"
              />
            </Byline>
          </Text>
        ) : viewMode === 'search' ? (
          <Text dimColor>
            <Byline>
              <Text>{isSearching && isDeepSearchEnabled ? 'Searching…' : 'Type to Search'}</Text>
              <KeyboardShortcutHint shortcut="Enter" action="select" />
              <ConfigurableShortcutHint action="confirm:no" context="Confirmation" fallback="Esc" description="clear" />
            </Byline>
          </Text>
        ) : (
          <Text dimColor>
            <Byline>
              {onToggleAllProjects && (
                <KeyboardShortcutHint
                  shortcut="Ctrl+A"
                  action={`show ${showAllProjects ? 'current dir' : 'all projects'}`}
                />
              )}
              {currentBranch && <KeyboardShortcutHint shortcut="Ctrl+B" action="toggle branch" />}
              {hasMultipleWorktrees && (
                <KeyboardShortcutHint
                  shortcut="Ctrl+W"
                  action={`show ${showAllWorktrees ? 'current worktree' : 'all worktrees'}`}
                />
              )}
              <KeyboardShortcutHint shortcut="Ctrl+V" action="preview" />
              <KeyboardShortcutHint shortcut="Ctrl+R" action="rename" />
              <Text>Type to search</Text>
              <ConfigurableShortcutHint
                action="confirm:no"
                context="Confirmation"
                fallback="Esc"
                description="cancel"
              />
              {getExpandCollapseHint() && <Text>{getExpandCollapseHint()}</Text>}
            </Byline>
          </Text>
        )}
      </Box>
    </Box>
  );
}

/**
 * Extracts searchable text content from a message.
 * Handles both string content and structured content blocks.
 */
function extractSearchableText(message: SerializedMessage): string {
  // Only extract from user and assistant messages that have content
  if (message.type !== 'user' && message.type !== 'assistant') {
    return '';
  }

  const content = 'message' in message ? message.message?.content : undefined;
  if (!content) return '';

  // Handle string content (simple messages)
  if (typeof content === 'string') {
    return content;
  }

  // Handle array of content blocks
  if (Array.isArray(content)) {
    return content
      .map(block => {
        if (typeof block === 'string') return block;
        if ('text' in block && typeof block.text === 'string') return block.text;
        return '';
        // we don't return thinking blocks and tool names here;
        // they're not useful for search, as they can add noise to the fuzzy matching
      })
      .filter(Boolean)
      .join(' ');
  }

  return '';
}

/**
 * Builds searchable text for a log including messages, titles, summaries, and metadata.
 * Crops long transcripts to first/last N messages for performance.
 */
function buildSearchableText(log: LogOption): string {
  const searchableMessages =
    log.messages.length <= DEEP_SEARCH_MAX_MESSAGES
      ? log.messages
      : [...log.messages.slice(0, DEEP_SEARCH_CROP_SIZE), ...log.messages.slice(-DEEP_SEARCH_CROP_SIZE)];
  const messageText = searchableMessages.map(extractSearchableText).filter(Boolean).join(' ');

  const metadata = [
    log.customTitle,
    log.summary,
    log.firstPrompt,
    log.gitBranch,
    log.tag,
    log.prNumber ? `PR #${log.prNumber}` : undefined,
    log.prRepository,
  ]
    .filter(Boolean)
    .join(' ');

  const fullText = `${metadata} ${messageText}`.trim();
  return fullText.length > DEEP_SEARCH_MAX_TEXT_LENGTH ? fullText.slice(0, DEEP_SEARCH_MAX_TEXT_LENGTH) : fullText;
}

function groupLogsBySessionId(filteredLogs: LogOption[]): Map<string, LogOption[]> {
  const groups = new Map<string, LogOption[]>();

  for (const log of filteredLogs) {
    const sessionId = getSessionIdFromLog(log);
    if (sessionId) {
      const existing = groups.get(sessionId);
      if (existing) {
        existing.push(log);
      } else {
        groups.set(sessionId, [log]);
      }
    }
  }

  // Sort logs within each group by modified date (newest first)
  groups.forEach(logs => logs.sort((a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime()));

  return groups;
}

/**
 * Get unique tags from a list of logs, sorted alphabetically
 */
function getUniqueTags(logs: LogOption[]): string[] {
  const tags = new Set<string>();
  for (const log of logs) {
    if (log.tag) {
      tags.add(log.tag);
    }
  }
  return Array.from(tags).sort((a, b) => a.localeCompare(b));
}