@php
    $settings = app(\App\Support\AppSettings::class)->all();
    $currency = $settings['currency'] ?? 'USD';
@endphp

<x-layouts.app heading="Dashboard">
    <section class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
        <div class="grid gap-0 lg:grid-cols-[1.25fr_.75fr]">
            <div class="bg-emerald-700 p-6 text-white md:p-8">
                <div class="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-emerald-100">
                    <span class="rounded bg-white/15 px-2.5 py-1">Live Pharmacy Command</span>
                    <span class="rounded bg-white/15 px-2.5 py-1">{{ $currency }}</span>
                </div>
                <h2 class="mt-5 max-w-3xl text-3xl font-semibold tracking-normal md:text-4xl">Sales, stock, expiry, and staff decisions in one control room.</h2>
                <div class="mt-6 grid gap-3 sm:grid-cols-3">
                    <a href="{{ route('pos.index') }}" class="flex items-center justify-between rounded bg-white px-4 py-3 text-sm font-semibold text-emerald-800 hover:bg-emerald-50">
                        New Sale <i data-lucide="arrow-right" class="h-4 w-4"></i>
                    </a>
                    <a href="{{ route('inventory.create') }}" class="flex items-center justify-between rounded bg-white/15 px-4 py-3 text-sm font-semibold text-white ring-1 ring-white/20 hover:bg-white/20">
                        Add Medicine <i data-lucide="plus" class="h-4 w-4"></i>
                    </a>
                    <a href="{{ route('purchase-orders.create') }}" class="flex items-center justify-between rounded bg-white/15 px-4 py-3 text-sm font-semibold text-white ring-1 ring-white/20 hover:bg-white/20">
                        Purchase Order <i data-lucide="file-plus-2" class="h-4 w-4"></i>
                    </a>
                </div>
            </div>
            <div class="grid content-center gap-4 bg-zinc-950 p-6 text-white md:p-8">
                <div class="flex items-center justify-between border-b border-white/10 pb-4">
                    <span class="text-sm text-zinc-300">Inventory value</span>
                    <strong class="text-2xl">{{ $currency }} {{ number_format($summary['inventory_value'], 2) }}</strong>
                </div>
                <div class="grid grid-cols-2 gap-3 text-sm">
                    <div class="rounded bg-white/10 p-4">
                        <p class="text-zinc-300">Medicines</p>
                        <p class="mt-2 text-2xl font-semibold">{{ $summary['active_medicines'] }}</p>
                    </div>
                    <div class="rounded bg-white/10 p-4">
                        <p class="text-zinc-300">Sellable batches</p>
                        <p class="mt-2 text-2xl font-semibold">{{ $summary['sellable_batches'] }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        @foreach ([
            ['Today Sales', $currency.' '.number_format($summary['today_sales'], 2), 'receipt-text', 'bg-white', 'text-emerald-700', 'Invoices '.$summary['today_invoices']],
            ['Gross Profit', $currency.' '.number_format($summary['gross_profit'], 2), 'trending-up', 'bg-white', 'text-cyan-700', 'Today margin'],
            ['Low Stock', $summary['low_stock_count'], 'triangle-alert', 'bg-amber-50', 'text-amber-700', 'Needs reorder'],
            ['Expired Stock', $summary['expired_count'], 'ban', 'bg-rose-50', 'text-rose-700', 'Remove from sale'],
        ] as [$label, $value, $icon, $bg, $color, $caption])
            <article class="metric rounded border border-zinc-200 {{ $bg }} p-5 shadow-sm">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <p class="text-sm font-medium text-zinc-500">{{ $label }}</p>
                        <p class="mt-3 text-3xl font-semibold tracking-normal">{{ $value }}</p>
                        <p class="mt-3 text-xs font-semibold uppercase tracking-wide text-zinc-400">{{ $caption }}</p>
                    </div>
                    <div class="rounded bg-white p-2 shadow-sm ring-1 ring-zinc-200 {{ $color }}">
                        <i data-lucide="{{ $icon }}" class="h-5 w-5"></i>
                    </div>
                </div>
            </article>
        @endforeach
    </section>

    <section class="mt-6 grid gap-6 xl:grid-cols-[1.25fr_.75fr]">
        <div class="rounded border border-zinc-200 bg-white shadow-sm">
            <div class="flex items-center justify-between border-b border-zinc-200 px-5 py-4">
                <div>
                    <h2 class="font-semibold">Top Selling Medicines</h2>
                    <p class="text-sm text-zinc-500">Best movement in the last 30 days</p>
                </div>
                <span class="rounded bg-zinc-100 px-3 py-1.5 text-sm font-semibold text-zinc-600">30 days</span>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left text-sm">
                    <thead class="bg-zinc-50 text-xs uppercase text-zinc-500">
                        <tr>
                            <th class="px-5 py-3">Brand</th>
                            <th class="px-5 py-3">Generic</th>
                            <th class="px-5 py-3 text-right">Units</th>
                            <th class="px-5 py-3 text-right">Revenue</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-zinc-100">
                        @forelse ($topSelling as $item)
                            <tr class="hover:bg-zinc-50">
                                <td class="px-5 py-3 font-semibold">{{ $item->brand_name }}</td>
                                <td class="px-5 py-3 text-zinc-600">{{ $item->generic_name }}</td>
                                <td class="px-5 py-3 text-right">{{ $item->units }}</td>
                                <td class="px-5 py-3 text-right font-semibold">{{ $currency }} {{ number_format($item->revenue, 2) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="px-5 py-10 text-center text-zinc-500">No sales yet. Start from POS to build analytics.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="grid gap-6">
            <div class="rounded border border-zinc-200 bg-white shadow-sm">
                <div class="flex items-center justify-between border-b border-zinc-200 px-5 py-4">
                    <h2 class="font-semibold">Operational Pulse</h2>
                    <i data-lucide="activity" class="h-5 w-5 text-emerald-700"></i>
                </div>
                <div class="grid grid-cols-2 gap-3 p-5 text-sm">
                    <div class="rounded bg-zinc-50 p-4"><p class="text-zinc-500">Customers</p><p class="mt-1 text-2xl font-semibold">{{ $summary['customers'] }}</p></div>
                    <div class="rounded bg-zinc-50 p-4"><p class="text-zinc-500">Staff</p><p class="mt-1 text-2xl font-semibold">{{ $summary['employees'] }}</p></div>
                    <div class="rounded bg-zinc-50 p-4"><p class="text-zinc-500">Suppliers</p><p class="mt-1 text-2xl font-semibold">{{ $summary['suppliers'] }}</p></div>
                    <div class="rounded bg-zinc-50 p-4"><p class="text-zinc-500">Open POs</p><p class="mt-1 text-2xl font-semibold">{{ $summary['open_purchase_orders'] }}</p></div>
                </div>
            </div>

            <div class="rounded border border-zinc-200 bg-white shadow-sm">
                <div class="border-b border-zinc-200 px-5 py-4">
                    <h2 class="font-semibold">Expiry Watch</h2>
                </div>
                <div class="divide-y divide-zinc-100">
                    @forelse ($nearExpiry as $batch)
                        <div class="flex items-center justify-between gap-4 px-5 py-3 text-sm">
                            <div>
                                <p class="font-semibold">{{ $batch->brand->brand_name }}</p>
                                <p class="text-zinc-500">{{ $batch->batch_no }} - {{ $batch->branch->code }}</p>
                            </div>
                            <span class="rounded bg-rose-50 px-2.5 py-1 font-semibold text-rose-700">{{ $batch->exp_date->format('d M Y') }}</span>
                        </div>
                    @empty
                        <p class="px-5 py-6 text-sm text-zinc-500">No near-expiry batches.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    <section class="mt-6 grid gap-6 xl:grid-cols-3">
        <div class="rounded border border-zinc-200 bg-white shadow-sm">
            <div class="border-b border-zinc-200 px-5 py-4">
                <h2 class="font-semibold">Low Stock Queue</h2>
            </div>
            <div class="divide-y divide-zinc-100">
                @forelse ($lowStock as $batch)
                    <div class="flex items-center justify-between gap-4 px-5 py-3 text-sm">
                        <div>
                            <p class="font-semibold">{{ $batch->brand->brand_name }}</p>
                            <p class="text-zinc-500">{{ $batch->brand->medicine->generic_name }} - {{ $batch->branch->code }}</p>
                        </div>
                        <span class="rounded bg-amber-100 px-2.5 py-1 font-semibold text-amber-800">{{ $batch->quantity }} left</span>
                    </div>
                @empty
                    <p class="px-5 py-8 text-sm text-zinc-500">Stock levels are healthy.</p>
                @endforelse
            </div>
        </div>

        <div class="rounded border border-zinc-200 bg-white shadow-sm">
            <div class="border-b border-zinc-200 px-5 py-4">
                <h2 class="font-semibold">Recent Sales</h2>
            </div>
            <div class="divide-y divide-zinc-100">
                @forelse ($recentSales as $sale)
                    <div class="flex items-center justify-between gap-4 px-5 py-3 text-sm">
                        <div>
                            <p class="font-semibold">{{ $sale->invoice_no }}</p>
                            <p class="text-zinc-500">{{ $sale->customer?->name ?? 'Walk-in customer' }} - {{ $sale->cashier?->name }}</p>
                        </div>
                        <span class="font-semibold">{{ $currency }} {{ number_format($sale->total, 2) }}</span>
                    </div>
                @empty
                    <p class="px-5 py-8 text-sm text-zinc-500">No invoices created yet.</p>
                @endforelse
            </div>
        </div>

        <div class="rounded border border-zinc-200 bg-white shadow-sm">
            <div class="flex items-center justify-between border-b border-zinc-200 px-5 py-4">
                <h2 class="font-semibold">Recent Store Messages</h2>
                <a href="{{ route('store-admin.banners.index') }}" class="text-xs font-bold text-emerald-600 hover:underline">View Inbox</a>
            </div>
            <div class="divide-y divide-zinc-100">
                @forelse ($recentMessages as $msg)
                    <div class="px-5 py-3 text-sm {{ $msg->read_at ? 'opacity-70' : 'bg-emerald-50/40' }}">
                        <div class="flex justify-between font-semibold">
                            <span>{{ $msg->name }}</span>
                            <span class="text-xs text-zinc-500">{{ $msg->created_at->diffForHumans() }}</span>
                        </div>
                        <p class="mt-1 text-xs text-zinc-500 truncate">{{ $msg->subject ?? 'No Subject' }}</p>
                        <p class="mt-1.5 text-xs text-zinc-600 line-clamp-2">{{ $msg->message }}</p>
                    </div>
                @empty
                    <p class="px-5 py-8 text-sm text-zinc-500 text-center">No messages received.</p>
                @endforelse
            </div>
        </div>
    </section>
</x-layouts.app>