@extends('layouts.app')

@section('title', $link->display_title . ' — Modo lectura')

@section('content')
<div class="max-w-3xl mx-auto py-8 px-4 space-y-6">

    {{-- Volver --}}
    <div class="flex items-center gap-3 text-sm">
        <a href="{{ url()->previous(route('biblioteca.index')) }}"
           class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors flex items-center gap-1">
            <i class="fa-solid fa-arrow-left"></i> Volver
        </a>
        <span class="text-gray-300 dark:text-gray-600">/</span>
        <a href="{{ $link->url }}" target="_blank" rel="noopener noreferrer"
           class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors truncate max-w-xs">
            {{ $link->domain }}
            <i class="fa-solid fa-arrow-up-right-from-square ml-1 text-xs"></i>
        </a>
    </div>

    {{-- Imagen de portada --}}
    @if($link->image_url)
    <div class="rounded-2xl overflow-hidden max-h-72">
        <img src="{{ $link->image_url }}" alt="{{ $link->display_title }}"
             class="w-full h-full object-cover">
    </div>
    @endif

    {{-- Encabezado --}}
    <div class="space-y-2">
        {{-- Proyecto / Carpeta --}}
        @if($link->project)
        <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
                  style="background-color: {{ $link->project->color }}">
                <i class="fa-solid {{ $link->project->icon }}"></i>
                {{ $link->project->name }}
            </span>
            @if($link->folder)
                <i class="fa-solid fa-chevron-right text-xs"></i>
                <span>{{ $link->folder->name }}</span>
            @endif
        </div>
        @endif

        <h1 class="text-2xl font-bold text-gray-900 dark:text-white leading-tight">
            {{ $link->display_title }}
        </h1>

        @if($link->description)
            <p class="text-gray-600 dark:text-gray-300 text-base leading-relaxed">{{ $link->description }}</p>
        @endif

        {{-- Meta --}}
        <div class="flex flex-wrap items-center gap-3 text-xs text-gray-400 dark:text-gray-500 pt-1">
            @if($link->favicon_url)
                <img src="{{ $link->favicon_url }}" alt="" class="w-4 h-4 rounded-sm">
            @endif
            <span>{{ $link->domain }}</span>
            @if($link->published_at)
                <span>·</span>
                <span>{{ $link->published_at->format('d/m/Y') }}</span>
            @endif
            @if($link->platform && $link->platform !== 'web')
                <span>·</span>
                <span class="capitalize">{{ $link->platform }}</span>
            @endif
            @if($link->content_type)
                <span class="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded capitalize">{{ $link->content_type }}</span>
            @endif
        </div>
    </div>

    {{-- Resumen IA --}}
    @if($link->summary_short || $link->key_points || $link->analysis)
    <div class="rounded-2xl bg-gradient-to-br from-violet-50 to-blue-50 dark:from-violet-900/20 dark:to-blue-900/20 border border-violet-100 dark:border-violet-800/30 p-5 space-y-4">
        <div class="flex items-center gap-2 text-sm font-semibold text-violet-700 dark:text-violet-300">
            <i class="fa-solid fa-wand-magic-sparkles"></i> Resumen IA
        </div>
        @if($link->summary_short)
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed">{{ $link->summary_short }}</p>
        @endif
        @if($link->key_points)
            <div>
                <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wide">Puntos clave</p>
                <ul class="space-y-1">
                    @foreach($link->key_points as $point)
                        <li class="flex items-start gap-2 text-sm text-gray-700 dark:text-gray-200">
                            <i class="fa-solid fa-circle-check text-violet-400 mt-0.5 flex-shrink-0 text-xs"></i>
                            {{ $point }}
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
        @if($link->analysis)
            <div class="border-t border-violet-100 dark:border-violet-800/30 pt-3">
                <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wide">Análisis</p>
                <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">{{ $link->analysis }}</p>
            </div>
        @endif
    </div>
    @elseif($link->processing_status === 'pending' || $link->processing_status === 'extracting')
    <div class="rounded-2xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 p-5 text-center text-sm text-gray-400 dark:text-gray-500">
        <i class="fa-solid fa-spinner fa-spin mr-2"></i>
        Extrayendo información... (puede tomar unos momentos)
    </div>
    @endif

    {{-- Texto extraído --}}
    @if($link->extracted_text)
    <div class="space-y-3">
        <h2 class="font-semibold text-gray-800 dark:text-gray-200 flex items-center gap-2">
            <i class="fa-solid fa-align-left text-gray-400"></i> Contenido
        </h2>
        <div class="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap bg-gray-50 dark:bg-gray-800/50 rounded-xl p-5 max-h-[60vh] overflow-y-auto">{{ $link->extracted_text }}</div>
    </div>
    @endif

    {{-- Contenido relacionado (F014) --}}
    @if(!empty($related) && count($related) > 0)
    <div class="space-y-3">
        <h2 class="font-semibold text-gray-800 dark:text-gray-200 flex items-center gap-2">
            <i class="fa-solid fa-link text-gray-400"></i> Contenido relacionado
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            @foreach($related as $item)
                <a href="{{ route('links.read', $item['link']) }}"
                   class="block rounded-xl bg-white/60 dark:bg-gray-800/60 backdrop-blur border border-gray-200 dark:border-gray-700 p-3 hover:border-primary dark:hover:border-primary transition-colors">
                    <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                        {{ $item['link']->display_title }}
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{{ $item['link']->domain }}</p>
                    <p class="text-xs text-primary mt-1">{{ round($item['similarity'] * 100) }}% similar</p>
                </a>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Nota personal --}}
    @if($link->personal_note)
    <div class="rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800/30 p-4">
        <p class="text-xs font-semibold text-amber-600 dark:text-amber-400 mb-1">
            <i class="fa-solid fa-note-sticky mr-1"></i> Nota personal
        </p>
        <p class="text-sm text-gray-700 dark:text-gray-200">{{ $link->personal_note }}</p>
    </div>
    @endif

    {{-- Tags y categoría --}}
    @if($link->category || $link->tags->count())
    <div class="flex flex-wrap items-center gap-2">
        @if($link->category)
            <span class="inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-full border font-medium"
                  style="border-color: {{ $link->category->color }}; color: {{ $link->category->color }}">
                <i class="fa-solid {{ $link->category->icon }}"></i>
                {{ $link->category->name }}
            </span>
        @endif
        @foreach($link->tags as $tag)
            <span class="text-xs px-2.5 py-1 rounded-full font-medium"
                  style="background-color: {{ $tag->color }}22; color: {{ $tag->color }}">
                {{ $tag->name }}
            </span>
        @endforeach
    </div>
    @endif

    {{-- Acciones rápidas --}}
    <div class="flex flex-wrap items-center gap-3 pt-4 border-t border-gray-100 dark:border-gray-700">
        {{-- Favorito --}}
        <form method="POST" action="{{ route('links.favorite', $link) }}">
            @csrf
            <button type="submit"
                    class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border text-sm transition-colors
                        {{ $link->is_favorite ? 'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-700 text-amber-600 dark:text-amber-400' : 'border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:border-amber-300 hover:text-amber-500' }}">
                <i class="fa-{{ $link->is_favorite ? 'solid' : 'regular' }} fa-star"></i>
                {{ $link->is_favorite ? 'Quitar favorito' : 'Favorito' }}
            </button>
        </form>

        {{-- Marcar leído --}}
        @if($link->reading_status !== 'read')
        <form method="POST" action="{{ route('links.mark-read', $link) }}">
            @csrf
            <button type="submit"
                    class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-green-200 dark:border-green-700 text-green-600 dark:text-green-400 text-sm hover:bg-green-50 dark:hover:bg-green-900/20 transition-colors">
                <i class="fa-solid fa-check"></i> Marcar leído
            </button>
        </form>
        @endif

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

        {{-- Editar --}}
        <a href="{{ route('links.edit', $link) }}"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <i class="fa-solid fa-pen"></i> Editar
        </a>

        {{-- Recordatorio --}}
        <a href="{{ route('reminders.create', $link) }}"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <i class="fa-solid fa-bell"></i> Recordatorio
        </a>

        {{-- Abrir --}}
        <a href="{{ $link->url }}" target="_blank" rel="noopener noreferrer"
           class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-primary hover:bg-primary-dark text-white text-sm transition-colors ml-auto">
            <i class="fa-solid fa-arrow-up-right-from-square"></i> Abrir original
        </a>
    </div>
</div>
@endsection