import { Head, Link, useForm } from '@inertiajs/react';
import { RichText } from '@/components/admin/rich-text';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';

export default function DivisionsCreate() {
    const { data, setData, post, processing, errors } = useForm({
        name: '',
        description: '',
        chair_name: '',
        is_active: true as boolean,
        sort_order: 0,
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        post('/admin/divisions');
    }

    return (
        <>
            <Head title="Add Division" />
            <form onSubmit={submit} className="space-y-0">
                <div className="sticky top-16 z-10 -mx-6 mb-6 flex items-center justify-between border-b bg-background px-6 pb-4 pt-2 lg:-mx-8 lg:px-8">
                    <div>
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Link href="/admin/divisions">Divisions</Link>
                            <span>/</span>
                            <span className="text-foreground">Add Division</span>
                        </div>
                        <h1 className="text-2xl font-bold">Add Division</h1>
                    </div>
                    <div className="flex items-center gap-3">
                        <Button type="button" variant="outline" asChild>
                            <Link href="/admin/divisions">Cancel</Link>
                        </Button>
                        <Button type="submit" disabled={processing}>{processing ? 'Saving...' : 'Create Division'}</Button>
                    </div>
                </div>

                <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_320px]">
                    <div className="space-y-6">
                        <div className="rounded-xl border border-border bg-card p-6 space-y-4">
                            <div className="space-y-1.5">
                                <Label htmlFor="name">Name <span className="text-destructive">*</span></Label>
                                <Input id="name" value={data.name} onChange={(e) => setData('name', e.target.value)} />
                                {errors.name && <p className="text-sm text-destructive">{errors.name}</p>}
                            </div>
                            <div className="space-y-1.5">
                                <Label htmlFor="chair_name">Chair Name</Label>
                                <Input id="chair_name" value={data.chair_name} onChange={(e) => setData('chair_name', e.target.value)} placeholder="Full name of the chair" />
                                {errors.chair_name && <p className="text-sm text-destructive">{errors.chair_name}</p>}
                            </div>
                            <div className="space-y-1.5">
                                <Label>Description</Label>
                                <RichText value={data.description} onChange={(v) => setData('description', v)} height={250} />
                                {errors.description && <p className="text-sm text-destructive">{errors.description}</p>}
                            </div>
                        </div>
                    </div>

                    <div className="space-y-6">
                        <div className="rounded-xl border border-border bg-card p-6 space-y-4">
                            <div className="space-y-1.5">
                                <Label htmlFor="sort_order">Sort Order</Label>
                                <Input id="sort_order" type="number" min={0} value={data.sort_order} onChange={(e) => setData('sort_order', Number(e.target.value))} />
                                {errors.sort_order && <p className="text-sm text-destructive">{errors.sort_order}</p>}
                            </div>
                            <div className="flex items-center gap-2">
                                <Switch id="is_active" checked={data.is_active} onCheckedChange={(v) => setData('is_active', v)} />
                                <Label htmlFor="is_active">Active</Label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </>
    );
}
