Delegation Framework Tutorial for Intuition (ERC-7710)

// src/lib/WalletContext.tsx
'use client';

import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import { createWalletClient, custom, createPublicClient, http, WalletClient, PublicClient, Address, EIP1193Provider } from 'viem';
import { intuitionMainnet } from './chains';

// Augment Window with viem's own EIP-1193 provider type, so `window.ethereum`
// is usable everywhere below without an `any` cast.
declare global {
  interface Window {
    ethereum?: EIP1193Provider;
  }
}

interface WalletContextType {
  address: Address | null;
  walletClient: WalletClient | null;
  publicClient: PublicClient;
  connect: () => Promise<void>;
  disconnect: () => void;
  ensureChain: () => Promise<void>;
}

// We create one shared PublicClient for the whole app.
// This is used for read-only operations like fetching balances or simulating transactions.
const publicClient = createPublicClient({
  chain: intuitionMainnet,
  transport: http(),
}) as PublicClient;

const WalletContext = createContext<WalletContextType | null>(null);

// viem wraps the raw provider error, so the 4902 code can land on the error
// itself or one level down in `.cause` - this reads it out without `any`.
function getErrorCode(err: unknown): number | undefined {
  if (typeof err !== 'object' || err === null) return undefined;
  const code = (err as { code?: unknown }).code;
  if (typeof code === 'number') return code;
  const cause = (err as { cause?: unknown }).cause;
  if (typeof cause === 'object' && cause !== null) {
    const causeCode = (cause as { code?: unknown }).code;
    if (typeof causeCode === 'number') return causeCode;
  }
  return undefined;
}

// This helper switches the user to Intuition Mainnet.
// If the chain hasn't been added to MetaMask yet (error 4902), it adds it first.
async function switchToIntuition(client: WalletClient) {
  try {
    await client.switchChain({ id: intuitionMainnet.id });
  } catch (err) {
    const code = getErrorCode(err);
    const message = err instanceof Error ? err.message : '';
    if (code === 4902 || /Unrecognized chain/i.test(message)) {
      await client.addChain({ chain: intuitionMainnet });
      await client.switchChain({ id: intuitionMainnet.id });
    } else {
      throw err;
    }
  }
}

export function WalletProvider({ children }: { children: ReactNode }) {
  const [address, setAddress] = useState<Address | null>(null);
  const [walletClient, setWalletClient] = useState<WalletClient | null>(null);

  const connect = async () => {
    if (typeof window === 'undefined' || !window.ethereum) {
      alert('Please install MetaMask!');
      return;
    }
    const ethereum = window.ethereum;
    try {
      const client = createWalletClient({
        chain: intuitionMainnet,
        transport: custom(ethereum),
      });
      const [addr] = await client.requestAddresses();

      // We create a new client bound to the user's address.
      // This prevents "Could not find an Account" errors in viem when signing.
      const boundClient = createWalletClient({
        account: addr,
        chain: intuitionMainnet,
        transport: custom(ethereum),
      });

      await switchToIntuition(client);
      setAddress(addr);
      setWalletClient(boundClient as WalletClient);
    } catch (e) {
      console.error(e);
    }
  };

  // Checks the chain right before any transaction - in case the user switched networks manually
  const ensureChain = async () => {
    if (!walletClient) throw new Error('Wallet not connected');
    await switchToIntuition(walletClient);
  };

  const disconnect = () => {
    setAddress(null);
    setWalletClient(null);
  };

  // Keep the app in sync if the user changes accounts in MetaMask
  useEffect(() => {
    if (typeof window === 'undefined' || !window.ethereum) return;
    const ethereum = window.ethereum;
    const handleAccountsChanged = (accounts: Address[]) => {
      if (accounts.length > 0) setAddress(accounts[0]);
      else disconnect();
    };
    ethereum.on('accountsChanged', handleAccountsChanged);
    return () => ethereum.removeListener('accountsChanged', handleAccountsChanged);
  }, []);

  return (
    <WalletContext.Provider value={{ address, walletClient, publicClient, connect, disconnect, ensureChain }}>
      {children}
    </WalletContext.Provider>
  );
}

export const useWallet = () => {
  const context = useContext(WalletContext);
  if (!context) throw new Error('useWallet must be used within WalletProvider');
  return context;
};

