import { Head, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';

import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AdminLayout from '@/layouts/admin-layout';

export default function AdminBrandCreate() {
    const { data, setData, post, processing, errors } = useForm({ name: '', status: true, description: '' });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('admin.brands.store'));
    };

    return (
        <AdminLayout title="Add Brand">
            <Head title="Add Brand" />
            <form onSubmit={submit} className="max-w-lg space-y-4">
                <Card>
                    <CardHeader><CardTitle className="text-base">Brand Details</CardTitle></CardHeader>
                    <CardContent className="space-y-4">
                        <div className="space-y-1.5">
                            <Label>Brand Name *</Label>
                            <Input value={data.name} onChange={(e) => setData('name', e.target.value)} placeholder="Brand name" />
                            <InputError message={errors.name} />
                        </div>
                        <div className="space-y-1.5">
                            <Label>Description</Label>
                            <textarea rows={3} value={data.description} onChange={(e) => setData('description', e.target.value)} className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
                        </div>
                        <div className="flex items-center gap-2">
                            <Checkbox id="status" checked={data.status} onCheckedChange={(v) => setData('status', Boolean(v))} />
                            <Label htmlFor="status">Active</Label>
                        </div>
                    </CardContent>
                </Card>
                <Button type="submit" disabled={processing} className="bg-indigo-600 hover:bg-indigo-700">
                    {processing ? 'Saving…' : 'Create Brand'}
                </Button>
            </form>
        </AdminLayout>
    );
}
