import { UserCog } from 'lucide-react';
import React from 'react';

import { update as userUpdate } from '@/actions/App/Domains/Shared/Http/Controllers/Admin/UserController';

import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useYupForm } from '@/hooks/use-yup-form';
import { NIK_PATTERN, NIK_TITLE } from '@/lib/field-constraints';
import { userProfileSchema } from '@/lib/validation/user';
import type { AdminUser } from '@/types/admin';

interface UserProfileDialogProps {
    user: AdminUser | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export function UserProfileDialog({
    user,
    open,
    onOpenChange,
}: UserProfileDialogProps) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-125 [&>button:last-child]:hidden">
                {user && (
                    <UserProfileForm
                        key={user.id}
                        user={user}
                        onClose={() => onOpenChange(false)}
                    />
                )}
            </DialogContent>
        </Dialog>
    );
}

function UserProfileForm({
    user,
    onClose,
}: {
    user: AdminUser;
    onClose: () => void;
}) {
    const { data, setData, processing, errors, validateField, submit } =
        useYupForm(userProfileSchema, {
            name: user.name,
            nik: user.nik ?? '',
            email: user.email,
        });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        submit((form) =>
            form.put(userUpdate({ user: user.id }).url, {
                preserveScroll: true,
                onSuccess: onClose,
            }),
        );
    };

    return (
        <>
            <DialogHeader>
                <DialogTitle className="flex items-center gap-2">
                    <UserCog className="h-5 w-5" />
                    Edit User
                </DialogTitle>
                <DialogDescription>Update the user identity.</DialogDescription>
            </DialogHeader>

            <form onSubmit={handleSubmit} className="space-y-4 py-4" noValidate>
                <div className="space-y-2">
                    <Label htmlFor="edit-user-name">Name</Label>
                    <Input
                        id="edit-user-name"
                        value={data.name}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            setData('name', e.target.value)
                        }
                        onBlur={() => validateField('name')}
                        required
                    />
                    {errors.name && (
                        <p className="text-xs text-destructive">
                            {errors.name}
                        </p>
                    )}
                </div>

                <div className="space-y-2">
                    <Label htmlFor="edit-user-nik">NIK</Label>
                    <Input
                        id="edit-user-nik"
                        value={data.nik}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            setData('nik', e.target.value)
                        }
                        onBlur={() => validateField('nik')}
                        placeholder="e.g. SK-000123"
                        pattern={NIK_PATTERN}
                        title={NIK_TITLE}
                        required
                    />
                    {errors.nik && (
                        <p className="text-xs text-destructive">{errors.nik}</p>
                    )}
                </div>

                <div className="space-y-2">
                    <Label htmlFor="edit-user-email">Email</Label>
                    <Input
                        id="edit-user-email"
                        type="email"
                        value={data.email}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            setData('email', e.target.value)
                        }
                        onBlur={() => validateField('email')}
                        required
                    />
                    {errors.email && (
                        <p className="text-xs text-destructive">
                            {errors.email}
                        </p>
                    )}
                </div>

                <DialogFooter className="pt-4">
                    <Button type="button" variant="outline" onClick={onClose}>
                        Cancel
                    </Button>
                    <Button type="submit" disabled={processing}>
                        {processing ? 'Saving...' : 'Save Changes'}
                    </Button>
                </DialogFooter>
            </form>
        </>
    );
}