@extends('layouts.app')

@section('title', $roleDashboard['title'])

@section('content')
<div class="space-y-6">
    {{-- Page Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ $roleDashboard['title'] }}</h1>
            <p class="text-sm text-gray-500 mt-1">Welcome back, {{ $user->name }} | {{ now()->format('l, F j, Y') }}</p>
        </div>
        <div class="flex items-center space-x-3">
            <span class="px-3 py-1.5 bg-primary-50 text-primary-700 rounded-lg text-sm font-medium">
                <i class="fas fa-user-tag mr-2"></i>{{ $user->getRoleNames()->first() }}
            </span>
        </div>
    </div>

    {{-- Stat Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        @foreach($roleDashboard['cards'] as $card)
        <div class="bg-white rounded-xl p-5 card-hover border border-gray-100">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 rounded-lg bg-{{ $card['color'] }}-50 flex items-center justify-center">
                    <i class="fas fa-{{ $card['icon'] }} text-{{ $card['color'] }}-600 text-lg"></i>
                </div>
                @if(isset($card['trend']))
                    <span class="text-xs font-medium text-gray-500">{{ $card['trend'] }}</span>
                @endif
            </div>
            <h3 class="text-2xl font-bold text-gray-900">{{ $card['value'] }}</h3>
            <p class="text-sm text-gray-500 mt-0.5">{{ $card['label'] }}</p>
        </div>
        @endforeach
    </div>

    @if($user->isSuperAdmin())
    {{-- Admin Dashboard Content --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Revenue Chart --}}
        <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 p-6">
            <div class="flex items-center justify-between mb-5">
                <h3 class="font-semibold text-gray-900">Revenue Trend (Last 7 Days)</h3>
                <a href="{{ route('reports.sales') }}" class="text-sm text-primary-600 hover:text-primary-700 font-medium">
                    View Report <i class="fas fa-arrow-right ml-1 text-xs"></i>
                </a>
            </div>
            <canvas id="revenueChart" height="80"></canvas>
        </div>

        {{-- Order Status Distribution --}}
        <div class="bg-white rounded-xl border border-gray-100 p-6">
            <h3 class="font-semibold text-gray-900 mb-5">Order Status Distribution</h3>
            <canvas id="statusChart" height="120"></canvas>
        </div>
    </div>

    {{-- Pending Tasks & Alerts --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Pending Tasks --}}
        <div class="bg-white rounded-xl border border-gray-100">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">Pending Tasks</h3>
                <span class="text-xs text-gray-500">Real-time</span>
            </div>
            <div class="p-4 space-y-3">
                @foreach($roleDashboard['pending_tasks'] as $task => $count)
                @php
                    $taskConfig = [
                        'confirmations' => ['label' => 'Customer Confirmations', 'icon' => 'phone', 'color' => 'yellow', 'route' => route('orders.index', ['order_status' => 'order_received'])],
                        'preparations' => ['label' => 'Warehouse Preparations', 'icon' => 'box', 'color' => 'blue', 'route' => route('warehouse.pending-orders')],
                        'shipping_approvals' => ['label' => 'Shipping Approvals', 'icon' => 'shipping-fast', 'color' => 'green', 'route' => route('operations.pending-shipping')],
                        'low_stock_alerts' => ['label' => 'Low Stock Alerts', 'icon' => 'exclamation-triangle', 'color' => 'red', 'route' => route('warehouse.low-stock')],
                    ][$task] ?? ['label' => $task, 'icon' => 'circle', 'color' => 'gray', 'route' => '#'];
                @endphp
                <a href="{{ $taskConfig['route'] }}" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition group">
                    <div class="flex items-center">
                        <div class="w-9 h-9 rounded-lg bg-{{ $taskConfig['color'] }}-50 flex items-center justify-center mr-3">
                            <i class="fas fa-{{ $taskConfig['icon'] }} text-{{ $taskConfig['color'] }}-500 text-sm"></i>
                        </div>
                        <span class="text-sm font-medium text-gray-700">{{ $taskConfig['label'] }}</span>
                    </div>
                    <span class="px-2.5 py-1 bg-{{ $taskConfig['color'] }}-50 text-{{ $taskConfig['color'] }}-700 text-sm font-semibold rounded-lg">{{ $count }}</span>
                </a>
                @endforeach
            </div>
        </div>

        {{-- Recent Orders --}}
        <div class="bg-white rounded-xl border border-gray-100">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">Recent Orders</h3>
                <a href="{{ route('orders.index') }}" class="text-sm text-primary-600 hover:text-primary-700 font-medium">
                    View All <i class="fas fa-arrow-right ml-1 text-xs"></i>
                </a>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-gray-600 font-medium">
                        <tr>
                            <th class="px-6 py-3 text-left">Order</th>
                            <th class="px-6 py-3 text-left">Customer</th>
                            <th class="px-6 py-3 text-left">Status</th>
                            <th class="px-6 py-3 text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($roleDashboard['recent_orders'] ?? [] as $order)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-6 py-3">
                                <a href="{{ route('orders.show', $order->id) }}" class="font-medium text-primary-600 hover:text-primary-700">#{{ $order->order_number }}</a>
                            </td>
                            <td class="px-6 py-3 text-gray-700">{{ $order->customer_name ?? 'N/A' }}</td>
                            <td class="px-6 py-3">
                                @php
                                    $statusColors = [
                                        'order_received' => 'badge-warning',
                                        'confirmed_with_customer' => 'badge-info',
                                        'prepared_in_warehouse' => 'badge-primary',
                                        'approved_for_shipping' => 'badge-success',
                                        'shipped' => 'badge-info',
                                        'delivered' => 'badge-success',
                                        'cancelled' => 'badge-danger',
                                    ];
                                @endphp
                                <span class="badge {{ $statusColors[$order->order_status] ?? 'badge-secondary' }}">
                                    {{ $order->order_status_label }}
                                </span>
                            </td>
                            <td class="px-6 py-3 text-right font-medium">{{ number_format($order->total_amount, 2) }} SAR</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-6 text-center text-gray-500">No recent orders</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Alerts Section --}}
    @if(!empty($roleDashboard['alerts']))
    <div class="space-y-3">
        @foreach($roleDashboard['alerts'] as $alert)
        <div class="bg-{{ $alert['type'] === 'danger' ? 'red' : ($alert['type'] === 'warning' ? 'yellow' : 'blue') }}-50 border border-{{ $alert['type'] === 'danger' ? 'red' : ($alert['type'] === 'warning' ? 'yellow' : 'blue') }}-200 rounded-lg px-4 py-3 flex items-center">
            <i class="fas fa-{{ $alert['type'] === 'danger' ? 'exclamation-circle' : ($alert['type'] === 'warning' ? 'exclamation-triangle' : 'info-circle') }} text-{{ $alert['type'] === 'danger' ? 'red' : ($alert['type'] === 'warning' ? 'yellow' : 'blue') }}-500 mr-3"></i>
            <span class="text-sm font-medium text-{{ $alert['type'] === 'danger' ? 'red' : ($alert['type'] === 'warning' ? 'yellow' : 'blue') }}-800">{{ $alert['message'] }}</span>
            <a href="{{ $alert['link'] }}" class="ml-auto text-sm font-medium text-{{ $alert['type'] === 'danger' ? 'red' : ($alert['type'] === 'warning' ? 'yellow' : 'blue') }}-600 hover:underline">View</a>
        </div>
        @endforeach
    </div>
    @endif
    @endif

    @if($user->isCustomerService())
    {{-- Customer Service Dashboard --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-xl border border-gray-100">
            <div class="px-6 py-4 border-b border-gray-100">
                <h3 class="font-semibold text-gray-900">Orders Requiring Confirmation</h3>
            </div>
            <div class="p-4">
                @if(!empty($roleDashboard['assigned_orders']))
                    <div class="space-y-3">
                    @foreach($roleDashboard['assigned_orders'] as $order)
                        <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100 hover:bg-gray-50 transition">
                            <div>
                                <a href="{{ route('orders.show', $order->id) }}" class="font-medium text-primary-600 hover:text-primary-700">#{{ $order->order_number }}</a>
                                <p class="text-sm text-gray-500">{{ $order->customer_name }}</p>
                            </div>
                            <span class="text-sm {{ $order->is_overdue ? 'text-red-600 font-medium' : 'text-gray-500' }}">
                                {{ $order->created_at->diffForHumans() }}
                            </span>
                        </div>
                    @endforeach
                    </div>
                @else
                    <div class="text-center py-6 text-gray-500">
                        <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i>
                        <p>No orders pending confirmation</p>
                    </div>
                @endif
            </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-100 p-6">
            <h3 class="font-semibold text-gray-900 mb-4">Today's Performance</h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="text-center p-4 bg-green-50 rounded-lg">
                    <p class="text-3xl font-bold text-green-700">{{ $roleDashboard['recent_calls'] ?? 0 }}</p>
                    <p class="text-sm text-green-600 mt-1">Calls Made Today</p>
                </div>
                <div class="text-center p-4 bg-primary-50 rounded-lg">
                    <p class="text-3xl font-bold text-primary-700">{{ $roleDashboard['cards'][1]['value'] ?? 0 }}</p>
                    <p class="text-sm text-primary-600 mt-1">Confirmations Today</p>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($user->isWarehouseStaff())
    {{-- Warehouse Dashboard --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-xl border border-gray-100">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">Orders to Prepare</h3>
                <a href="{{ route('warehouse.pending-orders') }}" class="text-sm text-primary-600 hover:text-primary-700">View All</a>
            </div>
            <div class="p-4">
                @if(!empty($roleDashboard['pending_orders']))
                    <div class="space-y-3">
                    @foreach($roleDashboard['pending_orders'] as $order)
                        <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100 hover:bg-gray-50 transition">
                            <div>
                                <a href="{{ route('orders.show', $order->id) }}" class="font-medium text-primary-600 hover:text-primary-700">#{{ $order->order_number }}</a>
                                <p class="text-sm text-gray-500">{{ $order->customer_name }} - {{ $order->items->sum('quantity') }} items</p>
                            </div>
                            <form method="POST" action="{{ route('warehouse.mark-prepared', $order->id) }}" class="inline">
                                @csrf
                                <button type="submit" class="px-3 py-1.5 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 transition">
                                    <i class="fas fa-check mr-1"></i>Prepare
                                </button>
                            </form>
                        </div>
                    @endforeach
                    </div>
                @else
                    <div class="text-center py-6 text-gray-500">
                        <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i>
                        <p>No orders pending preparation</p>
                    </div>
                @endif
            </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-100">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900">Low Stock Items</h3>
                <a href="{{ route('warehouse.low-stock') }}" class="text-sm text-primary-600 hover:text-primary-700">View All</a>
            </div>
            <div class="p-4">
                @if(!empty($roleDashboard['low_stock_items']))
                    <div class="space-y-3">
                    @foreach($roleDashboard['low_stock_items'] as $item)
                        <div class="flex items-center justify-between p-3 rounded-lg bg-red-50 border border-red-100">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-triangle text-red-500 mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ $item->product->name_en ?? 'Unknown' }}</p>
                                    <p class="text-xs text-gray-500">{{ $item->name_en }} - Size: {{ $item->size ?? 'N/A' }}</p>
                                </div>
                            </div>
                            <span class="px-2.5 py-1 bg-red-100 text-red-700 text-sm font-semibold rounded-lg">{{ $item->stock_quantity }} left</span>
                        </div>
                    @endforeach
                    </div>
                @else
                    <div class="text-center py-6 text-gray-500">
                        <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i>
                        <p>No low stock items</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
    @endif

    @if($user->isOperationsStaff())
    {{-- Operations Dashboard --}}
    <div class="bg-white rounded-xl border border-gray-100">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="font-semibold text-gray-900">Orders Pending Shipping Approval</h3>
            <a href="{{ route('operations.pending-shipping') }}" class="text-sm text-primary-600 hover:text-primary-700">View All</a>
        </div>
        <div class="p-4">
            @if(!empty($roleDashboard['pending_approval']))
                <div class="space-y-3">
                @foreach($roleDashboard['pending_approval'] as $order)
                    <div class="flex items-center justify-between p-3 rounded-lg border border-gray-100 hover:bg-gray-50 transition">
                        <div class="flex-1">
                            <a href="{{ route('orders.show', $order->id) }}" class="font-medium text-primary-600 hover:text-primary-700">#{{ $order->order_number }}</a>
                            <p class="text-sm text-gray-500">{{ $order->customer_name }} | Prepared by: {{ $order->preparedByUser->name ?? 'N/A' }}</p>
                            <p class="text-sm text-gray-500">{{ $order->items->sum('quantity') }} items | {{ number_format($order->total_amount, 2) }} SAR</p>
                        </div>
                        <form method="POST" action="{{ route('operations.approve', $order->id) }}" class="ml-4">
                            @csrf
                            <button type="submit" class="px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition">
                                <i class="fas fa-check mr-1"></i>Approve
                            </button>
                        </form>
                    </div>
                @endforeach
                </div>
            @else
                <div class="text-center py-6 text-gray-500">
                    <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i>
                    <p>No orders pending shipping approval</p>
                </div>
            @endif
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
@if($user->isSuperAdmin())
<script>
    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode($roleDashboard['charts']['revenue_trend']['labels'] ?? []) !!},
            datasets: [{
                label: 'Revenue (SAR)',
                data: {!! json_encode($roleDashboard['charts']['revenue_trend']['values'] ?? []) !!},
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointBackgroundColor: '#3b82f6',
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, grid: { color: '#f3f4f6' }, ticks: { font: { size: 11 } } },
                x: { grid: { display: false }, ticks: { font: { size: 11 } } },
            },
        }
    });

    // Status Distribution Chart
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_map(fn($k) => \App\Models\Order::ORDER_STATUSES[$k] ?? $k, array_keys($roleDashboard['charts']['status_distribution'] ?? []))) !!},
            datasets: [{
                data: {!! json_encode(array_values($roleDashboard['charts']['status_distribution'] ?? [])) !!},
                backgroundColor: ['#f59e0b', '#3b82f6', '#8b5cf6', '#10b981', '#06b6d4', '#22c55e', '#ef4444', '#f97316', '#6b7280'],
                borderWidth: 0,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: { position: 'bottom', labels: { usePointStyle: true, padding: 15, font: { size: 11 } } }
            },
            cutout: '65%',
        }
    });
</script>
@endif
@endpush