@extends('layouts.admin')

@section('title', 'Dashboard · Aromaniacs ERP')
@section('overline', 'Overview')
@section('heading', 'Dashboard')

@section('content')
    <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        @foreach ([
            ['label' => 'Brands',        'value' => $metrics['brands']],
            ['label' => 'Fragrances',    'value' => $metrics['fragrances']],
            ['label' => 'Decant Sizes',  'value' => $metrics['decant_sizes']],
            ['label' => 'SKUs',          'value' => $metrics['skus']],
        ] as $tile)
            <div class="card">
                <p class="label" style="color: var(--color-ink-40);">{{ $tile['label'] }}</p>
                <p class="mt-3 text-4xl" style="font-family: var(--font-serif);">{{ $tile['value'] }}</p>
            </div>
        @endforeach
    </section>

    <section class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div class="card">
            <p class="label" style="color: var(--color-ink-40);">Stock on hand</p>
            <p class="mt-3 text-4xl" style="font-family: var(--font-serif);">
                {{ number_format($metrics['stock_ml'], 2) }}
                <span class="text-base" style="color: var(--color-ink-40);">ml</span>
            </p>
        </div>
        <div class="card">
            <p class="label" style="color: var(--color-ink-40);">Bottle intakes</p>
            <p class="mt-3 text-4xl" style="font-family: var(--font-serif);">{{ $metrics['bottle_intakes'] }}</p>
        </div>
        <div class="card">
            <p class="label" style="color: var(--color-ink-40);">Spend this month</p>
            <p class="mt-3 text-4xl" style="font-family: var(--font-serif);">{{ number_format($metrics['month_spend'], 2) }}</p>
        </div>
    </section>

    <section class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10">
        <div class="card">
            <p class="label" style="color: var(--color-ink-40);">Revenue this month</p>
            <p class="mt-3 text-4xl" style="font-family: var(--font-serif);">{{ number_format($metrics['month_revenue'], 2) }}</p>
        </div>
        <div class="card">
            <p class="label" style="color: var(--color-ink-40);">Pending orders</p>
            <p class="mt-3 text-4xl" style="font-family: var(--font-serif);">{{ $metrics['pending_orders'] }}</p>
        </div>
        <div class="card">
            <p class="label" style="color: var(--color-ink-40);">Orders today</p>
            <p class="mt-3 text-4xl" style="font-family: var(--font-serif);">{{ $metrics['today_orders'] }}</p>
        </div>
    </section>

    @if ($recentOrders->isNotEmpty())
        <section class="card mb-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <p class="label" style="color: var(--color-ink);">Sales</p>
                    <h2 class="text-xl mt-1" style="font-family: var(--font-serif);">Recent Orders</h2>
                </div>
                <a href="{{ route('admin.orders.index') }}" class="btn btn-ghost">View all</a>
            </div>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Order #</th>
                        <th>Customer</th>
                        <th>Status</th>
                        <th style="text-align: right;">Total</th>
                        <th>Placed</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($recentOrders as $order)
                        <tr>
                            <td class="font-semibold">
                                <a href="{{ route('admin.orders.show', $order) }}">{{ $order->order_number }}</a>
                            </td>
                            <td>{{ $order->customer_name }}</td>
                            <td>
                                @if ($order->status?->value === 'cancelled')
                                    <span class="badge" style="background: rgba(180,35,24,0.1); color: #b42318; border-color: rgba(180,35,24,0.35);">Cancelled</span>
                                @elseif ($order->status?->value === 'pending')
                                    <span class="badge badge-muted">Pending</span>
                                @else
                                    <span class="badge">{{ $order->status->label() }}</span>
                                @endif
                            </td>
                            <td style="text-align: right;">{{ number_format((float) $order->total, 2) }}</td>
                            <td style="color: var(--color-ink-70);">{{ optional($order->placed_at)->diffForHumans() }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </section>
    @endif

    @if ($resaleBottles->isNotEmpty())
        <section class="card mb-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <p class="label" style="color: var(--color-champagne);">For resale</p>
                    <h2 class="text-xl mt-1" style="font-family: var(--font-serif);">Full bottles in stock</h2>
                </div>
                <a href="{{ route('admin.bottle-intakes.index', ['intent' => \App\Enums\BottleIntent::ResaleBottle->value]) }}" class="btn btn-ghost">View all</a>
            </div>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Fragrance</th>
                        <th>Brand</th>
                        <th>Volume</th>
                        <th>Cost</th>
                        <th>Purchased</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($resaleBottles as $bottle)
                        <tr>
                            <td class="font-semibold">{{ $bottle->fragrance?->name }}</td>
                            <td style="color: var(--color-ink-70);">{{ $bottle->fragrance?->brand?->name }}</td>
                            <td>{{ number_format((float) $bottle->volume_ml, 2) }} ml</td>
                            <td>{{ number_format((float) $bottle->cost_total, 2) }}</td>
                            <td style="color: var(--color-ink-70);">{{ optional($bottle->purchased_at)->format('d M Y') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </section>
    @endif

    <section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="card lg:col-span-2">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <p class="label" style="color: var(--color-champagne);">Recently Added</p>
                    <h2 class="text-xl mt-1" style="font-family: var(--font-serif);">Latest Brands</h2>
                </div>
                @if (Route::has('admin.brands.index'))
                    <a href="{{ route('admin.brands.index') }}" class="btn btn-ghost">View all</a>
                @endif
            </div>

            @if ($recentBrands->isEmpty())
                <div class="rounded-md border border-dashed px-6 py-10 text-center" style="border-color: var(--color-champagne-18);">
                    <p style="color: var(--color-ink-70);">No brands yet.</p>
                    <p class="mt-1 text-sm  " style="color: var(--color-ink-40);">Brand CRUD ships in the next step.</p>
                </div>
            @else
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Slug</th>
                            <th>Status</th>
                            <th>Added</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($recentBrands as $brand)
                            <tr>
                                <td style="font-family: var(--font-serif);">{{ $brand->name }}</td>
                                <td style="color: var(--color-ink-70); font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.15em;">{{ $brand->slug }}</td>
                                <td>
                                    @if ($brand->is_active)
                                        <span class="badge">Active</span>
                                    @else
                                        <span class="badge badge-muted">Hidden</span>
                                    @endif
                                </td>
                                <td style="color: var(--color-ink-70);">{{ $brand->created_at->diffForHumans() }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>

        <div class="card-light">
            <p class="label" style="color: var(--color-ink-70);">Welcome</p>
            <h2 class="mt-2 text-2xl" style="font-family: var(--font-serif); color: var(--color-ink);">A fragrance that lingers like a thought.</h2>
            <p class="mt-3 text-sm" style="color: var(--color-ink-70);">
                Use this console to manage the catalog, intake stock at the milliliter level, and watch your shareholder ledger come together.
            </p>
            <div class="mt-6 flex flex-col gap-2">
                <span class="label" style="color: var(--color-ink-70);">Progress</span>
                <ul class="text-sm space-y-1" style="color: var(--color-ink); font-family: var(--font-serif);">
                    <li>· Brand CRUD (live)</li>
                    <li>· Fragrance CRUD with image + notes (live)</li>
                    <li>· Decant sizes management (live)</li>
                    <li>· SKU management with price override (live)</li>
                    <li>· Bottle intake + ml stock ledger (live)</li>
                    <li>· Expense tracker (live)</li>
                    <li>· Pricing engine (live)</li>
                    <li>· Customers + Orders + oversell guard (live)</li>
                    <li>· Storefront + payments</li>
                    <li>· Shareholder ledger</li>
                </ul>
            </div>
        </div>
    </section>
@endsection