@extends('layouts.nova')

@section('content')
    <x-nova-page-header
        section="Dashboard"
        title="Received Comments"
        icon="fa-comments"
        :breadcrumbs="collect([
            (object) ['name' => 'Dashboard', 'url' => '/dashboard'],
            (object) ['name' => 'Comments', 'url' => route('dashboard.comments.received')],
        ])"
        description="A clean inbox for feedback on your artworks, with quick scanning, filtering, and direct artwork context."
    >
        <x-slot name="actions">
            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('community.activity') }}"
                   class="inline-flex items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition-colors hover:bg-white/[0.08] hover:text-white">
                    <i class="fa-solid fa-wave-square text-xs"></i>
                    Community activity
                </a>
            </div>
        </x-slot>
    </x-nova-page-header>

    <div class="px-6 pb-16 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 transition {{ request()->routeIs('dashboard.comments.received') ? '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-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 text-white/60 transition 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>

        @if(($freshlyClearedCount ?? 0) > 0)
            <div class="mb-6 rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-5 py-4 text-sm text-emerald-100 shadow-[0_12px_30px_rgba(16,185,129,0.12)]">
                Marked {{ number_format((int) $freshlyClearedCount) }} new {{ (int) $freshlyClearedCount === 1 ? 'comment' : 'comments' }} as read when you opened this inbox.
            </div>
        @endif

        <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-2xl border border-sky-400/20 bg-sky-500/10 p-5 shadow-[0_18px_45px_rgba(10,132,255,0.10)]">
                <p class="text-xs font-semibold uppercase tracking-[0.22em] text-sky-200/75">Total comments</p>
                <p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($stats['total'] ?? 0)) }}</p>
                <p class="mt-2 text-sm text-sky-100/70">All comments on your approved artworks.</p>
            </div>

            <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 p-5">
                <p class="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-200/75">Last 7 days</p>
                <p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($stats['recent'] ?? 0)) }}</p>
                <p class="mt-2 text-sm text-emerald-100/70">Recent conversation momentum.</p>
            </div>

            <div class="rounded-2xl border border-violet-400/20 bg-violet-500/10 p-5">
                <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-200/75">Unique commenters</p>
                <p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($stats['commenters'] ?? 0)) }}</p>
                <p class="mt-2 text-sm text-violet-100/70">Distinct people engaging with your work.</p>
            </div>

            <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 p-5">
                <p class="text-xs font-semibold uppercase tracking-[0.22em] text-amber-200/75">Active artworks</p>
                <p class="mt-3 text-3xl font-semibold text-white">{{ number_format((int) ($stats['artworks'] ?? 0)) }}</p>
                <p class="mt-2 text-sm text-amber-100/70">Artworks that received comments.</p>
            </div>
        </div>

        <div class="mb-6 rounded-[26px] border border-white/[0.07] bg-white/[0.03] p-4 shadow-[0_18px_45px_rgba(0,0,0,0.18)] md:p-5">
            <form method="GET" action="{{ route('dashboard.comments.received') }}" class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex flex-1 flex-col gap-3 sm:flex-row">
                    <label class="relative flex-1">
                        <span class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-white/30">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </span>
                        <input
                            type="search"
                            name="q"
                            value="{{ $search }}"
                            placeholder="Search comment text, artwork title, or username"
                            class="w-full rounded-2xl border border-white/[0.08] bg-black/20 py-3 pl-11 pr-4 text-sm text-white placeholder:text-white/30 outline-none transition focus:border-sky-400/40 focus:bg-black/30"
                        >
                    </label>

                    <select
                        name="sort"
                        class="rounded-2xl border border-white/[0.08] bg-black/20 px-4 py-3 text-sm text-white outline-none transition focus:border-sky-400/40 focus:bg-black/30"
                    >
                        <option value="newest" @selected($sort === 'newest')>Newest first</option>
                        <option value="oldest" @selected($sort === 'oldest')>Oldest first</option>
                    </select>
                </div>

                <div class="flex items-center gap-2">
                    <button
                        type="submit"
                        class="inline-flex items-center gap-2 rounded-2xl bg-sky-500 px-4 py-3 text-sm font-semibold text-white transition hover:bg-sky-400"
                    >
                        <i class="fa-solid fa-sliders"></i>
                        Apply
                    </button>

                    @if($search !== '' || $sort !== 'newest')
                        <a
                            href="{{ route('dashboard.comments.received') }}"
                            class="inline-flex items-center gap-2 rounded-2xl border border-white/[0.08] bg-white/[0.03] px-4 py-3 text-sm font-medium text-white/65 transition hover:bg-white/[0.07] hover:text-white"
                        >
                            <i class="fa-solid fa-rotate-left"></i>
                            Reset
                        </a>
                    @endif
                </div>
            </form>
        </div>

        @if($comments->isEmpty())
            <div class="rounded-[28px] border border-white/[0.07] bg-white/[0.025] px-8 py-16 text-center shadow-[0_18px_45px_rgba(0,0,0,0.18)]">
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.03] text-white/35">
                    <i class="fa-regular fa-comments text-2xl"></i>
                </div>
                <h2 class="mt-5 text-2xl font-semibold text-white">No comments found</h2>
                <p class="mx-auto mt-3 max-w-xl text-sm leading-6 text-white/45">
                    @if($search !== '')
                        Nothing matched your current search. Try a shorter phrase, a username, or reset the filters.
                    @else
                        When members comment on your artworks, they will appear here with artwork previews and quick context.
                    @endif
                </p>
            </div>
        @else
            <div class="grid gap-5 lg:grid-cols-2 2xl:grid-cols-3">
                @foreach($comments as $comment)
                    @php
                        $author = $comment->user;
                        $artwork = $comment->artwork;
                        $profileUrl = !empty($author?->username)
                            ? '/@' . $author->username
                            : '/profile/' . (int) ($author?->id ?? 0);
                        $artworkUrl = $artwork
                            ? '/art/' . (int) $artwork->id . '/' . \Illuminate\Support\Str::slug($artwork->title ?? $artwork->name ?? 'artwork')
                            : null;
                    @endphp

                    <article class="group flex h-full flex-col overflow-hidden rounded-[28px] border border-white/[0.07] bg-white/[0.025] shadow-[0_18px_45px_rgba(0,0,0,0.18)] transition hover:border-sky-400/20 hover:bg-white/[0.035]">
                        <div class="border-b border-white/[0.06] bg-black/20">
                                @if($artwork)
                                    <a href="{{ $artworkUrl }}" class="block">
                                        <img
                                            src="{{ $artwork->thumb_url ?? $artwork->thumb }}"
                                            alt="{{ $artwork->title ?? $artwork->name ?? 'Artwork' }}"
                                            class="h-52 w-full object-cover transition duration-500 group-hover:scale-[1.02]"
                                        >
                                    </a>
                                @else
                                    <div class="flex h-52 items-center justify-center text-white/25">
                                        <i class="fa-regular fa-image text-4xl"></i>
                                    </div>
                                @endif
                        </div>

                            <div class="flex flex-1 flex-col p-5 md:p-6">
                                <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                                    <div class="flex min-w-0 items-center gap-3">
                                        <a href="{{ $profileUrl }}" class="shrink-0">
                                            <img
                                                src="{{ \App\Support\AvatarUrl::forUser((int) ($author?->id ?? 0), $author?->profile?->avatar_hash, 64) }}"
                                                alt="{{ $author?->name ?? $author?->username ?? 'Member' }}"
                                                class="h-12 w-12 rounded-full object-cover ring-1 ring-white/[0.10]"
                                            >
                                        </a>
                                        <div class="min-w-0">
                                            <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                                                <a href="{{ $profileUrl }}" class="truncate text-base font-semibold text-white transition hover:text-sky-300">
                                                    {{ $author?->name ?? $author?->username ?? 'Unknown member' }}
                                                </a>
                                                @if(!empty($author?->username))
                                                    <span class="truncate text-xs font-medium uppercase tracking-[0.18em] text-white/30">{{ '@' . $author->username }}</span>
                                                @endif
                                            </div>
                                            <p class="mt-1 text-sm text-white/45">
                                                {{ optional($comment->created_at)->diffForHumans() ?? 'Unknown time' }}
                                            </p>
                                        </div>
                                    </div>

                                    <div class="flex flex-wrap items-center gap-2 text-xs font-medium">
                                        <span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1 text-white/60">
                                            <i class="fa-solid fa-message"></i>
                                            Comment #{{ $comment->id }}
                                        </span>
                                        @if($artworkUrl)
                                            <a href="{{ $artworkUrl }}" class="inline-flex items-center gap-1.5 rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1 text-sky-200 transition hover:bg-sky-500/20">
                                                <i class="fa-solid fa-arrow-up-right-from-square"></i>
                                                Open artwork
                                            </a>
                                        @endif
                                    </div>
                                </div>

                                <div class="mt-5 rounded-2xl border border-white/[0.06] bg-black/20 p-4 md:p-5">
                                    <div class="prose prose-invert prose-sm max-w-none prose-p:text-white/80 prose-a:text-sky-300 prose-strong:text-white prose-code:text-sky-200">
                                        {!! $comment->getDisplayHtml() !!}
                                    </div>
                                </div>

                                <div class="mt-auto pt-5">
                                    <div class="flex flex-col gap-3 border-t border-white/[0.06] pt-4 md:flex-row md:items-center md:justify-between">
                                    <div class="min-w-0">
                                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-white/30">Artwork</p>
                                        @if($artwork)
                                            <a href="{{ $artworkUrl }}" class="mt-1 block truncate text-sm font-medium text-white/80 transition hover:text-sky-300">
                                                {{ $artwork->title ?? $artwork->name ?? 'Untitled artwork' }}
                                            </a>
                                        @else
                                            <p class="mt-1 text-sm text-white/35">This artwork is no longer available.</p>
                                        @endif
                                    </div>

                                    <div class="flex flex-wrap items-center gap-2 text-xs text-white/45">
                                        <span class="inline-flex items-center gap-1.5 rounded-full bg-white/[0.03] px-3 py-1">
                                            <i class="fa-regular fa-clock"></i>
                                            {{ optional($comment->created_at)->format('M j, Y H:i') ?? 'Unknown date' }}
                                        </span>
                                    </div>
                                    </div>
                                </div>
                            </div>
                    </article>
                @endforeach
            </div>

            <div class="mt-8 flex justify-center">
                {{ $comments->links() }}
            </div>
        @endif
    </div>
@endsection