{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5" style="min-height: 90vh;">
    <!-- Profile Header -->
    <div class="glass-card p-4 mb-4" style="border-radius: 12px; border: 1px solid #2b3139;">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="avatar-circle bg-warning text-dark d-flex align-items-center justify-content-center fw-bold fs-3" style="width: 80px; height: 80px; border-radius: 50%;">
                    {{ user.username|first|upper }}
                </div>
            </div>
            <div class="col">
                <h2 class="fw-bold mb-1 text-white">{{ user.username }}</h2>
                <div class="d-flex gap-3 align-items-center flex-wrap">
                    <span class="text-secondary small">UID: 59302{{ user.id }}</span>
                    <span class="badge {% if account.kyc_status == 'completed' %}bg-success{% elif account.kyc_status == 'pending' %}bg-warning text-dark{% else %}bg-secondary{% endif %}">
                        {% if account.kyc_status == 'completed' %}已认证{% elif account.kyc_status == 'pending' %}审核中{% else %}未认证{% endif %}
                    </span>
                    <span class="text-secondary small"><i class="bi bi-clock me-1"></i>注册时间: {{ user.date_joined|date:"Y-m-d" }}</span>
                </div>
            </div>
            <div class="col-lg-auto mt-3 mt-lg-0">
                <div class="d-flex gap-2">
                    <a href="{% url 'core:deposit' %}" class="btn btn-warning fw-bold px-4">充币</a>
                    <a href="{% url 'core:withdraw' %}" class="btn btn-outline-light px-4">提币</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Left Column: Asset Overview -->
        <div class="col-lg-4">
            <div class="glass-card p-4 h-100" style="border-radius: 12px; border: 1px solid #2b3139;">
                <h5 class="fw-bold mb-4">资产总览</h5>
                <div class="mb-4">
                    <p class="text-secondary small mb-1">总资产折合 (USDT)</p>
                    <h2 class="fw-bold text-white mb-0">≈ {{ account.balance|default:"0.00" }} <span class="fs-5 text-secondary fw-normal">USDT</span></h2>
                </div>
                
                <hr class="border-secondary opacity-25">
                
                <div class="asset-item d-flex justify-content-between py-3">
                    <div>
                        <div class="fw-bold text-white">现货账户</div>
                        <div class="text-secondary x-small">Spot Account</div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold text-white">{{ account.balance|default:"0.00" }} USDT</div>
                        <div class="text-secondary x-small">≈ $0.00</div>
                    </div>
                </div>
                
                <div class="asset-item d-flex justify-content-between py-3 border-top border-secondary border-opacity-10">
                    <div>
                        <div class="fw-bold text-white">合约账户</div>
                        <div class="text-secondary x-small">Futures Account</div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold text-white">0.00 USDT</div>
                        <div class="text-secondary x-small">未开通</div>
                    </div>
                </div>

                <div class="asset-item d-flex justify-content-between py-3 border-top border-secondary border-opacity-10">
                    <div>
                        <div class="fw-bold text-white">理财账户</div>
                        <div class="text-secondary x-small">Earn Account</div>
                    </div>
                    <div class="text-end">
                        <div class="fw-bold text-white">0.00 USDT</div>
                        <div class="text-secondary x-small">年化 3.5%起</div>
                    </div>
                </div>

                <a href="#" class="btn btn-outline-secondary w-100 mt-4 btn-sm">查看明细 <i class="bi bi-arrow-right ms-1"></i></a>
            </div>
        </div>

        <!-- Right Column: Security & Activity -->
        <div class="col-lg-8">
            <!-- Security Center -->
            <div class="glass-card p-4 mb-4" style="border-radius: 12px; border: 1px solid #2b3139;">
                <h5 class="fw-bold mb-4">安全设置</h5>
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="d-flex align-items-start gap-3">
                            <i class="bi bi-envelope-check fs-4 text-success"></i>
                            <div>
                                <div class="fw-bold text-white">邮箱验证</div>
                                <p class="text-secondary x-small mb-0">已绑定: {{ user.email|default:"未设置" }}</p>
                            </div>
                            <button class="btn btn-link btn-sm text-warning ms-auto text-decoration-none">修改</button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-start gap-3">
                            <i class="bi bi-shield-lock fs-4 text-warning"></i>
                            <div>
                                <div class="fw-bold text-white">谷歌验证器</div>
                                <p class="text-secondary x-small mb-0">用于提币和安全确认</p>
                            </div>
                            <button class="btn btn-link btn-sm text-warning ms-auto text-decoration-none">去绑定</button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-start gap-3">
                            <i class="bi bi-phone fs-4 text-secondary"></i>
                            <div>
                                <div class="fw-bold text-white">手机验证</div>
                                <p class="text-secondary x-small mb-0">未绑定手机号</p>
                            </div>
                            <button class="btn btn-link btn-sm text-warning ms-auto text-decoration-none">绑定</button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-start gap-3">
                            <i class="bi bi-person-badge fs-4 text-warning"></i>
                            <div>
                                <div class="fw-bold text-white">身份认证 (KYC)</div>
                                <p class="text-secondary x-small mb-0">提升提现额度至 100 BTC</p>
                            </div>
                            <a href="{% url 'core:verify' %}" class="btn btn-link btn-sm text-warning ms-auto text-decoration-none">立即认证</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Orders/History -->
            <div class="glass-card p-4" style="border-radius: 12px; border: 1px solid #2b3139;">
                <ul class="nav nav-tabs border-secondary mb-4" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active bg-transparent border-0 text-white fw-bold px-4" data-bs-toggle="tab" data-bs-target="#orders">当前委托</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link bg-transparent border-0 text-secondary fw-bold px-4" data-bs-toggle="tab" data-bs-target="#history">交易历史</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link bg-transparent border-0 text-secondary fw-bold px-4" data-bs-toggle="tab" data-bs-target="#funds">资金流水</button>
                    </li>
                </ul>
                
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="orders">
                        <div class="text-center py-5">
                            <i class="bi bi-journal-x display-4 text-secondary opacity-25 mb-3"></i>
                            <p class="text-secondary">暂无当前委托订单</p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="history">
                         <div class="table-responsive">
                            <table class="table table-dark table-hover x-small">
                                <thead class="text-secondary">
                                    <tr>
                                        <th>时间</th>
                                        <th>币种</th>
                                        <th>类型</th>
                                        <th>价格</th>
                                        <th>数量</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for order in recent_orders %}
                                    <tr>
                                        <td>{{ order.created_at|date:"m-d H:i" }}</td>
                                        <td>{{ order.symbol }}</td>
                                        <td class="{% if order.side == 'BUY' %}text-success{% else %}text-danger{% endif %}">{{ order.side }}</td>
                                        <td>{{ order.entry_price }}</td>
                                        <td>{{ order.amount }}</td>
                                        <td class="text-info">{{ order.status }}</td>
                                    </tr>
                                    {% empty %}
                                    <tr><td colspan="6" class="text-center py-4 text-secondary">暂无记录</td></tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="funds">
                        <div class="table-responsive">
                            <table class="table table-dark table-hover x-small">
                                <thead class="text-secondary">
                                    <tr>
                                        <th>时间</th>
                                        <th>类型</th>
                                        <th>币种</th>
                                        <th>金额</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for tx in recent_transactions %}
                                    <tr>
                                        <td>{{ tx.timestamp|date:"m-d H:i" }}</td>
                                        <td>{{ tx.get_transaction_type_display }}</td>
                                        <td>USDT</td>
                                        <td class="{% if tx.transaction_type == 'deposit' %}text-success{% else %}text-danger{% endif %}">{{ tx.amount }}</td>
                                        <td>{{ tx.get_status_display }}</td>
                                    </tr>
                                    {% empty %}
                                    <tr><td colspan="5" class="text-center py-4 text-secondary">暂无记录</td></tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .x-small { font-size: 11px; }
    .asset-item { transition: background 0.2s; cursor: pointer; border-radius: 8px; padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; }
    .asset-item:hover { background: rgba(255, 255, 255, 0.05); }
    .nav-tabs .nav-link.active { border-bottom: 3px solid var(--accent-color) !important; color: var(--accent-color) !important; }
</style>
{% endblock %}