import React, { useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import SettingsModal from '../settings/SettingsModal';
import { useAppShell } from '../appShellContext';
import useApiTokens from '../settings/useApiTokens';
import useCapabilitySets from '../settings/useCapabilitySets';
import useCapabilities from '../settings/useCapabilities';
import { api } from './appState';

const SettingsRoute = () => {
  const navigate = useNavigate();
  const {
    token,
    notifyApiError,
    setStatusMessage,
    passkeys,
    passkeysSupported,
    passkeysLoading,
    registeringPasskey,
    revokingPasskeyId,
    refreshPasskeys,
    registerPasskey,
    revokePasskey,
  } = useAppShell();

  const {
    tokens,
    loading: tokensLoading,
    creating: creatingToken,
    deletingId,
    regeneratingId,
    createdSecret,
    refresh: refreshTokens,
    create: createToken,
    revoke: revokeToken,
    regenerate: regenerateToken,
    dismissSecret,
  } = useApiTokens({ api, token, notifyApiError, setStatusMessage });

  const {
    capabilitySets,
    capabilitySetsLoading,
    creatingCapabilitySet,
    savingCapabilitySetId,
    deletingCapabilitySetId,
    supportsCapabilitySetLabels,
    refreshCapabilitySets,
    createCapabilitySet,
    updateCapabilitySet,
    deleteCapabilitySet,
  } = useCapabilitySets({ api, token, notifyApiError, setStatusMessage });

  const {
    capabilities,
    capabilitiesLoading,
    refreshCapabilities,
  } = useCapabilities({ api, notifyApiError, token });

  useEffect(() => {
    refreshTokens();
    refreshCapabilitySets();
    refreshCapabilities();
    refreshPasskeys();
  }, [refreshTokens, refreshCapabilitySets, refreshCapabilities, refreshPasskeys]);

  const handleRefresh = useCallback(() => {
    refreshTokens();
    refreshCapabilitySets();
    refreshCapabilities();
  }, [refreshTokens, refreshCapabilitySets, refreshCapabilities]);

  const handleClose = useCallback(() => {
    dismissSecret();
    navigate(-1);
  }, [dismissSecret, navigate]);

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        event.preventDefault();
        handleClose();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [handleClose]);

  useEffect(() => () => {
    dismissSecret();
  }, [dismissSecret]);

  return (
    <SettingsModal
      open
      onClose={handleClose}
      tokens={tokens}
      loading={tokensLoading}
      creating={creatingToken}
      deletingId={deletingId}
      regeneratingId={regeneratingId}
      onRefresh={handleRefresh}
      onCreate={createToken}
      onDelete={revokeToken}
      onRegenerate={regenerateToken}
      createdToken={createdSecret}
      onDismissCreatedToken={dismissSecret}
      capabilitySets={capabilitySets}
      capabilitySetsLoading={capabilitySetsLoading}
      creatingCapabilitySet={creatingCapabilitySet}
      savingCapabilitySetId={savingCapabilitySetId}
      deletingCapabilitySetId={deletingCapabilitySetId}
      supportsCapabilitySetLabels={supportsCapabilitySetLabels}
      onRefreshCapabilitySets={refreshCapabilitySets}
      capabilities={capabilities}
      capabilitiesLoading={capabilitiesLoading}
      onRefreshCapabilities={refreshCapabilities}
      onCreateCapabilitySet={createCapabilitySet}
      onUpdateCapabilitySet={updateCapabilitySet}
      onDeleteCapabilitySet={deleteCapabilitySet}
      passkeys={passkeys}
      passkeysSupported={passkeysSupported}
      passkeysLoading={passkeysLoading}
      registeringPasskey={registeringPasskey}
      revokingPasskeyId={revokingPasskeyId}
      onRefreshPasskeys={refreshPasskeys}
      onRegisterPasskey={registerPasskey}
      onRevokePasskey={revokePasskey}
    />
  );
};

export default SettingsRoute;