"use client";

import React, { useState, useEffect } from 'react';
import { 
  useCurrentUser, 
  useEvmAddress, 
  useSignOut, 
  useSignInWithEmail, 
  useVerifyEmailOTP,
  useIsInitialized 
} from '@coinbase/cdp-hooks';
import { OnrampButton } from './OnrampButton';
import { getEvmAddress, getCurrentUser, getIsInitialized, getHookActions, validateHookReturns } from '../lib/hook-utils';

export interface OnrampWidgetProps {
  className?: string;
  logoSrc?: string;
  logoAlt?: string;
  title?: string;
  description?: string;
  presetAmounts?: number[];
  minAmount?: number;
  maxAmount?: number;
  presetFiatAmount?: number;
  footerText?: string;
  footerHref?: string;
  theme?: 'light' | 'dark';
  assets?: string[];
  defaultAsset?: string;
  defaultNetwork?: string;
  apiEndpoint?: string;
}

/**
 * Complete onramp widget with integrated wallet authentication and amount selection.
 * Provides a full user experience from wallet connection to crypto purchase.
 * 
 * @example
 * ```tsx
 * import { OnrampWidget } from 'cdp-wallet-onramp-kit';
 * 
 * function PurchasePage() {
 *   return (
 *     <OnrampWidget
 *       title="Buy Crypto"
 *       description="Purchase cryptocurrency with your credit card"
 *       presetAmounts={[10, 25, 50, 100]}
 *       presetFiatAmount={50}
 *       theme="dark"
 *     />
 *   );
 * }
 * ```
 */
