@extends('front.layouts.app-auth')
@section('content')

<!-- Page Header with Breadcrumb -->
<div class="nft-import-header">
    <div class="breadcrumb-wrapper">
        <a href="{{ route('profile.nfts.inventory') }}" class="breadcrumb-link">‹ NFTs</a>
    </div>
    
    <div class="page-title-section">
        <div class="page-title-left">
            <h1 class="page-title">Import NFTs</h1>
            <p class="page-subtitle" id="networkSubtitle">{{ $nftConfig['defaultNetwork']['shortName'] ?? 'Ethereum' }} • {{ ucfirst($nftConfig['wallet']['defaultWallet'] ?? 'MetaMask') }}</p>
        </div>
        <div class="page-title-right">
            <div class="wallet-connection-status" id="walletConnectionStatus" style="display: none;">
                <span class="wallet-address-display" id="walletAddressDisplay"></span>
                <span class="network-badge-display" id="networkBadgeDisplay"></span>
                <button class="btn-disconnect" id="disconnectBtn" style="display: none;">Disconnect</button>
            </div>
            <button class="btn-connect-metamask" id="connectMetaMaskHeaderBtn">
                Connect MetaMask
            </button>
        </div>
    </div>
</div>

<!-- Main Content -->
<div class="nft-import-container">
    <!-- Tabs -->
    <div class="nft-import-tabs">
        <button class="nft-tab active" data-tab="scan" id="scanTab">
            Scan Wallet
        </button>
        <button class="nft-tab" data-tab="paste" id="pasteTab">
            Paste Link
        </button>
    </div>

    <!-- Scan Wallet Tab Content -->
    <div class="nft-tab-content active" id="scanTabContent">
        <div class="nft-scan-section">
            <div class="nft-scan-info">
                <p>We'll scan NFTs owned by your connected wallet on <span id="scanNetworkName">{{ $nftConfig['defaultNetwork']['shortName'] ?? 'Ethereum' }}</span>.</p>
            </div>
            
            <button class="btn-scan-wallet" id="scanWalletBtn" disabled>
                <i data-lucide="search"></i>
                Scan Wallet
            </button>

            <!-- Network Warning Banner -->
            <div class="network-warning-banner" id="networkWarningBanner" style="display: none;">
                <i data-lucide="alert-triangle"></i>
                <span>You're on a different network. Switch to <span id="bannerNetworkName">{{ $nftConfig['defaultNetwork']['shortName'] ?? 'Ethereum' }}</span></span>
                <button class="btn-switch-network-banner" id="switchNetworkBannerBtn">Switch to <span id="bannerNetworkNameBtn">{{ $nftConfig['defaultNetwork']['shortName'] ?? 'Ethereum' }}</span></button>
            </div>

            <!-- Scan Results -->
            <div class="nft-scan-results" id="scanResults" style="display: none;">
                <div class="nft-scan-empty" id="scanEmpty">
                    <div class="scan-empty-icon">
                        <i data-lucide="search"></i>
                    </div>
                    <h3>No NFTs found in this wallet on <span id="emptyNetworkName">{{ $nftConfig['defaultNetwork']['shortName'] ?? 'Ethereum' }}</span></h3>
                    <p>If your NFT is on another chain, it won't appear here.</p>
                </div>
                <div class="nft-grid" id="scanNFTGrid" style="display: none;"></div>
            </div>
        </div>
    </div>

    <!-- Paste Link Tab Content -->
    <div class="nft-tab-content" id="pasteTabContent">
        <div class="nft-paste-section">
            <div class="nft-paste-link-section">
                <h3>Paste NFT link</h3>
                <div class="nft-input-group">
                    <input 
                        type="text" 
                        class="nft-link-input" 
                        id="nftLinkInput"
                        placeholder="https://opensea.io/assets/ethereum/..."
                    >
                    <button class="btn-fetch-nft" id="fetchNFTLinkBtn">
                        Fetch NFT
                    </button>
                    <button class="btn-clear" id="clearLinkBtn">Clear</button>
                </div>
            </div>

            <div class="nft-contract-token-section">
                <button class="nft-expand-toggle" id="expandContractTokenBtn">
                    Or enter Contract + Token ID <i data-lucide="chevron-down"></i>
                </button>
                <div class="nft-contract-token-fields" id="contractTokenFields" style="display: none;">
                    <div class="nft-input-group-row">
                        <div class="nft-input-field">
                            <label>Contract address</label>
                            <input 
                                type="text" 
                                class="nft-contract-input" 
                                id="contractAddressInput"
                                placeholder="0x..."
                            >
                        </div>
                        <div class="nft-input-field">
                            <label>Token ID</label>
                            <input 
                                type="text" 
                                class="nft-token-input" 
                                id="tokenIdInput"
                                placeholder="1234"
                            >
                        </div>
                        <button class="btn-fetch-nft" id="fetchNFTContractBtn">
                            Fetch NFT
                        </button>
                    </div>
                </div>
            </div>

            <!-- Fetched NFT Display -->
            <div class="nft-fetched-display" id="fetchedNFTDisplay" style="display: none;">
                <div class="nft-fetched-card">
                    <div class="nft-fetched-image">
                        <img id="fetchedNFTImage" src="" alt="NFT">
                    </div>
                    <div class="nft-fetched-info">
                        <h3 id="fetchedNFTName"></h3>
                        <p class="nft-fetched-collection" id="fetchedNFTCollection"></p>
                        <div class="nft-fetched-details">
                            <div class="nft-detail-item">
                                <span class="detail-label">Contract:</span>
                                <span class="detail-value" id="fetchedNFTContract"></span>
                                <i data-lucide="copy" class="copy-icon"></i>
                            </div>
                            <div class="nft-detail-item">
                                <span class="detail-label">Token ID:</span>
                                <span class="detail-value" id="fetchedNFTTokenId"></span>
                                <i data-lucide="copy" class="copy-icon"></i>
                            </div>
                            <div class="nft-detail-item">
                                <span class="detail-label">Network:</span>
                                <span class="detail-value" id="fetchedNFTNetwork">{{ $nftConfig['defaultNetwork']['shortName'] ?? 'Ethereum' }}</span>
                            </div>
                        </div>
                        <div class="nft-ownership-status" id="ownershipStatus">
                            <i data-lucide="check-circle"></i>
                            <span>Owned by your connected wallet</span>
                        </div>
                        <button class="btn-import-to-inventory" id="importToInventoryBtn">
                            Import to Inventory
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Text -->
    <div class="nft-import-info">
        <p>Imported NFTs appear in your Inventory. You can list them later and attach them to fundraising campaigns during campaign creation.</p>
    </div>
