@extends('layouts.app')

@section('title', 'Nouvelle Analyse')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="mb-8 flex items-center gap-4">
        <a href="{{ route('dashboard') }}" class="text-gray-500 hover:text-gray-700">
            ← Retour
        </a>
        <h1 class="text-3xl font-bold text-gray-900">Nouvelle Analyse</h1>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-8">
        <form action="{{ route('upload.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            
            <!-- File Upload Zone -->
            <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-700">Fichier de logs *</label>
                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-purple-500 transition-colors cursor-pointer group" id="drop-zone">
                    <div class="space-y-1 text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400 group-hover:text-purple-500 transition-colors" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <div class="flex text-sm text-gray-600 justify-center">
                            <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-purple-600 hover:text-purple-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-purple-500">
                                <span>Télécharger un fichier</span>
                                <input id="file-upload" name="file" type="file" class="sr-only" accept=".txt,.log,.gz">
                            </label>
                            <p class="pl-1">ou glisser-déposer</p>
                        </div>
                        <p class="text-xs text-gray-500">
                            Fichiers .txt, .log ou .gz jusqu'à 500Mo
                        </p>
                        <p id="file-name" class="text-sm text-purple-600 font-medium mt-2 hidden"></p>
                    </div>
                </div>
                @error('file')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Site Selection -->
            <div class="space-y-2">
                <label for="site_id" class="block text-sm font-medium text-gray-700">Lier à un site (optionnel)</label>
                <select id="site_id" name="site_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md border">
                    <option value="">-- Aucun site --</option>
                    @foreach($sites as $site)
                        <option value="{{ $site->id }}">{{ $site->name }}</option>
                    @endforeach
                </select>
                @if($canCreateSite)
                <p class="text-xs text-gray-500 mt-1">
                    Le site n'existe pas ? <a href="{{ route('sites.create') }}" class="text-purple-600 hover:text-purple-500">Créer un nouveau site</a>
                </p>
                @endif
                @error('site_id')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end pt-4">
                <button type="submit" class="px-6 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:from-purple-700 hover:to-indigo-700 transition-all shadow-md hover:shadow-lg flex items-center gap-2" id="submit-btn">
                    <span>Lancer l'analyse</span>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                    </svg>
                </button>
            </div>
        </form>
    </div>

    <!-- Info Box -->
    <div class="mt-8 bg-blue-50 rounded-xl p-6 border border-blue-100">
        <h3 class="text-lg font-medium text-blue-900 mb-2">Comment ça marche ?</h3>
        <ul class="list-disc list-inside text-blue-800 space-y-1 text-sm">
            <li>Téléchargez vos fichiers de logs serveur (Apache ou Nginx)</li>
            <li>Nous analysons automatiquement les passages des bots IA</li>
            <li>Les formats compressés (.gz) sont supportés</li>
            <li>L'analyse peut prendre quelques secondes selon la taille du fichier</li>
        </ul>
    </div>
</div>

<script>
    const fileInput = document.getElementById('file-upload');
    const fileNameDisplay = document.getElementById('file-name');
    const dropZone = document.getElementById('drop-zone');

    fileInput.addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
            fileNameDisplay.textContent = 'Fichier sélectionné : ' + this.files[0].name;
            fileNameDisplay.classList.remove('hidden');
        }
    });

    // Drag and drop handlers
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });

    function highlight(e) {
        dropZone.classList.add('border-purple-500', 'bg-purple-50');
    }

    function unhighlight(e) {
        dropZone.classList.remove('border-purple-500', 'bg-purple-50');
    }

    dropZone.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        fileInput.files = files;
        
        if (files && files[0]) {
            fileNameDisplay.textContent = 'Fichier sélectionné : ' + files[0].name;
            fileNameDisplay.classList.remove('hidden');
        }
    }
    
    // Loading state on submit
    document.querySelector('form').addEventListener('submit', function() {
        const btn = document.getElementById('submit-btn');
        btn.disabled = true;
        btn.innerHTML = `
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Analyse en cours...
        `;
    });
</script>
@endsection