// src/hooks/useAdminDelegation.ts
import { useState, useEffect, useCallback } from 'react';
import { useWallet } from '@/lib/WalletContext';
import {
  Implementation,
  toMetaMaskSmartAccount,
  createDelegation,
  createExecution,
  ExecutionMode,
  ScopeType,
  CaveatType,
  MetaMaskSmartAccount
} from '@metamask/smart-accounts-kit';
import { DelegationManager } from '@metamask/smart-accounts-kit/contracts';
import { getNativeTokenPeriodTransferEnforcerAvailableAmount } from '@metamask/smart-accounts-kit/actions';
import { encodeAbiParameters, encodeFunctionData, parseEther, type Address, createWalletClient, custom, toFunctionSelector } from 'viem';
import { MULTIVAULT, DELEGATION_MANAGER, DEPOSIT_SIG, REDEEM_SIG, DEPOSIT_OFFSET, multiVaultAbi, ApprovalType, BUDGET_PERIOD_SECONDS, BUDGET_START_BACKDATE_SECONDS } from '@/lib/constants';
import { intuitionMainnet } from '@/lib/chains';

// The address derived from ADMIN_PRIVATE_KEY. Must be overridden via
// NEXT_PUBLIC_ADMIN_ADDRESS if you use your own admin wallet, or delegations
// will be signed for a relayer that can't redeem them.
export const ADMIN_DELEGATEE: Address =
  (process.env.NEXT_PUBLIC_ADMIN_ADDRESS as Address) || '0x9c103d804bc1867F429a37707Dc5d5C9b29D7a6C';
const getStorageKey = (addr: string) => `intuition_admin_delegation_${addr.toLowerCase()}`;
const getBudgetStorageKey = (addr: string) => `intuition_admin_budget_${addr.toLowerCase()}`;
const getWizardKey = (addr: string) => `intuition_admin_wizard_${addr.toLowerCase()}`;

// Per-address budget metadata saved alongside the delegation. `dailyCap` is the
// TRUST the relayer may spend per window; `periodStart` is the unix second the
// first window opened, used to show when the allowance next resets.
type BudgetMeta = { dailyCap: string; periodStart: number };

// The four one-time setup steps. The user runs them one at a time.
export type WizardStepKey = 'deploy' | 'fund' | 'approve' | 'sign';
export type WizardProgress = { deployed: boolean; funded: boolean; approved: boolean };

export const SETUP_STEPS: {
  key: WizardStepKey;
  title: string;
  action: string;
  detail: string;
  docUrl?: string;
  docLabel?: string;
}[] = [
  {
    key: 'deploy',
    title: 'Deploy Smart Account',
    action: 'Deploy',
    detail:
      'Deploy your Hybrid Smart Account (HSA) — a smart account your wallet owns and fully controls, at its own deterministic address (derived from your wallet). It is the account that signs the delegation in step 4. One-time; no funds moved here.',
    docUrl: 'https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/',
    docLabel: 'Smart accounts ↗',
  },
  {
    key: 'fund',
    title: 'Fund the Smart Account',
    action: 'Fund',
    detail:
      'Move TRUST from your wallet into your smart account (HSA). Every Support / Oppose is a deposit drawn from this balance; the daily cap sets how fast it can be spent.',
  },
  {
    key: 'approve',
    title: 'Approve the MultiVault',
    action: 'Approve',
    detail:
      'One approval on the Intuition MultiVault. approve(HSA, BOTH) lets your smart account deposit into and redeem from Atom and Triple vaults on your behalf — shares and any withdrawn TRUST always go to your wallet, never the HSA. Without it the MultiVault only lets an address act for itself.',
    docUrl:
      'https://github.com/0xIntuition/intuition-contracts-v2/blob/94bddae0869f8fbf1cfb4a137aeb78b7fe302fcb/src/protocol/MultiVault.sol#L373',
    docLabel: 'MultiVault.approve() ↗',
  },
  {
    key: 'sign',
    title: 'Sign the delegation',
    action: 'Sign delegation',
    detail:
      'You sign with your wallet — the same key that owns the smart account, so this is the HSA authorizing it. The delegation is a scoped permission from your HSA to our relayer: it may only call deposit / redeem on the MultiVault, always with you as the receiver, up to your daily TRUST cap, expiring in 30 days. Off-chain, no gas — we store it and reuse it for every click.',
    docUrl: 'https://eips.ethereum.org/EIPS/eip-7710',
    docLabel: 'ERC-7710 ↗',
  },
];

const EMPTY_WIZARD: WizardProgress = { deployed: false, funded: false, approved: false };

function parseBudgetMeta(raw: string | null): BudgetMeta | null {
  if (!raw) return null;
  try {
    const parsed = JSON.parse(raw);
    if (parsed && typeof parsed === 'object' && 'dailyCap' in parsed) {
      return { dailyCap: String(parsed.dailyCap), periodStart: Number(parsed.periodStart) || 0 };
    }
    // Legacy value: a bare budget string with no window info.
    return { dailyCap: String(parsed), periodStart: 0 };
  } catch {
    return { dailyCap: raw, periodStart: 0 };
  }
}

