'use client';

import { useEffect, useState } from "react";
import { Input, Select } from "../../FormsFieldsTypes";
import { useRefData } from "../../../../app/hooks/useRefData";
import { PasswordRules } from "../../auth/PasswordRules";
import { getPasswordRules } from "../../../../app/utils/validatePasswordRules";
import { createUtilisateur, updateUtilisateur } from "../../../../api/admin";

interface Props {
    user?: any;
    onSaved: () => void;
}

export default function UserForm({ user, onSaved }: Props) {
    const user_roles = useRefData('roles');

    const [formData, setFormData] = useState({
        nom: "",
        prenom: "",
        email: "",
        role_utilisateur: "",
        mot_de_passe: ""
    });
    const passwordValidation = getPasswordRules(formData.mot_de_passe);

    useEffect(() => {
        if (user) {
            setFormData({
                nom: user.nom || "",
                prenom: user.prenom || "",
                email: user.email || "",
                role_utilisateur: user.roles.id || "",
                mot_de_passe: ""
            });
        }
    }, [user]);

    const handleChange = (name: string, value: any) => {
        setFormData((prev: any) => ({ ...prev, [name]: value }));
    };

    async function handleSubmit(e: React.SubmitEvent) {
        e.preventDefault();

        if (!user) {
            await createUtilisateur(formData);
        }
        else {
            await updateUtilisateur(user.id, formData);
        }
        onSaved();
    }

    return (
        <div className="bg-white rounded-3xl shadow-sm border border-[#dce8e2] p-3 h-fit">

            <h2 className="text-2xl font-semibold text-[#1f5f4a] mb-2">

                {user ? "Modifier utilisateur" : "Créer utilisateur"}

            </h2>

            <form
                className="flex flex-col gap-1"
                onSubmit={handleSubmit}
            >

                <Input
                    label="Nom"
                    name="nom"
                    value={formData.nom}
                    onChange={handleChange}
                />

                <Input
                    label="Prénom"
                    name="prenom"
                    value={formData.prenom}
                    onChange={handleChange}
                />

                <Input
                    label="Email"
                    name="email"
                    type="email"
                    value={formData.email}
                    onChange={handleChange}
                />

                <div className="flex flex-col gap-1">

                    <label className="text-sm font-medium text-[#2f5d4b]">
                        Rôle
                    </label>

                    <Select name={"role_utilisateur"}
                        value={formData.role_utilisateur}
                        onChange={handleChange}
                        options={user_roles.data}
                    />

                </div>

                <Input
                    label="Mot de passe"
                    name="mot_de_passe"
                    type="password"
                    value={formData.mot_de_passe}
                    onChange={handleChange} />
                <PasswordRules
                    password={formData.mot_de_passe}
                    validation={passwordValidation} />

                <button
                    type="submit"
                    className="
        px-1 py-1
        rounded-xl
        bg-[#2f7d5f]
        text-white text-sm font-medium
        hover:bg-[#256b52]
        transition cursor-pointer
      "                >
                    {user ? "Mettre à jour" : "Créer"}
                </button>
            </form>
        </div>
    );
}