{# app/templates/store/customer-detail.html #}
{% extends "store/base.html" %}
{% from 'shared/macros/headers.html' import page_header_flex %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}

{% block title %}Customer Details{% endblock %}

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

{% block content %}
<!-- Back Button -->
<div class="mb-6">
    <a :href="`/store/${storeCode}/customers`"
       class="inline-flex items-center text-sm text-gray-600 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400 mb-4">
        <span x-html="$icon('arrow-left', 'w-4 h-4 mr-1')"></span>
        Back to Customers
    </a>
</div>

{% call page_header_flex(title='Customer Details', subtitle='View customer profile and order history') %}
    <div class="flex items-center gap-2" x-show="!loading && customer">
        <span
            class="px-3 py-1 text-sm font-semibold rounded-full"
            :class="customer?.is_active
                ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100'
                : 'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100'"
            x-text="customer?.is_active ? 'Active' : 'Inactive'"
        ></span>
    </div>
{% endcall %}

{{ loading_state('Loading customer details...') }}
{{ error_state('Error loading customer') }}

<!-- Main Content -->
<div x-show="!loading && !error && customer" class="grid gap-6 lg:grid-cols-3">
    <!-- Left Column: Profile -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Profile Card -->
        <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Profile</h3>
            </div>
            <div class="p-6">
                <div class="flex items-center mb-6">
                    <div class="w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-4">
                        <span class="text-xl font-semibold text-purple-600 dark:text-purple-300" x-text="getInitials()"></span>
                    </div>
                    <div>
                        <p class="text-lg font-semibold text-gray-800 dark:text-gray-200" x-text="customerName"></p>
                        <p class="text-sm text-gray-500 dark:text-gray-400" x-text="customer?.email"></p>
                    </div>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Customer #</p>
                        <p class="text-sm font-mono font-medium text-gray-700 dark:text-gray-200" x-text="customer?.customer_number || '-'"></p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Phone</p>
                        <p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="customer?.phone || '-'"></p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Joined</p>
                        <p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="formatDate(customer?.created_at)"></p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Language</p>
                        <p class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="(customer?.preferred_language || 'Default').toUpperCase()"></p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase">Marketing</p>
                        <p class="text-sm font-medium" :class="customer?.marketing_consent ? 'text-green-600' : 'text-gray-500'" x-text="customer?.marketing_consent ? 'Opted in' : 'Opted out'"></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Orders -->
        <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Recent Orders</h3>
                <a :href="`/store/${storeCode}/orders?customer_id=${customerId}`"
                   class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
                   x-show="recentOrders.length > 0">
                    View All Orders
                    <span x-html="$icon('arrow-right', 'w-4 h-4 inline ml-1')"></span>
                </a>
            </div>
            <div class="divide-y divide-gray-200 dark:divide-gray-700">
                <template x-for="order in recentOrders" :key="order.id">
                    <a :href="`/store/${storeCode}/orders/${order.id}`" class="flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <div>
                            <p class="font-mono font-semibold text-gray-800 dark:text-gray-200" x-text="order.order_number || `#${order.id}`"></p>
                            <p class="text-sm text-gray-500 dark:text-gray-400" x-text="formatDate(order.created_at || order.order_date)"></p>
                        </div>
                        <div class="text-right">
                            <p class="font-semibold text-gray-800 dark:text-gray-200" x-text="formatPrice(order.total_amount_cents)"></p>
                            <span
                                class="text-xs px-2 py-1 font-semibold leading-tight rounded-full"
                                :class="{
                                    'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': order.status === 'delivered' || order.status === 'completed',
                                    'text-yellow-700 bg-yellow-100 dark:bg-yellow-700 dark:text-yellow-100': order.status === 'pending',
                                    'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': order.status === 'processing' || order.status === 'shipped',
                                    'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': order.status === 'cancelled',
                                    'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-100': !['delivered','completed','pending','processing','shipped','cancelled'].includes(order.status)
                                }"
                                x-text="order.status"
                            ></span>
                        </div>
                    </a>
                </template>
                <div x-show="recentOrders.length === 0" class="p-6 text-center text-gray-500 dark:text-gray-400">
                    <span x-html="$icon('shopping-bag', 'w-8 h-8 mx-auto mb-2 text-gray-300')"></span>
                    <p>No orders yet</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column: Order Stats & Actions -->
    <div class="space-y-6">
        <!-- Order Stats Cards -->
        <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Order Statistics</h3>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Total Orders</span>
                    <span class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.total_orders || 0"></span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Total Spent</span>
                    <span class="text-lg font-semibold text-purple-600 dark:text-purple-400" x-text="formatPrice(orderStats.total_spent_cents || 0)"></span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Avg Order Value</span>
                    <span class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatPrice(orderStats.total_orders ? Math.round(orderStats.total_spent_cents / orderStats.total_orders) : 0)"></span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Last Order</span>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="orderStats.last_order_date ? formatDate(orderStats.last_order_date) : 'Never'"></span>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Actions</h3>
            </div>
            <div class="p-4 space-y-2">
                <a :href="`/store/${storeCode}/orders?customer_id=${customerId}`"
                   class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-purple-600 bg-purple-100 rounded-lg hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-300 dark:hover:bg-purple-800">
                    <span x-html="$icon('shopping-bag', 'w-4 h-4 mr-2')"></span>
                    View All Orders
                </a>
                <button
                    @click="messageCustomer()"
                    class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-green-600 bg-green-100 rounded-lg hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800">
                    <span x-html="$icon('chat-bubble-left-right', 'w-4 h-4 mr-2')"></span>
                    Send Message
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    window.customerDetailData = {
        customerId: {{ customer_id }}
    };
</script>
<script defer src="{{ url_for('customers_static', path='store/js/customer-detail.js') }}"></script>
{% endblock %}