{% extends "base.html" %}
{% block title %}User Profile{% endblock %}

{% block page_content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <h2>User Profile</h2>

            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <div class="card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-2">
                            {% if user.profile_picture %}
                            <img src="{{ user.profile_picture }}"
                                 alt="Profile"
                                 class="rounded-circle img-fluid"
                                 referrerpolicy="no-referrer">
                            {% endif %}
                        </div>
                        <div class="col-md-10">
                            <h4>{{ user.email }}</h4>
                            <p class="text-muted">
                                Username: <strong>{{ username }}</strong>
                            </p>
                            {% if user.last_login %}
                            <p class="text-muted">
                                Last login: {{ user.last_login }}
                            </p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            {% if new_token %}
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <h6 class="alert-heading">New API Token: {{ new_token_name }}</h6>
                <p class="mb-1">Copy your token now. It will not be shown again.</p>
                <div class="input-group mb-2">
                    <input type="text" class="form-control font-monospace" value="{{ new_token }}" id="newTokenValue" readonly>
                    <button class="btn btn-outline-secondary" type="button" id="copyTokenBtn" onclick="copyToken()">Copy</button>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {% endif %}

            <div class="card mb-4">
                <div class="card-header">
                    <h5>API Tokens</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        API tokens authenticate with the QUADS API. Use as a Bearer token:
                        <code>Authorization: Bearer qat_...</code>
                    </p>

                    <form method="POST" action="{{ url_for('auth.create_token') }}" class="mb-3">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <div class="input-group">
                            <input type="text"
                                   class="form-control"
                                   name="token_name"
                                   placeholder="Token name (e.g. 'CI pipeline', 'laptop')"
                                   required
                                   maxlength="256">
                            <button type="submit" class="btn btn-primary">Generate Token</button>
                        </div>
                    </form>

                    {% if api_tokens %}
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Token</th>
                                <th>Created</th>
                                <th>Last Used</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for token in api_tokens %}
                            <tr>
                                <td>{{ token.name }}</td>
                                <td><code>{{ token.token_prefix }}...</code></td>
                                <td>{{ token.created_at }}</td>
                                <td>
                                    {% if token.last_used %}
                                        {{ token.last_used }}
                                    {% else %}
                                        <span class="badge bg-secondary">Never</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <form method="POST"
                                          action="{{ url_for('auth.delete_token', token_id=token.id) }}"
                                          onsubmit="return confirm('Revoke token &quot;{{ token.name }}&quot;? This cannot be undone.')">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Revoke</button>
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted">No API tokens yet.</p>
                    {% endif %}
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5>SSH Public Key</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        Your SSH key is automatically distributed to hosts in your assignments.
                    </p>

                    <form method="POST" action="{{ url_for('auth.update_ssh_key') }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <div class="mb-2">
                            <textarea class="form-control font-monospace"
                                      name="ssh_key"
                                      rows="3"
                                      placeholder="Paste your public key (ssh-ed25519 AAAA... user@host)">{{ ssh_key or '' }}</textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Save SSH Key</button>
                    </form>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5>Cloud Release Command</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        An optional command to run on the first host of your
                        allocations after release. Executes in a detached tmux
                        session as root. Maximum 1024 characters.
                    </p>

                    <form method="POST" action="{{ url_for('auth.update_release_command') }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <div class="mb-2">
                            <textarea class="form-control font-monospace"
                                      id="releaseCommandInput"
                                      name="release_command"
                                      rows="3"
                                      maxlength="1024"
                                      placeholder="e.g. source /home/user/.env ; start_service">{{ release_command or '' }}</textarea>
                            <div class="form-text">
                                <span id="cmdCharCount">{{ (release_command or '')|length }}</span>/1024
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Save Command</button>
                    </form>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5>My Cloud Assignments</h5>
                </div>
                <div class="card-body">
                    {% if assignments %}
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Cloud</th>
                                <th>Description</th>
                                <th>Ticket</th>
                                <th>Self-Scheduled</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for assignment in assignments %}
                            <tr>
                                <td>
                                    <a href="{{ url_for('wiki.index') }}#{{ assignment.cloud.name }}">
                                        {{ assignment.cloud.name }}
                                    </a>
                                </td>
                                <td>{{ assignment.description }}</td>
                                <td>
                                    {% if assignment.ticket %}
                                    {{ assignment.ticket }}
                                    {% endif %}
                                </td>
                                <td>
                                    {% if assignment.is_self_schedule %}
                                    <span class="badge bg-info">Yes</span>
                                    {% else %}
                                    <span class="badge bg-secondary">No</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted">You currently have no cloud assignments.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
function copyToken() {
    var input = document.getElementById('newTokenValue');
    navigator.clipboard.writeText(input.value).then(function() {
        var btn = document.getElementById('copyTokenBtn');
        btn.textContent = 'Copied!';
        setTimeout(function() { btn.textContent = 'Copy'; }, 2000);
    });
}
var cmdInput = document.getElementById('releaseCommandInput');
if (cmdInput) {
    cmdInput.addEventListener('input', function() {
        document.getElementById('cmdCharCount').textContent = this.value.length;
    });
}
</script>
{% endblock %}