import { useActiveSeed } from './ActiveSeed.js';
import { DgbLogo } from './DgbLogo.js';
import { WalletMenu } from './WalletMenu.js';
import { useSessionAuth } from './session-auth.js';

// Persistent header. Two things live here:
//
//   • Left: brand cluster. DGB logo + wallet identity. Always clickable —
//     returns to "home" (Dashboard when a wallet is loaded, Login when not).
//     Doesn't sign anyone out. Ever.
//
//   • Right: wallet-menu dropdown (only when signed in). Contains switch,
//     add-another, documentation, settings and Sign out. No lock button:
//     "Lock session" lives on the Settings page (Security), and Explorer
//     is a pill in the dashboard's right panel — neither is duplicated
//     up here.
//
// When no wallet is signed in, the dashboard (and its right panel) is
// not rendered, so the header keeps a single Settings entry — the Login
// page already carries Create / Import CTAs so we don't duplicate those.

export function WalletHeader({
  onHome,
  onOpenSettings,
  onSwitchWallet,
  onCreate,
  onImport,
  onManageWallets,
  onSignOut,
}: {
  onHome: () => void;
  onOpenSettings: () => void;
  onSwitchWallet: (label: string) => void;
  onCreate: () => void;
  onImport: () => void;
  onManageWallets: () => void;
  onSignOut: () => void;
}): JSX.Element {
  const { active } = useActiveSeed();
  const { lock, state: sessionState } = useSessionAuth();

  return (
    <header className="wallet-header">
      <button
        className="header-home"
        onClick={onHome}
        aria-label="Home"
        title={active ? 'Back to wallet' : 'Back to login'}
      >
        <DgbLogo size={28} />
        <div className="header-title">
          <div className="account-name">DigiByte.X Wallet</div>
          <div className="account-sub muted">privacy by default</div>
        </div>
      </button>

      <div className="header-right">
        {active ? (
          <WalletMenu
            onSwitchWallet={onSwitchWallet}
            onCreate={onCreate}
            onImport={onImport}
            onManageWallets={onManageWallets}
            onSettings={onOpenSettings}
            onSignOut={onSignOut}
          />
        ) : (
          // When not signed in, only the Settings entry is useful in
          // the header — Create/Import live on the Login page itself.
          <button
            className="icon-btn"
            onClick={onOpenSettings}
            aria-label="Settings"
            title="Settings"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <circle cx="5" cy="12" r="2" />
              <circle cx="12" cy="12" r="2" />
              <circle cx="19" cy="12" r="2" />
            </svg>
          </button>
        )}
      </div>
    </header>
  );
}