"use client";

import { useEffect, useState } from "react";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import PhoneOutlinedIcon from "@mui/icons-material/PhoneOutlined";
import Link from "next/link";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { routes } from "@/src/config/routes";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { UpdateUserProfileFormInput, updateUserSchema } from "@/src/utils/validators/user-schema";
import { userProfileDefualtValues } from "@/src/utils/form-utils/user-form-utils";
import useMutateApi from "@/src/server_api/hooks/use-api/use-mutate-api";
import { apiEndpoints } from "@/src/server_api/config/api.endpoints";

export default function MyProfilePage({ data }: { data: any }) {
    const [isEditing, setIsEditing] = useState(false);

    const {
        control,
        handleSubmit,
        reset,
        formState: { errors },
    } = useForm<UpdateUserProfileFormInput>({
        resolver: zodResolver(updateUserSchema) as any,
        defaultValues: userProfileDefualtValues()
    });

    useEffect(() => {
        if (data) {
            reset({
                firstName: data?.firstName ?? "",
                email: data?.email ?? "",
                phone: data?.phone ?? "",
            });
        }
    }, [data, reset]);

    const { mutate, isLoading } = useMutateApi({
        alertMessage: (response: any) => ({
            messages: response.message,
            type: 'success',
            from: 'profile',
        }),
        isCloseModal: true,
        isRefresh: true,
        isUpdateQuery: true,

    });

    const onSubmit = (data: UpdateUserProfileFormInput) => {
        const payload = {
            ...data,
            apiEndpoint: apiEndpoints.accounts.update_customer_details
        };
        mutate(payload as any);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <section className=" bg-[#ffffff] py-10 px-5 sm:px-5 lg:px-30 md:px-8 2xl:px-45">
                <div className="mx-auto space-y-6">
                    <div>
                        <h1 className="text-3xl font-bold text-primary">
                            My Profile
                        </h1>
                        <p className="mt-2 text-sm text-gray-500">
                            Manage your personal information and account settings
                        </p>
                    </div>
                    <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
                        <div className="flex items-center justify-between border-b border-gray-100 pb-5">
                            <div className="flex items-center gap-3 sm:gap-4">
                                <div
                                    className="
                                    flex
                                    h-12
                                    w-12
                                    shrink-0
                                    items-center
                                    justify-center
                                    rounded-full
                                    bg-secondary/10
                                    text-secondary
                                    sm:h-14
                                    sm:w-14
                                "
                                >
                                    <PersonOutlineOutlinedIcon
                                        sx={{ fontSize: { xs: 26, sm: 32 } }}
                                    />
                                </div>

                                <div className="min-w-0">
                                    <h2 className="text-lg font-semibold text-primary sm:text-xl">
                                        Personal Details
                                    </h2>

                                    <p className="mt-1 text-xs text-gray-500 sm:text-sm">
                                        Update your profile information
                                    </p>
                                </div>
                            </div>

                            <button
                                type="submit"
                                disabled={isLoading}
                                className="
                                    flex
                                    items-center
                                    gap-2
                                    rounded-md
                                    bg-secondary
                                    px-5
                                    py-2.5
                                    text-sm
                                    font-semibold
                                    text-white
                                    transition
                                    hover:bg-black
                                    disabled:opacity-60
                                "
                            >
                                <SaveOutlinedIcon fontSize="small" />
                                {isLoading ? "Saving..." : "Save"}
                            </button>
                        </div>
                        <div className="mt-6 grid grid-cols-1 gap-5 md:grid-cols-2">
                            <Controller
                                name="firstName"
                                control={control}
                                render={({ field }) => (
                                    <div className="flex flex-col">
                                        <label className="mb-2 flex items-center gap-2 text-sm font-medium text-primary">
                                            <PersonOutlineOutlinedIcon fontSize="small" />
                                            Full Name
                                        </label>

                                        <input
                                            {...field}

                                            className="
                                            w-full
                                            rounded-lg
                                            border
                                            border-gray-300
                                            px-4
                                            py-3
                                            text-sm
                                            outline-none
                                            transition
                                            focus:border-secondary
                                            disabled:bg-gray-100
                                        "
                                        />

                                        {errors.firstName && (
                                            <p className="mt-1 text-xs text-red-500">
                                                {errors.firstName.message}
                                            </p>
                                        )}
                                    </div>
                                )}
                            />
                            <div className="flex flex-col">
                                <Controller
                                    name="email"
                                    control={control}
                                    render={({ field }) => (
                                        <>
                                            <label className="mb-2 flex items-center gap-2 text-sm font-medium text-primary">
                                                <EmailOutlinedIcon fontSize="small" />
                                                Email Address
                                            </label>

                                            <input
                                                {...field}
                                                type="email"
                                                disabled={!isEditing}
                                                className="
                                                w-full
                                                rounded-lg
                                                border
                                                border-gray-300
                                                px-4
                                                py-3
                                                text-sm
                                                outline-none
                                                transition
                                                focus:border-secondary
                                                disabled:bg-gray-100
                                            "
                                            />

                                            {errors.email && (
                                                <p className="mt-1 text-xs text-red-500">
                                                    {errors.email.message}
                                                </p>
                                            )}
                                        </>
                                    )}
                                />
                            </div>
                            <div className="flex flex-col">
                                <label className="mb-2 flex items-center gap-2 text-sm font-medium text-primary">
                                    <PhoneOutlinedIcon fontSize="small" />
                                    Phone Number
                                </label>
                                <div className="flex gap-2">
                                    <Controller
                                        name="countryCode"
                                        control={control}
                                        render={({ field }) => (
                                            <select
                                                {...field}

                                                className="
                                                    w-20
                                                    rounded-lg
                                                    border
                                                    border-gray-300
                                                    px-0
                                                    py-3
                                                    text-sm
                                                    outline-none
                                                    focus:border-secondary
                                                    disabled:bg-gray-100
                                                "
                                            >
                                                <option value="+971">🇦🇪 +971</option>
                                                <option value="+60">🇲🇾 +60</option>
                                            </select>
                                        )}
                                    />
                                    <Controller
                                        name="phone"
                                        control={control}
                                        render={({ field }) => (
                                            <input
                                                {...field}

                                                placeholder="50 123 4567"
                                                className="
                                                flex-1
                                                rounded-lg
                                                border
                                                border-gray-300
                                                px-4
                                                py-3
                                                text-sm
                                                outline-none
                                                transition
                                                focus:border-secondary
                                                disabled:bg-gray-100
                                            "
                                            />
                                        )}
                                    />
                                </div>
                                {errors.countryCode && (
                                    <p className="mt-1 text-xs text-red-500">
                                        {errors.countryCode.message}
                                    </p>
                                )}
                                {errors.phone && (
                                    <p className="mt-1 text-xs text-red-500">
                                        {errors.phone.message}
                                    </p>
                                )}
                            </div>
                        </div>
                    </div>
                    <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
                        <div className="
                        flex
                        flex-col
                        gap-5
                        sm:flex-row
                        sm:items-center
                        sm:justify-between
                    ">
                            <div className="flex items-center gap-3">
                                <div
                                    className="
                                flex
                                h-12
                                w-12
                                shrink-0
                                items-center
                                justify-center
                                rounded-full
                                bg-gray-100
                                text-primary
                            "
                                >
                                    <LockOutlinedIcon />
                                </div>
                                <div>
                                    <h2 className="text-lg font-semibold text-primary sm:text-xl">
                                        Password & Security
                                    </h2>

                                    <p className="text-sm text-gray-500">
                                        Keep your account secure
                                    </p>
                                </div>
                            </div>
                            <Link
                                href={routes.account.changePassword}
                                className="
                                    w-full
                                    rounded-md
                                    border
                                    border-[#000000]
                                    px-5
                                    py-2.5
                                    text-center
                                    text-sm
                                    font-semibold
                                    text-[#000000]
                                    transition
                                    hover:bg-[#000000]
                                    hover:text-white
                                    sm:w-auto
                                "
                            >
                                Change Password
                            </Link>
                        </div>
                    </div>
                </div>
            </section>
        </form>
    );
}