{% extends 'layout.twig' %}

{% block header %}
    <div class="action-links">
        <a href="/" aria-label="Return to home">Home</a>
        <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode">
            <svg class="theme-icon theme-icon-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
            <svg class="theme-icon theme-icon-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
        </button>
    </div>
{% endblock %}

{% block body %}
<div id="account" class="account-container">
    <h1 class="page-title">Account Dashboard</h1>
    <p class="account-subtitle">Welcome back, <strong>{{ username }}</strong></p>

    {% if successMessage %}
        <div class="alert alert-success">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline;vertical-align:middle;margin-right:0.5rem">
                <path d="M20 6L9 17l-5-5"></path>
            </svg>
            <p>{{ successMessage }}</p>
        </div>
    {% endif %}

    {% if errorMessage %}
        <div class="alert alert-error">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline;vertical-align:middle;margin-right:0.5rem">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="15" y1="9" x2="9" y2="15"></line>
                <line x1="9" y1="9" x2="15" y2="15"></line>
            </svg>
            <p>{{ errorMessage }}</p>
        </div>
    {% endif %}

    <div class="account-grid">
        <!-- Account Stats -->
        <div class="account-card frosted-glass">
            <h2>Account Overview</h2>
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-value">{{ stats.forwardEmailsCount }}/{{ stats.maxForwardEmails }}</div>
                    <div class="stat-label">Forward Emails</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ stats.lockedInboxesCount }}/{{ stats.maxLockedInboxes }}</div>
                    <div class="stat-label">Locked Inboxes</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ stats.accountAge }}</div>
                    <div class="stat-label">Account Age</div>
                </div>
            </div>
        </div>

        <!-- Forwarding Emails Section -->
        <div class="account-card frosted-glass">
            <h2>Forwarding Emails</h2>
            <p class="card-description">Add verified emails to forward messages to. Each email must be verified before use.</p>
            
            {% if forwardEmails|length > 0 %}
                <ul class="email-list">
                    {% for email in forwardEmails %}
                        <li class="email-item">
                            <div class="email-info">
                                <span class="email-address">{{ email.email }}</span>
                                <span class="email-meta">Verified {{ email.verifiedAgo }}</span>
                            </div>
                            <form method="POST" action="/account/forward-email/remove" class="inline-form">
                                <input type="hidden" name="email" value="{{ email.email }}">
                                <button type="submit" class="button button-small button-danger" onclick="return confirm('Remove {{ email.email }}?')">
                                    Remove
                                </button>
                            </form>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="empty-state">No verified forwarding emails yet.</p>
            {% endif %}
            
            {% if stats.forwardEmailsCount < stats.maxForwardEmails %}
                <button class="button button-primary" id="addEmailBtn">Add Email</button>
            {% else %}
                <p class="limit-reached">Maximum {{ stats.maxForwardEmails }} emails reached</p>
            {% endif %}
        </div>

        <!-- Locked Inboxes Section -->
        <div class="account-card frosted-glass">
            <h2>Locked Inboxes</h2>
            <p class="card-description">Manage your locked inboxes. These are protected by your account and only accessible when logged in. Locks auto-release after 7 days without login.</p>
            
            {% if lockedInboxes|length > 0 %}
                <ul class="inbox-list">
                    {% for inbox in lockedInboxes %}
                        <li class="inbox-item">
                            <div class="inbox-info">
                                <a href="/inbox/{{ inbox.address }}" class="inbox-address">{{ inbox.address }}</a>
                                <span class="inbox-meta">Last accessed {{ inbox.lastAccessedAgo }}</span>
                            </div>
                            <form method="POST" action="/account/locked-inbox/release" class="inline-form">
                                <input type="hidden" name="address" value="{{ inbox.address }}">
                                <button type="submit" class="button button-small button-danger" onclick="return confirm('Release lock on {{ inbox.address }}?')">
                                    Release
                                </button>
                            </form>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="empty-state">No locked inboxes yet. Lock an inbox to protect it with your account.</p>
            {% endif %}
            
            {% if stats.lockedInboxesCount < stats.maxLockedInboxes %}
                <p class="hint">You can lock up to {{ stats.maxLockedInboxes }} inboxes total.</p>
            {% else %}
                <p class="limit-reached">Maximum {{ stats.maxLockedInboxes }} inboxes locked</p>
            {% endif %}
        </div>

        <!-- Change Password Section -->
        <div class="account-card frosted-glass">
            <h2>Change Password</h2>
            <p class="card-description">Update your account password. You'll need to enter your current password to confirm.</p>
            
            <form method="POST" action="/account/change-password" class="password-form">
                <fieldset>
                    <label for="currentPassword">Current Password</label>
                    <input 
                        type="password" 
                        id="currentPassword" 
                        name="currentPassword" 
                        placeholder="Enter current password"
                        required
                        autocomplete="current-password"
                    >

                    <label for="newPassword">New Password</label>
                    <input 
                        type="password" 
                        id="newPassword" 
                        name="newPassword" 
                        placeholder="Min 8 characters"
                        required
                        minlength="8"
                        autocomplete="new-password"
                    >
                    <small>Must include uppercase, lowercase, and number</small>

                    <label for="confirmNewPassword">Confirm New Password</label>
                    <input 
                        type="password" 
                        id="confirmNewPassword" 
                        name="confirmNewPassword" 
                        placeholder="Re-enter new password"
                        required
                        minlength="8"
                        autocomplete="new-password"
                    >

                    <button type="submit" class="button button-primary">Update Password</button>
                </fieldset>
            </form>
        </div>

        <!-- Delete Account Section -->
        <div class="account-card frosted-glass danger-zone">
            <h2>Danger Zone</h2>
            <p class="card-description">Permanently delete your account and all associated data. This action cannot be undone.</p>
            
            <div class="danger-content">
                <p><strong>Warning:</strong> Deleting your account will:</p>
                <ul class="danger-list">
                    <li>Remove all forwarding email addresses</li>
                    <li>Release all locked inboxes</li>
                    <li>Permanently delete your account data</li>
                </ul>
                
                <button class="button button-danger button-full-width" id="deleteAccountBtn">Delete Account</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Account Modal -->