function parseWizard(raw: string | null): WizardProgress {
  if (!raw) return EMPTY_WIZARD;
  try {
    const p = JSON.parse(raw);
    return { deployed: !!p?.deployed, funded: !!p?.funded, approved: !!p?.approved };
  } catch {
    return EMPTY_WIZARD;
  }
}

function errMessage(e: unknown): string {
  const err = e as { shortMessage?: string; message?: string };
  return err.shortMessage ?? err.message ?? 'Something went wrong';
}

export function useAdminDelegation() {
  const { walletClient, publicClient, address, ensureChain } = useWallet();
  const [smartAccount, setSmartAccount] = useState<MetaMaskSmartAccount | null>(null);
  const [busyStep, setBusyStep] = useState<WizardStepKey | 'revoke' | null>(null);
  const [delegation, setDelegation] = useState<Record<string, unknown> | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [hsaBalance, setHsaBalance] = useState<bigint | null>(null);
  const [budgetMeta, setBudgetMeta] = useState<BudgetMeta | null>(null);
  const [periodAvailable, setPeriodAvailable] = useState<bigint | null>(null);
  const [periodResetsAt, setPeriodResetsAt] = useState<number | null>(null);
  const [wizard, setWizard] = useState<WizardProgress>(EMPTY_WIZARD);

  // Merge a patch into the wizard progress and persist it (functional update so
  // concurrent steps never clobber each other).
  const patchWizard = useCallback(
    (patch: Partial<WizardProgress>) => {
      setWizard((prev) => {
        const next = { ...prev, ...patch };
        if (address) localStorage.setItem(getWizardKey(address), JSON.stringify(next));
        return next;
      });
    },
    [address],
  );

  // Load existing delegation + wizard progress from local storage
  useEffect(() => {
    if (!address) {
      queueMicrotask(() => {
        setDelegation(null);
        setBudgetMeta(null);
        setWizard(EMPTY_WIZARD);
      });
      return;
    }
    const wiz = parseWizard(localStorage.getItem(getWizardKey(address)));
    const saved = localStorage.getItem(getStorageKey(address));
    if (saved) {
      try {
        const parsed = JSON.parse(saved, (key, value) =>
          typeof value === 'string' && /^\d+n$/.test(value) ? BigInt(value.slice(0, -1)) : value
        );
        const meta = parseBudgetMeta(localStorage.getItem(getBudgetStorageKey(address)));
        queueMicrotask(() => {
          setDelegation(parsed);
          setBudgetMeta(meta);
          setWizard(wiz);
        });
      } catch (e) {
        console.error('Failed to parse saved delegation', e);
        queueMicrotask(() => {
          setDelegation(null);
          setBudgetMeta(null);
          setWizard(wiz);
        });
      }
    } else {
      queueMicrotask(() => {
        setDelegation(null);
        setBudgetMeta(null);
        setWizard(wiz);
      });
    }
  }, [address]);

  // If the HSA is already deployed on-chain (a previous visit, or deployed by
  // another dApp), mark step 1 done so the wizard resumes at the right place.
  useEffect(() => {
    if (!smartAccount || wizard.deployed) return;
    let cancelled = false;
    smartAccount
      .isDeployed()
      .then((dep) => {
        if (!cancelled && dep) patchWizard({ deployed: true });
      })
      .catch(() => {});
    return () => {
      cancelled = true;
    };
  }, [smartAccount, wizard.deployed, patchWizard]);

  // Poll the HSA balance once the account is deployed (so funding is visible
  // during the wizard, not just after the delegation is signed).
  useEffect(() => {
    if (!smartAccount || !publicClient || (!delegation && !wizard.deployed)) {
      queueMicrotask(() => setHsaBalance(null));
      return;
    }
    let isMounted = true;
    const fetchBalance = async () => {
      try {
        const bal = await publicClient.getBalance({ address: smartAccount.address });
        if (isMounted) setHsaBalance(bal);
      } catch {}
    };
    fetchBalance();
    const interval = setInterval(fetchBalance, 5000);
    return () => {
      isMounted = false;
      clearInterval(interval);
    };
  }, [delegation, smartAccount, publicClient, wizard.deployed]);

  // Track how much of the current window's allowance is still available. The
  // NativeTokenPeriodTransferEnforcer stores nothing until the first redemption,
  // so before then we just show the full daily cap.
  useEffect(() => {
    if (!delegation || !smartAccount || !publicClient) {
      queueMicrotask(() => {
        setPeriodAvailable(null);
        setPeriodResetsAt(null);
      });
      return;
    }
    let isMounted = true;
    const refresh = async () => {
      // When the current window rolls over (and the allowance refills).
      if (budgetMeta && budgetMeta.periodStart > 0) {
        const now = Math.floor(Date.now() / 1000);
        const periodsDone =
          Math.floor(Math.max(0, now - budgetMeta.periodStart) / BUDGET_PERIOD_SECONDS) + 1;
        if (isMounted) setPeriodResetsAt(budgetMeta.periodStart + periodsDone * BUDGET_PERIOD_SECONDS);
      }
      try {
        const res = await getNativeTokenPeriodTransferEnforcerAvailableAmount(
          publicClient,
          smartAccount.environment,
          { delegation: delegation as Parameters<typeof getNativeTokenPeriodTransferEnforcerAvailableAmount>[2]['delegation'] }
        );
        if (isMounted) setPeriodAvailable(res.availableAmount);
      } catch {
        // The enforcer stores nothing until the first redemption -- full cap is available.
        if (isMounted && budgetMeta) {
          try {
            setPeriodAvailable(parseEther(budgetMeta.dailyCap));
          } catch {}
        }
      }
    };
    refresh();
    const interval = setInterval(refresh, 5000);
    return () => {
      isMounted = false;
      clearInterval(interval);
    };
  }, [delegation, smartAccount, publicClient, budgetMeta]);

  // Initialize the HSA instance (this does not deploy it on-chain yet)
  useEffect(() => {
    async function init() {
      if (!address || !walletClient || !publicClient) return;
      try {
        const patchedClient = createWalletClient({
          account: address,
          chain: intuitionMainnet,
          transport: custom((window as unknown as { ethereum: Parameters<typeof custom>[0] }).ethereum)
        });

        const sa = await toMetaMaskSmartAccount({
          client: publicClient,
          implementation: Implementation.Hybrid,
          deployParams: [address, [], [], []],
          deploySalt: '0x',
          signer: { walletClient: patchedClient },
        });
        setSmartAccount(sa);
      } catch (e) {
        console.error('Failed to initialize Hybrid Smart Account:', e);
      }
    }
    init();
  }, [address, walletClient, publicClient]);

  // --- Step 1: deploy the Hybrid Smart Account (the EOA-owned delegator) ---
  const deployHsa = async () => {
    if (!smartAccount || !address || !walletClient || !publicClient) {
      setError('Wallet not fully connected or Smart Account not initialized.');
      return;
    }
    try {
      setBusyStep('deploy');
      setError(null);
      await ensureChain();
      if (!(await smartAccount.isDeployed())) {
        const { factory, factoryData } = await smartAccount.getFactoryArgs();
        if (factory && factoryData) {
          const hash = await walletClient.sendTransaction({
            account: address,
            to: factory,
            data: factoryData,
            chain: intuitionMainnet,
          });
          await publicClient.waitForTransactionReceipt({ hash });
        }
      }
      patchWizard({ deployed: true });
    } catch (e: unknown) {
      console.error(e);
      setError(errMessage(e));
    } finally {
      setBusyStep(null);
    }
  };

  // --- Step 2: fund the HSA with the total staking balance ---
  const fundHsa = async (prefundTrust: string) => {
    if (!smartAccount || !address || !walletClient || !publicClient) {
      setError('Wallet not fully connected or Smart Account not initialized.');
      return;
    }
    let prefundWei: bigint;
    try {
      prefundWei = parseEther(prefundTrust || '0');
    } catch {
      setError('Enter a valid TRUST amount.');
      return;
    }
    if (prefundWei <= BigInt(0)) {
      setError('Enter an amount to fund.');
      return;
    }
    try {
      setBusyStep('fund');
      setError(null);
      await ensureChain();
      const saBal = await publicClient.getBalance({ address: smartAccount.address });
      if (saBal < prefundWei) {
        const hash = await walletClient.sendTransaction({
          account: address,
          to: smartAccount.address,
          value: prefundWei - saBal,
          chain: intuitionMainnet,
        });
        await publicClient.waitForTransactionReceipt({ hash });
      }
      patchWizard({ funded: true });
    } catch (e: unknown) {
      console.error(e);
      setError(errMessage(e));
    } finally {
      setBusyStep(null);
    }
  };

  // --- Step 3: approve the HSA to deposit / redeem on the EOA's behalf ---
  // multiVault.approve(HSA, BOTH) so the relayer's delegated deposit/redeem calls
  // (receiver = EOA) are accepted and always credit the EOA, not the HSA. The
  // MultiVault never moves the HSA's funds itself.
  const approveMultiVault = async () => {
    if (!smartAccount || !address || !walletClient || !publicClient) {
      setError('Wallet not fully connected or Smart Account not initialized.');
      return;
    }
    try {
      setBusyStep('approve');
      setError(null);
      await ensureChain();
      const hash = await walletClient.sendTransaction({
        account: address,
        to: MULTIVAULT,
        data: encodeFunctionData({
          abi: multiVaultAbi,
          functionName: 'approve',
          args: [smartAccount.address, ApprovalType.BOTH],
        }),
        chain: intuitionMainnet,
      });
      await publicClient.waitForTransactionReceipt({ hash });
      patchWizard({ approved: true });
    } catch (e: unknown) {
      console.error(e);
      setError(errMessage(e));
    } finally {
      setBusyStep(null);
    }
  };

  // --- Step 4: build + sign the scoped delegation (off-chain, no gas) ---
  const signDelegation = async (dailyCapTrust: string, maxCalls: number = 500) => {
    if (!smartAccount || !address || !publicClient) {
      setError('Wallet not fully connected or Smart Account not initialized.');
      return;
    }
    let dailyCapWei: bigint;
    try {
      dailyCapWei = parseEther(dailyCapTrust || '0');
    } catch {
      setError('Enter a valid daily limit.');
      return;
    }
    if (dailyCapWei <= BigInt(0)) {
      setError('Enter a daily limit.');
      return;
    }
    try {
      setBusyStep('sign');
      setError(null);
      await ensureChain();

      const now = Math.floor(Date.now() / 1000);
      // Backdate the window start so the first redemption clears the enforcer's
      // "transfer-not-started" check even though chain time trails wall clock.
      const periodStart = now - BUDGET_START_BACKDATE_SECONDS;
      const expiry = now + 30 * 86400; // 30 days
      const newDelegation = createDelegation({
        from: smartAccount.address,
        to: ADMIN_DELEGATEE,
        environment: smartAccount.environment,
        scope: {
          // Cap native TRUST spend per rolling window instead of over the
          // delegation's whole lifetime. The enforcer resets the allowance
          // automatically each window, so the user never has to re-delegate.
          type: ScopeType.NativeTokenPeriodTransfer,
          periodAmount: dailyCapWei,
          periodDuration: BUDGET_PERIOD_SECONDS,
          startDate: periodStart,
          allowedCalldata: [
            // Pin the receiver argument (first arg of both deposit() and redeem())
            // so every delegated call credits the user's main wallet. We do NOT
            // pin the termId, so the relayer can act on any claim for the user.
            {
              startIndex: DEPOSIT_OFFSET.receiver,
              value: encodeAbiParameters([{ type: 'address' }], [address]),
            },
          ],
        },
        caveats: [
          { type: CaveatType.AllowedTargets, targets: [MULTIVAULT] },
          {
            type: CaveatType.AllowedMethods,
            selectors: [toFunctionSelector(DEPOSIT_SIG), toFunctionSelector(REDEEM_SIG)],
          },
          { type: CaveatType.LimitedCalls, limit: maxCalls },
          { type: CaveatType.Timestamp, afterThreshold: 0, beforeThreshold: expiry },
        ],
      });

      const signature = await smartAccount.signDelegation({ delegation: newDelegation });
      const signedDelegation = { ...newDelegation, signature };

      setDelegation(signedDelegation);
      localStorage.setItem(getStorageKey(address), JSON.stringify(signedDelegation, (key, value) =>
        typeof value === 'bigint' ? value.toString() + 'n' : value
      ));
      const meta: BudgetMeta = { dailyCap: dailyCapTrust, periodStart };
      localStorage.setItem(getBudgetStorageKey(address), JSON.stringify(meta));
      setBudgetMeta(meta);
    } catch (e: unknown) {
      console.error(e);
      setError(errMessage(e));
    } finally {
      setBusyStep(null);
    }
  };

  const clearDelegation = () => {
    setDelegation(null);
    setHsaBalance(null);
    setBudgetMeta(null);
    setPeriodAvailable(null);
    setPeriodResetsAt(null);
    setWizard(EMPTY_WIZARD);
    if (address) {
      localStorage.removeItem(getStorageKey(address));
      localStorage.removeItem(getBudgetStorageKey(address));
      localStorage.removeItem(getWizardKey(address));
    }
  };

  const revokeDelegation = async () => {
    if (!smartAccount || !walletClient || !publicClient || !address) return;
    try {
      setBusyStep('revoke');
      setError(null);
      await ensureChain();

      // Sweep any remaining HSA balance back to the EOA first. The HSA's own
      // execute() only accepts calls from the ERC-4337 EntryPoint or itself,
      // so the owner can't just call it directly to move funds out. Instead
      // we sign a one-time self-delegation for the full balance and redeem
      // it ourselves -- the exact same delegation mechanism the relayer uses
      // for staking, just invoked directly by the owner instead.
      const remainingBalance = await publicClient.getBalance({ address: smartAccount.address });
      if (remainingBalance > BigInt(0)) {
        console.log(`Sweeping ${remainingBalance} wei back to EOA...`);
        const sweepDelegation = createDelegation({
          from: smartAccount.address,
          to: address,
          environment: smartAccount.environment,
          scope: {
            type: ScopeType.NativeTokenTransferAmount,
            maxAmount: remainingBalance,
          },
          caveats: [],
        });
        const sweepSignature = await smartAccount.signDelegation({ delegation: sweepDelegation });
        const signedSweep = { ...sweepDelegation, signature: sweepSignature };

        const sweepHash = await walletClient.sendTransaction({
          account: address,
          to: DELEGATION_MANAGER,
          data: DelegationManager.encode.redeemDelegations({
            delegations: [[signedSweep]],
            modes: [ExecutionMode.SingleDefault],
            executions: [[createExecution({ target: address, value: remainingBalance })]],
          }),
          chain: intuitionMainnet,
        });
        await publicClient.waitForTransactionReceipt({ hash: sweepHash });
      }

      console.log('Revoking MultiVault approval...');
      const hash = await walletClient.sendTransaction({
        account: address,
        to: MULTIVAULT,
        data: encodeFunctionData({
          abi: multiVaultAbi,
          functionName: 'approve',
          args: [smartAccount.address, ApprovalType.NONE],
        }),
        chain: intuitionMainnet,
      });
      await publicClient.waitForTransactionReceipt({ hash });

      clearDelegation();
      // The HSA contract stays deployed; only the funding and approval are gone,
      // so re-enabling starts the wizard at "fund".
      patchWizard({ deployed: true });
      console.log('Delegation successfully revoked on-chain.');
    } catch (e: unknown) {
      console.error(e);
      setError(errMessage(e));
    } finally {
      setBusyStep(null);
    }
  };

  return {
    smartAccount,
    delegation,
    error,
    busyStep,
    isBusy: busyStep !== null,
    wizard,
    deployHsa,
    fundHsa,
    approveMultiVault,
    signDelegation,
    clearDelegation,
    revokeDelegation,
    hsaBalance,
    dailyCap: budgetMeta?.dailyCap ?? '0',
    periodAvailable,
    periodResetsAt,
  };
}

