'use client';

import Image from "next/image";
import { updateProfileInfo } from "../actions/actions";
import { useRouter } from "next/navigation";
import { updateFormSchema } from "../utils/validation";
import { z } from "zod";
import { useActionState, useState } from "react";

export default function EditProfileTemplate({ userData, setIsEditing }) {

    const [errors, setErrors] = useState({});
    const notifySucess = () => toast("Profile Information updated successfully!", { type: "success" });
    const router = useRouter();
    const handleFormSubmit = async (prevState, formData) => {

        try {
            const formValues = {
                name: formData.get("name"),
                email: formData.get("email"),
                address: formData.get("address"),
                city: formData.get("city"),
            }


            await updateFormSchema.parseAsync(formValues);

            const result = await updateProfileInfo(prevState, formValues);

            if (result.success === "ERROR") {
                console.log("Profile information update failed", result.error);
                return { ...prevState, error: result.error, status: "ERROR" };
            }

            setIsEditing(false);
            notifySucess();
            return JSON.stringify({ ...prevState, status: "SUCCESS" });

        } catch (error) {

            if (error instanceof z.ZodError) {
                const fieldErrors = error.flatten().fieldErrors;

                setErrors(fieldErrors);

                return { ...prevState, error: "Validation failed", status: "ERROR" };
            }

            return {
                ...prevState,
                error: "An unexpected error has occured",
                status: "ERROR"
            }
        }

    }

    const [state, formAction, isPending] = useActionState(handleFormSubmit, {
        error: "",
        status: "INITIAL"
    })



    return (
        <>
            <div className="bg-white w-full justify-end flex flex-col gap-5 px-3 md:px-16 lg:px-28 md:flex-row text-[#161931]">
                <main className="w-full min-h-screen py-1 md:w-2/3 lg:w-3/4">
                    <div className="p-2 md:p-4">
                        <div className="w-full px-6 pb-8 mt-8 sm:max-w-xl sm:rounded-lg">
                            <h2 className="pl-6 text-2xl font-bold sm:text-xl">Public Profile</h2>

                            <div className="grid max-w-2xl mx-auto mt-8">
                                <div className="flex flex-col items-center space-y-5 sm:flex-row sm:space-y-0">

                                    <Image
                                        className="object-cover w-40 h-40 p-1 rounded-full ring-2 ring-indigo-300 dark:ring-indigo-500"
                                        width={200}
                                        height={200}
                                        src={userData?.image}
                                        alt="Bordered avatar" />

                                    <div className="flex flex-col space-y-5 sm:ml-8">
                                        <button type="button"
                                            className="py-3.5 px-7 text-base font-medium text-indigo-100 focus:outline-none bg-[#202142] rounded-lg border border-indigo-200 hover:bg-indigo-900 focus:z-10 focus:ring-4 focus:ring-indigo-200 ">
                                            Change picture
                                        </button>
                                        <button type="button"
                                            className="py-3.5 px-7 text-base font-medium text-indigo-900 focus:outline-none bg-white rounded-lg border border-indigo-200 hover:bg-indigo-100 hover:text-[#202142] focus:z-10 focus:ring-4 focus:ring-indigo-200 ">
                                            Delete picture
                                        </button>
                                    </div>
                                </div>

                                <form
                                    action={formAction}
                                    className="items-center mt-8 sm:mt-14 text-[#202142]">

                                    <div
                                        className="flex flex-col items-center w-full mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0 sm:mb-6">
                                        <div className="w-full">
                                            <label htmlFor="first_name"
                                                className="block mb-2 text-sm font-medium text-indigo-900">
                                                Name</label>
                                            <input
                                                type="text"
                                                id="name"
                                                name="name"
                                                className="bg-indigo-50 border border-indigo-300 text-indigo-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 "
                                                placeholder="Your name"
                                                defaultValue={userData?.name}
                                                required
                                            />
                                        </div>
                                        {errors.name && <p className="text-red-500">{errors.name}</p>}

                                    </div>

                                    <div className="mb-2 sm:mb-6">
                                        <label htmlFor="email"
                                            className="block mb-2 text-sm font-medium text-indigo-900">
                                            Email</label>
                                        <input
                                            type="email"
                                            id="email"
                                            name="email"
                                            className="bg-indigo-50 border border-indigo-300 text-indigo-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 "
                                            placeholder="[email protected]"
                                            defaultValue={userData?.email}
                                            required
                                        />
                                    </div>
                                    {errors.name && <p className="text-red-500">{errors.email}</p>}

                                    <div className="mb-2 sm:mb-6">
                                        <label htmlFor="profession"
                                            className="block mb-2 text-sm font-medium text-indigo-900">Address</label>
                                        <input
                                            type="text"
                                            id="address"
                                            name="address"
                                            className="bg-indigo-50 border border-indigo-300 text-indigo-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 "
                                            placeholder="Your address"
                                            defaultValue={userData?.address}
                                            required
                                        />
                                    </div>
                                    {errors.name && <p className="text-red-500">{errors.address}</p>}

                                    <div className="mb-2 sm:mb-6">
                                        <label htmlFor="email"
                                            className="block mb-2 text-sm font-medium text-indigo-900">
                                            City</label>
                                        <input
                                            type="text"
                                            id="city"
                                            name="city"
                                            className="bg-indigo-50 border border-indigo-300 text-indigo-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block w-full p-2.5 "
                                            placeholder="Your city"
                                            defaultValue={userData?.city}
                                            required
                                        />
                                    </div>
                                    {errors.name && <p className="text-red-500">{errors.city}</p>}

                                    <div className="flex justify-end">
                                        <button
                                            disabled={isPending}
                                            type="submit"
                                            className="text-white bg-indigo-700  hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800">
                                            {isPending ? "Saving..." : "Save"}
                                        </button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </>
    )
}