@extends('layouts.app')
@section('title', 'Seller Dashboard — Jumia Clone')

@section('content')
<div class="max-w-7xl mx-auto px-3 md:px-6 py-4"
     x-data="sellerDashboard()"
     x-init="init()">

    {{-- Header --}}
    <div class="flex items-center justify-between mb-5">
        <div>
            <h1 class="text-lg font-bold text-gray-900">Seller Dashboard</h1>
            <p class="text-sm text-gray-500" x-text="`Welcome back, ${$store.app.user?.first_name || 'Seller'}`"></p>
        </div>
        <a href="/seller/products/create" class="btn-primary text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Add Product
        </a>
    </div>

    {{-- Loading --}}
    <div x-show="loading" class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6 animate-pulse">
        @for($i=0;$i<4;$i++)
        <div class="skeleton h-24 rounded-xl"></div>
        @endfor
    </div>

    {{-- Stats grid --}}
    <div x-show="!loading" class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        @foreach([
            ['key' => 'total_revenue',   'label' => 'Total Revenue',   'icon' => '💰', 'format' => 'price', 'color' => 'orange'],
            ['key' => 'total_orders',    'label' => 'Total Orders',    'icon' => '📦', 'format' => 'number','color' => 'blue'],
            ['key' => 'total_products',  'label' => 'Active Products', 'icon' => '🏷️', 'format' => 'number','color' => 'purple'],
            ['key' => 'wallet_balance',  'label' => 'Wallet Balance',  'icon' => '💳', 'format' => 'price', 'color' => 'green'],
        ] as $stat)
        <div class="stat-card">
            <div class="flex items-start justify-between">
                <div>
                    <p class="stat-label">{{ $stat['label'] }}</p>
                    <p class="stat-value"
                       x-text="{{ $stat['format'] === 'price'
                           ? "price(stats?.{$stat['key']} || 0)"
                           : "(stats?.{$stat['key']} || 0).toLocaleString()" }}">
                    </p>
                </div>
                <span class="text-2xl">{{ $stat['icon'] }}</span>
            </div>
            <div x-show="stats?.changes?.{{ $stat['key'] }} !== undefined"
                 :class="(stats?.changes?.{{ $stat['key'] }} || 0) >= 0 ? 'stat-change-up' : 'stat-change-down'">
                <span x-text="(stats?.changes?.{{ $stat['key'] }} || 0) >= 0 ? '↑' : '↓'"></span>
                <span x-text="`${Math.abs(stats?.changes?.{{ $stat['key'] }} || 0)}% vs last month`"></span>
            </div>
        </div>
        @endforeach
    </div>

    {{-- Seller nav tabs --}}
    <div class="flex gap-1 mb-5 bg-white rounded-xl p-1 shadow-sm overflow-x-auto scrollbar-hide">
        @foreach([
            ['href' => '/seller/dashboard',  'label' => 'Overview',  'icon' => '📊'],
            ['href' => '/seller/products',   'label' => 'Products',  'icon' => '🏷️'],
            ['href' => '/seller/orders',     'label' => 'Orders',    'icon' => '📦'],
            ['href' => '/seller/payouts',    'label' => 'Payouts',   'icon' => '💸'],
            ['href' => '/seller/ads',        'label' => 'Ads',       'icon' => '📢'],
            ['href' => '/seller/settings',   'label' => 'Settings',  'icon' => '⚙️'],
        ] as $tab)
        <a href="{{ $tab['href'] }}"
           class="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium whitespace-nowrap transition-colors
                  {{ request()->is(ltrim($tab['href'], '/')) ? 'bg-orange-500 text-white' : 'text-gray-600 hover:bg-gray-100' }}">
            <span>{{ $tab['icon'] }}</span>
            <span>{{ $tab['label'] }}</span>
        </a>
        @endforeach
    </div>

    <div class="grid md:grid-cols-3 gap-4">

        {{-- Recent orders --}}
        <div class="md:col-span-2 card-padded">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-sm font-bold text-gray-900">Recent Orders</h2>
                <a href="/seller/orders" class="text-xs text-orange-500 hover:underline">View all</a>
            </div>

            <div x-show="loading" class="space-y-2">
                @for($i=0;$i<5;$i++)
                <div class="skeleton h-12 rounded-lg animate-pulse"></div>
                @endfor
            </div>

            <div x-show="recentOrders.length === 0 && !loading" class="text-center py-8 text-gray-400 text-sm">
                No orders yet
            </div>

            <div class="divide-y divide-gray-100">
                <template x-for="order in recentOrders" :key="order.id">
                    <div class="py-3 flex items-center justify-between gap-3">
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900" x-text="order.order_number"></p>
                            <p class="text-xs text-gray-500"
                               x-text="new Date(order.created_at).toLocaleDateString('en-NG')"></p>
                        </div>
                        <div class="text-right flex-shrink-0">
                            <p class="text-sm font-bold text-gray-900" x-text="price(order.total_amount)"></p>
                            <span class="badge text-xs"
                                  :class="{
                                      'bg-yellow-100 text-yellow-700': order.status === 0,
                                      'bg-blue-100 text-blue-700':   order.status === 1,
                                      'bg-green-100 text-green-700': order.status >= 5,
                                      'bg-red-100 text-red-600':     order.status === 7,
                                  }"
                                  x-text="['Pending','Confirmed','Processing','Shipped','Transit','Delivered','Completed','Cancelled'][order.status]">
                            </span>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        {{-- Top products + quick actions --}}
        <div class="space-y-4">
            {{-- Quick actions --}}
            <div class="card-padded">
                <h2 class="text-sm font-bold text-gray-900 mb-3">Quick Actions</h2>
                <div class="space-y-2">
                    <a href="/seller/products/create" class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-orange-50 transition-colors group">
                        <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center group-hover:bg-orange-200 transition-colors">
                            <span>➕</span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900">Add Product</p>
                            <p class="text-xs text-gray-500">List a new item</p>
                        </div>
                    </a>
                    <a href="/seller/payouts/request" class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-green-50 transition-colors group">
                        <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200 transition-colors">
                            <span>💸</span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900">Request Payout</p>
                            <p class="text-xs text-gray-500" x-text="`Balance: ${price(stats?.wallet_balance || 0)}`"></p>
                        </div>
                    </a>
                    <a href="/seller/ads/create" class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-purple-50 transition-colors group">
                        <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center group-hover:bg-purple-200 transition-colors">
                            <span>📢</span>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-900">Boost Product</p>
                            <p class="text-xs text-gray-500">Run a sponsored ad</p>
                        </div>
                    </a>
                </div>
            </div>

            {{-- Top products --}}
            <div class="card-padded">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-sm font-bold text-gray-900">Top Products</h2>
                    <a href="/seller/products" class="text-xs text-orange-500 hover:underline">Manage</a>
                </div>
                <div class="space-y-3">
                    <template x-for="product in topProducts" :key="product.id">
                        <div class="flex gap-2 items-center">
                            <div class="w-10 h-10 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                                <img :src="product.primary_image || '/images/placeholder.png'"
                                     class="w-full h-full object-cover">
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xs font-medium text-gray-900 line-clamp-1" x-text="product.name"></p>
                                <p class="text-xs text-gray-500" x-text="`${product.total_sales} sold`"></p>
                            </div>
                            <p class="text-xs font-bold text-orange-500 flex-shrink-0"
                               x-text="price(product.base_price)"></p>
                        </div>
                    </template>
                    <div x-show="topProducts.length === 0 && !loading" class="text-xs text-gray-400 text-center py-3">
                        No products yet
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection