@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto">
    <h1 class="text-3xl font-bold text-indigo-700 mb-4">Request a Book Summary</h1>

    <div class="bg-white rounded-xl shadow p-6">
        @if ($errors->any())
            <div class="mb-4 rounded-md bg-red-50 border border-red-200 text-red-800 p-3">
                <ul class="list-disc list-inside text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('requests.store') }}" method="POST" class="space-y-4">
            @csrf

            <div>
                <label class="block text-sm font-medium text-gray-700" for="gutenberg">Project Gutenberg URL or ID</label>
                <input id="gutenberg" name="gutenberg" type="text" value="{{ old('gutenberg', $gutenberg ?? '') }}" required class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 @error('gutenberg') border-red-500 focus:border-red-500 focus:ring-red-500 @enderror" placeholder="e.g. https://www.gutenberg.org/ebooks/1342 or 1342">
                <p class="mt-1 text-xs text-gray-500">Paste the Project Gutenberg URL for the book you want summarized, or just its numeric ID.</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700" for="title">Book title (optional)</label>
                <input id="title" name="title" type="text" value="{{ old('title', $title ?? '') }}" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700" for="notes">Notes (optional)</label>
                <textarea id="notes" name="notes" rows="4" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">{{ old('notes') }}</textarea>
                <p class="mt-1 text-xs text-gray-500">Add any context or what you are most interested in (themes, characters, key insights, etc.).</p>
            </div>

            <div>
                <button type="submit" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md">Submit request</button>
                <a href="{{ route('requests.index') }}" class="ml-3 text-indigo-600 hover:underline">My requests</a>
            </div>
        </form>

        <div class="mt-6 p-4 bg-indigo-50 border border-indigo-100 rounded-lg">
            <p class="text-sm text-indigo-900">
                Books featured on this site are sourced from <a href="https://www.gutenberg.org/" class="text-indigo-700 underline" target="_blank" rel="noopener">Project Gutenberg</a> and are part of the public domain. Summaries are generated using AI and may contain inaccuracies.
            </p>
        </div>
    </div>
</div>
@endsection