<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';

const form = useForm({
    date: new Date().toISOString().split('T')[0],
    title: '',
    summary: '',
    notes: '',
});

const submit = () => {
    form.post(route('admin.docket-entries.store'));
};
</script>

<template>
    <div class="min-h-screen bg-gray-100">
        <Head title="Create Docket Entry" />

        <!-- Header -->
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">
                            Create Docket Entry
                        </h1>
                        <p class="text-sm text-gray-600 mt-1">
                            Add a new entry to the court docket
                        </p>
                    </div>
                    <Link
                        :href="route('admin.docket-entries.index')"
                        class="px-4 py-2 text-sm text-gray-700 hover:text-gray-900 transition-colors"
                    >
                        ← Back to Entries
                    </Link>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="bg-white rounded-lg shadow p-6">
                <form @submit.prevent="submit" class="space-y-6">
                    <!-- Date -->
                    <div>
                        <InputLabel for="date" value="Date *" />
                        <TextInput
                            id="date"
                            type="date"
                            class="mt-1 block w-full"
                            v-model="form.date"
                            required
                        />
                        <InputError class="mt-2" :message="form.errors.date" />
                    </div>

                    <!-- Title -->
                    <div>
                        <InputLabel for="title" value="Title *" />
                        <TextInput
                            id="title"
                            type="text"
                            class="mt-1 block w-full"
                            v-model="form.title"
                            required
                            placeholder="e.g., Motion to Dismiss"
                        />
                        <InputError class="mt-2" :message="form.errors.title" />
                        <p class="mt-1 text-sm text-gray-500">
                            Brief title describing the filing or court action
                        </p>
                    </div>

                    <!-- Summary -->
                    <div>
                        <InputLabel for="summary" value="Summary *" />
                        <textarea
                            id="summary"
                            v-model="form.summary"
                            rows="6"
                            required
                            placeholder="Provide a detailed summary of this docket entry..."
                            class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        ></textarea>
                        <InputError class="mt-2" :message="form.errors.summary" />
                        <p class="mt-1 text-sm text-gray-500">
                            Detailed description of the filing, motion, or court action
                        </p>
                    </div>

                    <!-- Notes -->
                    <div>
                        <InputLabel for="notes" value="Notes (Optional)" />
                        <textarea
                            id="notes"
                            v-model="form.notes"
                            rows="4"
                            placeholder="Additional notes or context (optional)..."
                            class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        ></textarea>
                        <InputError class="mt-2" :message="form.errors.notes" />
                        <p class="mt-1 text-sm text-gray-500">
                            Internal notes or additional context (not displayed publicly)
                        </p>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex items-center justify-end gap-4 pt-4 border-t">
                        <Link
                            :href="route('admin.docket-entries.index')"
                            class="px-4 py-2 text-sm text-gray-700 hover:text-gray-900 transition-colors"
                        >
                            Cancel
                        </Link>
                        <PrimaryButton
                            :class="{ 'opacity-25': form.processing }"
                            :disabled="form.processing"
                        >
                            Create Entry
                        </PrimaryButton>
                    </div>
                </form>
            </div>

            <!-- Help Text -->
            <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h3 class="text-sm font-medium text-blue-900 mb-2">
                    📝 After Creating
                </h3>
                <p class="text-sm text-blue-700">
                    After creating this entry, you'll be able to upload PDF documents associated with this filing.
                </p>
            </div>
        </main>
    </div>
</template>