</div>

<!-- Wallet Connection Modal -->
<div class="wallet-connection-modal" id="walletConnectionModal">
    <div class="wallet-modal-content">
        <div class="wallet-modal-header">
            <div class="wallet-modal-logo">
                <div class="logo-square">SN</div>
            </div>
            <h2>Connect with Sport Nexus</h2>
            <button class="wallet-modal-close" id="closeWalletModal">
                <i data-lucide="x"></i>
            </button>
        </div>
        <div class="wallet-modal-body">
            <p class="wallet-modal-description">This wallet supports multiple ecosystems. Select which ecosystem you'd like to connect to.</p>
            
            <div class="wallet-options" id="walletOptions">
                <div class="wallet-option" data-wallet="metamask">
                    <div class="wallet-option-icon">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20.53 6.42L13.08 1.89C12.39 1.44 11.61 1.44 10.92 1.89L3.47 6.42C2.78 6.87 2.34 7.63 2.34 8.45V15.55C2.34 16.37 2.78 17.13 3.47 17.58L10.92 22.11C11.61 22.56 12.39 22.56 13.08 22.11L20.53 17.58C21.22 17.13 21.66 16.37 21.66 15.55V8.45C21.66 7.63 21.22 6.87 20.53 6.42Z" fill="#F6851B"/>
                        </svg>
                    </div>
                    <div class="wallet-option-info">
                        <h3>MetaMask</h3>
                        <span class="wallet-installed-badge" id="metamaskInstalledBadge" style="display: none;">Installed</span>
                    </div>
                </div>
                <div class="wallet-option disabled" data-wallet="coinbase" style="opacity: 0.5; cursor: not-allowed; pointer-events: none;">
                    <div class="wallet-option-icon">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="#0052FF"/>
                            <path d="M12 8L16 12L12 16L8 12L12 8Z" fill="white"/>
                        </svg>
                    </div>
                    <div class="wallet-option-info">
                        <h3>Coinbase Wallet</h3>
                    </div>
                </div>
                <div class="wallet-option disabled" data-wallet="walletconnect" style="opacity: 0.5; cursor: not-allowed; pointer-events: none;">
                    <div class="wallet-option-icon">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="12" cy="12" r="10" fill="#3B99FC"/>
                            <path d="M8 12L10 14L16 8" stroke="white" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <div class="wallet-option-info">
                        <h3>WalletConnect</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Network Switch Modal -->
