{% extends "base/skeleton.html.jinja" %}

{% block title %}
    {{ _("User Profile") }}
{% endblock title %}
{% block body %}
    <div class="min-h-screen bg-base-200">
        <div class="container mx-auto px-4 py-8">
            <div class="max-w-4xl mx-auto">
                <!-- Page Header -->
                <div class="mb-8">
                    <h1 class="text-3xl font-bold text-base-content">{{ _("User Profile") }}</h1>
                    <p class="text-base-content/70 mt-2">{{ _("Manage your account information and settings") }}</p>
                </div>
                <!-- Profile Card -->
                <div class="bg-base-100 shadow-lg rounded-lg overflow-hidden">
                    <!-- Profile Header -->
                    <div class="bg-linear-to-r from-primary to-secondary px-6 py-8">
                        <div class="flex items-center space-x-4">
                            <!-- Avatar -->
                            {% if user.picture or (user.oauth_accounts and user.oauth_accounts[0].picture) %}
                                <img src="{{ user.picture or user.oauth_accounts[0].picture }}"
                                     alt="{{ user.email }}"
                                     width="80"
                                     height="80"
                                     class="w-20 h-20 rounded-full object-cover border-4 border-base-100 shadow-lg" />
                            {% else %}
                                <div class="w-20 h-20 bg-base-100 rounded-full flex items-center justify-center text-3xl font-bold text-base-content shadow-lg">
                                    {{ user.email[0].upper() if user.email }}
                                </div>
                            {% endif %}
                            <!-- User Info -->
                            <div class="text-primary-content">
                                <h2 class="text-2xl font-semibold">{{ user.email }}</h2>
                                <p class="text-primary-content/70">{{ _("Member since") }} {{ user.db_insert_dt | timeago }}</p>
                            </div>
                        </div>
                    </div>
                    <!-- Profile Content -->
                    <div class="p-6">
                        <!-- Account Information Section -->
                        <div class="mb-8">
                            <h3 class="text-xl font-semibold text-base-content mb-4">{{ _("Account Information") }}</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Email -->
                                <div>
                                    <label class="block text-sm font-medium text-base-content mb-1">{{ _("Email Address") }}</label>
                                    <div class="bg-base-200 px-4 py-3 rounded-md">
                                        <p class="text-base-content">{{ user.email }}</p>
                                    </div>
                                </div>
                                <!-- User ID -->
                                <div>
                                    <label class="block text-sm font-medium text-base-content mb-1">{{ _("User ID") }}</label>
                                    <div class="bg-base-200 px-4 py-3 rounded-md">
                                        <p class="text-base-content font-mono text-sm">{{ user.id }}</p>
                                    </div>
                                </div>
                                <!-- Created Date -->
                                <div>
                                    <label class="block text-sm font-medium text-base-content mb-1">{{ _("Account Created") }}</label>
                                    <div class="bg-base-200 px-4 py-3 rounded-md">
                                        <p class="text-base-content">{{ user.db_insert_dt | format_datetime }}</p>
                                    </div>
                                </div>
                                <!-- Last Updated -->
                                <div>
                                    <label class="block text-sm font-medium text-base-content mb-1">{{ _("Last Updated") }}</label>
                                    <div class="bg-base-200 px-4 py-3 rounded-md">
                                        <p class="text-base-content">{{ user.db_update_dt | format_datetime }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- OAuth Accounts Section -->
                        {% if user.oauth_accounts %}
                            <div class="mb-8">
                                <h3 class="text-xl font-semibold text-base-content mb-4">{{ _("Connected Accounts") }}</h3>
                                <div class="space-y-3">
                                    {% for account in user.oauth_accounts %}
                                        <div class="flex items-center justify-between bg-base-200 px-4 py-3 rounded-md">
                                            <div class="flex items-center space-x-3">
                                                {% if account.picture %}
                                                    <img src="{{ account.picture }}"
                                                         alt="{{ account.provider }}"
                                                         width="40"
                                                         height="40"
                                                         class="w-10 h-10 rounded-full object-cover" />
                                                {% else %}
                                                    <div class="w-10 h-10 bg-base-300 rounded-full flex items-center justify-center">
                                                        <span class="text-base-content/70 font-medium">{{ account.provider[0].upper() }}</span>
                                                    </div>
                                                {% endif %}
                                                <div>
                                                    <p class="font-medium text-base-content">{{ account.provider|title }}</p>
                                                    <p class="text-sm text-base-content/70">{{ account.email or _("No email") }}</p>
                                                </div>
                                            </div>
                                            <span class="text-sm text-success font-medium">{{ _("Connected") }}</span>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                        <!-- Actions -->
                        <div class="border-t border-base-300 pt-6">
                            <div class="flex flex-col sm:flex-row gap-4">
                                <button class="btn btn-primary"
                                        hx-get="/user/edit"
                                        hx-target="#main-content"
                                        hx-swap="innerHTML">{{ _("Edit Profile") }}</button>
                                <form method="post" action="{{ url_for('auth_logout') }}">
                                    <button type="submit" class="btn btn-outline btn-error">{{ _("Sign Out") }}</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Additional Settings Card -->
                <div class="mt-6 bg-base-100 shadow-lg rounded-lg p-6">
                    <h3 class="text-xl font-semibold text-base-content mb-4">{{ _("Account Settings") }}</h3>
                    <div class="space-y-4">
                        <!-- Language Setting -->
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="font-medium text-base-content">{{ _("Preferred Language") }}</p>
                                <p class="text-sm text-base-content/70">{{ _("Your preferred language for the interface") }}</p>
                            </div>
                            <div class="text-base-content">
                                {% if user.user_settings.language %}
                                    <span class="badge badge-primary">{{ user.user_settings.language|upper }}</span>
                                {% else %}
                                    <span class="text-base-content/50">{{ _("Not set") }}</span>
                                {% endif %}
                            </div>
                        </div>
                        <!-- Additional settings can be added here as the UserSettings model is extended -->
                        <!-- Email Notifications -->
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="font-medium text-base-content">{{ _("Email Notifications") }}</p>
                                <p class="text-sm text-base-content/70">{{ _("Receive updates about your account") }}</p>
                            </div>
                            <input type="checkbox" class="toggle toggle-primary" checked />
                        </div>
                        <!-- Privacy Settings -->
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="font-medium text-base-content">{{ _("Profile Visibility") }}</p>
                                <p class="text-sm text-base-content/70">{{ _("Make your profile visible to others") }}</p>
                            </div>
                            <input type="checkbox" class="toggle toggle-primary" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock body %}