import { Head, useForm } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';
import Card from '@/Components/UI/Card';
import Button from '@/Components/UI/Button';
import InputLabel from '@/Components/InputLabel';
import TextInput from '@/Components/TextInput';
import InputError from '@/Components/InputError';

interface InstituteData {
    id: number;
    name: string;
    description: string | null;
    subject_area: string | null;
    status: string;
}

export default function Form({ institute }: { institute: InstituteData | null }) {
    const { data, setData, post, put, processing, errors } = useForm({
        name: institute?.name ?? '',
        description: institute?.description ?? '',
        subject_area: institute?.subject_area ?? '',
        status: institute?.status ?? 'draft',
    });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        if (institute) {
            put(route('admin.institutes.update', institute.id));
        } else {
            post(route('admin.institutes.store'));
        }
    };

    return (
        <AdminLayout>
            <Head title={institute ? 'Edit Institute' : 'New Institute'} />

            <h1 className="text-institute-title text-on-surface">{institute ? 'Edit Institute' : 'New Institute'}</h1>

            <Card className="mt-6 max-w-2xl">
                <form onSubmit={submit} className="space-y-5">
                    <div>
                        <InputLabel htmlFor="name" value="Name" />
                        <TextInput
                            id="name"
                            className="mt-1 block w-full"
                            value={data.name}
                            onChange={(e) => setData('name', e.target.value)}
                        />
                        <InputError message={errors.name} className="mt-1" />
                    </div>

                    <div>
                        <InputLabel htmlFor="subject_area" value="Subject Area" />
                        <TextInput
                            id="subject_area"
                            className="mt-1 block w-full"
                            value={data.subject_area}
                            onChange={(e) => setData('subject_area', e.target.value)}
                        />
                        <InputError message={errors.subject_area} className="mt-1" />
                    </div>

                    <div>
                        <InputLabel htmlFor="description" value="Description" />
                        <textarea
                            id="description"
                            className="mt-1 block w-full rounded border-outline-variant"
                            rows={4}
                            value={data.description}
                            onChange={(e) => setData('description', e.target.value)}
                        />
                        <InputError message={errors.description} className="mt-1" />
                    </div>

                    <div>
                        <InputLabel htmlFor="status" value="Status" />
                        <select
                            id="status"
                            className="mt-1 block w-full rounded border-outline-variant"
                            value={data.status}
                            onChange={(e) => setData('status', e.target.value)}
                        >
                            {['draft', 'review', 'scheduled', 'published', 'closed', 'archived'].map((status) => (
                                <option key={status} value={status}>
                                    {status}
                                </option>
                            ))}
                        </select>
                        <InputError message={errors.status} className="mt-1" />
                    </div>

                    <Button type="submit" variant="primary" disabled={processing}>
                        {institute ? 'Save Changes' : 'Create Institute'}
                    </Button>
                </form>
            </Card>
        </AdminLayout>
    );
}
