@extends('layouts.app')

@section('title', $link->display_title)

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

    <div class="grid gap-6 lg:grid-cols-3">
        {{-- Columna principal --}}
        <div class="space-y-5 lg:col-span-2">
            {{-- Card principal --}}
            <x-card>
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div class="min-w-0 flex-1">
                        <h1 class="text-xl font-bold text-gray-900 dark:text-white">{{ $link->display_title }}</h1>
                        <a href="{{ $link->url }}" target="_blank" rel="noopener noreferrer"
                           class="mt-1 block truncate text-sm text-primary hover:underline">
                            {{ $link->url }}
                        </a>
                    </div>
                    <div class="flex shrink-0 gap-2">
                        <a href="{{ route('links.edit', $link) }}">
                            <x-button type="button" variant="secondary"><i class="fa-solid fa-pen"></i> Editar</x-button>
                        </a>
                        <form method="POST" action="{{ route('links.destroy', $link) }}"
                              onsubmit="return confirm('¿Eliminar este enlace permanentemente?')">
                            @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>

                @if ($link->description)
                    <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">{{ $link->description }}</p>
                @endif

                @if ($link->personal_note)
                    <div class="mt-4 rounded-lg border-l-4 border-primary bg-primary/5 p-3">
                        <p class="text-sm text-gray-700 dark:text-gray-300">
                            <i class="fa-solid fa-note-sticky text-primary"></i>
                            {{ $link->personal_note }}
                        </p>
                    </div>
                @endif

                {{-- Texto extraído (F009) --}}
                @if ($link->extracted_text)
                    <div class="mt-4">
                        <h3 class="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Texto extraído</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-6">{{ $link->extracted_text }}</p>
                    </div>
                @endif

                {{-- Resumen IA (F010) --}}
                @if ($link->summary_short)
                    <div class="mt-4 rounded-xl border border-violet-200 bg-violet-50 p-4 dark:border-violet-500/20 dark:bg-violet-500/10">
                        <h3 class="mb-2 text-sm font-semibold text-violet-700 dark:text-violet-400">
                            <i class="fa-solid fa-sparkles"></i> Resumen IA
                        </h3>
                        <p class="text-sm text-gray-700 dark:text-gray-300">{{ $link->summary_short }}</p>
                    </div>
                @endif

                @if ($link->processing_status === 'pending' || $link->processing_status === 'extracting')
                    <div class="mt-4 flex items-center gap-2 rounded-lg bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-500/10 dark:text-blue-400">
                        <i class="fa-solid fa-spinner fa-spin"></i>
                        Extrayendo información del enlace… esto puede tardar unos momentos.
                    </div>
                @endif
            </x-card>
        </div>

        {{-- Columna lateral: metadatos y acciones --}}
        <div class="space-y-4">
            {{-- Acciones rápidas --}}
            <x-card>
                <h3 class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Acciones</h3>
                <div class="space-y-2">
                    <form method="POST" action="{{ route('links.favorite', $link) }}">
                        @csrf
                        <button type="submit"
                                class="flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-sm transition
                                       {{ $link->is_favorite ? 'border-amber-300 bg-amber-50 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400' : 'border-gray-200 text-gray-600 hover:border-gray-400 dark:border-white/10 dark:text-gray-400' }}">
                            <i class="fa-{{ $link->is_favorite ? 'solid' : 'regular' }} fa-star w-4 text-center"></i>
                            {{ $link->is_favorite ? 'Quitar de favoritos' : 'Marcar como favorito' }}
                        </button>
                    </form>

                    <form method="POST" action="{{ route('links.mark-read', $link) }}">
                        @csrf
                        <button type="submit"
                                class="flex w-full items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-400 dark:border-white/10 dark:text-gray-400">
                            <i class="fa-solid fa-check w-4 text-center text-emerald-500"></i> Marcar como leído
                        </button>
                    </form>

                    <form method="POST" action="{{ route('links.mark-pending', $link) }}">
                        @csrf
                        <button type="submit"
                                class="flex w-full items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-400 dark:border-white/10 dark:text-gray-400">
                            <i class="fa-solid fa-clock w-4 text-center text-amber-500"></i> Marcar pendiente
                        </button>
                    </form>

                    <form method="POST" action="{{ route('links.archive', $link) }}">
                        @csrf
                        <button type="submit"
                                class="flex w-full items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-400 dark:border-white/10 dark:text-gray-400">
                            <i class="fa-solid fa-{{ $link->is_archived ? 'box-open' : 'box-archive' }} w-4 text-center"></i>
                            {{ $link->is_archived ? 'Desarchivar' : 'Archivar' }}
                        </button>
                    </form>

                    <a href="{{ $link->url }}" target="_blank" rel="noopener noreferrer"
                       class="flex w-full items-center gap-2 rounded-lg border border-primary px-3 py-2 text-sm font-medium text-primary transition hover:bg-primary hover:text-white">
                        <i class="fa-solid fa-arrow-up-right-from-square w-4 text-center"></i> Abrir enlace
                    </a>
                </div>
            </x-card>

            {{-- Metadatos --}}
            <x-card>
                <h3 class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Información</h3>
                <dl class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Dominio</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ $link->domain }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Plataforma</dt>
                        <dd class="font-medium capitalize text-gray-900 dark:text-white">{{ $link->platform }}</dd>
                    </div>
                    @if ($link->content_type)
                        <div class="flex justify-between">
                            <dt class="text-gray-500">Tipo</dt>
                            <dd class="font-medium capitalize text-gray-900 dark:text-white">{{ str_replace('_', ' ', $link->content_type) }}</dd>
                        </div>
                    @endif
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Estado</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ \App\Models\Link::readingStatusLabel($link->reading_status) }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Guardado</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ $link->created_at->diffForHumans() }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Proyecto</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            <a href="{{ route('projects.show', $link->project) }}" class="hover:text-primary">
                                {{ $link->project?->name }}
                            </a>
                        </dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-gray-500">Carpeta</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            <a href="{{ route('folders.show', $link->folder) }}" class="hover:text-primary">
                                {{ $link->folder?->name }}
                            </a>
                        </dd>
                    </div>
                </dl>
            </x-card>

            {{-- Mover enlace --}}
            <x-card x-data="{ open: false }">
                <button type="button" @click="open = !open"
                        class="flex w-full items-center justify-between text-sm font-semibold text-gray-700 dark:text-gray-300">
                    <span><i class="fa-solid fa-arrow-right-arrow-left text-xs"></i> Mover enlace</span>
                    <i class="fa-solid fa-chevron-down text-xs transition" :class="open ? 'rotate-180' : ''"></i>
                </button>
                <div x-show="open" x-cloak class="mt-3">
                    <form method="POST" action="{{ route('links.move', $link) }}">
                        @csrf
                        <x-label for="move_folder_id">Carpeta destino</x-label>
                        <x-select id="move_folder_id" name="folder_id" required class="mt-1">
                            <option value="">Selecciona carpeta</option>
                            @foreach (\App\Models\Folder::forUser(auth()->id())->with('project')->orderBy('name')->get() as $f)
                                @if ($f->id !== $link->folder_id)
                                    <option value="{{ $f->id }}">{{ $f->project?->name }} / {{ $f->name }}</option>
                                @endif
                            @endforeach
                        </x-select>
                        <x-button type="submit" class="mt-3 w-full justify-center">Mover</x-button>
                    </form>
                </div>
            </x-card>
        </div>
    </div>
@endsection