@extends('layouts.nova')

@section('content')
    <div class="container-fluid legacy-page">
        <div class="pt-0">
            <div class="mx-auto w-full">
                <div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
                    <main class="w-full">
                        <x-nova-page-header
                            section="Dashboard"
                            title="People I Follow"
                            icon="fa-user-group"
                            :breadcrumbs="collect([
                                (object) ['name' => 'Dashboard', 'url' => '/dashboard'],
                                (object) ['name' => 'Following', 'url' => route('dashboard.following')],
                            ])"
                            description="Creators and members you follow, with quick stats and recent follow time."
                            actionsClass="lg:pt-8"
                        >
                            <x-slot name="actions">
                                <a href="{{ route('discover.trending') }}"
                                   class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
                                    <i class="fa-solid fa-compass text-xs"></i>
                                    Discover creators
                                </a>
                            </x-slot>
                        </x-nova-page-header>

                        <section class="px-6 pb-16 pt-8 md:px-10">

                            @if($following->isEmpty())
                                <div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
                                    <p class="text-white/40 text-sm">You are not following anyone yet.</p>
                                    <a href="{{ route('discover.trending') }}" class="mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors">
                                        <i class="fa-solid fa-compass text-xs"></i>
                                        Start following creators
                                    </a>
                                </div>
                            @else
                                @php
                                    $firstFollow = $following->getCollection()->first();
                                    $latestFollowedAt = $firstFollow && !empty($firstFollow->followed_at)
                                        ? \Carbon\Carbon::parse($firstFollow->followed_at)->diffForHumans()
                                        : null;
                                @endphp

                                <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                                    <div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
                                        <p class="text-xs uppercase tracking-widest text-white/35">Following</p>
                                        <p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->total()) }}</p>
                                    </div>
                                    <div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
                                        <p class="text-xs uppercase tracking-widest text-white/35">On this page</p>
                                        <p class="mt-2 text-2xl font-semibold text-white">{{ number_format($following->count()) }}</p>
                                    </div>
                                    <div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4 sm:col-span-2 xl:col-span-1">
                                        <p class="text-xs uppercase tracking-widest text-white/35">Last followed</p>
                                        <p class="mt-2 text-2xl font-semibold text-white">{{ $latestFollowedAt ?? '—' }}</p>
                                    </div>
                                </div>

                                <div class="rounded-xl border border-white/[0.06] overflow-hidden">
                                    <div class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-3 bg-white/[0.03] border-b border-white/[0.06]">
                                        <span class="text-xs font-semibold uppercase tracking-widest text-white/30">Creator</span>
                                        <span class="hidden sm:block text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Stats</span>
                                        <span class="text-xs font-semibold uppercase tracking-widest text-white/30 text-right">Followed</span>
                                    </div>

                                    <div class="divide-y divide-white/[0.04]">
                                        @foreach($following as $f)
                                            @php
                                                $displayName = $f->name ?: $f->uname;
                                            @endphp
                                            <a href="{{ $f->profile_url }}"
                                               class="grid grid-cols-[1fr_auto_auto] items-center gap-4 px-5 py-4 hover:bg-white/[0.03] transition-colors">
                                                <div class="flex items-center gap-3 min-w-0">
                                                    <img src="{{ $f->avatar_url }}"
                                                         alt="{{ $displayName }}"
                                                         class="w-11 h-11 rounded-full object-cover flex-shrink-0 ring-1 ring-white/[0.10]"
                                                         onerror="this.src='https://files.skinbase.org/default/avatar_default.webp'">
                                                    <div class="min-w-0">
                                                        <div class="truncate text-sm font-semibold text-white/90">{{ $displayName }}</div>
                                                        @if(!empty($f->username))
                                                            <div class="truncate text-xs text-white/35">{{ '@' . $f->username }}</div>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="hidden sm:block text-right text-xs text-white/55">
                                                    {{ number_format((int) $f->uploads) }} uploads · {{ number_format((int) $f->followers_count) }} followers
                                                </div>

                                                <div class="text-right text-xs text-white/45 whitespace-nowrap">
                                                    {{ !empty($f->followed_at) ? \Carbon\Carbon::parse($f->followed_at)->diffForHumans() : '—' }}
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>

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