import * as React from 'react';
import { router } from '@inertiajs/react';
import AdminLayout from '../layout';
import { usersApi, type AdminRole } from '@/features/admin/users/services/api';
import { ApiError } from '@/lib/ApiError';
import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select } from '@/components/ui/select';
import { FormField } from '@/components/ui/form-field';
import { toast } from '@/components/ui/sonner';

export default function UsersCreate() {
    const [form, setForm] = React.useState({
        name: '',
        email: '',
        mobile: '',
        role: 'viewer' as AdminRole,
    });
    const [errors, setErrors] = React.useState<Record<string, string>>({});
    const [submitting, setSubmitting] = React.useState(false);

    async function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        setSubmitting(true);
        setErrors({});
        try {
            await usersApi.store({ ...form, email: form.email || null });
            toast.success('User created.');
            router.visit('/admin/users');
        } catch (err) {
            if (err instanceof ApiError && err.isValidationError) {
                const flat: Record<string, string> = {};
                for (const [key, value] of Object.entries(err.errors ?? {})) {
                    flat[key] = value[0];
                }
                setErrors(flat);
            } else {
                toast.error('Failed to create user.');
            }
        } finally {
            setSubmitting(false);
        }
    }

    return (
        <AdminLayout title="Add user">
            <form onSubmit={handleSubmit}>
                <Card className="max-w-xl">
                    <CardContent className="space-y-4">
                        <FormField
                            label="Name"
                            htmlFor="name"
                            required
                            error={errors.name}
                        >
                            <Input
                                id="name"
                                required
                                value={form.name}
                                onChange={(e) =>
                                    setForm({ ...form, name: e.target.value })
                                }
                            />
                        </FormField>
                        <FormField
                            label="Email"
                            htmlFor="email"
                            error={errors.email}
                        >
                            <Input
                                id="email"
                                type="email"
                                value={form.email}
                                onChange={(e) =>
                                    setForm({ ...form, email: e.target.value })
                                }
                            />
                        </FormField>
                        <FormField
                            label="Mobile"
                            htmlFor="mobile"
                            required
                            error={errors.mobile}
                        >
                            <Input
                                id="mobile"
                                type="tel"
                                inputMode="numeric"
                                maxLength={10}
                                required
                                value={form.mobile}
                                onChange={(e) =>
                                    setForm({
                                        ...form,
                                        mobile: e.target.value.replace(
                                            /\D/g,
                                            '',
                                        ),
                                    })
                                }
                            />
                        </FormField>
                        <FormField
                            label="Role"
                            htmlFor="role"
                            required
                            error={errors.role}
                        >
                            <Select
                                id="role"
                                options={[
                                    { value: 'admin', label: 'Admin' },
                                    { value: 'viewer', label: 'Viewer' },
                                ]}
                                value={form.role}
                                onChange={(e) =>
                                    setForm({
                                        ...form,
                                        role: e.target.value as AdminRole,
                                    })
                                }
                            />
                        </FormField>
                    </CardContent>
                    <CardFooter>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => router.visit('/admin/users')}
                        >
                            Cancel
                        </Button>
                        <Button type="submit" loading={submitting}>
                            Create user
                        </Button>
                    </CardFooter>
                </Card>
            </form>
        </AdminLayout>
    );
}