import { useEffect, useState } from 'react';
import { getIsRemoteMode } from '../../bootstrap/state.js';
import { useNotifications } from '../../context/notifications.js';
import { Text } from '@anthropic/ink';
import { logForDebugging } from '../../utils/debug.js';
import { onPluginsAutoUpdated } from '../../utils/plugins/pluginAutoupdate.js';

/**
 * Hook that displays a notification when plugins have been auto-updated.
 * The notification tells the user to run /reload-plugins to apply the updates.
 */
export function usePluginAutoupdateNotification(): void {
  const { addNotification } = useNotifications();
  const [updatedPlugins, setUpdatedPlugins] = useState<string[]>([]);

  // Register for autoupdate notifications
  useEffect(() => {
    if (getIsRemoteMode()) return;
    const unsubscribe = onPluginsAutoUpdated(plugins => {
      logForDebugging(`Plugin autoupdate notification: ${plugins.length} plugin(s) updated`);
      setUpdatedPlugins(plugins);
    });

    return unsubscribe;
  }, []);

  // Show notification when plugins are updated
  useEffect(() => {
    if (getIsRemoteMode()) return;
    if (updatedPlugins.length === 0) {
      return;
    }

    // Extract plugin names from plugin IDs (format: "name@marketplace")
    const pluginNames = updatedPlugins.map(id => {
      const atIndex = id.indexOf('@');
      return atIndex > 0 ? id.substring(0, atIndex) : id;
    });

    const displayNames = pluginNames.length <= 2 ? pluginNames.join(' and ') : `${pluginNames.length} plugins`;

    addNotification({
      key: 'plugin-autoupdate-restart',
      jsx: (
        <>
          <Text color="success">
            {pluginNames.length === 1 ? 'Plugin' : 'Plugins'} updated: {displayNames}
          </Text>
          <Text dimColor> · Run /reload-plugins to apply</Text>
        </>
      ),
      priority: 'low',
      timeoutMs: 10000,
    });

    logForDebugging(`Showing plugin autoupdate notification for: ${pluginNames.join(', ')}`);
  }, [updatedPlugins, addNotification]);
}
