/**
 * @file ThirdwebBridgeWidget.tsx
 * @notice thirdweb Bridge widget integration using iframe (Bridge component not available in v4.9.4)
 */

import { useState, useMemo } from 'react';
import { defaultFrontendChain, chain2138TestnetEnabled } from '../../config/networks';

interface ThirdwebBridgeWidgetProps {
    clientId: string;
    fromChain?: number;
    toChain?: number;
    fromToken?: string;
    toToken?: string;
}

export default function ThirdwebBridgeWidget({
    clientId,
    fromChain = defaultFrontendChain.id,
    toChain,
    fromToken,
    toToken
}: ThirdwebBridgeWidgetProps) {
    const [selectedToChain, setSelectedToChain] = useState<number | undefined>(toChain);
    const [selectedFromToken] = useState<string | undefined>(fromToken);
    const [selectedToToken] = useState<string | undefined>(toToken);

    const iframeSrc = useMemo(() => {
        const params = new URLSearchParams();
        params.append('clientId', clientId);
        if (fromChain) params.append('fromChain', fromChain.toString());
        if (selectedToChain) params.append('toChain', selectedToChain.toString());
        if (selectedFromToken) params.append('fromToken', selectedFromToken);
        if (selectedToToken) params.append('toToken', selectedToToken);
        return `https://thirdweb.com/bridge?${params.toString()}`;
    }, [clientId, fromChain, selectedToChain, selectedFromToken, selectedToToken]);

    return (
        <div className="w-full max-w-4xl mx-auto">
            <div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl border border-gray-200/50 p-6 md:p-8">
                <div className="mb-6">
                    <h2 className="text-3xl font-bold mb-2 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                        Bridge to EVM Chain
                    </h2>
                    <p className="text-gray-600">
                        Bridge or swap tokens from {defaultFrontendChain.name} to supported EVM destinations using ThirdWeb
                    </p>
                </div>

                {chain2138TestnetEnabled && (
                    <p className="mb-4 text-sm text-blue-700 bg-blue-50 border border-blue-200 rounded-xl px-4 py-3">
                        Chain 2138 is enabled for frontend wallet flows. The Thirdweb embed will default to the configured frontend source chain.
                    </p>
                )}

                <div className="mb-6">
                    <label className="block text-sm font-semibold mb-3 text-gray-700">
                        Destination Chain
                    </label>
                    <select
                        value={selectedToChain || ''}
                        onChange={(e) => setSelectedToChain(Number(e.target.value) || undefined)}
                        className="w-full p-3 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all bg-white font-medium"
                    >
                        <option value="">Select chain...</option>
                        <option value="1">Ethereum Mainnet</option>
                        <option value="137">Polygon</option>
                        <option value="10">Optimism</option>
                        <option value="8453">Base</option>
                        <option value="42161">Arbitrum</option>
                        <option value="43114">Avalanche</option>
                        <option value="56">BNB Chain</option>
                    </select>
                </div>

                {selectedToChain && (
                    <div className="border-2 border-gray-200 rounded-xl overflow-hidden shadow-inner bg-gray-50" style={{ height: '600px' }}>
                        <iframe
                            src={iframeSrc}
                            width="100%"
                            height="100%"
                            frameBorder="0"
                            title="ThirdWeb Bridge"
                            className="w-full h-full"
                        />
                    </div>
                )}

                {!selectedToChain && (
                    <div className="text-center py-16 text-gray-500 bg-gray-50 rounded-xl border-2 border-dashed border-gray-300">
                        <svg className="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        <p className="text-lg font-medium">Please select a destination chain to continue</p>
                    </div>
                )}
            </div>
        </div>
    );
}
