{{define "content"}}
<div class="page-header">
    <h1>My Account</h1>
</div>

<section class="account-section">
    <h2>Profile</h2>
    <div class="profile-info">
        {{if .AvatarURL}}
        <img src="{{.AvatarURL}}" alt="Avatar" class="avatar">
        {{end}}
        <dl class="account-details">
            <dt>Display Name</dt>
            <dd>{{if .DisplayName}}{{.DisplayName}}{{else}}<em class="no-value">(not set)</em>{{end}}</dd>

            <dt>User ID</dt>
            <dd><code class="user-id">{{.UserID}}</code></dd>

            {{if .CreatedAt}}
            <dt>Account Created</dt>
            <dd>{{.CreatedAt}}</dd>
            {{end}}

            {{if .LastLoginAt}}
            <dt>Last Login</dt>
            <dd>{{.LastLoginAt}}</dd>
            {{end}}
        </dl>
    </div>
</section>

{{if .OAuthIdentities}}
<section class="account-section">
    <h2>Linked Accounts</h2>
    <div class="oauth-identities-list">
        {{range .OAuthIdentities}}
        <div class="oauth-identity-card">
            <span class="provider-badge {{.Provider}}">{{.Provider}}</span>
            <span class="email">{{.Email}}</span>
        </div>
        {{end}}
    </div>
</section>
{{end}}

<section class="account-section danger-zone">
    <h2>Danger Zone</h2>
    <div class="danger-content">
        <div class="danger-description">
            <h3>Delete Account</h3>
            <p>Permanently delete your account and all associated data. This action cannot be undone.</p>
        </div>
        <button class="btn-danger" onclick="confirmDelete()">Delete My Account</button>
    </div>
</section>

<dialog id="delete-confirm-dialog">
    <article style="max-width: 450px;">
        <header>
            <h3>Delete Account?</h3>
        </header>
        <p>Are you sure you want to permanently delete your account? This will:</p>
        <ul>
            <li>Remove all your account data</li>
            <li>Unlink all OAuth providers</li>
            <li>This action <strong>cannot be undone</strong></li>
        </ul>
        <div id="delete-feedback"></div>
        <footer style="display: flex; gap: 0.5rem; justify-content: flex-end;">
            <button class="secondary outline" onclick="cancelDelete()">Cancel</button>
            <button class="btn-danger" onclick="executeDelete()" id="confirm-delete-btn">Yes, Delete My Account</button>
        </footer>
    </article>
</dialog>

<script>
function confirmDelete() {
    document.getElementById('delete-feedback').innerHTML = '';
    document.getElementById('delete-confirm-dialog').showModal();
}

function cancelDelete() {
    document.getElementById('delete-confirm-dialog').close();
}

function executeDelete() {
    const btn = document.getElementById('confirm-delete-btn');
    btn.disabled = true;
    btn.textContent = 'Deleting...';

    fetch('/my-account/delete', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    })
    .then(response => {
        if (response.redirected) {
            window.location.href = response.url;
            return;
        }
        // Check for HX-Redirect header
        const redirect = response.headers.get('HX-Redirect');
        if (redirect) {
            window.location.href = redirect;
            return;
        }
        return response.text();
    })
    .then(html => {
        if (html) {
            if (html.includes('alert-success')) {
                window.location.href = '/goodbye';
            } else {
                document.getElementById('delete-feedback').innerHTML = html;
                btn.disabled = false;
                btn.textContent = 'Yes, Delete My Account';
            }
        }
    })
    .catch(err => {
        document.getElementById('delete-feedback').innerHTML =
            '<div class="alert alert-error">An error occurred: ' + err.message + '</div>';
        btn.disabled = false;
        btn.textContent = 'Yes, Delete My Account';
    });
}
</script>

<style>
.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    margin: 0;
}

.account-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--pico-card-background-color);
    border-radius: 8px;
    border: 1px solid var(--pico-muted-border-color);
}

.account-section h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-bottom: 0.5rem;
}

.profile-info {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.account-details {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
}

.account-details dt {
    font-weight: 600;
    color: var(--pico-muted-color);
}

.account-details dd {
    margin: 0;
}

.user-id {
    font-size: 0.85rem;
    word-break: break-all;
}

.no-value {
    color: var(--pico-muted-color);
}

.oauth-identities-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.oauth-identity-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--pico-background-color);
    border-radius: 6px;
    border: 1px solid var(--pico-muted-border-color);
}

.provider-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
}

.provider-badge.discord { background-color: #5865F2; }
.provider-badge.google { background-color: #4285F4; }
.provider-badge.github { background-color: #333; }
.provider-badge.apple { background-color: #000; }
.provider-badge.steam { background-color: #1b2838; }
.provider-badge.twitch { background-color: #9146FF; }

.email {
    font-size: 0.95rem;
}

.danger-zone {
    border-color: #dc3545;
}

.danger-zone h2 {
    color: #dc3545;
    border-color: #dc3545;
}

.danger-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.danger-description h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.danger-description p {
    margin: 0;
    color: var(--pico-muted-color);
    font-size: 0.9rem;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    white-space: nowrap;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@media (max-width: 600px) {
    .profile-info {
        flex-direction: column;
    }

    .danger-content {
        flex-direction: column;
        align-items: stretch;
    }
}
</style>
{{end}}