import { Navigate, useLocation, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_WALLET_SECTION, walletSectionPath, isWalletSection } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
import { defaultLayout } from './defaultLayout';

// /wallet uses the Workspace/Panel system (like /transmission): the wallet list and section nav on the left,
// the section itself on the right. Both talk to the officer-wallet sidecar through the /api/wallet auth
// proxy, which holds no key material of its own — seeds live encrypted in the sidecar and are decrypted
// there only for the length of an unlock window.
//
// The open section is :section in the URL, the open wallet is ?wallet= and any coin-control selection is
// ?coins=, so both panels read the URL with useParams/useSearchParams rather than passing state between
// themselves over a channel. This screen backs both /wallet and /wallet/:section and is the single place
// that decides what an absent or bogus section means.

export const WalletScreen = () => {
  const { section } = useParams();
  const { search } = useLocation();
  const workspace = useDashboardState<LayoutNode>('screens/wallet', defaultLayout);

  // Bare /wallet, or a section that doesn't exist, resolves to a canonical URL rather than rendering a
  // default while the address bar says something else — the nav highlight is derived from the URL. The
  // ?wallet= param is deliberately carried through rather than dropped: /wallet?wallet=3 is a legitimate
  // deep link and canonicalising the section must not silently change which wallet is open.
  if (!isWalletSection(section)) {
    return <Navigate to={`${walletSectionPath(DEFAULT_WALLET_SECTION)}${search}`} replace />;
  }

  return (
    <div className="h-full w-full pt-2">
      <WorkspaceView
        workspace={workspace}
        locked
        appTypes={{ allowed: ['wallet-nav', 'wallet-view'], fallback: 'wallet-view' }}
      />
    </div>
  );
};