{# app/templates/storefront/account/dashboard.html #}
{% extends "storefront/base.html" %}
{% from 'shared/macros/modals.html' import confirm_modal %}

{% block title %}My Account - {{ store.name }}{% endblock %}

{% block alpine_data %}accountDashboard(){% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">My Account</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Welcome back, {{ user.first_name }}!</p>
    </div>

    <!-- Dashboard Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">

        {# Module-contributed cards (orders, loyalty, etc.) — rendered via widget protocol #}
        {% for card in dashboard_cards|default([]) %}
        <a href="{{ base_url }}{{ card.route }}"
           class="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200 dark:border-gray-700">
            <div class="flex items-center mb-4">
                <div class="flex-shrink-0">
                    <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('{{ card.icon }}', 'h-8 w-8')"></span>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ card.title }}</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ card.subtitle }}</p>
                </div>
            </div>
            {% if card.value is not none %}
            <div>
                <p class="text-2xl font-bold text-primary" style="color: var(--color-primary)">{{ card.value }}</p>
                {% if card.value_label %}
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ card.value_label }}</p>
                {% endif %}
            </div>
            {% endif %}
        </a>
        {% endfor %}

        <!-- Profile Card (always shown — core) -->
        <a href="{{ base_url }}account/profile"
           class="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200 dark:border-gray-700">
            <div class="flex items-center mb-4">
                <div class="flex-shrink-0">
                    <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('user', 'h-8 w-8')"></span>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Profile</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Edit your information</p>
                </div>
            </div>
            <div>
                <p class="text-sm text-gray-700 dark:text-gray-300 truncate">{{ user.email }}</p>
            </div>
        </a>

        <!-- Addresses Card (always shown — core) -->
        <a href="{{ base_url }}account/addresses"
           class="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200 dark:border-gray-700">
            <div class="flex items-center mb-4">
                <div class="flex-shrink-0">
                    <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('map-pin', 'h-8 w-8')"></span>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Addresses</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Manage addresses</p>
                </div>
            </div>
        </a>

        <!-- Messages Card (always shown — messaging is core) -->
        <a href="{{ base_url }}account/messages"
           class="block bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow p-6 border border-gray-200 dark:border-gray-700"
           x-data="{ unreadCount: 0 }"
           x-init="fetch('/api/v1/storefront/messages/unread-count').then(r => r.json()).then(d => unreadCount = d.unread_count).catch(() => {})">
            <div class="flex items-center mb-4">
                <div class="flex-shrink-0 relative">
                    <span class="h-8 w-8 text-primary" style="color: var(--color-primary)" x-html="$icon('chat-bubble-left', 'h-8 w-8')"></span>
                    <span x-show="unreadCount > 0"
                          class="absolute -top-1 -right-1 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white bg-red-600 rounded-full"
                          x-text="unreadCount > 9 ? '9+' : unreadCount"></span>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Messages</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Contact support</p>
                </div>
            </div>
            <div x-show="unreadCount > 0">
                <p class="text-sm text-primary font-medium" style="color: var(--color-primary)" x-text="unreadCount + ' unread message' + (unreadCount > 1 ? 's' : '')"></p>
            </div>
        </a>
    </div>

    <!-- Account Summary -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Account Summary</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Customer Since</p>
                <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ user.created_at.strftime('%B %Y') }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">Customer Number</p>
                <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ user.customer_number }}</p>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mt-8 flex justify-end">
        <button @click="showLogoutModal = true"
                class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors">
            Logout
        </button>
    </div>
</div>

<!-- Logout Confirmation Modal -->
{{ confirm_modal(
    id='logoutModal',
    title='Logout Confirmation',
    message="Are you sure you want to logout? You'll need to sign in again to access your account.",
    confirm_action='confirmLogout()',
    show_var='showLogoutModal',
    confirm_text='Logout',
    cancel_text='Cancel',
    variant='danger'
) }}
{% endblock %}

{% block extra_scripts %}
<script>
function accountDashboard() {
    return {
        ...storefrontLayoutData(),
        showLogoutModal: false,

        confirmLogout() {
            // Close modal
            this.showLogoutModal = false;

            fetch('/api/v1/storefront/auth/logout', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => {
                if (response.ok) {
                    // Clear localStorage token if any
                    localStorage.removeItem('customer_token');

                    // Show success message
                    this.showToast('Logged out successfully', 'success');

                    // Redirect to login page
                    setTimeout(() => {
                        window.location.href = '{{ base_url }}account/login';
                    }, 500);
                } else {
                    console.error('Logout failed with status:', response.status);
                    this.showToast('Logout failed', 'error');
                    // Still redirect on failure (cookie might be deleted)
                    setTimeout(() => {
                        window.location.href = '{{ base_url }}account/login';
                    }, 1000);
                }
            })
            .catch(error => {
                console.error('Logout error:', error);
                this.showToast('Logout failed', 'error');
                // Redirect anyway
                setTimeout(() => {
                    window.location.href = '{{ base_url }}account/login';
                }, 1000);
            });
        }
    }
}
</script>
{% endblock %}