@extends('layouts.app')

@section('title', 'Exportar biblioteca')

@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-solid fa-file-export text-primary"></i> Exportar biblioteca
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Descarga tus enlaces en CSV, JSON o Markdown. Máximo 5 000 registros por exportación.
        </p>
    </div>

    <form id="export-form" action="{{ route('export.download') }}" method="GET"
          class="space-y-6">

        {{-- Ámbito --}}
        <div x-data="{ scope: 'all' }">
            <fieldset class="space-y-3">
                <legend class="text-sm font-semibold text-gray-700 dark:text-gray-300">¿Qué exportar?</legend>

                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="radio" name="scope" value="all" x-model="scope" checked
                           class="accent-primary">
                    <span class="text-sm text-gray-700 dark:text-gray-200">Todos mis enlaces</span>
                </label>

                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="radio" name="scope" value="project" x-model="scope"
                           class="accent-primary">
                    <span class="text-sm text-gray-700 dark:text-gray-200">Un proyecto específico</span>
                </label>

                <div x-show="scope === 'project'" x-transition class="ml-7">
                    <select name="project_id"
                            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">
                        <option value="">— Selecciona un proyecto —</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}">{{ $project->name }}</option>
                        @endforeach
                    </select>
                </div>

                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="radio" name="scope" value="folder" x-model="scope"
                           class="accent-primary">
                    <span class="text-sm text-gray-700 dark:text-gray-200">Una carpeta específica</span>
                </label>

                <div x-show="scope === 'folder'" x-transition class="ml-7">
                    <select name="folder_id"
                            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">
                        <option value="">— Selecciona una carpeta —</option>
                        @foreach($folders as $folder)
                            <option value="{{ $folder->id }}">{{ $folder->name }}</option>
                        @endforeach
                    </select>
                </div>
            </fieldset>
        </div>

        {{-- Formato --}}
        <fieldset class="space-y-3">
            <legend class="text-sm font-semibold text-gray-700 dark:text-gray-300">Formato</legend>

            <div class="grid grid-cols-3 gap-3">
                @foreach(['csv' => ['fa-file-csv', 'CSV', 'Abre en Excel / Google Sheets'], 'json' => ['fa-code', 'JSON', 'Para desarrolladores / APIs'], 'md' => ['fa-file-lines', 'Markdown', 'Legible y portable']] as $fmt => [$icon, $label, $desc])
                <label class="relative flex flex-col gap-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 cursor-pointer hover:border-primary transition-colors has-[:checked]:border-primary has-[:checked]:bg-primary/5">
                    <input type="radio" name="format" value="{{ $fmt }}" {{ $fmt === 'csv' ? 'checked' : '' }}
                           class="sr-only">
                    <i class="fa-solid {{ $icon }} text-xl text-primary"></i>
                    <span class="font-semibold text-sm text-gray-800 dark:text-gray-100">{{ $label }}</span>
                    <span class="text-xs text-gray-400 dark:text-gray-500">{{ $desc }}</span>
                </label>
                @endforeach
            </div>
        </fieldset>

        {{-- Opciones --}}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 space-y-3">
            <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">Opciones</p>

            <label class="flex items-start gap-3 cursor-pointer">
                <input type="checkbox" name="include_ai" value="1"
                       class="mt-0.5 accent-primary rounded">
                <div>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Incluir resúmenes IA</span>
                    <p class="text-xs text-gray-400 dark:text-gray-500">Añade summary_short, puntos clave y análisis a cada enlace.</p>
                </div>
            </label>
        </div>

        <button type="submit"
                class="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-dark text-white font-semibold rounded-xl transition-colors w-full justify-center">
            <i class="fa-solid fa-download"></i> Descargar exportación
        </button>

    </form>

    {{-- Compartir vistas públicas --}}
    @if($projects->count())
    <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 flex items-center gap-2">
            <i class="fa-solid fa-share-nodes text-primary"></i> Compartir proyectos públicamente
        </h2>
        <p class="text-xs text-gray-400 dark:text-gray-500">
            Activa la visibilidad pública en un proyecto para obtener un enlace que puedes compartir con cualquiera, sin necesidad de cuenta.
        </p>
        <div class="space-y-2">
            @foreach($projects as $project)
            <div class="flex items-center justify-between gap-3 py-2 border-b border-gray-100 dark:border-gray-700 last:border-0">
                <span class="text-sm text-gray-700 dark:text-gray-200 font-medium">{{ $project->name }}</span>
                <a href="{{ route('projects.edit', $project) }}"
                   class="text-xs text-primary hover:underline flex-shrink-0">
                    <i class="fa-solid fa-pen mr-1"></i>Configurar
                </a>
            </div>
            @endforeach
        </div>
    </div>
    @endif

</div>
@endsection