@extends('layouts.app')

@section('title', $folder->name)

@section('content')
    {{-- Breadcrumb --}}
    <div class="mb-4 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
        <a href="{{ route('projects.index') }}" class="hover:text-gray-700 dark:hover:text-gray-300">Proyectos</a>
        <i class="fa-solid fa-chevron-right text-xs"></i>
        <a href="{{ route('projects.show', $folder->project) }}" class="hover:text-gray-700 dark:hover:text-gray-300">{{ $folder->project->name }}</a>
        <i class="fa-solid fa-chevron-right text-xs"></i>
        <span>{{ $folder->name }}</span>
    </div>

    {{-- Encabezado de carpeta --}}
    <div class="mb-6 overflow-hidden rounded-2xl border border-white/20 bg-white/60 shadow backdrop-blur-sm dark:border-white/10 dark:bg-gray-800/60">
        <div class="h-2 w-full" style="background-color: {{ $folder->color }}"></div>
        <div class="flex flex-wrap items-center gap-4 p-5">
            <span class="flex size-14 shrink-0 items-center justify-center rounded-2xl text-white text-xl"
                  style="background-color: {{ $folder->color }}">
                <i class="fa-solid {{ $folder->icon }}"></i>
            </span>
            <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-2">
                    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{{ $folder->name }}</h1>
                    @if ($folder->is_public)
                        <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400">
                            <i class="fa-solid fa-globe text-[10px]"></i> Pública
                        </span>
                    @endif
                </div>
                @if ($folder->description)
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ $folder->description }}</p>
                @endif
            </div>

            {{-- Acciones --}}
            <div class="flex shrink-0 flex-wrap items-center gap-2">
                {{-- Toggle público --}}
                <form method="POST" action="{{ route('folders.toggle-public', $folder) }}">
                    @csrf
                    <button type="submit"
                            class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium transition
                                   {{ $folder->is_public
                                       ? 'border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400'
                                       : 'border-gray-200 text-gray-600 hover:border-gray-400 dark:border-white/10 dark:text-gray-400 dark:hover:border-white/30' }}">
                        <i class="fa-solid {{ $folder->is_public ? 'fa-lock-open' : 'fa-globe' }} text-xs"></i>
                        {{ $folder->is_public ? 'Hacer privada' : 'Hacer pública' }}
                    </button>
                </form>

                @if ($folder->is_public && $folder->public_token)
                    <div class="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-500 dark:border-white/10 dark:bg-gray-800 dark:text-gray-400">
                        <i class="fa-solid fa-link"></i>
                        <span class="max-w-[160px] truncate font-mono">{{ url('c/'.$folder->public_token) }}</span>
                        <button type="button" title="Copiar enlace"
                                onclick="navigator.clipboard.writeText('{{ url('c/'.$folder->public_token) }}').then(() => this.title = 'Copiado')">
                            <i class="fa-solid fa-copy text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"></i>
                        </button>
                    </div>
                @endif

                {{-- Mover --}}
                <button type="button"
                        x-data
                        @click="$dispatch('open-move-modal')"
                        class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-2 text-sm font-medium text-gray-600 transition hover:border-gray-400 dark:border-white/10 dark:text-gray-400 dark:hover:border-white/30">
                    <i class="fa-solid fa-arrow-right-arrow-left text-xs"></i> Mover
                </button>

                <a href="{{ route('folders.edit', $folder) }}">
                    <x-button type="button" variant="secondary">
                        <i class="fa-solid fa-pen"></i> Editar
                    </x-button>
                </a>

                <form method="POST" action="{{ route('folders.destroy', $folder) }}"
                      onsubmit="return confirm('¿Eliminar la carpeta «{{ addslashes($folder->name) }}» y todos sus enlaces? Esta acción es permanente.')">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="inline-flex items-center gap-1.5 rounded-lg border border-red-200 px-3 py-2 text-sm font-medium text-red-500 transition hover:border-red-400 hover:bg-red-50 dark:border-red-500/30 dark:hover:bg-red-500/10">
                        <i class="fa-solid fa-trash text-xs"></i> Eliminar
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Enlaces de la carpeta --}}
    <div>
        <div class="mb-3 flex items-center justify-between">
            <h2 class="text-base font-semibold text-gray-900 dark:text-white">
                Enlaces
                @php($linksCount = $folder->links()->count())
                @if ($linksCount > 0)
                    <span class="ml-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs font-normal text-gray-500 dark:bg-white/10 dark:text-gray-400">{{ $linksCount }}</span>
                @endif
            </h2>
            <a href="{{ route('links.create') }}?folder={{ $folder->id }}&proyecto={{ $folder->project_id }}">
                <x-button type="button"><i class="fa-solid fa-plus"></i> Guardar enlace</x-button>
            </a>
        </div>

        @php($links = $folder->links()->latest()->take(30)->get())

        @if ($links->isEmpty())
            <x-card class="flex flex-col items-center justify-center py-10 text-center">
                <i class="fa-solid fa-link text-4xl text-gray-300 dark:text-gray-600"></i>
                <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">No hay enlaces en esta carpeta.</p>
            </x-card>
        @else
            <div class="space-y-3">
                @foreach ($links as $link)
                    @include('enlaces._card', ['link' => $link])
                @endforeach
            </div>
            @if ($linksCount > 30)
                <div class="mt-3 text-center">
                    <a href="{{ route('links.index') }}?carpeta={{ $folder->id }}" class="text-sm text-primary hover:underline">
                        Ver todos los enlaces de esta carpeta →
                    </a>
                </div>
            @endif
        @endif
    </div>

    {{-- Modal mover carpeta --}}
    <div x-data="{ open: false }" x-on:open-move-modal.window="open = true"
         x-show="open" x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
        <div @click.outside="open = false"
             class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-800">
            <h3 class="mb-4 text-base font-semibold text-gray-900 dark:text-white">Mover carpeta a otro proyecto</h3>
            <form method="POST" action="{{ route('folders.move', $folder) }}">
                @csrf
                <x-label for="project_id">Proyecto destino *</x-label>
                <x-select id="project_id" name="project_id" required class="mt-1">
                    <option value="">Selecciona un proyecto</option>
                    @foreach ($projects as $proj)
                        @if ($proj->id !== $folder->project_id)
                            <option value="{{ $proj->id }}">{{ $proj->name }}</option>
                        @endif
                    @endforeach
                </x-select>
                <div class="mt-5 flex justify-end gap-3">
                    <x-button type="button" variant="secondary" @click="open = false">Cancelar</x-button>
                    <x-button type="submit"><i class="fa-solid fa-arrow-right-arrow-left"></i> Mover</x-button>
                </div>
            </form>
        </div>
    </div>
@endsection