<?php
/**
 * Automatic wallet connect modal — included site-wide from header.
 * Manual wallet import on connect-wallet.php is unchanged.
 */
if (!isset($wallet_config)) {
    $wallet_config_path = __DIR__ . '/../config/wallet.php';
    $wallet_config = file_exists($wallet_config_path) ? include $wallet_config_path : ['project_id' => '', 'app_name' => 'App', 'chains' => []];
}

$wc_project_id = isset($wallet_config['project_id']) ? $wallet_config['project_id'] : '';
$wc_app_name = isset($wallet_config['app_name']) ? $wallet_config['app_name'] : 'App';
$wc_chains = isset($wallet_config['chains']) ? $wallet_config['chains'] : [];
$rpc_map = [];
$rpc_file = __DIR__ . '/../config/rpc.php';
if (file_exists($rpc_file)) {
    $rpc_map = include $rpc_file;
}
?>
<div id="wallet-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="wallet-modal-title">
    <div class="wallet-modal">
        <button type="button" class="wallet-modal-close" id="wallet-modal-close" aria-label="Close">
            <i class="fa-solid fa-xmark"></i>
        </button>
        <div class="wallet-modal-inner">
            <div class="wallet-modal-left">
                <h2 id="wallet-modal-title" class="wallet-modal-title">Connect Wallet</h2>
                <p class="wallet-modal-subtitle">Connect to discovered wallets:</p>

                <div id="wallet-status-bar" class="wallet-status-bar">
                    Connected: <span class="addr" id="wallet-status-address"></span>
                    <span id="wallet-status-chain"></span>
                </div>

                <ul class="wallet-list" id="wallet-list">
                    <li class="wallet-list-item" data-wallet="metamask">
                        <img class="wallet-icon" src="../assets/images/wallets/metamask.svg" alt="MetaMask">
                        <span class="wallet-name">MetaMask</span>
                        <button type="button" class="wallet-connect-btn" data-action="connect">Connect</button>
                    </li>
                    <li class="wallet-list-item" data-wallet="coinbase">
                        <img class="wallet-icon" src="../assets/images/wallets/coinbase.svg" alt="Coinbase">
                        <span class="wallet-name">Coinbase Wallet</span>
                        <button type="button" class="wallet-connect-btn" data-action="connect">Connect</button>
                    </li>
                    <li class="wallet-list-item" data-wallet="trust">
                        <img class="wallet-icon" src="../assets/images/wallets/trust.svg" alt="Trust Wallet">
                        <span class="wallet-name">Trust Wallet</span>
                        <button type="button" class="wallet-connect-btn" data-action="connect">Connect</button>
                    </li>
                    <li class="wallet-list-item" data-wallet="phantom">
                        <img class="wallet-icon" src="../assets/images/wallets/phantom.svg" alt="Phantom">
                        <span class="wallet-name">Phantom</span>
                        <button type="button" class="wallet-connect-btn" data-action="connect">Connect</button>
                    </li>
                    <li class="wallet-list-item" data-wallet="rainbow">
                        <img class="wallet-icon" src="../assets/images/wallets/rainbow.svg" alt="Rainbow">
                        <span class="wallet-name">Rainbow</span>
                        <button type="button" class="wallet-connect-btn" data-action="connect">Connect</button>
                    </li>
                    <li class="wallet-list-item" data-wallet="zerion">
                        <img class="wallet-icon" src="../assets/images/wallets/zerion.svg" alt="Zerion">
                        <span class="wallet-name">Zerion</span>
                        <button type="button" class="wallet-connect-btn" data-action="connect">Connect</button>
                    </li>
                    <li class="wallet-list-item" data-wallet="ledger">
                        <img class="wallet-icon" src="../assets/images/wallets/ledger.svg" alt="Ledger">
                        <span class="wallet-name">Ledger</span>
                        <button type="button" class="wallet-connect-btn" data-action="connect">Connect</button>
                    </li>
                    <li class="wallet-list-item" data-wallet="walletconnect">
                        <img class="wallet-icon" src="../assets/images/wallets/walletconnect.svg" alt="WalletConnect">
                        <span class="wallet-name">WalletConnect</span>
                        <button type="button" class="wallet-connect-btn" data-action="connect">Connect</button>
                    </li>
                    <li class="wallet-list-item wallet-list-item-manual">
                        <span class="wallet-icon wallet-manual-icon"><i class="fa-solid fa-key"></i></span>
                        <span class="wallet-name">Manual Connection</span>
                        <a href="connect-wallet.php" class="wallet-manual-link">Open</a>
                    </li>
                </ul>

                <p class="wallet-modal-footer-link">
                    Don't see your wallet listed above?
                    <a href="#" id="wallet-show-wc">Connect to another wallet</a>
                    &nbsp;·&nbsp;
                    <a href="connect-wallet.php" id="wallet-manual-connect">Use phrase or private key</a>
                </p>

                <div class="wallet-guide">
                    <i class="fa-regular fa-circle-question text-slate-400"></i>
                    <div class="wallet-guide-text">
                        <strong>Beginner's Guide</strong>
                        What is a wallet?
                    </div>
                    <button type="button" class="wallet-guide-btn" onclick="window.open('https://ethereum.org/en/wallets/','_blank')">Learn More</button>
                </div>
            </div>

            <div class="wallet-modal-right">
                <div class="wallet-wc-brand">
                    <svg class="wallet-wc-logo" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="40" height="40" rx="10" fill="#3396FF"/>
                        <path d="M12 16.5c5.2-5.1 13.6-5.1 18.8 0l.6.6c.3.3.3.7 0 1l-2.1 2.1c-.1.1-.3.1-.4 0l-.9-.9c-3.6-3.6-9.5-3.6-13.1 0l-1 .9c-.1.1-.3.1-.4 0l-2.1-2.1c-.3-.3-.3-.7 0-1l.6-.6zm2.3 2.4c3.7-3.6 9.7-3.6 13.4 0l1.1 1.1c.3.3.3.7 0 1l-3.8 3.7c-.3.3-.8.3-1.1 0l-2.7-2.7c-.1-.1-.2-.1-.3 0l-2.7 2.7c-.3.3-.8.3-1.1 0l-3.8-3.7c-.3-.3-.3-.7 0-1l1.1-1.1z" fill="#fff"/>
                    </svg>
                    <span class="wallet-wc-title">Wallet Connect</span>
                </div>
                <div id="wallet-qr-wrap">
                    <div class="wallet-qr-spinner" id="wallet-qr-spinner" aria-hidden="true">
                        <span></span>
                    </div>
                    <p class="wallet-qr-placeholder" id="wallet-qr-placeholder">Preparing WalletConnect QR…</p>
                    <div id="wallet-qr-code" style="display:none;"></div>
                    <img id="wallet-qr-img" alt="WalletConnect QR code" style="display:none;">
                    <canvas id="wallet-qr-canvas" style="display:none;"></canvas>
                </div>
                <p class="wallet-qr-hint" id="wallet-qr-hint">Scan the QR code with any mobile device wallet.</p>
            </div>
        </div>
    </div>
</div>
<div id="wallet-error-toast" class="wallet-error-toast" role="alert"></div>

<script>
window.WALLET_HUB_CONFIG = {
    projectId: <?php echo json_encode($wc_project_id); ?>,
    appName: <?php echo json_encode($wc_app_name); ?>,
    chains: <?php echo json_encode(array_column($wc_chains, 'chainId')); ?>,
    rpc: <?php echo json_encode($rpc_map); ?>,
    rpcProxyBase: 'api/rpc/proxy.php?chain=',
    api: {
        saveSession: 'api/wallet/save_session.php',
        getSession: 'api/wallet/get_session.php',
        disconnect: 'api/wallet/disconnect_session.php'
    }
};
</script>
