"use client";

import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
import { Box, Button, ButtonContainer, Input, useData, useFormRefs } from "@/Theme/Midone";
import { useRouter } from "next/navigation";
import { use } from "react";

export default function Page({ params }) {
    const { Lang } = useLang();
    const { laraAdmin } = useConfig();
    const router = useRouter();

    const formUrl = "/users/change-password"; 
    const component = useFormRefs();
    const { save } = useData();

    // const { id } = params || {};
    const { id  } = use(params) || {};
    let userId = 0;
    let redirect = "/dashboard";
    let callBack = () => router.back(); // ✅ moved after useRouter

    if (id !== undefined) {
        userId = id;
        redirect = ""; // No redirection if we're going back
    } else {
        callBack = () => {}; // Do nothing if no id
    }

    const url = `${laraAdmin}${formUrl}?id=${userId}`;
    const method = "edit";

    const saveItem = () => save(url, component, method, redirect, callBack);

    return (
        <>
            <Box title={Lang(["public.change", "public.password"])}>
                <Input required={true} type="password" label="new_password" refItem={[component, "new_password"]} />
                <Input required={true} type="password" label="new_password_confirmation" refItem={[component, "new_password_confirmation"]} />
            </Box>
            <ButtonContainer>
                <Button label="save" onClick={saveItem} />
                <Button label="back" onClick={() => router.back()} />
            </ButtonContainer>
        </>
    );
}