@extends('layouts.app')

@section('title', 'Extensión Chrome — Tokens de acceso')

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

    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <i class="fa-brands fa-chrome text-primary"></i> Extensión Chrome
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Genera un token para conectar la extensión LinkVault a tu cuenta. Cada token tiene permisos mínimos y puedes revocarlos en cualquier momento.
        </p>
    </div>

    {{-- Token recién creado (sesión flash) --}}
    @if(session('plain_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 creado — cópialo ahora, no se volverá a mostrar
        </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('plain_token') }}</code>
            <button @click="navigator.clipboard.writeText('{{ session('plain_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>
    </div>
    @endif

    @if(session('success') && !session('plain_token'))
    <div class="rounded-xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 px-4 py-3 text-sm text-green-700 dark:text-green-300">
        <i class="fa-solid fa-circle-check mr-1"></i> {{ session('success') }}
    </div>
    @endif

    {{-- Formulario nuevo token --}}
    <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">Nuevo token</h2>
        <form method="POST" action="{{ route('extension.store') }}" class="flex items-end gap-3">
            @csrf
            <div class="flex-1">
                <label for="token-name" class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Nombre (ej. "Chrome en casa")</label>
                <input id="token-name" name="name" type="text" required maxlength="80"
                       placeholder="Mi extensión Chrome"
                       class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                @error('name')
                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                @enderror
            </div>
            <button type="submit"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary-dark text-white text-sm font-medium rounded-lg transition-colors whitespace-nowrap">
                <i class="fa-solid fa-key"></i> Generar token
            </button>
        </form>
    </div>

    {{-- Tokens activos --}}
    <div class="space-y-3">
        <h2 class="font-semibold text-gray-800 dark:text-gray-100">Tokens activos</h2>

        @forelse($tokens as $token)
        <div class="flex items-center justify-between gap-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3">
            <div>
                <p class="text-sm font-medium text-gray-800 dark:text-gray-100">{{ $token->name }}</p>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
                    Creado {{ $token->created_at->diffForHumans() }}
                    @if($token->last_used_at)
                        · Último uso {{ $token->last_used_at->diffForHumans() }}
                    @else
                        · Nunca usado
                    @endif
                </p>
            </div>
            <form method="POST" action="{{ route('extension.destroy', $token) }}"
                  onsubmit="return confirm('¿Revocar este token? La extensión perderá acceso.')">
                @csrf
                @method('DELETE')
                <button type="submit"
                        class="text-xs px-3 py-1.5 rounded-lg border border-red-200 dark:border-red-700 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
                    <i class="fa-solid fa-trash-can mr-1"></i> Revocar
                </button>
            </form>
        </div>
        @empty
        <p class="text-sm text-gray-400 dark:text-gray-500 text-center py-6">
            <i class="fa-solid fa-key text-2xl mb-2 block text-gray-300 dark:text-gray-600"></i>
            Aún no tienes tokens. Genera uno para conectar la extensión.
        </p>
        @endforelse
    </div>

    {{-- Instrucciones --}}
    <div class="rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 p-5 space-y-3">
        <h2 class="font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2">
            <i class="fa-solid fa-circle-info text-primary"></i> Cómo conectar la extensión
        </h2>
        <ol class="space-y-2 text-sm text-gray-600 dark:text-gray-300 list-decimal list-inside">
            <li>Descarga e instala la extensión desde <code class="text-xs bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded">chrome://extensions</code> en modo desarrollador.</li>
            <li>Abre el popup de la extensión y haz clic en <strong>Conectar cuenta</strong>.</li>
            <li>Introduce la URL de tu instancia: <code class="text-xs bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded">{{ config('app.url') }}</code></li>
            <li>Pega tu token de acceso y haz clic en <strong>Guardar</strong>.</li>
        </ol>
    </div>

</div>
@endsection