export function OnrampWidget({
  className = "",
  logoSrc,
  logoAlt = "Logo",
  title = "Buy Crypto",
  description = "Purchase cryptocurrency with your credit card",
  presetAmounts = [10, 25, 50, 100, 250],
  minAmount = 5,
  maxAmount = 500,
  presetFiatAmount = 50,
  footerText = "Powered by Coinbase",
  footerHref = "https://coinbase.com",
  theme = 'light',
  assets = ['ETH', 'USDC', 'BTC'],
  defaultAsset = 'USDC',
  defaultNetwork = 'base',
  apiEndpoint = '/api/onramp/session'
}: OnrampWidgetProps) {
  const [amount, setAmount] = useState(presetFiatAmount);
  const [email, setEmail] = useState("");
  const [otp, setOtp] = useState("");
  const [flowId, setFlowId] = useState<string | null>(null);
  const [authStep, setAuthStep] = useState<'email' | 'otp' | 'signed-in'>('email');
  const [authLoading, setAuthLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // Raw hook results
  const isInitializedResult = useIsInitialized();
  const currentUserResult = useCurrentUser();
  const evmAddressResult = useEvmAddress();
  const signOutResult = useSignOut();
  const signInWithEmailResult = useSignInWithEmail();
  const verifyEmailOTPResult = useVerifyEmailOTP();

  // Normalized values using defensive type handling
  const isInitialized = getIsInitialized(isInitializedResult);
  const currentUser = getCurrentUser(currentUserResult);
  const evmAddress = getEvmAddress(evmAddressResult);
  const { signOut } = getHookActions(signOutResult);
  const { signInWithEmail } = getHookActions(signInWithEmailResult);
  const { verifyEmailOTP } = getHookActions(verifyEmailOTPResult);

  // Development validation
  useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      validateHookReturns({
        evmAddress: evmAddressResult,
        currentUser: currentUserResult,
        isInitialized: isInitializedResult
      });
    }
  }, [evmAddressResult, currentUserResult, isInitializedResult]);

  // Theme styles
  const isDark = theme === 'dark';
  const bgClass = isDark ? 'bg-gray-900/90 border-gray-700' : 'bg-white/90 border-gray-200';
  const cardBgClass = isDark ? 'bg-gray-800/50 border-gray-600' : 'bg-white/70 border-gray-300';
  const textClass = isDark ? 'text-white' : 'text-gray-900';
  const mutedTextClass = isDark ? 'text-gray-300' : 'text-gray-600';
  const inputClass = isDark 
    ? 'bg-gray-700 text-white placeholder-gray-400 border-gray-600' 
    : 'bg-white text-gray-900 placeholder-gray-500 border-gray-300';
  const buttonClass = isDark
    ? 'bg-blue-600 hover:bg-blue-700 text-white'
    : 'bg-blue-500 hover:bg-blue-600 text-white';
  const presetButtonClass = isDark
    ? 'bg-gray-700 hover:bg-gray-600 border-gray-600'
    : 'bg-gray-100 hover:bg-gray-200 border-gray-300';
  const activePresetClass = isDark
    ? 'bg-blue-600 border-blue-500 text-white'
    : 'bg-blue-500 border-blue-500 text-white';

  if (!isInitialized) {
    return (
      <div className={`w-full max-w-md mx-auto ${className}`}>
        <div className={`${bgClass} backdrop-blur-lg rounded-2xl p-6 shadow-lg border`}>
          <div className="text-center py-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
            <div className={mutedTextClass}>Loading wallet...</div>
          </div>
        </div>
      </div>
    );
  }

  const handleSignOut = () => {
    signOut();
    setAuthStep('email');
    setEmail("");
    setOtp("");
    setFlowId(null);
    setError(null);
  };

  const handleEmailSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email.trim()) return;
    
    setAuthLoading(true);
    setError(null);
    try {
      const { flowId: newFlowId } = await signInWithEmail({ email });
      setFlowId(newFlowId);
      setAuthStep('otp');
    } catch (error) {
      setError(error instanceof Error ? error.message : 'Sign in failed');
    } finally {
      setAuthLoading(false);
    }
  };

  const handleOtpSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!flowId || !otp.trim()) return;
    
    setAuthLoading(true);
    setError(null);
    try {
      await verifyEmailOTP({ flowId, otp });
      setAuthStep('signed-in');
    } catch (error) {
      setError(error instanceof Error ? error.message : 'OTP verification failed');
    } finally {
      setAuthLoading(false);
    }
  };

  return (
    <div className={`w-full max-w-md mx-auto ${className}`}>
      {/* Header */}
      {(logoSrc || title || description) && (
        <div className="text-center mb-6">
          {logoSrc && (
            <img 
              src={logoSrc} 
              alt={logoAlt} 
              className="h-12 w-12 mx-auto mb-3 rounded-full"
            />
          )}
          {title && (
            <h1 className={`text-2xl font-bold ${textClass} mb-2`}>
              {title}
            </h1>
          )}
          {description && (
            <p className={mutedTextClass}>
              {description}
            </p>
          )}
        </div>
      )}

      {/* Main Card */}
      <div className={`${bgClass} backdrop-blur-lg rounded-2xl p-6 shadow-lg border`}>
        
        {/* Amount Selection */}
        <div className="mb-6">
          <label className={`block text-sm font-medium ${mutedTextClass} mb-3`}>
            Amount (USD)
          </label>
          
          {/* Preset Amount Buttons */}
          <div className="grid grid-cols-3 gap-2 mb-4">
            {presetAmounts.map((preset) => (
              <button
                key={preset}
                onClick={() => setAmount(preset)}
                className={`py-2 px-3 rounded-lg text-sm font-medium border transition-colors ${
                  amount === preset 
                    ? activePresetClass 
                    : `${presetButtonClass} ${textClass} border`
                }`}
              >
                ${preset}
              </button>
            ))}
          </div>
          
          {/* Custom Amount Input */}
          <div className="relative">
            <span className={`absolute left-3 top-1/2 transform -translate-y-1/2 ${mutedTextClass}`}>
              $
            </span>
            <input
              type="number"
              value={amount}
              onChange={(e) => setAmount(Number(e.target.value) || 0)}
              min={minAmount}
              max={maxAmount}
              className={`${inputClass} w-full pl-8 pr-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg font-medium`}
              placeholder={`${minAmount} - ${maxAmount}`}
            />
          </div>
          
          {/* Amount Validation */}
          {(amount < minAmount || amount > maxAmount) && (
            <p className={`text-sm mt-2 ${isDark ? 'text-red-400' : 'text-red-600'}`}>
              Amount must be between ${minAmount} and ${maxAmount}
            </p>
          )}
        </div>

        {/* Wallet Display */}
        {evmAddress && (
          <div className={`${cardBgClass} p-3 rounded-lg border mb-6`}>
            <div className={`text-xs ${mutedTextClass} mb-1`}>
              Receiving Address:
            </div>
            <code className={`text-sm font-mono ${textClass} break-all`}>
              {evmAddress}
            </code>
          </div>
        )}

        {/* Error Display */}
        {error && (
          <div className={`${isDark ? 'bg-red-900/20 border-red-500/30' : 'bg-red-50 border-red-200'} border p-3 rounded-lg mb-4`}>
            <p className={`${isDark ? 'text-red-300' : 'text-red-700'} text-sm`}>{error}</p>
          </div>
        )}

        {/* Authentication or Purchase Flow */}
        {!currentUser ? (
          authStep === 'email' ? (
            <form onSubmit={handleEmailSubmit} className="space-y-4">
              <div>
                <label className={`block text-sm font-medium ${mutedTextClass} mb-2`}>
                  Email Address
                </label>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Enter your email"
                  className={`${inputClass} w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500`}
                  required
                />
              </div>
              <button
                type="submit"
                disabled={authLoading}
                className={`${buttonClass} w-full py-3 px-4 rounded-lg font-medium transition-colors disabled:opacity-50`}
              >
                {authLoading ? "Sending Code..." : "Continue with Email"}
              </button>
              <div className={`text-center text-xs ${mutedTextClass}`}>
                Or continue as guest (weekly limit: $500)
              </div>
              <OnrampButton
                className="mt-2"
                apiEndpoint={apiEndpoint}
                assets={assets}
                defaultAsset={defaultAsset}
                defaultNetwork={defaultNetwork}
                presetFiatAmount={amount}
                theme={theme}
              >
                Buy as Guest
              </OnrampButton>
            </form>
          ) : (
            <form onSubmit={handleOtpSubmit} className="space-y-4">
              <div>
                <label className={`block text-sm font-medium ${mutedTextClass} mb-2`}>
                  Verification Code
                </label>
                <div className={`text-sm ${mutedTextClass} mb-3`}>
                  Enter the 6-digit code sent to {email}
                </div>
                <input
                  type="text"
                  value={otp}
                  onChange={(e) => setOtp(e.target.value)}
                  placeholder="000000"
                  maxLength={6}
                  className={`${inputClass} w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500 text-center text-lg tracking-widest font-mono`}
                  required
                />
              </div>
              <button
                type="submit"
                disabled={authLoading}
                className={`${buttonClass} w-full py-3 px-4 rounded-lg font-medium transition-colors disabled:opacity-50`}
              >
                {authLoading ? "Verifying..." : "Verify & Connect"}
              </button>
              <button
                type="button"
                onClick={() => {
                  setAuthStep('email');
                  setFlowId(null);
                  setOtp("");
                  setError(null);
                }}
                className={`${mutedTextClass} w-full text-sm hover:underline`}
              >
                Back to email
              </button>
            </form>
          )
        ) : (
          <div className="space-y-4">
            <OnrampButton
              walletAddress={evmAddress || undefined}
              apiEndpoint={apiEndpoint}
              assets={assets}
              defaultAsset={defaultAsset}
              defaultNetwork={defaultNetwork}
              presetFiatAmount={amount}
              theme={theme}
              className="text-lg py-3"
            >
              Buy ${amount} {defaultAsset}
            </OnrampButton>
            
            <button
              onClick={handleSignOut}
              className={`${mutedTextClass} hover:${textClass} w-full text-sm transition-colors flex items-center justify-center space-x-1`}
            >
              <span>Sign Out</span>
            </button>
          </div>
        )}
      </div>

      {/* Footer */}
      {footerText && (
        <div className="text-center mt-4">
          {footerHref ? (
            <a 
              href={footerHref} 
              target="_blank" 
              rel="noopener noreferrer"
              className={`text-xs ${mutedTextClass} hover:underline`}
            >
              {footerText}
            </a>
          ) : (
            <p className={`text-xs ${mutedTextClass}`}>{footerText}</p>
          )}
        </div>
      )}
    </div>
  );
}