// src/components/UpgradeAccount.tsx
'use client';

import { useState, useEffect } from 'react';
import { useWallet } from '@/lib/WalletContext';
import { useAdminDelegation, SETUP_STEPS } from '@/hooks/useAdminDelegation';
import { intuitionMainnet } from '@/lib/chains';
import { formatEther, parseEther } from 'viem';

function formatCountdown(secondsLeft: number): string {
  if (secondsLeft <= 0) return 'now';
  const h = Math.floor(secondsLeft / 3600);
  const m = Math.floor((secondsLeft % 3600) / 60);
  if (h > 0) return `${h}h ${m}m`;
  if (m > 0) return `${m}m`;
  return `${secondsLeft}s`;
}

export function UpgradeAccount({ state }: { state: ReturnType<typeof useAdminDelegation> }) {
  const { address } = useWallet();
  const {
    smartAccount,
    delegation,
    error,
    busyStep,
    isBusy,
    wizard,
    deployHsa,
    fundHsa,
    approveMultiVault,
    signDelegation,
    revokeDelegation,
    hsaBalance,
    dailyCap,
    periodAvailable,
    periodResetsAt,
  } = state;
  const [fundAmount, setFundAmount] = useState('5');
  const [cap, setCap] = useState('1');
  const [copied, setCopied] = useState(false);
  const [nowSec, setNowSec] = useState(0);

  useEffect(() => {
    const update = () => setNowSec(Math.floor(Date.now() / 1000));
    update();
    const id = setInterval(update, 15000);
    return () => clearInterval(id);
  }, []);

  if (!address) return null;

  const hsaAddress = smartAccount?.address;
  const explorerBase = intuitionMainnet.blockExplorers?.default.url;

  let capWei = BigInt(0);
  try {
    capWei = parseEther(dailyCap || '0');
  } catch {}
  const availableWei = periodAvailable ?? capWei;
  const allowancePct =
    capWei > BigInt(0)
      ? Math.min(100, Math.max(0, Number((availableWei * BigInt(10000)) / capWei) / 100))
      : 0;
  const resetsInSeconds = periodResetsAt && nowSec ? periodResetsAt - nowSec : null;

  // First step that isn't done yet.
  const currentIndex = !wizard.deployed ? 0 : !wizard.funded ? 1 : !wizard.approved ? 2 : 3;
  const step = SETUP_STEPS[currentIndex];

  const runCurrentStep = () => {
    if (step.key === 'deploy') deployHsa();
    else if (step.key === 'fund') fundHsa(fundAmount);
    else if (step.key === 'approve') approveMultiVault();
    else signDelegation(cap, 500);
  };

  const stepBusy = busyStep === step.key;
  const stepDisabled =
    isBusy ||
    !smartAccount ||
    (step.key === 'fund' && Number(fundAmount) <= 0) ||
    (step.key === 'sign' && Number(cap) <= 0);

  const copyHsa = async () => {
    if (!hsaAddress) return;
    try {
      await navigator.clipboard.writeText(hsaAddress);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {}
  };

  const hsaLine = hsaAddress && (
    <div className="flex items-center gap-2 flex-wrap text-[11px] font-mono">
      <span className="text-white/40 uppercase tracking-widest">HSA</span>
      <code className="text-white/70 break-all">{hsaAddress}</code>
      <button onClick={copyHsa} className="uppercase tracking-widest px-1.5 py-0.5 border border-white/15 rounded hover:bg-white/10">
        {copied ? 'Copied' : 'Copy'}
      </button>
      {explorerBase && (
        <a
          href={`${explorerBase}/address/${hsaAddress}`}
          target="_blank"
          rel="noopener noreferrer"
          className="uppercase tracking-widest px-1.5 py-0.5 border border-white/15 rounded hover:bg-white/10"
        >
          Explorer &#8599;
        </a>
      )}
    </div>
  );

  return (
    <div className="mb-8 p-6 bg-white/5 border border-white/10 rounded-lg">
      <div className="flex justify-between items-start flex-wrap gap-4">
        <div>
          <h3 className="text-lg font-bold text-white mb-2 uppercase tracking-wide">Delegated Staking</h3>
          <p className="text-sm text-white/60 max-w-md">
            Your smart account holds the budget; a daily-capped delegation lets our relayer submit deposits from it and cover the gas &mdash; so Support / Oppose never opens your wallet.
          </p>
        </div>

        {delegation && (
          <button
            onClick={revokeDelegation}
            disabled={isBusy}
            className="px-4 py-2 border border-red-500/50 text-red-400 font-bold uppercase tracking-wider text-sm hover:bg-red-500/10 disabled:opacity-50 transition-colors rounded"
          >
            {busyStep === 'revoke' ? 'Revoking...' : 'Disable Delegated Staking (On-Chain)'}
          </button>
        )}
      </div>

      {/* One-step-at-a-time wizard */}
      {!delegation && (
        <div className="mt-5 border-t border-white/10 pt-5">
          {/* progress rail */}
          <div className="flex items-center gap-2 mb-5">
            {SETUP_STEPS.map((s, i) => {
              const done = i < currentIndex;
              const active = i === currentIndex;
              return (
                <div key={s.key} className="flex items-center gap-2 flex-1 last:flex-none">
                  <span
                    className={`shrink-0 w-6 h-6 rounded-full border flex items-center justify-center text-[11px] font-bold ${
                      done
                        ? 'bg-green-500 border-green-500 text-black'
                        : active
                          ? 'border-white text-white'
                          : 'border-white/25 text-white/40'
                    }`}
                  >
                    {done ? '✓' : i + 1}
                  </span>
                  {i < SETUP_STEPS.length - 1 && (
                    <span className={`h-px flex-1 ${done ? 'bg-green-500/60' : 'bg-white/15'}`} />
                  )}
                </div>
              );
            })}
          </div>

          <div className="text-[11px] uppercase tracking-widest text-white/40 mb-1">
            Step {currentIndex + 1} of {SETUP_STEPS.length}
          </div>
          <div className="text-white font-semibold mb-1">{step.title}</div>
          <p className="text-sm text-white/55 leading-relaxed mb-4 max-w-lg">
            {step.detail}
            {step.docUrl && (
              <>
                {' '}
                <a
                  href={step.docUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-white/75 underline underline-offset-2 hover:text-white whitespace-nowrap"
                >
                  {step.docLabel ?? 'reference ↗'}
                </a>
              </>
            )}
          </p>

          <div className="flex items-end gap-3 flex-wrap">
            {step.key === 'fund' && (
              <label className="flex flex-col text-[10px] uppercase tracking-widest text-white/40">
                Amount
                <div className="flex items-center gap-1 mt-1">
                  <input
                    type="number"
                    value={fundAmount}
                    onChange={(e) => setFundAmount(e.target.value)}
                    disabled={isBusy}
                    min="0"
                    step="any"
                    className="px-3 py-2 bg-black border border-white/20 text-white rounded text-sm w-28 outline-none focus:border-white/50"
                  />
                  <span className="text-white/60 text-xs">TRUST</span>
                </div>
              </label>
            )}
            {step.key === 'sign' && (
              <label className="flex flex-col text-[10px] uppercase tracking-widest text-white/40">
                Daily limit
                <div className="flex items-center gap-1 mt-1">
                  <input
                    type="number"
                    value={cap}
                    onChange={(e) => setCap(e.target.value)}
                    disabled={isBusy}
                    min="0"
                    step="any"
                    className="px-3 py-2 bg-black border border-white/20 text-white rounded text-sm w-28 outline-none focus:border-white/50"
                  />
                  <span className="text-white/60 text-xs">TRUST / day</span>
                </div>
              </label>
            )}

            <button
              onClick={runCurrentStep}
              disabled={stepDisabled}
              className="px-4 py-2 bg-white text-black font-bold uppercase tracking-wider text-sm hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors rounded"
            >
              {stepBusy ? 'Working…' : step.action}
            </button>

            {stepBusy && (
              <span className="text-xs text-white/50">
                {step.key === 'sign' ? 'Sign in your wallet…' : 'Confirm in your wallet…'}
              </span>
            )}
          </div>

          {wizard.deployed && hsaAddress && <div className="mt-4">{hsaLine}</div>}
          {wizard.deployed && hsaBalance !== null && (
            <div className="mt-2 text-xs text-white/45">
              HSA balance: {Number(formatEther(hsaBalance)).toFixed(3)} TRUST
            </div>
          )}
          <p className="mt-4 text-xs text-white/35">
            Four one-time steps. Revoking later sweeps any unspent HSA balance back to your wallet.
          </p>
        </div>
      )}

      {delegation && (
        <div className="mt-4 p-4 bg-green-500/10 border border-green-500/20 text-green-400 text-sm rounded">
          <div className="mb-3 font-bold">Delegated staking is active.</div>

          {hsaAddress && (
            <div className="mb-3">
              <div className="text-xs text-green-300/70 uppercase tracking-widest mb-1">Hybrid Smart Account</div>
              <div className="flex items-center gap-2 flex-wrap">
                <code className="text-xs text-green-200 break-all font-mono">{hsaAddress}</code>
                <button
                  onClick={copyHsa}
                  className="text-[10px] uppercase tracking-widest px-2 py-0.5 border border-green-500/30 rounded hover:bg-green-500/10"
                >
                  {copied ? 'Copied' : 'Copy'}
                </button>
                {explorerBase && (
                  <a
                    href={`${explorerBase}/address/${hsaAddress}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-[10px] uppercase tracking-widest px-2 py-0.5 border border-green-500/30 rounded hover:bg-green-500/10"
                  >
                    Explorer &#8599;
                  </a>
                )}
              </div>
            </div>
          )}

          {hsaBalance !== null && (
            <div className="flex justify-between text-xs mb-3 text-green-300">
              <span>HSA Balance</span>
              <span>{Number(formatEther(hsaBalance)).toFixed(3)} TRUST</span>
            </div>
          )}

          {capWei > BigInt(0) && (
            <div>
              <div className="flex justify-between text-xs mb-1 text-green-300">
                <span>Daily Allowance Remaining</span>
                <span>
                  {Number(formatEther(availableWei)).toFixed(3)} / {Number(formatEther(capWei)).toFixed(3)} TRUST
                  {resetsInSeconds !== null ? ` · resets in ${formatCountdown(resetsInSeconds)}` : ''}
                </span>
              </div>
              <div className="w-full bg-black/50 h-2 rounded-full overflow-hidden">
                <div
                  className="bg-green-500 h-full transition-all duration-500"
                  style={{ width: `${allowancePct}%` }}
                ></div>
              </div>
            </div>
          )}
        </div>
      )}

      {error && (
        <div className="mt-4 p-3 bg-red-500/10 border border-red-500/20 text-red-400 text-sm rounded break-words">
          Error: {error}
        </div>
      )}
    </div>
  );
}