<div id="deleteAccountModal" class="modal">
    <div class="modal-content">
        <span class="close" id="closeDeleteAccount">&times;</span>
        <h3>Delete Account</h3>
        <p class="modal-description" style="color: var(--color-danger);">This action is permanent and cannot be undone!</p>
        
        <form method="POST" action="/account/delete">
            <fieldset>
                <label for="confirmPassword">Enter your password to confirm</label>
                <input 
                    type="password" 
                    id="confirmPassword" 
                    name="password" 
                    placeholder="Your password"
                    required
                    class="modal-input"
                    autocomplete="current-password"
                >
                
                <label for="confirmText">Type "DELETE" to confirm</label>
                <input 
                    type="text" 
                    id="confirmText" 
                    name="confirmText" 
                    placeholder="Type DELETE"
                    required
                    class="modal-input"
                >
                
                <button type="submit" class="button button-danger modal-button">Permanently Delete Account</button>
                <button type="button" class="button button-secondary modal-button" id="cancelDelete">Cancel</button>
            </fieldset>
        </form>
    </div>
</div>

<!-- Add Email Modal -->
<div id="addEmailModal" class="modal">
    <div class="modal-content">
        <span class="close" id="closeAddEmail">&times;</span>
        <h3>Add Forwarding Email</h3>
        <p class="modal-description">Enter an email address to verify. We'll send you a verification link.</p>
        
        <form method="POST" action="/account/forward-email/add">
            <fieldset>
                <label for="forwardEmail">Email Address</label>
                <input 
                    type="email" 
                    id="forwardEmail" 
                    name="email" 
                    placeholder="your-email@example.com"
                    required
                    class="modal-input"
                >
                <button type="submit" class="button-primary modal-button">Send Verification</button>
            </fieldset>
        </form>
    </div>
</div>

<script>
// Add Email Modal
const addEmailBtn = document.getElementById('addEmailBtn');
const addEmailModal = document.getElementById('addEmailModal');
const closeAddEmail = document.getElementById('closeAddEmail');

if (addEmailBtn) {
    addEmailBtn.onclick = function() {
        addEmailModal.style.display = 'block';
    }
}

if (closeAddEmail) {
    closeAddEmail.onclick = function() {
        addEmailModal.style.display = 'none';
    }
}

// Delete Account Modal
const deleteAccountBtn = document.getElementById('deleteAccountBtn');
const deleteAccountModal = document.getElementById('deleteAccountModal');
const closeDeleteAccount = document.getElementById('closeDeleteAccount');
const cancelDelete = document.getElementById('cancelDelete');

if (deleteAccountBtn) {
    deleteAccountBtn.onclick = function() {
        deleteAccountModal.style.display = 'block';
    }
}

if (closeDeleteAccount) {
    closeDeleteAccount.onclick = function() {
        deleteAccountModal.style.display = 'none';
    }
}

if (cancelDelete) {
    cancelDelete.onclick = function() {
        deleteAccountModal.style.display = 'none';
    }
}

window.onclick = function(event) {
    if (event.target == addEmailModal) {
        addEmailModal.style.display = 'none';
    }
    if (event.target == deleteAccountModal) {
        deleteAccountModal.style.display = 'none';
    }
}
</script>
{% endblock %}