@extends('layouts.nova')

@section('title', 'Messages')

@push('head')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@endpush

@section('content')
    <x-nova-page-header
        section="Dashboard"
        title="Messages"
        icon="fa-envelope"
        :breadcrumbs="collect([
            (object) ['name' => 'Dashboard', 'url' => '/dashboard'],
            (object) ['name' => 'Messages', 'url' => route('messages.index')],
        ])"
        description="Direct messages and group conversations with creators, staff, and community members."
    />

    <div class="px-6 pt-8 md:px-10">
        <div class="mb-6 flex flex-wrap items-center gap-2 rounded-2xl border border-white/[0.06] bg-white/[0.025] p-2 shadow-[0_12px_30px_rgba(0,0,0,0.14)]">
            <a href="{{ route('dashboard.comments.received') }}"
               class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium text-white/60 transition hover:bg-white/[0.05] hover:text-white">
                <i class="fa-solid fa-inbox"></i>
                Received
            </a>
            <a href="{{ route('messages.index') }}"
               class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition {{ request()->routeIs('messages.index', 'messages.show') ? 'bg-sky-500/15 text-sky-200 ring-1 ring-sky-400/20' : 'text-white/60 hover:bg-white/[0.05] hover:text-white' }}">
                <i class="fa-solid fa-envelope"></i>
                Messages
            </a>
            <a href="{{ route('dashboard.notifications') }}"
               class="inline-flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium text-white/60 transition hover:bg-white/[0.05] hover:text-white">
                <i class="fa-solid fa-bell"></i>
                Notifications
            </a>
        </div>
    </div>

    <div id="messages-root"
         data-user-id='@json(auth()->id())'
         data-username='@json(auth()->user()?->username)'
         data-active-conversation-id='@json($activeConversationId ?? null)'>
    </div>

    @vite(['resources/js/Pages/Messages/Index.jsx'])
@endsection