"use client";
import { FC, useRef } from "react";
import { Modal } from "flowbite-react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { FormProvider, useForm } from "react-hook-form";
import { postData } from "@/utils/fetch";
import { toast } from "react-toastify";
import { TSclientSchema } from "../forms/schema/client";
import ActionButton from "../action-button";
import { useParseError } from "@/utils/lib/helpers";

type Props = {
    client: TSclientSchema;
    isOpen: boolean;
    setOpen: (isOpen: boolean) => void;
};

const ClientSessionReset: FC<Props> = ({ client, isOpen = false, setOpen = () => { } }) => {
    const queryClient = useQueryClient();
    const storeForm = useForm({
        mode: "onChange",
        defaultValues: {},
    });
    const inputRef = useRef<HTMLInputElement>(null);

    const {
        handleSubmit,
        reset,
        formState: { errors },
    } = storeForm;

    const {
        mutate: resetSession,
        isPending,
    } = useMutation({
        mutationFn: async () => {
            const api_url = `/api/v1/client-reset-session/${client?.id}`;
            const data = await postData(api_url, {});
            return data?.data;
        },
        onSuccess: (data) => {
            setOpen(false);
            queryClient.invalidateQueries({ queryKey: ["clients"] });
            queryClient.invalidateQueries({ queryKey: ["client-info"] });
            toast.success(data?.message || "Session reset successfully!");
            reset();
        },
        onError: (error: any) => {
            const errorMessage = useParseError(error);
            if (errorMessage) {
                toast.error(errorMessage);
            } else {
                toast.error("Failed to reset session. Please try again.");
            }
        },
    });

    const onSubmit = async () => {
        resetSession();
    };

    const onError = async (data: any) => {
        console.log(data);
    };

    const handleClose = () => {
        if (!isPending) {
            setOpen(false);
            reset();
        }
    };

    return (
        <div>
            <Modal onClose={handleClose} show={isOpen} size="sm">
                <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
                    <p className="font-normal">Reset Session</p>
                </Modal.Header>
                <Modal.Body>
                    <FormProvider {...storeForm}>
                        <form onSubmit={handleSubmit(onSubmit, onError)}>
                            <div>
                                <div className="border-b pb-3 mb-4">
                                    <p className="font-medium text-gray-700 dark:text-gray-300 mb-2">
                                        Are you sure you want to reset this client's session?
                                    </p>
                                    <div className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                                        <p><span className="font-medium">Client:</span> {client?.name}</p>
                                        <p><span className="font-medium">ID:</span> {client?.pppoe_username}</p>
                                        <p><span className="font-medium">Phone:</span> {client?.phone}</p>
                                    </div>
                                </div>
                                <p className="text-sm text-gray-500 dark:text-gray-400">
                                    This will disconnect the active session on the MikroTik router. The client will need to reconnect.
                                </p>
                            </div>
                            <input className="opacity-0" type="submit" ref={inputRef} />
                        </form>
                    </FormProvider>
                </Modal.Body>
                <Modal.Footer className="flex justify-between">
                    <ActionButton
                        type="submit"
                        isLoading={isPending}
                        onClick={() => inputRef.current?.click()}
                    />
                    <button
                        type="button"
                        onClick={handleClose}
                        disabled={isPending}
                        className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
                    >
                        Cancel
                    </button>
                </Modal.Footer>
            </Modal>
        </div>
    );
};

export default ClientSessionReset;