import figures from 'figures'
import * as React from 'react'
import { useEffect, useRef, useState } from 'react'
import {
  type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,
  logEvent,
} from 'src/services/analytics/index.js'
import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
import { Byline, KeyboardShortcutHint } from '@anthropic/ink'
// eslint-disable-next-line custom-rules/prefer-use-keybindings -- useInput needed for marketplace-specific u/r shortcuts and y/n confirmation not in keybinding schema
import { Box, Text, useInput } from '@anthropic/ink'
import {
  useKeybinding,
  useKeybindings,
} from '../../keybindings/useKeybinding.js'
import type { LoadedPlugin } from '../../types/plugin.js'
import { count } from '../../utils/array.js'
import { shouldSkipPluginAutoupdate } from '../../utils/config.js'
import { errorMessage } from '../../utils/errors.js'
import { clearAllCaches } from '../../utils/plugins/cacheUtils.js'
import {
  createPluginId,
  formatMarketplaceLoadingErrors,
  getMarketplaceSourceDisplay,
  loadMarketplacesWithGracefulDegradation,
} from '../../utils/plugins/marketplaceHelpers.js'
import {
  loadKnownMarketplacesConfig,
  refreshMarketplace,
  removeMarketplaceSource,
  setMarketplaceAutoUpdate,
} from '../../utils/plugins/marketplaceManager.js'
import { updatePluginsForMarketplaces } from '../../utils/plugins/pluginAutoupdate.js'
import { loadAllPlugins } from '../../utils/plugins/pluginLoader.js'
import { isMarketplaceAutoUpdate } from '../../utils/plugins/schemas.js'
import {
  getSettingsForSource,
  updateSettingsForSource,
} from '../../utils/settings/settings.js'
import { plural } from '../../utils/stringUtils.js'
import type { ViewState } from './types.js'

type Props = {
  setViewState: (state: ViewState) => void
  error?: string | null
  setError?: (error: string | null) => void
  setResult: (result: string | null) => void
  exitState: {
    pending: boolean
    keyName: 'Ctrl-C' | 'Ctrl-D' | null
  }
  onManageComplete?: () => void | Promise<void>
  targetMarketplace?: string
  action?: 'update' | 'remove'
}

type MarketplaceState = {
  name: string
  source: string
  lastUpdated?: string
  pluginCount?: number
  installedPlugins?: LoadedPlugin[]
  pendingUpdate?: boolean
  pendingRemove?: boolean
  autoUpdate?: boolean
}

type InternalViewState = 'list' | 'details' | 'confirm-remove'

