"use client";

import { useState } from "react";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
import { changePassword, ChangePasswordFormInput } from "@/src/utils/validators/user-schema";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { changePasswordDefualtValues } from "@/src/utils/form-utils/user-form-utils";
import useMutateApi from "@/src/server_api/hooks/use-api/use-mutate-api";
import { useRouter } from "next/navigation";
import { routes } from "@/src/config/routes";
import { apiEndpoints } from "@/src/server_api/config/api.endpoints";
import InputText from "@/src/components/custom-components/text-input";
import Button from "@/src/components/custom-components/button";

export default function ChangePasswordPage() {

    const router = useRouter()
    const [showOldPassword, setShowOldPassword] = useState(false);
    const [showNewPassword, setShowNewPassword] = useState(false);
    const [showConfirmNewPassword, setShowConfirmNewPassword] = useState(false);

    const {
        control,
        handleSubmit,
        reset,
        formState: { errors },
    } = useForm<ChangePasswordFormInput>({
        resolver: zodResolver(changePassword),
        defaultValues: changePasswordDefualtValues,
    });

    const { mutate, isLoading } = useMutateApi({
        alertMessage: (response: any) => ({
            messages: response.message,
            type: "success",
            from: "login",
        }),
        isRefresh: true,
        isUpdateQuery: true,
        onSuccessCallback: async (response: any) => {
            router.push(routes.auth.login);
        },
    });

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


    return (
        <section
            className="
        flex
        min-h-screen
        items-center
        justify-center
        px-5
        py-10
        lg:px-10
    "
        >
            <div className="w-full max-w-lg space-y-6">
                <div>
                    <h1 className="text-3xl font-bold text-primary">
                        Change Password
                    </h1>
                    <p className="mt-2 text-sm text-gray-500">
                        Update your password to keep your account secure
                    </p>
                </div>
                <div className="
                    rounded-xl
                    border
                    border-gray-200
                    bg-white
                    p-6
                    shadow-sm
                ">
                    <div className="
                        flex
                        items-center
                        gap-4
                        border-b
                        border-gray-100
                        pb-5
                    ">
                        <div
                            className="
                            flex
                            h-14
                            w-14
                            items-center
                            justify-center
                            rounded-full
                            bg-secondary/10
                            text-secondary
                        "
                        >
                            <LockOutlinedIcon fontSize="large" />
                        </div>
                        <div>
                            <h2 className="text-xl font-semibold text-primary">
                                Password Settings
                            </h2>
                            <p className="text-sm text-gray-500">
                                Enter your current and new password
                            </p>
                        </div>
                    </div>
                    <form className="space-y-5" onSubmit={handleSubmit(onSubmit)}>
                        <div className="w-full">
                            <Controller
                                name="oldPassword"
                                control={control}
                                render={({ field }) => (
                                    <InputText
                                        {...field}
                                        labelText={"Current Password"}
                                        placeholder="Current Password"
                                        type={showOldPassword ? "text" : "password"}
                                        error={errors?.oldPassword?.message}
                                        endAdornment={
                                            <button
                                                type="button"
                                                onClick={() =>
                                                    setShowOldPassword((prev) => !prev)
                                                }
                                                className="text-gray-500 hover:text-gray-700 focus:outline-none"
                                            >
                                                {!showOldPassword ? (
                                                    <VisibilityOffOutlinedIcon sx={{ fontSize: 18 }} />
                                                ) : (
                                                    <VisibilityOutlinedIcon sx={{ fontSize: 18 }} />
                                                )}
                                            </button>
                                        }
                                    />
                                )}
                            />
                        </div>
                        <div className="w-full">
                            <Controller
                                name="newPassword"
                                control={control}
                                render={({ field }) => (
                                    <InputText
                                        {...field}
                                        labelText={"New Password"}
                                        placeholder="New Password"
                                        type={showNewPassword ? "text" : "password"}
                                        error={errors?.newPassword?.message}
                                        endAdornment={
                                            <button
                                                type="button"
                                                onClick={() =>
                                                    setShowNewPassword((prev) => !prev)
                                                }
                                                className="text-gray-500 hover:text-gray-700 focus:outline-none"
                                            >
                                                {!showNewPassword ? (
                                                    <VisibilityOffOutlinedIcon sx={{ fontSize: 18 }} />
                                                ) : (
                                                    <VisibilityOutlinedIcon sx={{ fontSize: 18 }} />
                                                )}
                                            </button>
                                        }
                                    />
                                )}
                            />
                        </div>
                        <div className="w-full">
                            <Controller
                                name="confirmNewPassword"
                                control={control}
                                render={({ field }) => (
                                    <InputText
                                        {...field}
                                        type={showConfirmNewPassword ? "text" : "password"}
                                        labelText={"Confirm New Password"}
                                        placeholder="Confirm New Password"
                                        error={errors?.confirmNewPassword?.message}
                                        endAdornment={
                                            <button
                                                type="button"
                                                onClick={() =>
                                                    setShowConfirmNewPassword((prev) => !prev)
                                                }
                                                className="text-gray-500 hover:text-gray-700 focus:outline-none"
                                            >
                                                {!showConfirmNewPassword ? (
                                                    <VisibilityOffOutlinedIcon sx={{ fontSize: 18 }} />
                                                ) : (
                                                    <VisibilityOutlinedIcon sx={{ fontSize: 18 }} />
                                                )}
                                            </button>
                                        }
                                    />
                                )}
                            />
                        </div>
                        <Button
                            type="submit"
                            isLoading={isLoading}
                        >
                            Update Password
                        </Button>
                        {/* <button
                            className="
                                mt-3
                                flex
                                items-center
                                justify-center
                                gap-2
                                rounded-md
                                bg-secondary
                                px-8
                                py-3
                                text-sm
                                font-semibold
                                text-white
                                transition
                                hover:bg-black
                            "
                        >
                            <SaveOutlinedIcon fontSize="small" />
                            Update Password
                        </button> */}
                    </form>


                </div>
            </div>

        </section >
    );
}