@extends('layouts.public')

@section('title', 'Signaler un bug - ' . $project->name)

@section('content')
<div class="max-w-2xl mx-auto space-y-6" x-data="bugReporter()">
    <!-- Card Header -->
    <div class="text-center space-y-2">
        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider text-indigo-700 bg-indigo-50 border border-indigo-200">
            Signalement express &bull; {{ $project->name }}
        </span>
        <h1 class="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">
            Transmettre un bug ou une demande
        </h1>
        <p class="text-xs sm:text-sm text-slate-500 max-w-md mx-auto">
            Pas besoin de mot de passe. Remplissez simplement les détails ci-dessous et notre équipe technique sera immédiatement notifiée.
        </p>
    </div>

    <!-- Main Report Card -->
    <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-xl shadow-slate-100">
        @if($errors->any())
            <div class="mb-6 p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-700 text-xs">
                {{ $errors->first() }}
            </div>
        @endif

        <form action="{{ route('public.report.submit', $project->public_token) }}" method="POST" enctype="multipart/form-data" class="space-y-5">
            @csrf

            <!-- Hidden System Info Auto-gathered -->
            <input type="hidden" name="screen_resolution" :value="screenResolution">
            <input type="hidden" name="page_url" :value="window.location.href">

            <!-- Type / Category Selection Tiles -->
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                    De quoi s'agit-il ? <span class="text-rose-500">*</span>
                </label>
                <div class="grid grid-cols-3 gap-3">
                    <label class="p-3 rounded-2xl border-2 text-center cursor-pointer transition-all flex flex-col items-center justify-center space-y-1"
                        :class="type === 'bug' ? 'border-rose-500 bg-rose-50/50 text-rose-900 font-bold' : 'border-slate-200 hover:border-slate-300 text-slate-700'">
                        <input type="radio" name="type" value="bug" x-model="type" class="sr-only">
                        <span class="text-xl">🐞</span>
                        <span class="text-xs">Un Bug</span>
                    </label>

                    <label class="p-3 rounded-2xl border-2 text-center cursor-pointer transition-all flex flex-col items-center justify-center space-y-1"
                        :class="type === 'feature' ? 'border-indigo-500 bg-indigo-50/50 text-indigo-900 font-bold' : 'border-slate-200 hover:border-slate-300 text-slate-700'">
                        <input type="radio" name="type" value="feature" x-model="type" class="sr-only">
                        <span class="text-xl">✨</span>
                        <span class="text-xs">Nouvel Ajout</span>
                    </label>

                    <label class="p-3 rounded-2xl border-2 text-center cursor-pointer transition-all flex flex-col items-center justify-center space-y-1"
                        :class="type === 'improvement' ? 'border-emerald-500 bg-emerald-50/50 text-emerald-900 font-bold' : 'border-slate-200 hover:border-slate-300 text-slate-700'">
                        <input type="radio" name="type" value="improvement" x-model="type" class="sr-only">
                        <span class="text-xl">⚡</span>
                        <span class="text-xs">Amélioration</span>
                    </label>
                </div>
            </div>

            <!-- Priority / Urgency -->
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-2">
                    Degré d'urgence <span class="text-rose-500">*</span>
                </label>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                    <label class="p-2.5 rounded-xl border text-center cursor-pointer transition-all text-xs"
                        :class="priority === 'urgent' ? 'bg-red-600 text-white font-bold border-red-600' : 'bg-slate-50 border-slate-200 text-slate-700'">
                        <input type="radio" name="priority" value="urgent" x-model="priority" class="sr-only">
                        ⚡ Bloquant
                    </label>
                    <label class="p-2.5 rounded-xl border text-center cursor-pointer transition-all text-xs"
                        :class="priority === 'high' ? 'bg-amber-100 text-amber-800 font-bold border-amber-300' : 'bg-slate-50 border-slate-200 text-slate-700'">
                        <input type="radio" name="priority" value="high" x-model="priority" class="sr-only">
                        🔥 Important
                    </label>
                    <label class="p-2.5 rounded-xl border text-center cursor-pointer transition-all text-xs"
                        :class="priority === 'normal' ? 'bg-blue-100 text-blue-800 font-bold border-blue-300' : 'bg-slate-50 border-slate-200 text-slate-700'">
                        <input type="radio" name="priority" value="normal" x-model="priority" class="sr-only">
                        Normal
                    </label>
                    <label class="p-2.5 rounded-xl border text-center cursor-pointer transition-all text-xs"
                        :class="priority === 'low' ? 'bg-slate-200 text-slate-800 font-bold border-slate-300' : 'bg-slate-50 border-slate-200 text-slate-700'">
                        <input type="radio" name="priority" value="low" x-model="priority" class="sr-only">
                        Faible
                    </label>
                </div>
            </div>

            <!-- Title -->
            <div>
                <label for="title" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                    Titre ou résumé du problème <span class="text-rose-500">*</span>
                </label>
                <input type="text" id="title" name="title" required value="{{ old('title') }}"
                    class="w-full px-4 py-2.5 rounded-xl border border-slate-300 text-sm font-semibold focus:ring-2 focus:ring-indigo-500"
                    placeholder="Ex: Le bouton de commande ne répond pas sur iPhone...">
            </div>

            <!-- Description -->
            <div>
                <label for="description" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">
                    Description détaillée <span class="text-rose-500">*</span>
                </label>
                <textarea id="description" name="description" rows="4" required
                    class="w-full px-4 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-indigo-500 leading-relaxed"
                    placeholder="Expliquez ce qui s'est produit, ce que vous faisiez au moment du bug, ou décrivez votre besoin...">{{ old('description') }}</textarea>
            </div>

            <!-- Screenshot / File with Clipboard Paste support -->
            <div class="p-4 rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 hover:bg-indigo-50/30 transition-colors text-center relative"
                @paste.window="handlePaste($event)">
                <input type="file" id="attachment" name="attachment" x-ref="fileInput" @change="handleFileSelect($event)" class="sr-only">
                
                <div class="space-y-2 cursor-pointer" @click="$refs.fileInput.click()">
                    <div class="w-10 h-10 mx-auto rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                    <div class="text-xs text-slate-700 font-semibold">
                        <span class="text-indigo-600 hover:underline">Cliquez pour choisir un fichier</span> ou faites un <kbd class="px-1.5 py-0.5 rounded bg-slate-200 text-slate-700 font-mono text-[10px]">Ctrl+V</kbd> pour coller une capture d'écran !
                    </div>
                    <p class="text-[11px] text-slate-400">PNG, JPG, PDF ou document (Max 10 Mo)</p>
                </div>

                <!-- Preview file if attached -->
                <div x-show="fileName" x-cloak class="mt-3 inline-flex items-center space-x-2 px-3 py-1.5 rounded-xl bg-white border border-indigo-200 text-xs font-semibold text-indigo-700">
                    <span>📎 <span x-text="fileName"></span></span>
                    <button type="button" @click.stop="clearFile()" class="text-rose-500 hover:text-rose-700">✕</button>
                </div>
            </div>

            <!-- Client Info -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-3 border-t border-slate-100">
                <div>
                    <label for="guest_name" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">
                        Votre nom / Société <span class="text-rose-500">*</span>
                    </label>
                    <input type="text" id="guest_name" name="guest_name" required value="{{ old('guest_name') }}"
                        class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs focus:ring-2 focus:ring-indigo-500"
                        placeholder="Ex: Julie (Nexus Store)">
                </div>

                <div>
                    <label for="guest_email" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">
                        Votre Email (pour le suivi)
                    </label>
                    <input type="email" id="guest_email" name="guest_email" value="{{ old('guest_email') }}"
                        class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs focus:ring-2 focus:ring-indigo-500"
                        placeholder="nom@entreprise.com">
                </div>
            </div>

            <div class="pt-4 border-t border-slate-100">
                <button type="submit" class="w-full py-3 px-6 rounded-2xl bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-sm shadow-lg shadow-indigo-200 transition-all flex items-center justify-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                    </svg>
                    Envoyer le rapport immédiatement
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function bugReporter() {
        return {
            type: 'bug',
            priority: 'normal',
            fileName: '',
            screenResolution: window.screen.width + 'x' + window.screen.height,

            handleFileSelect(e) {
                if (e.target.files.length > 0) {
                    this.fileName = e.target.files[0].name;
                }
            },

            clearFile() {
                this.$refs.fileInput.value = '';
                this.fileName = '';
            },

            handlePaste(e) {
                const items = (e.clipboardData || e.originalEvent.clipboardData).items;
                for (let index in items) {
                    const item = items[index];
                    if (item.kind === 'file') {
                        const blob = item.getAsFile();
                        const file = new File([blob], "capture-ecran-" + Date.now() + ".png", { type: blob.type });
                        const container = new DataTransfer();
                        container.items.add(file);
                        this.$refs.fileInput.files = container.files;
                        this.fileName = file.name;
                        break;
                    }
                }
            }
        }
    }
</script>
@endpush