{% extends 'admin/base.html' %}

{% block page_title %}User: {{ user.username }}{% endblock %}

{% block admin_content %}
<div class="user-detail-grid">
    <!-- User Profile Card -->
    <div class="admin-card user-profile">
        <div class="profile-header">
            <img src="https://api.dicebear.com/7.x/identicon/svg?seed={{ user.avatar_seed }}" alt="Avatar"
                class="user-avatar-lg">
            <div class="profile-info">
                <h2>{{ user.username }}</h2>
                <div class="profile-badges">
                    {% if user.is_admin %}
                    <span class="badge badge-admin">Admin</span>
                    {% endif %}
                    {% if user.is_active %}
                    <span class="badge badge-success">Active</span>
                    {% else %}
                    <span class="badge badge-danger">Inactive</span>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="profile-details">
            <div class="detail-row">
                <span class="label">User ID</span>
                <span class="value">#{{ user.id }}</span>
            </div>
            <div class="detail-row">
                <span class="label">Email</span>
                <span class="value">{{ user.email or 'Not set' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">Phone</span>
                <span class="value">{{ user.phone or 'Not set' }}</span>
            </div>
            <div class="detail-row">
                <span class="label">Language</span>
                <span class="value">{{ user.language|upper }}</span>
            </div>
            <div class="detail-row">
                <span class="label">Joined</span>
                <span class="value">{{ user.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>
            <div class="detail-row">
                <span class="label">Last Seen</span>
                <span class="value">{{ user.last_seen.strftime('%Y-%m-%d %H:%M') if user.last_seen else 'Never'
                    }}</span>
            </div>
        </div>

        <div class="profile-balance">
            <span class="balance-label">Current Balance</span>
            <span class="balance-value">{{ "{:,.0f}".format(user.balance) }} XAF</span>
        </div>
    </div>

    <!-- Stats Card -->
    <div class="admin-card">
        <div class="card-header">
            <h3><i class="fas fa-chart-bar"></i> Statistics</h3>
        </div>
        <div class="card-body stats-body">
            <div class="stat-item">
                <span class="stat-label">Total Games</span>
                <span class="stat-value">{{ user.total_games }}</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Total Wagered</span>
                <span class="stat-value">{{ "{:,.0f}".format(user.total_wagered) }} XAF</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Total Won</span>
                <span class="stat-value text-success">{{ "{:,.0f}".format(user.total_won) }} XAF</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Net Profit/Loss</span>
                {% set net = user.total_won - user.total_wagered %}
                <span class="stat-value {{ 'text-success' if net > 0 else 'text-danger' }}">
                    {{ "{:+,.0f}".format(net) }} XAF
                </span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Highest Win</span>
                <span class="stat-value text-accent">{{ user.highest_win_multiplier|round(2) }}x</span>
            </div>
        </div>
    </div>

    <!-- Actions Card -->
    <div class="admin-card">
        <div class="card-header">
            <h3><i class="fas fa-cogs"></i> Actions</h3>
        </div>
        <div class="card-body actions-body">
            <!-- Toggle Active -->
            <form method="POST" action="{{ url_for('admin.user_update', user_id=user.id) }}" class="action-form">
                <input type="hidden" name="action" value="toggle_active">
                <button type="submit" class="btn btn-block {{ 'btn-danger' if user.is_active else 'btn-success' }}">
                    <i class="fas {{ 'fa-ban' if user.is_active else 'fa-check' }}"></i>
                    {{ 'Deactivate User' if user.is_active else 'Activate User' }}
                </button>
            </form>

            <!-- Toggle Admin -->
            {% if user.id != current_user.id %}
            <form method="POST" action="{{ url_for('admin.user_update', user_id=user.id) }}" class="action-form">
                <input type="hidden" name="action" value="toggle_admin">
                <button type="submit" class="btn btn-block btn-warning">
                    <i class="fas fa-user-shield"></i>
                    {{ 'Revoke Admin' if user.is_admin else 'Grant Admin' }}
                </button>
            </form>
            {% endif %}

            <!-- Adjust Balance -->
            <form method="POST" action="{{ url_for('admin.user_update', user_id=user.id) }}" class="action-form">
                <input type="hidden" name="action" value="adjust_balance">
                <div class="form-group">
                    <label>Adjust Balance (XAF)</label>
                    <input type="number" name="amount" class="form-input" placeholder="e.g. 5000 or -1000">
                </div>
                <div class="form-group">
                    <label>Reason</label>
                    <input type="text" name="reason" class="form-input" placeholder="Reason for adjustment">
                </div>
                <button type="submit" class="btn btn-block btn-primary">
                    <i class="fas fa-wallet"></i> Adjust Balance
                </button>
            </form>

            <!-- Reset Password -->
            <form method="POST" action="{{ url_for('admin.user_update', user_id=user.id) }}" class="action-form">
                <input type="hidden" name="action" value="reset_password">
                <div class="form-group">
                    <label>New Password</label>
                    <input type="password" name="new_password" class="form-input" placeholder="New password"
                        minlength="6">
                </div>
                <button type="submit" class="btn btn-block btn-secondary">
                    <i class="fas fa-key"></i> Reset Password
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Tabs for Bets and Transactions -->
<div class="admin-card full-width">
    <div class="card-header">
        <div class="tab-nav">
            <button class="tab-btn active" data-tab="bets">Recent Bets ({{ bets|length }})</button>
            <button class="tab-btn" data-tab="transactions">Transactions ({{ transactions|length }})</button>
        </div>
    </div>
    <div class="card-body">
        <!-- Bets Tab -->
        <div class="tab-content active" id="bets-tab">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Round</th>
                        <th>Amount</th>
                        <th>Auto Cashout</th>
                        <th>Cashed Out</th>
                        <th>Multiplier</th>
                        <th>Profit</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody>
                    {% for bet in bets %}
                    <tr>
                        <td>
                            <a href="{{ url_for('admin.game_detail', round_id=bet.round_id) }}">#{{ bet.round_id }}</a>
                        </td>
                        <td>{{ "{:,.0f}".format(bet.amount) }} XAF</td>
                        <td>{{ bet.auto_cashout|round(2) if bet.auto_cashout else '-' }}x</td>
                        <td>
                            {% if bet.cashed_out %}
                            <span class="status status-success">Yes</span>
                            {% else %}
                            <span class="status status-danger">No</span>
                            {% endif %}
                        </td>
                        <td>{{ bet.cashout_multiplier|round(2) if bet.cashout_multiplier else '-' }}x</td>
                        <td class="{{ 'text-success' if bet.profit > 0 else 'text-danger' }}">
                            {{ "{:+,.0f}".format(bet.profit) }} XAF
                        </td>
                        <td>{{ bet.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="text-center">No bets found</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Transactions Tab -->
        <div class="tab-content" id="transactions-tab">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Balance After</th>
                        <th>Method</th>
                        <th>Description</th>
                        <th>Status</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tx in transactions %}
                    <tr>
                        <td>#{{ tx.id }}</td>
                        <td><span class="badge badge-{{ tx.type }}">{{ tx.type|capitalize }}</span></td>
                        <td class="{{ 'text-success' if tx.type in ['deposit', 'win'] else 'text-danger' }}">
                            {{ "{:,.0f}".format(tx.amount) }} XAF
                        </td>
                        <td>{{ "{:,.0f}".format(tx.balance_after) }} XAF</td>
                        <td>{{ tx.payment_method or '-' }}</td>
                        <td>{{ tx.description or '-' }}</td>
                        <td><span class="status status-{{ tx.status }}">{{ tx.status }}</span></td>
                        <td>{{ tx.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="text-center">No transactions found</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            btn.classList.add('active');
            document.getElementById(btn.dataset.tab + '-tab').classList.add('active');
        });
    });
</script>
{% endblock %}