{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}

{% block extra_css %}
<style>
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page-header p { color: var(--muted); font-size: 0.9rem; margin-top: 0.2rem; }

.token-card {
    background: linear-gradient(135deg, rgba(0,229,160,0.1) 0%, rgba(0,102,255,0.08) 100%);
    border: 1px solid rgba(0,229,160,0.2);
    border-radius: 12px;
    padding: 1.8rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.token-info h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    font-family: var(--mono);
}

.token-info p { color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }

.packages { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.pkg-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.8rem 1.2rem;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s;
    cursor: pointer;
}

.pkg-btn:hover {
    border-color: var(--accent);
    background: rgba(0,229,160,0.05);
    transform: translateY(-2px);
}

.pkg-btn .pkg-tokens { font-size: 1.3rem; font-weight: 800; color: var(--accent); font-family: var(--mono); }
.pkg-btn .pkg-name   { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
.pkg-btn .pkg-price  { font-size: 0.85rem; font-weight: 700; margin-top: 0.3rem; }

.add-phone-form {
    display: grid;
    grid-template-columns: 1fr 1fr 80px 1fr auto;
    gap: 0.75rem;
    align-items: end;
}

@media (max-width: 900px) {
    .add-phone-form { grid-template-columns: 1fr 1fr; }
    .token-card { flex-direction: column; align-items: flex-start; }
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-dot.active   { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.status-dot.inactive { background: var(--muted); }

.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--muted);
}

.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.empty-state p { font-size: 0.9rem; }

.tx-amount { font-weight: 700; }
.tx-amount.positive { color: var(--accent); }
.tx-amount.negative { color: var(--danger); }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1>Dashboard</h1>
        <p>Welcome back, {{ current_user.username }}</p>
    </div>
</div>

<!-- Token Balance -->
<div class="token-card">
    <div class="token-info">
        <h2>{{ current_user.tokens }}</h2>
        <p>Tokens Remaining</p>
    </div>
    <div>
        {% if packages %}
        <div style="margin-bottom: 0.75rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;">Buy Tokens</div>
        <div class="packages">
            {% for pkg in packages %}
            <a href="{{ url_for('buy_tokens', package_id=pkg.id) }}" class="pkg-btn">
                <div class="pkg-tokens">{{ pkg.tokens }}</div>
                <div class="pkg-name">{{ pkg.name }}</div>
                <div class="pkg-price">${{ "%.2f"|format(pkg.price_cents / 100) }}</div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p style="color: var(--muted); font-size: 0.85rem;">No packages available yet. Contact admin to add tokens.</p>
        {% endif %}
    </div>
</div>

<!-- Phone Numbers -->
<div class="card">
    <div class="card-title">Phone Numbers</div>

    <!-- Add Phone Form -->
    <form method="POST" action="{{ url_for('add_phone') }}" style="margin-bottom: 1.5rem;">
        <div class="add-phone-form">
            <div class="form-group" style="margin:0">
                <label>Full Name</label>
                <input type="text" name="full_name" placeholder="John Doe" required>
            </div>
            <div class="form-group" style="margin:0">
                <label>Phone Number</label>
                <input type="text" name="phone" placeholder="8082309112" required>
            </div>
            <div class="form-group" style="margin:0">
                <label>Country</label>
                <input type="text" name="country_code" placeholder="1" value="1">
            </div>
            <div class="form-group" style="margin:0">
                <label>Password</label>
                <input type="text" name="password" placeholder="account password" required>
            </div>
            <div class="form-group" style="margin:0">
                <label>&nbsp;</label>
                <button type="submit" class="btn btn-primary">Add</button>
            </div>
        </div>
    </form>

    <!-- Phone List -->
    {% if phones %}
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Country</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for p in phones %}
            <tr>
                <td style="font-family: var(--font); font-weight: 600;">{{ p.full_name or '—' }}</td>
                <td>{{ p.phone }}</td>
                <td>+{{ p.country_code }}</td>
                <td>
                    {% if p.active %}
                        <span class="status-dot active"></span><span class="badge badge-green">Active</span>
                    {% else %}
                        <span class="status-dot inactive"></span><span class="badge badge-red">Paused</span>
                    {% endif %}
                </td>
                <td>
                    <div style="display:flex; gap: 0.5rem;">
                        <a href="{{ url_for('toggle_phone', phone_id=p.id) }}" class="btn btn-secondary btn-sm">
                            {{ 'Pause' if p.active else 'Resume' }}
                        </a>
                        <a href="{{ url_for('delete_phone', phone_id=p.id) }}" class="btn btn-danger btn-sm"
                           onclick="return confirm('Remove this phone number?')">Remove</a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state">
        <div class="empty-icon">📱</div>
        <p>No phone numbers added yet.<br>Add one above to get started.</p>
    </div>
    {% endif %}
</div>

<!-- Recent Transactions -->
{% if transactions %}
<div class="card">
    <div class="card-title">Recent Activity</div>
    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Type</th>
                <th>Amount</th>
                <th>Note</th>
            </tr>
        </thead>
        <tbody>
            {% for tx in transactions %}
            <tr>
                <td style="color: var(--muted);">{{ tx.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                <td><span class="badge {{ 'badge-green' if tx.type in ['purchase','manual'] else 'badge-red' }}">{{ tx.type }}</span></td>
                <td class="tx-amount {{ 'positive' if tx.amount > 0 else 'negative' }}">
                    {{ '+' if tx.amount > 0 else '' }}{{ tx.amount }}
                </td>
                <td style="color: var(--muted);">{{ tx.note }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}