{% extends "dashboard/base.html" %}
{% from "components/forms.html" import text_input, textarea, button_primary, form_errors, success_alert %}
{% set active_page = 'settings' %}

{% block title %}Settings - CmdForge Dashboard{% endblock %}

{% block dashboard_header %}
<h1 class="text-2xl font-bold text-gray-900">Settings</h1>
<p class="mt-1 text-gray-600">Manage your profile and account settings</p>
{% endblock %}

{% block dashboard_content %}
{{ success_alert(success_message) }}
{{ form_errors(errors) }}

<!-- Profile Settings -->
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-200">
        <h2 class="text-lg font-semibold text-gray-900">Profile</h2>
        <p class="text-sm text-gray-600">This information will be displayed on your public profile.</p>
    </div>

    <form action="{{ url_for('web.dashboard_settings') }}" method="POST" class="p-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="form" value="profile">

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="display_name" class="block text-sm font-medium text-gray-700 mb-1">
                    Display name
                </label>
                <input type="text"
                       name="display_name"
                       id="display_name"
                       value="{{ user.display_name }}"
                       required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
            </div>

            <div>
                <label for="slug" class="block text-sm font-medium text-gray-700 mb-1">
                    Username
                </label>
                <div class="flex">
                    <span class="inline-flex items-center px-3 text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-lg">
                        @
                    </span>
                    <input type="text"
                           name="slug"
                           id="slug"
                           value="{{ user.slug }}"
                           disabled
                           class="flex-1 px-4 py-2 border border-gray-300 rounded-r-lg bg-gray-50 text-gray-500">
                </div>
                <p class="mt-1 text-xs text-gray-500">Username cannot be changed</p>
            </div>
        </div>

        <div class="mt-6">
            <label for="bio" class="block text-sm font-medium text-gray-700 mb-1">
                Bio
            </label>
            <textarea name="bio"
                      id="bio"
                      rows="3"
                      placeholder="Tell others a bit about yourself..."
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-y">{{ user.bio or '' }}</textarea>
            <p class="mt-1 text-xs text-gray-500">Brief description for your profile. Max 500 characters.</p>
        </div>

        <div class="mt-6">
            <label for="website" class="block text-sm font-medium text-gray-700 mb-1">
                Website
            </label>
            <input type="url"
                   name="website"
                   id="website"
                   value="{{ user.website or '' }}"
                   placeholder="https://example.com"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
        </div>

        <div class="mt-6 flex justify-end">
            <button type="submit"
                    class="px-6 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
                Save Profile
            </button>
        </div>
    </form>
</div>

<!-- Email Settings -->
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-200">
        <h2 class="text-lg font-semibold text-gray-900">Email</h2>
        <p class="text-sm text-gray-600">Your email address for account notifications.</p>
    </div>

    <div class="p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-900">{{ user.email }}</p>
                {% if user.verified %}
                <p class="text-xs text-green-600 flex items-center mt-1">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    Verified
                </p>
                {% else %}
                <p class="text-xs text-amber-600 flex items-center mt-1">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                    Not verified
                </p>
                {% endif %}
            </div>
            {% if not user.verified %}
            <button type="button"
                    onclick="resendVerification()"
                    class="text-sm text-indigo-600 hover:text-indigo-800">
                Resend verification
            </button>
            {% endif %}
        </div>
    </div>
</div>

<!-- Password Change -->
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-200">
        <h2 class="text-lg font-semibold text-gray-900">Change Password</h2>
        <p class="text-sm text-gray-600">Update your password to keep your account secure.</p>
    </div>

    <form action="{{ url_for('web.dashboard_settings') }}" method="POST" class="p-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="form" value="password">

        <div class="space-y-4 max-w-md">
            <div>
                <label for="current_password" class="block text-sm font-medium text-gray-700 mb-1">
                    Current password
                </label>
                <input type="password"
                       name="current_password"
                       id="current_password"
                       required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
            </div>

            <div>
                <label for="new_password" class="block text-sm font-medium text-gray-700 mb-1">
                    New password
                </label>
                <input type="password"
                       name="new_password"
                       id="new_password"
                       required
                       minlength="8"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                <p class="mt-1 text-xs text-gray-500">Minimum 8 characters</p>
            </div>

            <div>
                <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-1">
                    Confirm new password
                </label>
                <input type="password"
                       name="confirm_password"
                       id="confirm_password"
                       required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
            </div>
        </div>

        <div class="mt-6 flex justify-end">
            <button type="submit"
                    class="px-6 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
                Update Password
            </button>
        </div>
    </form>
</div>

<!-- Danger Zone -->
<div class="bg-white rounded-lg border border-red-200 overflow-hidden">
    <div class="px-6 py-4 border-b border-red-200 bg-red-50">
        <h2 class="text-lg font-semibold text-red-800">Danger Zone</h2>
        <p class="text-sm text-red-600">Irreversible actions that affect your account.</p>
    </div>

    <div class="p-6">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-900">Delete Account</p>
                <p class="text-sm text-gray-500">Permanently delete your account and all associated data.</p>
            </div>
            <button type="button"
                    onclick="confirmDeleteAccount()"
                    class="px-4 py-2 text-sm font-medium text-red-600 border border-red-300 rounded-md hover:bg-red-50">
                Delete Account
            </button>
        </div>
    </div>
</div>

<script>
async function resendVerification() {
    try {
        const response = await fetch('/api/v1/me/resend-verification', {method: 'POST'});
        if (response.ok) {
            alert('Verification email sent! Please check your inbox.');
        } else {
            alert('Failed to send verification email. Please try again later.');
        }
    } catch (err) {
        alert('Failed to send verification email. Please try again later.');
    }
}

function confirmDeleteAccount() {
    const confirmed = confirm(
        'Are you absolutely sure you want to delete your account?\n\n' +
        'This will permanently delete:\n' +
        '- Your profile\n' +
        '- All your published tools\n' +
        '- All your API tokens\n\n' +
        'This action cannot be undone.'
    );

    if (confirmed) {
        const doubleConfirm = prompt('Type "DELETE" to confirm account deletion:');
        if (doubleConfirm === 'DELETE') {
            deleteAccount();
        }
    }
}

async function deleteAccount() {
    try {
        const response = await fetch('/api/v1/me', {method: 'DELETE'});
        if (response.ok) {
            window.location.href = '/?deleted=1';
        } else {
            alert('Failed to delete account. Please try again or contact support.');
        }
    } catch (err) {
        alert('Failed to delete account. Please try again or contact support.');
    }
}
</script>
{% endblock %}