import { zodResolver } from '@hookform/resolvers/zod';
import { Link, router } from '@inertiajs/react';
import { Controller, useForm } from 'react-hook-form';
import PasswordInput from '@/components/password-input';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    createUserSchema,
    updateUserSchema
    
    
} from '@/lib/validators/user';
import type {CreateUserFormValues, UpdateUserFormValues} from '@/lib/validators/user';
import { index, store, update } from '@/routes/admin/users';

type Props = {
    mode: 'create' | 'edit';
    roles: string[];
    user?: {
        id: number;
        name: string;
        email: string;
        roles: string[];
    };
};

export default function UserForm({ mode, roles, user }: Props) {
    const isCreate = mode === 'create';
    const schema = isCreate ? createUserSchema(roles) : updateUserSchema(roles);
    const defaultRole = isCreate ? (roles.includes('editor') ? 'editor' : (roles[0] ?? '')) : (user?.roles?.[0] ?? '');

    const {
        register,
        handleSubmit,
        control,
        formState: { errors, isSubmitting },
    } = useForm<CreateUserFormValues | UpdateUserFormValues>({
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        resolver: zodResolver(schema as any),
        defaultValues: isCreate
            ? { name: '', email: '', password: '', role: defaultRole }
            : {
                  name: user?.name ?? '',
                  email: user?.email ?? '',
                  password: '',
                  role: defaultRole,
              },
    });

    const onSubmit = (values: CreateUserFormValues | UpdateUserFormValues) => {
        if (isCreate) {
            router.post(store(), values as CreateUserFormValues);
        } else if (user) {
            router.put(update(user.id), {
                name: values.name,
                email: values.email,
                role: values.role,
                password: values.password || undefined,
            });
        }
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
            <div className="grid gap-6 sm:grid-cols-2">
                <div className="space-y-2">
                    <Label htmlFor="name">Nama Lengkap</Label>
                    <Input id="name" placeholder="Nama pengguna" {...register('name')} />
                    {errors.name && <p className="text-sm text-destructive">{errors.name.message}</p>}
                </div>

                <div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                        id="email"
                        type="email"
                        placeholder="nama@perusahaan.com"
                        {...register('email')}
                    />
                    {errors.email && <p className="text-sm text-destructive">{errors.email.message}</p>}
                </div>
            </div>

            <div className="grid gap-6 sm:grid-cols-2">
                <div className="space-y-2">
                    <Label htmlFor="password">
                        {isCreate ? 'Password' : 'Password Baru (opsional)'}
                    </Label>
                    <PasswordInput
                        id="password"
                        autoComplete="new-password"
                        placeholder={isCreate ? 'Minimal 8 karakter' : 'Kosongkan jika tidak diganti'}
                        {...register('password')}
                    />
                    {errors.password && (
                        <p className="text-sm text-destructive">{errors.password.message}</p>
                    )}
                </div>

                <div className="space-y-2">
                    <Label>Role</Label>
                    <Controller
                        control={control}
                        name="role"
                        render={({ field }) => (
                            <Select value={field.value} onValueChange={field.onChange}>
                                <SelectTrigger className="w-full">
                                    <SelectValue placeholder="Pilih role" />
                                </SelectTrigger>
                                <SelectContent>
                                    {roles.map((role) => (
                                        <SelectItem key={role} value={role}>
                                            {role}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        )}
                    />
                    {errors.role && <p className="text-sm text-destructive">{errors.role.message}</p>}
                </div>
            </div>

            <div className="flex gap-3">
                <Button type="submit" disabled={isSubmitting}>
                    {isCreate ? 'Simpan Pengguna' : 'Simpan Perubahan'}
                </Button>
                <Button type="button" variant="outline" asChild>
                    <Link href={index()}>Batal</Link>
                </Button>
            </div>
        </form>
    );
}