'use client';

import { useState, useCallback, useMemo } from 'react';
import {
  MinaProvider,
  useMina,
  useQuote,
  useTokenBalance,
  useTransactionStatus,
} from '@siphoyawe/mina-sdk/react';
import type {
  Chain,
  Token,
  Quote,
  ExecutionResult,
  StepStatusPayload,
  TransactionStatusPayload,
} from '@siphoyawe/mina-sdk/react';
import { useAccount, useWalletClient } from 'wagmi';

// Main widget component
export function BridgeWidget() {
  return (
    <MinaProvider config={{ integrator: 'my-bridge-app', autoDeposit: true }}>
      <BridgeWidgetInner />
    </MinaProvider>
  );
}

function BridgeWidgetInner() {
  const { mina, isReady } = useMina();
  const { address, isConnected } = useAccount();
  const { data: walletClient } = useWalletClient();

  // Form state
  const [sourceChain, setSourceChain] = useState<Chain | null>(null);
  const [sourceToken, setSourceToken] = useState<Token | null>(null);
  const [amount, setAmount] = useState('');
  const [slippage, setSlippage] = useState(0.5);

  // Execution state
  const [isExecuting, setIsExecuting] = useState(false);
  const [executionResult, setExecutionResult] = useState<ExecutionResult | null>(null);
  const [currentStep, setCurrentStep] = useState<StepStatusPayload | null>(null);
  const [txHash, setTxHash] = useState<string | null>(null);

  // Convert amount to smallest unit
  const amountInSmallestUnit = useMemo(() => {
    if (!amount || !sourceToken) return '';
    try {
      const parsed = parseFloat(amount);
      if (isNaN(parsed) || parsed <= 0) return '';
      return (BigInt(Math.floor(parsed * 10 ** sourceToken.decimals))).toString();
    } catch {
      return '';
    }
  }, [amount, sourceToken]);

  // Fetch quote with useQuote hook
  const { quote, isLoading: isQuoteLoading, error: quoteError, refetch: refetchQuote } = useQuote({
    fromChain: sourceChain?.id,
    toChain: 999, // HyperEVM
    fromToken: sourceToken?.address,
    toToken: '0xb88339cb7199b77e23db6e890353e22632ba630f', // USDC on HyperEVM
    amount: amountInSmallestUnit,
    fromAddress: address,
    slippageTolerance: slippage,
    enabled: Boolean(sourceChain && sourceToken && amountInSmallestUnit && address),
  });

  // Fetch source token balance
  const {
    formattedBalance,
    balance: rawBalance,
    isLoading: isBalanceLoading,
    refetch: refetchBalance,
  } = useTokenBalance({
    chainId: sourceChain?.id,
    tokenAddress: sourceToken?.address,
    walletAddress: address ?? undefined,
    refetchInterval: 15000,
  });

  // Track transaction status
  const { status: txStatus } = useTransactionStatus(txHash);

  // Create signer from wallet client
  const signer = useMemo(() => {
    if (!walletClient || !sourceChain) return null;

    return {
      sendTransaction: async (request: {
        to: string;
        data: string;
        value: string;
        chainId: number;
      }) => {
        const hash = await walletClient.sendTransaction({
          to: request.to as `0x${string}`,
          data: request.data as `0x${string}`,
          value: BigInt(request.value),
          chain: {
            id: request.chainId,
            name: sourceChain.name,
            nativeCurrency: {
              name: sourceChain.nativeToken.name,
              symbol: sourceChain.nativeToken.symbol,
              decimals: sourceChain.nativeToken.decimals,
            },
            rpcUrls: { default: { http: [] } },
          },
        });
        return hash;
      },
      getAddress: async () => walletClient.account.address,
      getChainId: async () => sourceChain.id,
    };
  }, [walletClient, sourceChain]);

  // Handle max button
  const handleMaxClick = useCallback(() => {
    if (formattedBalance && sourceToken) {
      setAmount(formattedBalance);
    }
  }, [formattedBalance, sourceToken]);

  // Handle execution
  const handleExecute = useCallback(async () => {
    if (!mina || !quote || !signer) return;

    setIsExecuting(true);
    setExecutionResult(null);
    setCurrentStep(null);

    try {
      const result = await mina.execute({
        quote,
        signer,
        onStepChange: (step: StepStatusPayload) => {
          setCurrentStep(step);
          if (step.txHash) {
            setTxHash(step.txHash);
          }
        },
        onStatusChange: (status: TransactionStatusPayload) => {
          console.log('Status update:', status);
        },
      });

      setExecutionResult(result);

      if (result.status === 'completed') {
        // Reset form on success
        setAmount('');
        refetchBalance();
      }
    } catch (error) {
      console.error('Execution failed:', error);
      setExecutionResult({
        executionId: 'error',
        status: 'failed',
        steps: [],
        error: error instanceof Error ? error : new Error('Unknown error'),
      });
    } finally {
      setIsExecuting(false);
    }
  }, [mina, quote, signer, refetchBalance]);

  // Reset when chain changes
  const handleChainChange = useCallback((chain: Chain) => {
    setSourceChain(chain);
    setSourceToken(null);
    setAmount('');
    setExecutionResult(null);
    setTxHash(null);
  }, []);

  // Validation
  const hasInsufficientBalance = useMemo(() => {
    if (!rawBalance || !amountInSmallestUnit) return false;
    return BigInt(amountInSmallestUnit) > BigInt(rawBalance);
  }, [rawBalance, amountInSmallestUnit]);

  const canExecute = useMemo(() => {
    return (
      isConnected &&
      quote &&
      !isQuoteLoading &&
      !hasInsufficientBalance &&
      !isExecuting &&
      signer
    );
  }, [isConnected, quote, isQuoteLoading, hasInsufficientBalance, isExecuting, signer]);

  if (!isReady) {
    return <div className="bridge-widget loading">Initializing SDK...</div>;
  }

  return (
    <div className="bridge-widget">
      <div className="widget-header">
        <h2>Bridge to Hyperliquid</h2>
        <SlippageSelector value={slippage} onChange={setSlippage} />
      </div>

      {/* Source Chain Selection */}
      <div className="form-section">
        <label>From Chain</label>
        <ChainSelector
          selectedChainId={sourceChain?.id ?? null}
          onSelect={handleChainChange}
        />
      </div>

      {/* Source Token Selection */}
      <div className="form-section">
        <label>Token</label>
        <TokenSelector
          chainId={sourceChain?.id ?? null}
          walletAddress={address ?? null}
          selectedToken={sourceToken}
          onSelect={setSourceToken}
        />
      </div>

      {/* Amount Input */}
      <div className="form-section">
        <div className="amount-header">
          <label>Amount</label>
          {formattedBalance && (
            <span className="balance">
              Balance: {formattedBalance} {sourceToken?.symbol}
              <button onClick={handleMaxClick} className="max-button">
                MAX
              </button>
            </span>
          )}
        </div>
        <input
          type="number"
          placeholder="0.00"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          disabled={!sourceToken}
          className={hasInsufficientBalance ? 'error' : ''}
        />
        {hasInsufficientBalance && (
          <span className="error-text">Insufficient balance</span>
        )}
      </div>

      {/* Destination Display */}
      <div className="destination-section">
        <div className="destination-chain">
          <span className="label">To</span>
          <div className="chain-display">
            <span className="chain-name">HyperEVM</span>
            <span className="token-name">USDC</span>
          </div>
        </div>
      </div>

      {/* Quote Display */}
      {(isQuoteLoading || quote || quoteError) && (
        <QuoteSection
          quote={quote}
          isLoading={isQuoteLoading}
          error={quoteError}
          onRefresh={refetchQuote}
        />
      )}

      {/* Execution Status */}
      {(isExecuting || executionResult || currentStep) && (
        <ExecutionStatus
          isExecuting={isExecuting}
          currentStep={currentStep}
          result={executionResult}
          txStatus={txStatus}
        />
      )}

      {/* Execute Button */}
      <button
        className="execute-button"
        onClick={handleExecute}
        disabled={!canExecute}
      >
        {!isConnected
          ? 'Connect Wallet'
          : isExecuting
          ? 'Bridging...'
          : hasInsufficientBalance
          ? 'Insufficient Balance'
          : !quote
          ? 'Enter Amount'
          : 'Bridge'}
      </button>
    </div>
  );
}