@extends('layouts.app')

@section('title', 'Guardar desde iPhone')

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

    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <i class="fa-brands fa-apple"></i> Guardar desde iPhone
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Guarda cualquier enlace desde el menú Compartir de Safari directamente a tu biblioteca.
        </p>
    </div>

    {{-- Token generado (flash) --}}
    @if(session('ios_token'))
    <div x-data="{ copied: false }" class="rounded-xl border-2 border-emerald-400 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 p-5 space-y-3">
        <p class="text-sm font-semibold text-emerald-700 dark:text-emerald-300">
            <i class="fa-solid fa-circle-check mr-1"></i>
            Token generado — cópialo ahora para pegarlo en el atajo manual
        </p>
        <div class="flex items-center gap-2">
            <code class="flex-1 text-xs bg-white dark:bg-gray-900 border border-emerald-200 dark:border-emerald-700 rounded-lg px-3 py-2 text-gray-800 dark:text-gray-200 break-all select-all font-mono">{{ session('ios_token') }}</code>
            <button @click="navigator.clipboard.writeText('{{ session('ios_token') }}').then(() => { copied = true; setTimeout(() => copied = false, 2000) })"
                    class="flex-shrink-0 px-3 py-2 rounded-lg bg-emerald-500 hover:bg-emerald-600 text-white text-sm font-medium transition-colors">
                <span x-show="!copied"><i class="fa-solid fa-copy"></i></span>
                <span x-show="copied"><i class="fa-solid fa-check"></i></span>
            </button>
        </div>
        <p class="text-xs text-emerald-600 dark:text-emerald-400">
            URL de tu instancia: <code class="bg-emerald-100 dark:bg-emerald-900/40 px-1.5 py-0.5 rounded font-mono">{{ $baseUrl }}</code>
        </p>
    </div>
    @endif

    {{-- Aviso de restricción de iOS --}}
    <div class="rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 p-4">
        <p class="text-sm font-semibold text-amber-800 dark:text-amber-300 flex items-center gap-2">
            <i class="fa-solid fa-triangle-exclamation"></i>
            Restricción de iOS — elige tu versión
        </p>
        <p class="text-xs text-amber-700 dark:text-amber-400 mt-1.5">
            iOS bloquea archivos de atajo que no vienen firmados por Apple (iCloud). Sigue el camino que corresponda a tu versión de iOS.
        </p>
    </div>

    {{-- Tabs --}}
    <div x-data="{ tab: 'old' }">

        <div class="flex rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
            <button @click="tab = 'old'"
                    :class="tab === 'old' ? 'bg-white dark:bg-gray-800 font-semibold text-gray-900 dark:text-white' : 'bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                    class="flex-1 py-3 text-sm transition-colors border-r border-gray-200 dark:border-gray-700">
                <i class="fa-brands fa-apple mr-1"></i> iOS 15 / 16
            </button>
            <button @click="tab = 'new'"
                    :class="tab === 'new' ? 'bg-white dark:bg-gray-800 font-semibold text-gray-900 dark:text-white' : 'bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
                    class="flex-1 py-3 text-sm transition-colors">
                <i class="fa-brands fa-apple mr-1"></i> iOS 17 y superior
            </button>
        </div>

        {{-- iOS 15 / 16: habilitar atajos no firmados + descargar archivo --}}
        <div x-show="tab === 'old'" class="mt-4 space-y-4">

            <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 space-y-4">
                <h2 class="font-semibold text-gray-800 dark:text-gray-100">
                    Paso 1 — Habilita los atajos no firmados
                </h2>
                <ol class="space-y-3 text-sm text-gray-600 dark:text-gray-300">
                    <li class="flex gap-3">
                        <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs font-bold flex items-center justify-center">1</span>
                        Abre <strong>Ajustes</strong> en tu iPhone
                    </li>
                    <li class="flex gap-3">
                        <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs font-bold flex items-center justify-center">2</span>
                        Desplázate hasta <strong>Atajos</strong> y tócalo
                    </li>
                    <li class="flex gap-3">
                        <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs font-bold flex items-center justify-center">3</span>
                        Activa <strong>Permitir atajos de fuente desconocida</strong>
                    </li>
                    <li class="flex gap-3">
                        <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-xs font-bold flex items-center justify-center">4</span>
                        Vuelve aquí y descarga el atajo
                    </li>
                </ol>

                @if($hasToken)
                <div class="rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 px-3 py-2 text-xs text-amber-700 dark:text-amber-300">
                    <i class="fa-solid fa-triangle-exclamation mr-1"></i>
                    Ya tienes un atajo activo. Descargar uno nuevo revocará el anterior.
                </div>
                @endif

                <a href="{{ route('ios.download') }}"
                   class="flex items-center justify-center gap-2 w-full px-5 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition-colors text-sm">
                    <i class="fa-solid fa-download"></i>
                    Descargar atajo (.shortcut)
                </a>
                <p class="text-xs text-center text-gray-400 dark:text-gray-500">
                    Ábrelo desde Safari en tu iPhone — iOS lo importará en la app Atajos.
                </p>
            </div>

        </div>

        {{-- iOS 17+: crear atajo manualmente --}}
        <div x-show="tab === 'new'" class="mt-4 space-y-4">

            {{-- Generar token --}}
            <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 space-y-3">
                <h2 class="font-semibold text-gray-800 dark:text-gray-100">
                    Paso 1 — Genera tu token de acceso
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Necesitarás estos datos al crear el atajo manualmente. El token se muestra una sola vez.
                </p>
                <form method="POST" action="{{ route('ios.token') }}">
                    @csrf
                    <button type="submit"
                            class="flex items-center gap-2 px-4 py-2 bg-gray-800 dark:bg-gray-200 hover:bg-gray-700 dark:hover:bg-white text-white dark:text-gray-900 text-sm font-medium rounded-lg transition-colors">
                        <i class="fa-solid fa-key"></i>
                        {{ $hasToken ? 'Regenerar token' : 'Generar token' }}
                    </button>
                </form>
                <div class="text-xs text-gray-500 dark:text-gray-400 space-y-1 pt-1">
                    <p><span class="font-medium text-gray-700 dark:text-gray-300">URL de tu instancia:</span>
                        <code class="bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded font-mono select-all">{{ $baseUrl }}</code>
                    </p>
                    <p><span class="font-medium text-gray-700 dark:text-gray-300">Endpoint:</span>
                        <code class="bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded font-mono">{{ $baseUrl }}/api/ext/links</code>
                    </p>
                </div>
            </div>

            {{-- Instrucciones manuales --}}
            <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 space-y-5">
                <h2 class="font-semibold text-gray-800 dark:text-gray-100">
                    Paso 2 — Crea el atajo manualmente
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Abre la app <strong>Atajos</strong> en tu iPhone → <strong>+</strong> (nuevo atajo) → agrega estas 3 acciones en orden:
                </p>

                {{-- Acción 1 --}}
                <div class="space-y-2">
                    <div class="flex items-center gap-2">
                        <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 text-xs font-bold flex items-center justify-center">1</span>
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Diccionario</p>
                    </div>
                    <div class="ml-8 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-3 text-xs text-gray-600 dark:text-gray-300 space-y-1">
                        <p>Busca <strong>"Diccionario"</strong> en la barra de búsqueda de acciones.</p>
                        <p>Agrega un elemento → Tipo: <strong>Texto</strong> · Clave: <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">url</code> · Valor: toca el campo de valor → elige <strong>Entrada de atajo</strong> (variable mágica).</p>
                    </div>
                </div>

                {{-- Acción 2 --}}
                <div class="space-y-2">
                    <div class="flex items-center gap-2">
                        <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 text-xs font-bold flex items-center justify-center">2</span>
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Obtener contenidos de URL</p>
                    </div>
                    <div class="ml-8 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-3 text-xs text-gray-600 dark:text-gray-300 space-y-2">
                        <p>Busca <strong>"Obtener contenidos de URL"</strong>.</p>
                        <p>Configura así:</p>
                        <ul class="space-y-1 ml-2">
                            <li>· URL: <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded select-all">{{ $baseUrl }}/api/ext/links</code></li>
                            <li>· Método: <strong>POST</strong></li>
                            <li>· Cabeceras → Añadir: Nombre <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">Authorization</code>, Valor <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">Bearer TU_TOKEN</code></li>
                            <li>· Cabeceras → Añadir: Nombre <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">Accept</code>, Valor <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">application/json</code></li>
                            <li>· Cuerpo de la petición: <strong>JSON</strong> → usa el <strong>Diccionario</strong> del paso anterior</li>
                        </ul>
                    </div>
                </div>

                {{-- Acción 3 --}}
                <div class="space-y-2">
                    <div class="flex items-center gap-2">
                        <span class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 text-xs font-bold flex items-center justify-center">3</span>
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Mostrar notificación</p>
                    </div>
                    <div class="ml-8 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-3 text-xs text-gray-600 dark:text-gray-300 space-y-1">
                        <p>Busca <strong>"Mostrar notificación"</strong>.</p>
                        <p>Título: <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">LinkVault</code> · Cuerpo: <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">¡Enlace guardado!</code></p>
                    </div>
                </div>

                {{-- Configurar compartir --}}
                <div class="rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 p-3 text-xs text-blue-700 dark:text-blue-300 space-y-1">
                    <p class="font-semibold"><i class="fa-solid fa-circle-info mr-1"></i>Configurar para el Share Sheet</p>
                    <p>Toca el nombre del atajo (arriba) → <strong>Configuración del atajo</strong> → activa <strong>Mostrar en la hoja para compartir</strong> → en Tipos de entrada deja solo <strong>URLs</strong>.</p>
                </div>
            </div>

        </div>
    </div>

    {{-- Tip: anclar en share sheet --}}
    <div class="rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 p-4">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">
            <i class="fa-solid fa-lightbulb text-yellow-400 mr-1"></i> Tip: Ancla el atajo arriba
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
            En Safari, toca Compartir → desliza la fila de atajos → mantén pulsado <strong>Guardar en LinkVault</strong> → <strong>Mantener en favoritos</strong>.
        </p>
    </div>

</div>
@endsection