"use client";

import React, { useState } from 'react';

export interface OnrampButtonProps {
  walletAddress?: string;
  className?: string;
  children?: React.ReactNode;
  assets?: string[];
  defaultAsset?: string;
  defaultNetwork?: string;
  presetFiatAmount?: number;
  redirectUrl?: string;
  theme?: 'light' | 'dark';
  apiEndpoint?: string;
  onSuccess?: (url: string) => void;
  onError?: (error: string) => void;
}

/**
 * Simple onramp button that generates a session token and opens the Coinbase onramp.
 * Works with both authenticated users (wallet address) and guest checkout.
 * 
 * @example
 * ```tsx
 * import { OnrampButton } from 'cdp-wallet-onramp-kit';
 * 
 * function BuyButton({ userWalletAddress }) {
 *   return (
 *     <OnrampButton 
 *       walletAddress={userWalletAddress}
 *       defaultAsset="USDC"
 *       presetFiatAmount={50}
 *       onSuccess={(url) => console.log('Onramp opened:', url)}
 *     >
 *       Buy $50 USDC
 *     </OnrampButton>
 *   );
 * }
 * ```
 */
export function OnrampButton({ 
  walletAddress,
  className = '',
  children = 'Buy Crypto',
  assets = ['ETH', 'USDC', 'BTC'],
  defaultAsset = 'USDC',
  defaultNetwork = 'base',
  presetFiatAmount,
  redirectUrl,
  theme = 'light',
  apiEndpoint = '/api/onramp/session',
  onSuccess,
  onError
}: OnrampButtonProps) {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Theme styles
  const isDark = theme === 'dark';
  const buttonClass = isDark
    ? 'bg-blue-600 hover:bg-blue-700 text-white border-blue-600'
    : 'bg-blue-500 hover:bg-blue-600 text-white border-blue-500';
  const errorClass = isDark ? 'text-red-300' : 'text-red-600';

  const handleOnramp = async () => {
    setIsLoading(true);
    setError(null);

    try {
      // Determine if this is guest checkout or wallet-based
      const requestBody = walletAddress 
        ? {
            userAddress: walletAddress,
            assets
          }
        : {
            guestCheckout: true,
            assets
          };

      // Generate session token via API route
      const response = await fetch(apiEndpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody),
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Failed to generate session token');
      }

      const { sessionToken } = await response.json();

      // Build onramp URL with session token and parameters
      const url = new URL('https://pay.coinbase.com/buy/select-asset');
      url.searchParams.set('sessionToken', sessionToken);
      
      if (defaultAsset) {
        url.searchParams.set('defaultAsset', defaultAsset);
      }
      
      if (defaultNetwork) {
        url.searchParams.set('defaultNetwork', defaultNetwork);
      }
      
      if (presetFiatAmount) {
        url.searchParams.set('presetFiatAmount', presetFiatAmount.toString());
      }
      
      if (redirectUrl) {
        url.searchParams.set('redirectUrl', redirectUrl);
      }

      const onrampUrl = url.toString();
      
      // Open onramp in new window
      window.open(onrampUrl, '_blank', 'noopener,noreferrer');
      
      if (onSuccess) {
        onSuccess(onrampUrl);
      }
      
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : 'Failed to open onramp';
      console.error('Onramp error:', error);
      setError(errorMessage);
      
      if (onError) {
        onError(errorMessage);
      }
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="w-full">
      <button
        onClick={handleOnramp}
        disabled={isLoading}
        className={`${buttonClass} w-full py-2 px-4 rounded-lg font-medium border transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
      >
        {isLoading ? (
          <div className="flex items-center justify-center space-x-2">
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white/60"></div>
            <span>Opening...</span>
          </div>
        ) : (
          children
        )}
      </button>
      
      {error && (
        <p className={`mt-2 text-sm ${errorClass}`}>{error}</p>
      )}
      
      {!walletAddress && (
        <p className={`mt-1 text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
          Guest checkout • $500 weekly limit
        </p>
      )}
    </div>
  );
}