export function ManageMarketplaces({
  setViewState,
  error,
  setError,
  setResult,
  exitState,
  onManageComplete,
  targetMarketplace,
  action,
}: Props): React.ReactNode {
  const [marketplaceStates, setMarketplaceStates] = useState<
    MarketplaceState[]
  >([])
  const [loading, setLoading] = useState(true)
  const [selectedIndex, setSelectedIndex] = useState(0)
  const [isProcessing, setIsProcessing] = useState(false)
  const [processError, setProcessError] = useState<string | null>(null)
  const [successMessage, setSuccessMessage] = useState<string | null>(null)
  const [progressMessage, setProgressMessage] = useState<string | null>(null)
  const [internalView, setInternalView] = useState<InternalViewState>('list')
  const [selectedMarketplace, setSelectedMarketplace] =
    useState<MarketplaceState | null>(null)
  const [detailsMenuIndex, setDetailsMenuIndex] = useState(0)
  const hasAttemptedAutoAction = useRef(false)

  // Load marketplaces and their installed plugins
  useEffect(() => {
    async function loadMarketplaces() {
      try {
        const config = await loadKnownMarketplacesConfig()
        const { enabled, disabled } = await loadAllPlugins()
        const allPlugins = [...enabled, ...disabled]

        // Load marketplaces with graceful degradation
        const { marketplaces, failures } =
          await loadMarketplacesWithGracefulDegradation(config)

        const states: MarketplaceState[] = []
        for (const { name, config: entry, data: marketplace } of marketplaces) {
          // Get all plugins installed from this marketplace
          const installedFromMarketplace = allPlugins.filter(plugin =>
            plugin.source.endsWith(`@${name}`),
          )

          states.push({
            name,
            source: getMarketplaceSourceDisplay(entry.source),
            lastUpdated: entry.lastUpdated,
            pluginCount: marketplace?.plugins.length,
            installedPlugins: installedFromMarketplace,
            pendingUpdate: false,
            pendingRemove: false,
            autoUpdate: isMarketplaceAutoUpdate(name, entry),
          })
        }

        // Sort: claude-plugin-directory first, then alphabetically
        states.sort((a, b) => {
          if (a.name === 'claude-plugin-directory') return -1
          if (b.name === 'claude-plugin-directory') return 1
          return a.name.localeCompare(b.name)
        })
        setMarketplaceStates(states)

        // Handle marketplace loading errors/warnings
        const successCount = count(marketplaces, m => m.data !== null)
        const errorResult = formatMarketplaceLoadingErrors(
          failures,
          successCount,
        )
        if (errorResult) {
          if (errorResult.type === 'warning') {
            setProcessError(errorResult.message)
          } else {
            throw new Error(errorResult.message)
          }
        }

        // Auto-execute if target and action provided
        if (targetMarketplace && !hasAttemptedAutoAction.current && !error) {
          hasAttemptedAutoAction.current = true
          const targetIndex = states.findIndex(
            s => s.name === targetMarketplace,
          )
          if (targetIndex >= 0) {
            const targetState = states[targetIndex]
            if (action) {
              // Mark the action as pending and execute
              setSelectedIndex(targetIndex + 1) // +1 because "Add Marketplace" is at index 0
              const newStates = [...states]
              if (action === 'update') {
                newStates[targetIndex]!.pendingUpdate = true
              } else if (action === 'remove') {
                newStates[targetIndex]!.pendingRemove = true
              }
              setMarketplaceStates(newStates)
              // Apply the change immediately
              setTimeout(applyChanges, 100, newStates)
            } else if (targetState) {
              // No action - just show the details view for this marketplace
              setSelectedIndex(targetIndex + 1) // +1 because "Add Marketplace" is at index 0
              setSelectedMarketplace(targetState)
              setInternalView('details')
            }
          } else if (setError) {
            setError(`Marketplace not found: ${targetMarketplace}`)
          }
        }
      } catch (err) {
        if (setError) {
          setError(
            err instanceof Error ? err.message : 'Failed to load marketplaces',
          )
        }
        setProcessError(
          err instanceof Error ? err.message : 'Failed to load marketplaces',
        )
      } finally {
        setLoading(false)
      }
    }
    void loadMarketplaces()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [targetMarketplace, action, error])

  // Check if there are any pending changes
  const hasPendingChanges = () => {
    return marketplaceStates.some(
      state => state.pendingUpdate || state.pendingRemove,
    )
  }

  // Get count of pending operations
  const getPendingCounts = () => {
    const updateCount = count(marketplaceStates, s => s.pendingUpdate)
    const removeCount = count(marketplaceStates, s => s.pendingRemove)
    return { updateCount, removeCount }
  }

  // Apply all pending changes
  const applyChanges = async (states?: MarketplaceState[]) => {
    const statesToProcess = states || marketplaceStates
    const wasInDetailsView = internalView === 'details'
    setIsProcessing(true)
    setProcessError(null)
    setSuccessMessage(null)
    setProgressMessage(null)

    try {
      const settings = getSettingsForSource('userSettings')
      let updatedCount = 0
      let removedCount = 0
      const refreshedMarketplaces = new Set<string>()

      for (const state of statesToProcess) {
        // Handle remove
        if (state.pendingRemove) {
          // First uninstall all plugins from this marketplace
          if (state.installedPlugins && state.installedPlugins.length > 0) {
            const newEnabledPlugins = { ...settings?.enabledPlugins }
            for (const plugin of state.installedPlugins) {
              const pluginId = createPluginId(plugin.name, state.name)
              // Mark as disabled/uninstalled
              newEnabledPlugins[pluginId] = false
            }
            updateSettingsForSource('userSettings', {
              enabledPlugins: newEnabledPlugins,
            })
          }

          // Then remove the marketplace
          await removeMarketplaceSource(state.name)
          removedCount++

          logEvent('tengu_marketplace_removed', {
            marketplace_name:
              state.name as AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,
            plugins_uninstalled: state.installedPlugins?.length || 0,
          })
          continue
        }

        // Handle update
        if (state.pendingUpdate) {
          // Refresh individual marketplace for efficiency with progress reporting
          await refreshMarketplace(state.name, (message: string) => {
            setProgressMessage(message)
          })
          updatedCount++
          refreshedMarketplaces.add(state.name.toLowerCase())

          logEvent('tengu_marketplace_updated', {
            marketplace_name:
              state.name as AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,
          })
        }
      }

      // After marketplace clones are refreshed, bump installed plugins from
      // those marketplaces to the new version. Without this, the loader's
      // cache-on-miss (copyPluginToVersionedCache) creates the new version
      // dir on the next loadAllPlugins() call, but installed_plugins.json
      // stays on the old version — so cleanupOrphanedPluginVersionsInBackground
      // stamps the NEW dir with .orphaned_at on the next startup. See #29512.
      // updatePluginOp (called inside the helper) is what actually writes
      // installed_plugins.json via updateInstallationPathOnDisk.
      let updatedPluginCount = 0
      if (refreshedMarketplaces.size > 0) {
        const updatedPluginIds = await updatePluginsForMarketplaces(
          refreshedMarketplaces,
        )
        updatedPluginCount = updatedPluginIds.length
      }

      // Clear caches after changes
      clearAllCaches()

      // Call completion callback
      if (onManageComplete) {
        await onManageComplete()
      }

      // Reload marketplace data to show updated timestamps
      const config = await loadKnownMarketplacesConfig()
      const { enabled, disabled } = await loadAllPlugins()
      const allPlugins = [...enabled, ...disabled]

      const { marketplaces } =
        await loadMarketplacesWithGracefulDegradation(config)

      const newStates: MarketplaceState[] = []
      for (const { name, config: entry, data: marketplace } of marketplaces) {
        const installedFromMarketplace = allPlugins.filter(plugin =>
          plugin.source.endsWith(`@${name}`),
        )

        newStates.push({
          name,
          source: getMarketplaceSourceDisplay(entry.source),
          lastUpdated: entry.lastUpdated,
          pluginCount: marketplace?.plugins.length,
          installedPlugins: installedFromMarketplace,
          pendingUpdate: false,
          pendingRemove: false,
          autoUpdate: isMarketplaceAutoUpdate(name, entry),
        })
      }

      // Sort: claude-plugin-directory first, then alphabetically
      newStates.sort((a, b) => {
        if (a.name === 'claude-plugin-directory') return -1
        if (b.name === 'claude-plugin-directory') return 1
        return a.name.localeCompare(b.name)
      })
      setMarketplaceStates(newStates)

      // Update selected marketplace reference with fresh data
      if (wasInDetailsView && selectedMarketplace) {
        const updatedMarketplace = newStates.find(
          s => s.name === selectedMarketplace.name,
        )
        if (updatedMarketplace) {
          setSelectedMarketplace(updatedMarketplace)
        }
      }

      // Build success message
      const actions: string[] = []
      if (updatedCount > 0) {
        const pluginPart =
          updatedPluginCount > 0
            ? ` (${updatedPluginCount} ${plural(updatedPluginCount, 'plugin')} bumped)`
            : ''
        actions.push(
          `Updated ${updatedCount} ${plural(updatedCount, 'marketplace')}${pluginPart}`,
        )
      }
      if (removedCount > 0) {
        actions.push(
          `Removed ${removedCount} ${plural(removedCount, 'marketplace')}`,
        )
      }

      if (actions.length > 0) {
        const successMsg = `${figures.tick} ${actions.join(', ')}`
        // If we were in details view, stay there and show success
        if (wasInDetailsView) {
          setSuccessMessage(successMsg)
        } else {
          // Otherwise show result and exit to menu
          setResult(successMsg)
          setTimeout(setViewState, 2000, { type: 'menu' as const })
        }
      } else if (!wasInDetailsView) {
        setViewState({ type: 'menu' })
      }
    } catch (err) {
      const errorMsg = errorMessage(err)
      setProcessError(errorMsg)
      if (setError) {
        setError(errorMsg)
      }
    } finally {
      setIsProcessing(false)
      setProgressMessage(null)
    }
  }

  // Handle confirming marketplace removal
  const confirmRemove = async () => {
    if (!selectedMarketplace) return

    // Mark for removal and apply
    const newStates = marketplaceStates.map(state =>
      state.name === selectedMarketplace.name
        ? { ...state, pendingRemove: true }
        : state,
    )
    setMarketplaceStates(newStates)
    await applyChanges(newStates)
  }

  // Build menu options for details view
  const buildDetailsMenuOptions = (
    marketplace: MarketplaceState | null,
  ): Array<{ label: string; secondaryLabel?: string; value: string }> => {
    if (!marketplace) return []

    const options: Array<{
      label: string
      secondaryLabel?: string
      value: string
    }> = [
      {
        label: `Browse plugins (${marketplace.pluginCount ?? 0})`,
        value: 'browse',
      },
      {
        label: 'Update marketplace',
        secondaryLabel: marketplace.lastUpdated
          ? `(last updated ${new Date(marketplace.lastUpdated).toLocaleDateString()})`
          : undefined,
        value: 'update',
      },
    ]

    // Only show auto-update toggle if auto-updater is not globally disabled
    if (!shouldSkipPluginAutoupdate()) {
      options.push({
        label: marketplace.autoUpdate
          ? 'Disable auto-update'
          : 'Enable auto-update',
        value: 'toggle-auto-update',
      })
    }

    options.push({ label: 'Remove marketplace', value: 'remove' })

    return options
  }

  // Handle toggling auto-update for a marketplace
  const handleToggleAutoUpdate = async (marketplace: MarketplaceState) => {
    const newAutoUpdate = !marketplace.autoUpdate
    try {
      await setMarketplaceAutoUpdate(marketplace.name, newAutoUpdate)

      // Update local state
      setMarketplaceStates(prev =>
        prev.map(state =>
          state.name === marketplace.name
            ? { ...state, autoUpdate: newAutoUpdate }
            : state,
        ),
      )

      // Update selected marketplace reference
      setSelectedMarketplace(prev =>
        prev ? { ...prev, autoUpdate: newAutoUpdate } : prev,
      )
    } catch (err) {
      setProcessError(
        err instanceof Error ? err.message : 'Failed to update setting',
      )
    }
  }

  // Escape in details or confirm-remove view - go back to list
  useKeybinding(
    'confirm:no',
    () => {
      setInternalView('list')
      setDetailsMenuIndex(0)
    },
    {
      context: 'Confirmation',
      isActive:
        !isProcessing &&
        (internalView === 'details' || internalView === 'confirm-remove'),
    },
  )

  // Escape in list view with pending changes - clear pending changes
  useKeybinding(
    'confirm:no',
    () => {
      setMarketplaceStates(prev =>
        prev.map(state => ({
          ...state,
          pendingUpdate: false,
          pendingRemove: false,
        })),
      )
      setSelectedIndex(0)
    },
    {
      context: 'Confirmation',
      isActive: !isProcessing && internalView === 'list' && hasPendingChanges(),
    },
  )

  // Escape in list view without pending changes - exit to parent menu
  useKeybinding(
    'confirm:no',
    () => {
      setViewState({ type: 'menu' })
    },
    {
      context: 'Confirmation',
      isActive:
        !isProcessing && internalView === 'list' && !hasPendingChanges(),
    },
  )

  // List view — navigation (up/down/enter via configurable keybindings)
  useKeybindings(
    {
      'select:previous': () => setSelectedIndex(prev => Math.max(0, prev - 1)),
      'select:next': () => {
        const totalItems = marketplaceStates.length + 1
        setSelectedIndex(prev => Math.min(totalItems - 1, prev + 1))
      },
      'select:accept': () => {
        const marketplaceIndex = selectedIndex - 1
        if (selectedIndex === 0) {
          setViewState({ type: 'add-marketplace' })
        } else if (hasPendingChanges()) {
          void applyChanges()
        } else {
          const marketplace = marketplaceStates[marketplaceIndex]
          if (marketplace) {
            setSelectedMarketplace(marketplace)
            setInternalView('details')
            setDetailsMenuIndex(0)
          }
        }
      },
    },
    { context: 'Select', isActive: !isProcessing && internalView === 'list' },
  )

  // List view — marketplace-specific actions (u/r shortcuts)
  useInput(
    input => {
      const marketplaceIndex = selectedIndex - 1
      if ((input === 'u' || input === 'U') && marketplaceIndex >= 0) {
        setMarketplaceStates(prev =>
          prev.map((state, idx) =>
            idx === marketplaceIndex
              ? {
                  ...state,
                  pendingUpdate: !state.pendingUpdate,
                  pendingRemove: state.pendingUpdate
                    ? state.pendingRemove
                    : false,
                }
              : state,
          ),
        )
      } else if ((input === 'r' || input === 'R') && marketplaceIndex >= 0) {
        const marketplace = marketplaceStates[marketplaceIndex]
        if (marketplace) {
          setSelectedMarketplace(marketplace)
          setInternalView('confirm-remove')
        }
      }
    },
    { isActive: !isProcessing && internalView === 'list' },
  )

  // Details view — navigation
  useKeybindings(
    {
      'select:previous': () =>
        setDetailsMenuIndex(prev => Math.max(0, prev - 1)),
      'select:next': () => {
        const menuOptions = buildDetailsMenuOptions(selectedMarketplace)
        setDetailsMenuIndex(prev => Math.min(menuOptions.length - 1, prev + 1))
      },
      'select:accept': () => {
        if (!selectedMarketplace) return
        const menuOptions = buildDetailsMenuOptions(selectedMarketplace)
        const selectedOption = menuOptions[detailsMenuIndex]
        if (selectedOption?.value === 'browse') {
          setViewState({
            type: 'browse-marketplace',
            targetMarketplace: selectedMarketplace.name,
          })
        } else if (selectedOption?.value === 'update') {
          const newStates = marketplaceStates.map(state =>
            state.name === selectedMarketplace.name
              ? { ...state, pendingUpdate: true }
              : state,
          )
          setMarketplaceStates(newStates)
          void applyChanges(newStates)
        } else if (selectedOption?.value === 'toggle-auto-update') {
          void handleToggleAutoUpdate(selectedMarketplace)
        } else if (selectedOption?.value === 'remove') {
          setInternalView('confirm-remove')
        }
      },
    },
    {
      context: 'Select',
      isActive: !isProcessing && internalView === 'details',
    },
  )

  // Confirm-remove view — y/n input
  useInput(
    input => {
      if (input === 'y' || input === 'Y') {
        void confirmRemove()
      } else if (input === 'n' || input === 'N') {
        setInternalView('list')
        setSelectedMarketplace(null)
      }
    },
    { isActive: !isProcessing && internalView === 'confirm-remove' },
  )

  if (loading) {
    return <Text>Loading marketplaces…</Text>
  }

  if (marketplaceStates.length === 0) {
    return (
      <Box flexDirection="column">
        <Box marginBottom={1}>
          <Text bold>Manage marketplaces</Text>
        </Box>

        {/* Add Marketplace option */}
        <Box flexDirection="row" gap={1}>
          <Text color="suggestion">{figures.pointer} +</Text>
          <Text bold color="suggestion">
            Add Marketplace
          </Text>
        </Box>

        <Box marginLeft={3}>
          <Text dimColor italic>
            {exitState.pending ? (
              <>Press {exitState.keyName} again to go back</>
            ) : (
              <Byline>
                <ConfigurableShortcutHint
                  action="select:accept"
                  context="Select"
                  fallback="Enter"
                  description="select"
                />
                <ConfigurableShortcutHint
                  action="confirm:no"
                  context="Confirmation"
                  fallback="Esc"
                  description="go back"
                />
              </Byline>
            )}
          </Text>
        </Box>
      </Box>
    )
  }

  // Show confirmation dialog
  if (internalView === 'confirm-remove' && selectedMarketplace) {
    const pluginCount = selectedMarketplace.installedPlugins?.length || 0
    return (
      <Box flexDirection="column">
        <Text bold color="warning">
          Remove marketplace <Text italic>{selectedMarketplace.name}</Text>?
        </Text>
        <Box flexDirection="column">
          {pluginCount > 0 && (
            <Box marginTop={1}>
              <Text color="warning">
                This will also uninstall {pluginCount}{' '}
                {plural(pluginCount, 'plugin')} from this marketplace:
              </Text>
            </Box>
          )}
          {selectedMarketplace.installedPlugins &&
            selectedMarketplace.installedPlugins.length > 0 && (
              <Box flexDirection="column" marginTop={1} marginLeft={2}>
                {selectedMarketplace.installedPlugins.map(plugin => (
                  <Text key={plugin.name} dimColor>
                    • {plugin.name}
                  </Text>
                ))}
              </Box>
            )}
          <Box marginTop={1}>
            <Text>
              Press <Text bold>y</Text> to confirm or <Text bold>n</Text> to
              cancel
            </Text>
          </Box>
        </Box>
      </Box>
    )
  }

  // Show marketplace details
  if (internalView === 'details' && selectedMarketplace) {
    // Check if this marketplace is currently being processed
    // Check pendingUpdate first so we show updating state immediately when user presses Enter
    const isUpdating = selectedMarketplace.pendingUpdate || isProcessing

    const menuOptions = buildDetailsMenuOptions(selectedMarketplace)

    return (
      <Box flexDirection="column">
        <Text bold>{selectedMarketplace.name}</Text>
        <Text dimColor>{selectedMarketplace.source}</Text>
        <Box marginTop={1}>
          <Text>
            {selectedMarketplace.pluginCount || 0} available{' '}
            {plural(selectedMarketplace.pluginCount || 0, 'plugin')}
          </Text>
        </Box>

        {/* Installed plugins section */}
        {selectedMarketplace.installedPlugins &&
          selectedMarketplace.installedPlugins.length > 0 && (
            <Box flexDirection="column" marginTop={1}>
              <Text bold>
                Installed plugins ({selectedMarketplace.installedPlugins.length}
                ):
              </Text>
              <Box flexDirection="column" marginLeft={1}>
                {selectedMarketplace.installedPlugins.map(plugin => (
                  <Box key={plugin.name} flexDirection="row" gap={1}>
                    <Text>{figures.bullet}</Text>
                    <Box flexDirection="column">
                      <Text>{plugin.name}</Text>
                      <Text dimColor>{plugin.manifest.description}</Text>
                    </Box>
                  </Box>
                ))}
              </Box>
            </Box>
          )}

        {/* Processing indicator */}
        {isUpdating && (
          <Box marginTop={1} flexDirection="column">
            <Text color="claude">Updating marketplace…</Text>
            {progressMessage && <Text dimColor>{progressMessage}</Text>}
          </Box>
        )}

        {/* Success message */}
        {!isUpdating && successMessage && (
          <Box marginTop={1}>
            <Text color="claude">{successMessage}</Text>
          </Box>
        )}

        {/* Error message */}
        {!isUpdating && processError && (
          <Box marginTop={1}>
            <Text color="error">{processError}</Text>
          </Box>
        )}

        {/* Menu options */}
        {!isUpdating && (
          <Box flexDirection="column" marginTop={1}>
            {menuOptions.map((option, idx) => {
              if (!option) return null
              const isSelected = idx === detailsMenuIndex
              return (
                <Box key={option.value}>
                  <Text color={isSelected ? 'suggestion' : undefined}>
                    {isSelected ? figures.pointer : ' '} {option.label}
                  </Text>
                  {option.secondaryLabel && (
                    <Text dimColor> {option.secondaryLabel}</Text>
                  )}
                </Box>
              )
            })}
          </Box>
        )}

        {/* Show explanatory text at the bottom when auto-update is enabled */}
        {!isUpdating &&
          !shouldSkipPluginAutoupdate() &&
          selectedMarketplace.autoUpdate && (
            <Box marginTop={1}>
              <Text dimColor>
                Auto-update enabled. Claude Code will automatically update this
                marketplace and its installed plugins.
              </Text>
            </Box>
          )}

        <Box marginLeft={3}>
          <Text dimColor italic>
            {isUpdating ? (
              <>Please wait…</>
            ) : (
              <Byline>
                <ConfigurableShortcutHint
                  action="select:accept"
                  context="Select"
                  fallback="Enter"
                  description="select"
                />
                <ConfigurableShortcutHint
                  action="confirm:no"
                  context="Confirmation"
                  fallback="Esc"
                  description="go back"
                />
              </Byline>
            )}
          </Text>
        </Box>
      </Box>
    )
  }

  // Show marketplace list
  const { updateCount, removeCount } = getPendingCounts()

  return (
    <Box flexDirection="column">
      <Box marginBottom={1}>
        <Text bold>Manage marketplaces</Text>
      </Box>

      {/* Add Marketplace option */}
      <Box flexDirection="row" gap={1} marginBottom={1}>
        <Text color={selectedIndex === 0 ? 'suggestion' : undefined}>
          {selectedIndex === 0 ? figures.pointer : ' '} +
        </Text>
        <Text bold color={selectedIndex === 0 ? 'suggestion' : undefined}>
          Add Marketplace
        </Text>
      </Box>

      {/* Marketplace list */}
      <Box flexDirection="column">
        {marketplaceStates.map((state, idx) => {
          const isSelected = idx + 1 === selectedIndex // +1 because Add Marketplace is at index 0

          // Build status indicators
          const indicators: string[] = []
          if (state.pendingUpdate) indicators.push('UPDATE')
          if (state.pendingRemove) indicators.push('REMOVE')

          return (
            <Box key={state.name} flexDirection="row" gap={1} marginBottom={1}>
              <Text color={isSelected ? 'suggestion' : undefined}>
                {isSelected ? figures.pointer : ' '}{' '}
                {state.pendingRemove ? figures.cross : figures.bullet}
              </Text>
              <Box flexDirection="column" flexGrow={1}>
                <Box flexDirection="row" gap={1}>
                  <Text
                    bold
                    strikethrough={state.pendingRemove}
                    dimColor={state.pendingRemove}
                  >
                    {state.name === 'claude-plugins-official' && (
                      <Text color="claude">✻ </Text>
                    )}
                    {state.name}
                    {state.name === 'claude-plugins-official' && (
                      <Text color="claude"> ✻</Text>
                    )}
                  </Text>
                  {indicators.length > 0 && (
                    <Text color="warning">[{indicators.join(', ')}]</Text>
                  )}
                </Box>
                <Text dimColor>{state.source}</Text>
                <Text dimColor>
                  {state.pluginCount !== undefined && (
                    <>{state.pluginCount} available</>
                  )}
                  {state.installedPlugins &&
                    state.installedPlugins.length > 0 && (
                      <> • {state.installedPlugins.length} installed</>
                    )}
                  {state.lastUpdated && (
                    <>
                      {' '}
                      • Updated{' '}
                      {new Date(state.lastUpdated).toLocaleDateString()}
                    </>
                  )}
                </Text>
              </Box>
            </Box>
          )
        })}
      </Box>

      {/* Pending changes summary */}
      {hasPendingChanges() && (
        <Box marginTop={1} flexDirection="column">
          <Text>
            <Text bold>Pending changes:</Text>{' '}
            <Text dimColor>Enter to apply</Text>
          </Text>
          {updateCount > 0 && (
            <Text>
              • Update {updateCount} {plural(updateCount, 'marketplace')}
            </Text>
          )}
          {removeCount > 0 && (
            <Text color="warning">
              • Remove {removeCount} {plural(removeCount, 'marketplace')}
            </Text>
          )}
        </Box>
      )}

      {/* Processing indicator */}
      {isProcessing && (
        <Box marginTop={1}>
          <Text color="claude">Processing changes…</Text>
        </Box>
      )}

      {/* Error display */}
      {processError && (
        <Box marginTop={1}>
          <Text color="error">{processError}</Text>
        </Box>
      )}

      <ManageMarketplacesKeyHints
        exitState={exitState}
        hasPendingActions={hasPendingChanges()}
      />
    </Box>
  )
}

type ManageMarketplacesKeyHintsProps = {
  exitState: Props['exitState']
  hasPendingActions: boolean
}

function ManageMarketplacesKeyHints({
  exitState,
  hasPendingActions,
}: ManageMarketplacesKeyHintsProps): React.ReactNode {
  if (exitState.pending) {
    return (
      <Box marginTop={1}>
        <Text dimColor italic>
          Press {exitState.keyName} again to go back
        </Text>
      </Box>
    )
  }

  return (
    <Box marginTop={1}>
      <Text dimColor italic>
        <Byline>
          {hasPendingActions && (
            <ConfigurableShortcutHint
              action="select:accept"
              context="Select"
              fallback="Enter"
              description="apply changes"
            />
          )}
          {!hasPendingActions && (
            <ConfigurableShortcutHint
              action="select:accept"
              context="Select"
              fallback="Enter"
              description="select"
            />
          )}
          {!hasPendingActions && (
            <KeyboardShortcutHint shortcut="u" action="update" />
          )}
          {!hasPendingActions && (
            <KeyboardShortcutHint shortcut="r" action="remove" />
          )}
          <ConfigurableShortcutHint
            action="confirm:no"
            context="Confirmation"
            fallback="Esc"
            description={hasPendingActions ? 'cancel' : 'go back'}
          />
        </Byline>
      </Text>
    </Box>
  )
}