@extends('layouts.admin')
@section('title','Menus')
@section('content')
@php
  $locationTone = fn (?string $loc) => match ($loc) {
      'header' => 'success',
      'footer' => 'info',
      'mobile' => 'warning',
      default => 'muted',
  };
@endphp

<x-admin.page
    title="Menus"
    subtitle="Navigation command center — nested trees, resource links, visibility, live storefront preview."
>
    <x-slot:actions>
        <a href="{{ url('/') }}" target="_blank" class="admin-btn">
            <i data-lucide="external-link" class="h-3.5 w-3.5"></i> View storefront
        </a>
        <a href="{{ route('admin.menus.create') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="plus" class="h-3.5 w-3.5"></i> New menu
        </a>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat is-active">
            <span class="order-ops-stat-label">Menus</span>
            <span class="order-ops-stat-value">{{ number_format($stats['menus']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['active_menus']) }} active</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Items</span>
            <span class="order-ops-stat-value">{{ number_format($stats['items']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['visible_items']) }} visible</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Nested</span>
            <span class="order-ops-stat-value">{{ number_format($stats['nested_items']) }}</span>
            <span class="order-ops-stat-meta">Child links</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Header / Footer</span>
            <span class="order-ops-stat-value">{{ number_format($stats['header_items']) }}/{{ number_format($stats['footer_items']) }}</span>
            <span class="order-ops-stat-meta">Primary locations</span>
        </div>
    </div>

    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @forelse($menus as $menu)
            <a href="{{ route('admin.menus.edit', $menu) }}" class="group rounded-xl border border-[var(--color-admin-border)] bg-white p-5 transition hover:border-[var(--color-gold)]">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <h2 class="text-base font-semibold text-[#202223] group-hover:underline">{{ $menu->title }}</h2>
                        <p class="mt-0.5 font-mono text-xs text-[#6d7175]">{{ $menu->handle }}</p>
                    </div>
                    <x-admin.badge :tone="$locationTone($menu->location)">{{ $menu->location }}</x-admin.badge>
                </div>
                <p class="mt-3 line-clamp-2 text-sm text-[#6d7175]">{{ $menu->description ?: 'No description — open to edit the link tree.' }}</p>
                <div class="mt-4 flex flex-wrap items-center gap-3 text-xs text-[#6d7175]">
                    <span>{{ number_format($menu->items_count) }} items</span>
                    <span>{{ number_format($menu->root_count) }} top-level</span>
                    <x-admin.badge :tone="$menu->is_active ? 'success' : 'muted'">{{ $menu->is_active ? 'Active' : 'Off' }}</x-admin.badge>
                    @if($menu->isProtected())
                        <x-admin.badge tone="warning">Protected</x-admin.badge>
                    @endif
                </div>
            </a>
        @empty
            <div class="rounded-xl border border-dashed border-[var(--color-admin-border)] bg-white p-10 text-center text-sm text-[#6d7175] md:col-span-2 xl:col-span-3">
                No menus yet. Create header/footer structures to drive storefront navigation.
            </div>
        @endforelse
    </div>
</x-admin.page>
@endsection