@extends('layouts.app')
@php use Illuminate\Support\Str; @endphp

@section('title', 'My Lists — LoreKeepers')
@section('robots', 'noindex,follow')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold text-white">My Lists</h1>
        <button @click="$dispatch('open-create-list')"
                class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold rounded-lg transition-colors"
                x-data>
            + New List
        </button>
    </div>

    @if($lists->isEmpty())
        <div class="text-center py-16">
            <p class="text-slate-500 mb-4">You haven't created any lists yet.</p>
            <button @click="$dispatch('open-create-list')"
                    class="px-5 py-2.5 bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold rounded-lg transition-colors"
                    x-data>
                Create your first list
            </button>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($lists as $list)
            <a href="{{ route('lists.show', $list) }}"
               class="group block bg-[#16161d] border border-white/5 rounded-lg p-5 hover:border-purple-500/50 transition-all">
                <div class="flex items-start justify-between mb-2">
                    <h2 class="font-semibold text-white group-hover:text-purple-300 transition-colors">{{ $list->title }}</h2>
                    @if(!$list->is_public)
                    <span class="text-xs text-slate-500 bg-[#0f0f13] px-2 py-0.5 rounded border border-white/10 ml-2 flex-shrink-0">Private</span>
                    @endif
                </div>
                @if($list->description)
                <p class="text-sm text-slate-500 line-clamp-2 mb-3">{{ $list->description }}</p>
                @endif
                <p class="text-xs text-slate-600">{{ $list->list_games_count }} {{ Str::plural('game', $list->list_games_count) }}</p>
            </a>
            @endforeach
        </div>
    @endif

    {{-- Create List Modal --}}
    <div x-data="{ open: false, title: '', description: '', isPublic: true }"
         @open-create-list.window="open = true; $nextTick(() => $el.querySelector('input[name=title]')?.focus())">
        <div x-show="open"
             x-transition:enter="transition ease-out duration-150"
             x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-100"
             x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4"
             style="display:none;"
             @click.self="open = false"
             @keydown.escape.window="open = false">
            <div class="bg-[#16161d] border border-white/10 rounded-xl p-6 w-full max-w-md shadow-2xl">
                <h2 class="text-lg font-semibold text-white mb-5">Create New List</h2>
                <form method="POST" action="{{ route('lists.store') }}">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1.5">Title</label>
                            <input type="text" name="title" x-model="title" required maxlength="100"
                                   class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 transition">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1.5">Description <span class="text-slate-600">(optional)</span></label>
                            <textarea name="description" x-model="description" rows="3" maxlength="1000"
                                      class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-slate-200 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 transition resize-none"></textarea>
                        </div>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="hidden" name="is_public" value="0">
                            <input type="checkbox" name="is_public" value="1" x-model="isPublic" class="w-4 h-4 accent-purple-600" checked>
                            <span class="text-sm text-slate-400">Public list</span>
                        </label>
                    </div>
                    <div class="flex gap-3 mt-6">
                        <button type="submit"
                                :disabled="title.trim().length === 0"
                                class="flex-1 py-2.5 bg-purple-600 hover:bg-purple-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-lg transition-colors">
                            Create List
                        </button>
                        <button type="button" @click="open = false"
                                class="px-4 py-2.5 text-slate-400 hover:text-slate-200 text-sm transition-colors">
                            Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
@endsection