import { Link, useForm } from '@inertiajs/react'
import { ArrowLeft, Loader2 } from 'lucide-react'
import AppLayout from '@/Layouts/AppLayout'
import { Switch } from '@/Components/ui/switch'
import { useToast } from '@/Components/Toast';

const INPUT = 'h-10 w-full rounded-lg border border-input bg-card px-3 text-sm text-foreground outline-none transition-colors focus:border-primary focus:ring-1 focus:ring-primary'

export default function Create() {
    const { show: showToast } = useToast();
    const form = useForm({
        GroupDivisionName: '',
        SampleOrderLimit: 0,
        IsCompCategoryMandatory: false,
    })

    const submit = (e) => { e.preventDefault(); form.post(route('group-divisions.store'), {
        onError: () => showToast('Please check the form and try again.', 'error'),
    }) }

    return (
        <section className="flex min-w-0 flex-col gap-4.5">
            <header className="flex flex-wrap items-center justify-between gap-4">
                <div>
                    <p className="m-0 mb-1.5 flex items-center gap-2 text-xs font-semibold text-muted-foreground">
                        <Link href={route('group-divisions.index')} className="text-muted-foreground no-underline hover:text-primary">Group Divisions</Link>
                        <span aria-hidden="true">›</span>
                        <span className="text-foreground">Create</span>
                    </p>
                    <h1 className="m-0 text-2xl font-bold leading-[1.15] tracking-tight text-card-foreground">Create Group Division</h1>
                </div>
                <Link href={route('group-divisions.index')}
                    className="inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-input bg-card px-4 text-xs font-bold text-foreground transition-colors hover:border-primary hover:text-primary">
                    <ArrowLeft className="size-3.5" aria-hidden="true" /> Back to List
                </Link>
            </header>

            <form onSubmit={submit} className="rounded-xl border border-border bg-card p-6 shadow-sm">
                <div className="flex flex-col gap-4">
                    <div>
                        <label htmlFor="GroupDivisionName" className="mb-1.5 block text-[12px] font-semibold text-muted-foreground">
                            Group Division Name <span className="text-danger-text">*</span>
                        </label>
                        <input id="GroupDivisionName" type="text" value={form.data.GroupDivisionName}
                            onChange={(e) => form.setData('GroupDivisionName', e.target.value)} className={INPUT} />
                        {form.errors.GroupDivisionName && <p className="m-0 mt-1 text-xs font-semibold text-danger-text">{form.errors.GroupDivisionName}</p>}
                    </div>

                    <div>
                        <label htmlFor="SampleOrderLimit" className="mb-1.5 block text-[12px] font-semibold text-muted-foreground">
                            Sample Order Limit <span className="text-danger-text">*</span>
                        </label>
                        <input id="SampleOrderLimit" type="number" min="0" value={form.data.SampleOrderLimit}
                            onChange={(e) => form.setData('SampleOrderLimit', Number(e.target.value))} className={`${INPUT} tabular-nums`} />
                        {form.errors.SampleOrderLimit && <p className="m-0 mt-1 text-xs font-semibold text-danger-text">{form.errors.SampleOrderLimit}</p>}
                    </div>

                    <div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-secondary/30 px-3.5 py-3">
                        <div>
                            <p className="m-0 text-[13px] font-semibold text-foreground">Mandatory Category</p>
                            <p className="m-0 text-[11px] text-muted-foreground">Require a company category for this group.</p>
                        </div>
                        <Switch checked={!! form.data.IsCompCategoryMandatory}
                            onCheckedChange={(v) => form.setData('IsCompCategoryMandatory', v)} />
                    </div>
                    {form.errors.IsCompCategoryMandatory && <p className="m-0 text-xs font-semibold text-danger-text">{form.errors.IsCompCategoryMandatory}</p>}
                </div>

                <div className="mt-6 flex items-center justify-end gap-2 border-t border-border pt-4">
                    <Link href={route('group-divisions.index')}
                        className="inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-input bg-card px-4 text-xs font-bold text-foreground transition-colors hover:border-primary hover:text-primary">Cancel</Link>
                    <button type="submit" disabled={form.processing}
                        className="inline-flex h-9 items-center justify-center gap-1.5 rounded-lg bg-linear-to-br from-violet-500 to-primary px-4 text-xs font-bold text-white shadow-sm transition-[filter] hover:brightness-105 disabled:opacity-50">
                        {form.processing ? <><Loader2 className="size-4 animate-spin" aria-hidden="true" /> Saving…</> : 'Save'}
                    </button>
                </div>
            </form>
        </section>
    )
}

Create.layout = [AppLayout]