<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';

interface Entry {
    id: number;
    date: string;
    title: string;
    summary: string;
    notes: string | null;
}

interface Props {
    entry: Entry;
}

const props = defineProps<Props>();

const form = useForm({
    date: props.entry.date,
    title: props.entry.title,
    summary: props.entry.summary,
    notes: props.entry.notes || '',
});

const submit = () => {
    form.put(route('admin.docket-entries.update', props.entry.id));
};
</script>

<template>
    <div class="min-h-screen bg-gray-100">
        <Head title="Edit 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">
                            Edit Docket Entry
                        </h1>
                        <p class="text-sm text-gray-600 mt-1">
                            Update entry details
                        </p>
                    </div>
                    <div class="flex gap-4">
                        <Link
                            :href="route('admin.docket-entries.show', props.entry.id)"
                            class="px-4 py-2 text-sm text-gray-700 hover:text-gray-900 transition-colors"
                        >
                            ← Back to Entry
                        </Link>
                    </div>
                </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.show', props.entry.id)"
                            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"
                        >
                            Update Entry
                        </PrimaryButton>
                    </div>
                </form>
            </div>
        </main>
    </div>
</template>