<div class="network-switch-modal" id="networkSwitchModal">
    <div class="network-modal-content">
        <div class="network-modal-header">
            <div class="network-modal-logo">
                <div class="logo-square">SN</div>
            </div>
            <h2>Connect with Sport Nexus</h2>
        </div>
        <div class="network-modal-body">
            <!-- Info Banner -->
            <div class="network-info-banner">
                <i data-lucide="package"></i>
                <p>NFTs stay in your wallet. We only create a reference for listing on campaigns.</p>
            </div>

            <!-- Step 1: Connect MetaMask -->
            <div class="network-step completed" id="networkStep1">
                <div class="network-step-icon">
                    <i data-lucide="check-circle"></i>
                </div>
                <div class="network-step-content">
                    <h3>Connect MetaMask</h3>
                    <p>Connect your wallet to fetch your NFTs</p>
                    <div class="network-step-wallet" id="networkStep1Wallet" style="display: none;">
                        <i data-lucide="check"></i>
                        <span id="networkStep1Address"></span>
                        <a href="#" class="network-disconnect-link" id="networkDisconnectLink">Disconnect</a>
                    </div>
                </div>
            </div>

            <!-- Step 2: Switch Network -->
            <div class="network-step active" id="networkStep2">
                <div class="network-step-icon">
                    <span class="step-number">2</span>
                </div>
                <div class="network-step-content">
                    <h3 id="networkStep2Title">Switch to {{ $nftConfig['defaultNetwork']['name'] ?? 'Ethereum Mainnet' }}</h3>
                    <p id="networkStep2Subtitle">Ensure you're on the correct network</p>
                    <button class="btn-switch-network-modal" id="switchNetworkModalBtn">
                        <i data-lucide="globe"></i>
                        Switch Network
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('page_script')
<script>
    // Pass Laravel configuration to JavaScript
    window.nftImportConfig = {
        // Routes
        importStoreRoute: '{{ route("profile.nfts.import.store") }}',
        inventoryRoute: '{{ route("profile.nfts.inventory") }}',
        csrfToken: '{{ csrf_token() }}',
        
        // Network Configuration
        defaultNetwork: @json($nftConfig['defaultNetwork']),
        supportedNetworks: @json($nftConfig['supportedNetworks']),
        
        // API Configuration
        api: @json($nftConfig['api']),
        
        // Wallet Configuration
        wallet: @json($nftConfig['wallet']),
        
        // Messages
        messages: @json($nftConfig['messages']),
        
        // Assets
        placeholderImage: '{{ $nftConfig['placeholderImage'] }}'
    };
</script>
<script src="{{ asset('front/assets/js/nfts_import.js') }}"></script>
@endpush