{% extends "base.html" %}
{% block title %}My Profile — Mockup{% endblock %}

{% block content %}
<div class="container" data-testid="profile-page">

    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">My Profile</li>
        </ol>
    </nav>

    <!-- Flow guide -->
    <div class="alert alert-secondary py-2 px-3 mb-3 small d-flex align-items-center gap-2 flex-wrap">
        <i class="fas fa-map-signs"></i>
        <strong>Auth flow:</strong>
        <a href="{% url 'mockup_auth_register' %}">① Register</a> →
        <a href="{% url 'mockup_auth_login' %}?state=post-register">② Login (post-register)</a> →
        <a href="{% url 'mockup_auth_login' %}?state=unverified">③ Login (unverified)</a> →
        <a href="{% url 'mockup_auth_login' %}">④ Login (normal)</a> →
        <strong>⑤ Profile (here)</strong> →
        <a href="{% url 'mockup_profile_edit' %}">⑥ Edit Profile</a>
    </div>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0"><i class="fas fa-user-circle me-2"></i>My profile</h2>
        <span class="badge bg-warning text-dark">Mockup — FOB-PROFILE-VIEW-1</span>
    </div>

    <div class="row g-4">

        <!-- ── Account card ──────────────────────────────────────────────── -->
        <div class="col-lg-6">
            <div class="card shadow-sm h-100">
                <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                    <span><i class="fas fa-id-card me-1"></i> Account</span>
                    <a href="{% url 'mockup_profile_edit' %}"
                       class="btn btn-sm btn-outline-secondary"
                       data-testid="profile-edit-btn">
                        <i class="fas fa-pencil me-1"></i> Edit
                    </a>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-4 text-muted">First name</dt>
                        <dd class="col-sm-8">{{ first_name }}</dd>

                        <dt class="col-sm-4 text-muted">Last name</dt>
                        <dd class="col-sm-8">{{ last_name }}</dd>

                        <dt class="col-sm-4 text-muted">Email</dt>
                        <dd class="col-sm-8">
                            {{ email }}
                            {% if email_verified %}
                            <span class="badge bg-success ms-1"
                                  data-testid="email-verified-badge"
                                  data-bs-toggle="tooltip"
                                  title="This email address has been verified">
                                <i class="fas fa-circle-check me-1"></i>Verified
                            </span>
                            {% else %}
                            <span class="badge bg-warning text-dark ms-1"
                                  data-testid="email-unverified-badge"
                                  data-bs-toggle="tooltip"
                                  title="Please verify your email to create and edit playbooks">
                                <i class="fas fa-triangle-exclamation me-1"></i>Not verified
                            </span>
                            {% endif %}
                        </dd>
                        {% if not email_verified %}
                        <dt class="col-sm-4"></dt>
                        <dd class="col-sm-8 mt-1">
                            <div class="alert alert-warning py-2 px-3 mb-0 d-flex align-items-center gap-2"
                                 data-testid="email-unverified-alert">
                                <i class="fas fa-circle-info"></i>
                                <span class="small">
                                    Verify your email to create and edit playbooks.
                                </span>
                                <button type="button"
                                        class="btn btn-sm btn-warning ms-auto"
                                        id="mock-resend-btn"
                                        data-testid="resend-verification-btn">
                                    Re-send verification email
                                </button>
                            </div>
                            <div id="mock-resend-success"
                                 class="alert alert-success py-2 px-3 mt-2 mb-0 small d-none"
                                 data-testid="resend-verification-success">
                                <i class="fas fa-circle-check me-1"></i>
                                A verification email has been sent to {{ email }}.
                            </div>
                        </dd>
                        {% endif %}

                        <dt class="col-sm-4 text-muted">Username</dt>
                        <dd class="col-sm-8"><code>{{ username }}</code></dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- ── API token card ────────────────────────────────────────────── -->
        <div class="col-lg-6">
            <div class="card shadow-sm h-100">
                <div class="card-header fw-semibold">
                    <i class="fas fa-key me-1"></i> API token (MCP / REST)
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-2">
                        Use as <code>Authorization: Token …</code> in MCP config and REST clients.
                    </p>

                    <!-- Show / copy row -->
                    <div class="input-group input-group-sm mb-3">
                        <input type="password"
                               class="form-control font-monospace"
                               readonly
                               id="mock-api-token"
                               value="{{ api_token }}"
                               data-testid="profile-token-field"
                               autocomplete="off">
                        <button class="btn btn-outline-secondary" type="button"
                                id="mock-token-toggle"
                                data-testid="profile-token-toggle"
                                title="Show or hide token">Show</button>
                        <button class="btn btn-outline-primary" type="button"
                                id="mock-token-copy"
                                data-testid="profile-token-copy"
                                title="Copy token to clipboard">
                            <i class="fas fa-copy"></i> Copy
                        </button>
                    </div>

                    <!-- Regenerate form -->
                    <div class="border rounded p-3 bg-body-secondary"
                         data-testid="profile-token-regenerate-form">
                        <label for="mock-current-password" class="form-label small mb-1">
                            Regenerate token
                            <span class="text-muted">(requires current password)</span>
                        </label>
                        <div class="input-group input-group-sm">
                            <input type="password"
                                   id="mock-current-password"
                                   class="form-control"
                                   placeholder="Current password"
                                   data-testid="profile-token-regenerate-password">
                            <button type="button"
                                    class="btn btn-warning"
                                    id="mock-regen-btn"
                                    data-testid="profile-token-regenerate-submit">
                                <i class="fas fa-rotate me-1"></i> Regenerate token
                            </button>
                        </div>
                        <p class="small text-muted mt-2 mb-0">
                            Old token stops working immediately. Update all MCP / scripts / clients.
                        </p>
                    </div>

                    <!-- Success toast (hidden until regen clicked) -->
                    <div id="mock-regen-success"
                         class="alert alert-success alert-dismissible mt-3 d-none"
                         role="alert">
                        <i class="fas fa-check-circle me-1"></i>
                        Your API token was regenerated. Update MCP, scripts, and any clients that use the old token.
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                    <div id="mock-regen-error"
                         class="alert alert-danger alert-dismissible mt-3 d-none"
                         role="alert">
                        <i class="fas fa-times-circle me-1"></i>
                        Incorrect password. Your API token was not changed.
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── My PIPs ───────────────────────────────────────────────────── -->
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span class="fw-semibold"><i class="fas fa-lightbulb me-1"></i> My PIPs</span>
                    <a href="{% url 'mockup_pip_list' %}" class="btn btn-sm btn-outline-primary">
                        All PIPs
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0"
                               data-testid="profile-pips-table">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-3">Title</th>
                                    <th>Playbook</th>
                                    <th>Status</th>
                                    <th class="pe-3"></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for pip in pips %}
                                <tr>
                                    <td class="ps-3">{{ pip.title }}</td>
                                    <td>{{ pip.playbook_name }}</td>
                                    <td>
                                        <span class="badge {{ pip.status_css }}">
                                            {{ pip.status_display }}
                                        </span>
                                    </td>
                                    <td class="text-end pe-3">
                                        <a href="{% url 'mockup_pip_detail' pip.pk %}"
                                           class="btn btn-sm btn-outline-secondary">View</a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- ── My Teams ─────────────────────────────────────────────────── -->
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span class="fw-semibold">
                        <i class="fas fa-users-rectangle me-1"></i> My Teams
                    </span>
                    <a href="{% url 'mockup_teams_browse' %}" class="btn btn-sm btn-outline-primary">
                        Browse Teams
                    </a>
                </div>
                {% if teams %}
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0"
                               data-testid="profile-teams-table">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-3">Team</th>
                                    <th style="width:10%">Role</th>
                                    <th style="width:10%">Visibility</th>
                                    <th style="width:8%" class="text-center">Members</th>
                                    <th style="width:8%" class="text-center">Playbooks</th>
                                    <th style="width:8%" class="pe-3"></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for t in teams %}
                                <tr data-testid="profile-team-row-{{ t.id }}">
                                    <td class="ps-3">
                                        <i class="fas fa-users-rectangle text-primary me-1"></i>
                                        <strong>{{ t.name }}</strong>
                                        <span class="text-muted small ms-1">{{ t.category }}</span>
                                    </td>
                                    <td>
                                        {% if t.maria_role == "admin" %}
                                        <span class="badge bg-warning text-dark"
                                              data-bs-toggle="tooltip" title="You are the team admin">
                                            <i class="fas fa-crown me-1"></i>Admin
                                        </span>
                                        {% else %}
                                        <span class="badge bg-light text-dark border">Member</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge {{ t.visibility_css }}">{{ t.visibility }}</span>
                                    </td>
                                    <td class="text-center text-muted small">{{ t.member_count }}</td>
                                    <td class="text-center text-muted small">{{ t.playbook_count }}</td>
                                    <td class="text-end pe-3">
                                        <a href="{% url 'mockup_teams_detail' team_id=t.id %}"
                                           class="btn btn-sm btn-outline-secondary"
                                           data-testid="profile-view-team-{{ t.id }}"
                                           data-bs-toggle="tooltip" title="View team">
                                            View
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% else %}
                <div class="card-body text-center py-4" data-testid="profile-teams-empty">
                    <i class="fas fa-users-slash fa-2x text-muted mb-2"></i>
                    <p class="text-muted mb-2">You haven't joined any teams yet.</p>
                    <a href="{% url 'mockup_teams_browse' %}" class="btn btn-sm btn-outline-primary">
                        Browse Teams
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- ── My Playbooks ──────────────────────────────────────────────── -->
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span class="fw-semibold">
                        <i class="fas fa-book-sparkles me-1"></i> My playbooks
                    </span>
                    <a href="{% url 'playbook_list' %}" class="btn btn-sm btn-outline-primary">
                        All playbooks
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0"
                               data-testid="profile-playbooks-table">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-3">Name</th>
                                    <th>Version</th>
                                    <th>Status</th>
                                    <th class="pe-3"></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for pb in playbooks %}
                                <tr>
                                    <td class="ps-3">{{ pb.name }}</td>
                                    <td>v{{ pb.version }}</td>
                                    <td>
                                        <span class="badge {{ pb.status_css }}">
                                            {{ pb.status_display }}
                                        </span>
                                    </td>
                                    <td class="text-end pe-3">
                                        <a href="{% url 'playbook_detail' pb.pk %}"
                                           class="btn btn-sm btn-outline-secondary">View</a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div><!-- /row -->
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    /* ── token show/hide ── */
    var input  = document.getElementById('mock-api-token');
    var toggle = document.getElementById('mock-token-toggle');
    var copy   = document.getElementById('mock-token-copy');

    toggle.addEventListener('click', function () {
        var revealing = input.type === 'password';
        input.type = revealing ? 'text' : 'password';
        toggle.textContent = revealing ? 'Hide' : 'Show';
        console.log('[mockup:profile] token visibility toggled, revealed=' + revealing);
    });

    copy.addEventListener('click', function () {
        navigator.clipboard && navigator.clipboard.writeText(input.value).then(function () {
            console.log('[mockup:profile] token copied, length=' + input.value.length);
        });
    });

    /* ── regenerate demo (no real POST in mockup) ── */
    var regenBtn     = document.getElementById('mock-regen-btn');
    var pwField      = document.getElementById('mock-current-password');
    var successAlert = document.getElementById('mock-regen-success');
    var errorAlert   = document.getElementById('mock-regen-error');

    regenBtn.addEventListener('click', function () {
        successAlert.classList.add('d-none');
        errorAlert.classList.add('d-none');
        var pw = pwField.value.trim();
        console.log('[mockup:profile] regenerate clicked, password_provided=' + Boolean(pw));
        if (pw === 'demo') {
            /* simulate success */
            input.value = 'mimir_NEW_' + Math.random().toString(36).slice(2, 18);
            successAlert.classList.remove('d-none');
            pwField.value = '';
        } else {
            errorAlert.classList.remove('d-none');
        }
    });

    /* ── re-send verification email ── */
    var resendBtn = document.getElementById('mock-resend-btn');
    if (resendBtn) {
        resendBtn.addEventListener('click', function () {
            console.log('[mockup] re-send verification email clicked');
            resendBtn.disabled = true;
            resendBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Sending…';
            setTimeout(function () {
                resendBtn.textContent = 'Email sent';
                resendBtn.classList.replace('btn-warning', 'btn-success');
                var successDiv = document.getElementById('mock-resend-success');
                if (successDiv) { successDiv.classList.remove('d-none'); }
                console.log('[mockup] verification email "sent" (simulated)');
            }, 1200);
        });
    }

    /* ── tooltip init ── */
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
        new bootstrap.Tooltip(el);
    });
})();
</script>
{% endblock %}