@extends('layouts.nova.content-layout')

@section('page-content')

@if ($success)
    <div class="mb-6 rounded-lg bg-green-500/10 border border-green-500/30 text-green-400 px-5 py-4 text-sm">
        Your report was submitted successfully. Thank you — we'll look into it as soon as possible.
    </div>
@endif

<div class="max-w-2xl">
    @guest
        <div class="rounded-lg bg-nova-800 border border-neutral-700 px-6 py-8 text-center">
            <svg class="mx-auto mb-3 h-10 w-10 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                      d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
            </svg>
            <p class="text-neutral-400 text-sm mb-4">You need to be signed in to submit a bug report.</p>
            <a href="{{ route('login') }}" class="inline-block rounded-md bg-accent px-5 py-2 text-sm font-medium text-white hover:opacity-90">
                Sign In
            </a>
        </div>
    @else
        <p class="text-neutral-400 text-sm mb-6">
            Found a bug or have a suggestion? Fill out the form below and our team will review it.
            For security issues, please contact us directly via email.
        </p>

        <form action="{{ route('bug-report.submit') }}" method="POST" class="space-y-5">
            @csrf

            <div>
                <label for="subject" class="block text-sm font-medium text-neutral-300 mb-1">Subject</label>
                <input
                    type="text"
                    id="subject"
                    name="subject"
                    required
                    maxlength="255"
                    value="{{ old('subject') }}"
                    placeholder="Brief summary of the issue"
                    class="w-full rounded-md bg-nova-800 border border-neutral-700 px-4 py-2.5 text-sm text-white placeholder-neutral-500 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent"
                >
                @error('subject')
                    <p class="mt-1 text-xs text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="description" class="block text-sm font-medium text-neutral-300 mb-1">Description</label>
                <textarea
                    id="description"
                    name="description"
                    required
                    rows="7"
                    maxlength="5000"
                    placeholder="Describe the bug in detail — steps to reproduce, what you expected, and what actually happened."
                    class="w-full rounded-md bg-nova-800 border border-neutral-700 px-4 py-2.5 text-sm text-white placeholder-neutral-500 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent resize-y"
                >{{ old('description') }}</textarea>
                @error('description')
                    <p class="mt-1 text-xs text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <button type="submit"
                        class="rounded-md bg-accent px-6 py-2.5 text-sm font-medium text-white hover:opacity-90 transition-opacity">
                    Submit Report
                </button>
            </div>
        </form>
    @endguest
</div>

@endsection