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 CategoryData {
    id: number;
    name: string;
    description: string | null;
    admin_only_posting: boolean;
    sort_order: number;
}

export default function Form({ category }: { category: CategoryData | null }) {
    const { data, setData, post, put, processing, errors } = useForm({
        name: category?.name ?? '',
        description: category?.description ?? '',
        admin_only_posting: category?.admin_only_posting ?? false,
        sort_order: category?.sort_order ?? 0,
    });

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

    return (
        <AdminLayout>
            <Head title={category ? 'Edit Forum Category' : 'New Forum Category'} />

            <h1 className="text-institute-title text-on-surface">{category ? 'Edit Forum Category' : 'New Forum Category'}</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="description" value="Description" />
                        <textarea
                            id="description"
                            className="mt-1 block w-full rounded border-outline-variant"
                            rows={3}
                            value={data.description}
                            onChange={(e) => setData('description', e.target.value)}
                        />
                        <InputError message={errors.description} className="mt-1" />
                    </div>

                    <div>
                        <InputLabel htmlFor="sort_order" value="Sort Order" />
                        <TextInput
                            id="sort_order"
                            type="number"
                            className="mt-1 block w-full"
                            value={data.sort_order}
                            onChange={(e) => setData('sort_order', Number(e.target.value))}
                        />
                        <InputError message={errors.sort_order} className="mt-1" />
                    </div>

                    <label className="flex items-center gap-2 text-sm text-on-surface">
                        <input
                            type="checkbox"
                            checked={data.admin_only_posting}
                            onChange={(e) => setData('admin_only_posting', e.target.checked)}
                        />
                        Only administrators can start threads and reply in this category
                    </label>

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