import FileUploadReal from '@/components/file-upload';
import { TextInputField } from '@/components/form';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { useFlashToasts, showFlash, Flash } from '@/components/use-flash-toasts';
import { update as updateUser } from '@/routes/users';
import { useForm } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { FormEventHandler } from 'react';
import type { User } from '@/types';

// Interfaz para el formulario de Usuario
export interface UserForm {
    name: string;
    lastname: string;
    email: string;
    phone?: string;
    address?: string;
    register_date?: string;
    gender?: string;
    country?: string;
    state?: string;
    city?: string;
    birthdate?: string;
    nationality?: string;
    facebook?: string;
    twitter?: string;
    instagram?: string;
    linkedin?: string;
    tiktok?: string;
    photo?: string;
    cover_photo?: string;
}

interface UpdateUserProps {
    open: boolean;
    setOpen: (value: boolean) => void;
    user: User;
}

const UpdateUser = ({ open, setOpen, user }: UpdateUserProps) => {
    const { data, setData, post, processing, errors, reset } =
        useForm<UserForm>({
            name: user?.name || '',
            lastname: user?.lastname || '',
            email: user?.email || '',
            phone: user?.phone || '',
            address: user?.address || '',
            register_date: user?.register_date || '',
            gender: user?.gender || '',
            country: user?.country || '',
            state: user?.state || '',
            city: user?.city || '',
            birthdate: user?.birthdate || '',
            nationality: user?.nationality || '',
            facebook: user?.facebook || '',
            twitter: user?.twitter || '',
            instagram: user?.instagram || '',
            linkedin: user?.linkedin || '',
            tiktok: user?.tiktok || '',
            photo: user?.photo || '',
            cover_photo: user?.cover_photo || '',
        });

    useFlashToasts({ errors });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        if (!isFormValid) return;
        post(updateUser(user.id).url, {
            onSuccess: (page) => {
                const flash = page.props.flash as Flash;
                showFlash(flash);
                reset();
                setOpen(false);
            },
            onError: () => {},
        });
    };

    const isFormValid = Boolean(data.name && data.lastname && data.email);

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent className="w-full max-w-lg pb-4">
                <DialogHeader>
                    <DialogTitle>Editar usuario</DialogTitle>
                    <DialogDescription>
                        Modifica los campos para actualizar el usuario.
                    </DialogDescription>
                </DialogHeader>
                <form
                    id="user-form"
                    onSubmit={submit}
                    className="overflow-y-auto max-h-[80vh]"
                >
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <TextInputField
                            id="name"
                            label="Nombre"
                            required
                            value={data.name}
                            onChange={(v) => setData('name', v)}
                            error={errors.name}
                        />
                        <TextInputField
                            id="lastname"
                            label="Apellido"
                            required
                            value={data.lastname}
                            onChange={(v) => setData('lastname', v)}
                            error={errors.lastname}
                        />
                        <TextInputField
                            id="email"
                            label="Email"
                            type="email"
                            required
                            value={data.email}
                            onChange={(v) => setData('email', v)}
                            error={errors.email}
                        />
                        <TextInputField
                            id="phone"
                            label="Teléfono"
                            value={data.phone || ''}
                            onChange={(v) => setData('phone', v)}
                            error={errors.phone}
                        />
                        <TextInputField
                            id="address"
                            label="Dirección"
                            value={data.address || ''}
                            onChange={(v) => setData('address', v)}
                            error={errors.address}
                        />
                        <TextInputField
                            id="register_date"
                            label="Fecha de registro"
                            type="date"
                            value={data.register_date || ''}
                            onChange={(v) => setData('register_date', v)}
                            error={errors.register_date}
                        />
                        <TextInputField
                            id="gender"
                            label="Género"
                            value={data.gender || ''}
                            onChange={(v) => setData('gender', v)}
                            error={errors.gender}
                        />
                        <TextInputField
                            id="country"
                            label="País"
                            value={data.country || ''}
                            onChange={(v) => setData('country', v)}
                            error={errors.country}
                        />
                        <TextInputField
                            id="state"
                            label="Estado"
                            value={data.state || ''}
                            onChange={(v) => setData('state', v)}
                            error={errors.state}
                        />
                        <TextInputField
                            id="city"
                            label="Ciudad"
                            value={data.city || ''}
                            onChange={(v) => setData('city', v)}
                            error={errors.city}
                        />
                        <TextInputField
                            id="birthdate"
                            label="Fecha de nacimiento"
                            type="date"
                            value={data.birthdate || ''}
                            onChange={(v) => setData('birthdate', v)}
                            error={errors.birthdate}
                        />
                        <TextInputField
                            id="nationality"
                            label="Nacionalidad"
                            value={data.nationality || ''}
                            onChange={(v) => setData('nationality', v)}
                            error={errors.nationality}
                        />
                        <TextInputField
                            id="facebook"
                            label="Facebook"
                            value={data.facebook || ''}
                            onChange={(v) => setData('facebook', v)}
                            error={errors.facebook}
                        />
                        <TextInputField
                            id="twitter"
                            label="Twitter"
                            value={data.twitter || ''}
                            onChange={(v) => setData('twitter', v)}
                            error={errors.twitter}
                        />
                        <TextInputField
                            id="instagram"
                            label="Instagram"
                            value={data.instagram || ''}
                            onChange={(v) => setData('instagram', v)}
                            error={errors.instagram}
                        />
                        <TextInputField
                            id="linkedin"
                            label="LinkedIn"
                            value={data.linkedin || ''}
                            onChange={(v) => setData('linkedin', v)}
                            error={errors.linkedin}
                        />
                        <TextInputField
                            id="tiktok"
                            label="TikTok"
                            value={data.tiktok || ''}
                            onChange={(v) => setData('tiktok', v)}
                            error={errors.tiktok}
                        />
                        <div className="col-span-1 sm:col-span-2">
                            <label className="mb-1 block text-sm font-medium">
                                Foto de perfil
                            </label>
                            <div className="max-w-100">
                                <FileUploadReal
                                    onUpload={(urls) =>
                                        setData('photo', urls[0] || '')
                                    }
                                    single={true}
                                    accept="image/*"
                                    maxSizeMB={5}
                                    defaultUrls={
                                        data.photo ? [data.photo] : []
                                    }
                                />
                            </div>
                            {errors.photo && (
                                <div className="mt-1 text-sm text-destructive">
                                    {errors.photo}
                                </div>
                            )}
                        </div>
                        <div className="col-span-1 sm:col-span-2">
                            <label className="mb-1 block text-sm font-medium">
                                Foto de portada
                            </label>
                            <div className="max-w-100">
                                <FileUploadReal
                                    onUpload={(urls) =>
                                        setData('cover_photo', urls[0] || '')
                                    }
                                    single={true}
                                    accept="image/*"
                                    maxSizeMB={5}
                                    defaultUrls={
                                        data.cover_photo ? [data.cover_photo] : []
                                    }
                                />
                            </div>
                            {errors.cover_photo && (
                                <div className="mt-1 text-sm text-destructive">
                                    {errors.cover_photo}
                                </div>
                            )}
                        </div>
                    </div>
                </form>
                <DialogFooter>
                    <DialogClose asChild>
                        <Button variant="outline" type="button">
                            Cancelar
                        </Button>
                    </DialogClose>
                    <Button
                        type="submit"
                        form="user-form"
                        disabled={processing || !isFormValid}
                    >
                        {processing && (
                            <LoaderCircle className="h-4 w-4 animate-spin" />
                        )}
                        Actualizar
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

export default UpdateUser;