"use client";
import { useParams } from "next/navigation";
import { useState, useEffect } from "react";
import Location from "@components/Location/Location";
import { useLocationStore } from "@store/Location.Store";
import { useEventHandlerStore, EVENT_TYPES } from "@store/EventHandler.Store";
import { useSessionStore } from "@store/Sesion.Store";
import { useAlert } from "@store/Alert.Store";
import StorefrontOutlinedIcon from "@mui/icons-material/StorefrontOutlined";
import OrgConfigIcon from "@mui/icons-material/SettingsOutlined";
import MaterialAlert from "@mui/material/Alert";
import Button from "@core/app/components/Button/Button";
import {
    wapServerAssign,
    wapServerBotCreate,
    wapServerBotStart,
    wapServerBotGetQR,
    wapServerView,
    wapServerBotDelete,
    wapServerBotStop,
    wapServerQuit,
    setAutomaticNotificationsStatus,
} from "./Wap.Service";
import { BOT_SESSION_STATUS, BotView, SERVER_STATE } from "@core/Models/Wap.model";
import Image from "next/image";
import Switch from "@core/app/components/Switch/Switch";
import { useConfirmStore } from "@core/Store/Confirm.Store";
import SecureByPlan, { SECURE_CONTENTS } from "@core/app/components/SecureByPlan/SecureByPlan";

type UrlData = {
    id: string;
};

export default function OrganizationEdit() {
    const data = useParams<UrlData>();
    const id = data.id;
    const location = useLocationStore();
    const eventHandler = useEventHandlerStore();
    const SessionInfo = useSessionStore();
    const alert = useAlert();
    const confirm = useConfirmStore();

    const [wapView, setWapView] = useState<BotView | undefined>(undefined);
    const [qr, setQr] = useState<string | undefined>(undefined);

    useEffect(() => {
        location.clear();

        location.add({
            url: "/admin/org",
            title: "Organizaciones",
            icon: null,
        });

        location.add({
            url: "/admin/org/profile/" + id,
            title: "Perfil",
            icon: <StorefrontOutlinedIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
        });

        location.add({
            url: "/admin/org/wap/" + id,
            title: "Whatsapp",
            icon: <OrgConfigIcon sx={{ fontSize: "32px", mr: "10px" }} />,
        });
    }, []);

    useEffect(() => {
        if (!SessionInfo.userId) {
            return;
        }
        loadView();
    }, [SessionInfo.userId]);

    useEffect(() => {
        if (!SessionInfo.userId) {
            return;
        }

        if (!wapView) {
            return;
        }

        if (wapView?.runningState.indexOf("Up") < 0) {
            return;
        }

        wapServerBotGetQR({
            companyId: id,
            sessionUser: SessionInfo.userId,
        }).then((data: string) => {
            setQr(data);
        });
    }, [wapView?.runningState, SessionInfo.userId]);

    const loadView = () => {
        eventHandler.setEventType(EVENT_TYPES.LOADING);
        wapServerView({
            companyId: id,
            sessionUser: SessionInfo.userId,
        })
            .then((response: BotView) => {
                setWapView(response);
            })
            .catch((error) => {
                setWapView(undefined);
                alert.showError(error.format());
            })
            .finally(() => {
                eventHandler.setEventType(EVENT_TYPES.SLEEP);
            });
    };

    const saveAutomaticNotifications = (status: boolean) => {
        eventHandler.setEventType(EVENT_TYPES.LOADING);
        setAutomaticNotificationsStatus({
            companyId: id,
            status: status,
            sessionUser: SessionInfo.userId,
        })
            .then(() => {
                loadView();
            })
            .catch((error) => {
                alert.showError(error.format());
            })
            .finally(() => {
                eventHandler.setEventType(EVENT_TYPES.SLEEP);
            });
    };

    const getImageFromBase64 = (buffer: string): string => {
        const base64Data = buffer.includes("base64,") ? buffer.split(",")[1] : buffer;

        const byteCharacters = atob(base64Data);
        const byteNumbers = new Array(byteCharacters.length);

        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);

        const blob = new Blob([byteArray], { type: "image/png" });
        return URL.createObjectURL(blob);
    };

    const PrintQR = () => {
        if (!qr) {
            return <></>;
        }

        const imageUrl = getImageFromBase64(qr);

        return (
            <Image
                src={imageUrl}
                alt="Escanear el código para iniciar sesión en Whatsapp."
                width={321}
                height={321}
            />
        );
    };

    const BotContentNoPermission = () => {
        return (
            <>
                <MaterialAlert severity="info" sx={{ marginTop: "20px", width: "100%" }}>
                    No fue posible cargar la interfaz. <br />
                    <b>
                        Si no está suscrito a un plan que permita el envío de notificaciones por
                        WhatsApp, no podrá acceder a esta sección.
                    </b>{" "}
                    <br />
                    Para configurar un servidor de notificaciones, primero debe actualizar su plan.
                    <br />
                    <b>
                        Si ya posee un plan es posible que el servidor no este disponible en este
                        momento.
                    </b>
                </MaterialAlert>
            </>
        );
    };

    const DefaultBotContent = () => {
        return (
            <>
                <Image
                    src="/bot-wo-server.png"
                    alt="Bot de Whatsapp"
                    width={128}
                    height={128}
                    priority
                />
                <MaterialAlert severity="info" sx={{ marginTop: "20px", width: "100%" }}>
                    Para poder enviar notificaciones por <b>Whatsapp</b> es necesario asignar un
                    servidor y luego crear el bot.
                </MaterialAlert>

                <Button
                    text="Asignar un servidor"
                    width="100%"
                    color="primary"
                    style={{ height: "42px", marginTop: "10px" }}
                    onClick={() => {
                        eventHandler.setEventType(EVENT_TYPES.LOADING);
                        wapServerAssign({
                            companyId: id,
                            sessionUser: SessionInfo.userId,
                        })
                            .then(() => {
                                console.log("se ha asignado el servidor");
                            })
                            .catch((error) => {
                                alert.showError(error.format());
                            })
                            .finally(() => {
                                loadView();
                                eventHandler.setEventType(EVENT_TYPES.SLEEP);
                            });
                    }}
                />
            </>
        );
    };

    const BotContent = () => {
        /*
         * wapView.serverId: Indica si se asigno un servidor al bot.
         * wapView.serverState: Indica si el servidor bot admin esta funcionando o no.
         * wapView.exists: Si es true indica que el bot fue creado.
         * wapView.runningState: Indica si el estado del bot. Si esta Up o no.
         */

        if (!wapView) {
            return <BotContentNoPermission />;
        }

        if (
            wapView.exists &&
            wapView.runningState.indexOf("Up") >= 0 &&
            wapView.botSession == BOT_SESSION_STATUS.LOGED
        ) {
            //Indica si el bot esta c
            return (
                <>
                    <Image
                        src="/bot-session-started.png"
                        alt="Bot de Whatsapp"
                        width={128}
                        height={128}
                        priority
                    />
                    <MaterialAlert severity="info" sx={{ marginTop: "20px", width: "100%" }}>
                        Sesion iniciada. Ya puede enviar notificaciones.
                    </MaterialAlert>

                    <Button
                        text="Detener bot de Whatsapp"
                        width="100%"
                        color="success"
                        style={{ height: "42px", marginTop: "10px" }}
                        onClick={() => {
                            eventHandler.setEventType(EVENT_TYPES.LOADING);
                            wapServerBotStop({
                                companyId: id,
                                sessionUser: SessionInfo.userId,
                            })
                                .then(() => {
                                    loadView();
                                })
                                .catch((error) => {
                                    alert.showError(error.format());
                                })
                                .finally(() => {
                                    eventHandler.setEventType(EVENT_TYPES.SLEEP);
                                });
                        }}
                    />
                </>
            );
        } else if (wapView.serverState === SERVER_STATE.NOT_WORKING) {
            return (
                <>
                    <Image
                        src="/bot-server-nw.png"
                        alt="Bot de Whatsapp"
                        width={128}
                        height={128}
                        priority
                    />
                    <MaterialAlert severity="info" sx={{ marginTop: "20px", width: "100%" }}>
                        El servidor se encuentra <b>fuera de servicio.</b> Intente de nuevo mas
                        tarde. Mientras el servidor no este en servicio no se podran enviar
                        notificaciones de Whatsapp.
                    </MaterialAlert>
                </>
            );
        } else if (
            wapView.exists &&
            wapView.runningState.indexOf("Up") >= 0 &&
            wapView.botSession == BOT_SESSION_STATUS.UNLOGED
        ) {
            //Indica si el bot esta c
            return (
                <>
                    <Image
                        src="/bot-wo-session.png"
                        alt="Bot de Whatsapp"
                        width={128}
                        height={128}
                        priority
                    />
                    <MaterialAlert severity="info" sx={{ marginTop: "20px", width: "100%" }}>
                        Bot de Whatsapp iniciado. Por favor <b>escanee el código QR</b> desde su
                        dispositivo con Whatsapp para vincular su cuenta.
                    </MaterialAlert>

                    <PrintQR />

                    <Button
                        text="Ya he escaneado el código QR."
                        width="100%"
                        color="primary"
                        style={{ height: "42px", marginTop: "10px" }}
                        onClick={() => {
                            loadView();
                        }}
                    />

                    <Button
                        text="Detener"
                        width="100%"
                        color="secondary"
                        style={{ height: "42px", marginTop: "10px" }}
                        onClick={() => {
                            eventHandler.setEventType(EVENT_TYPES.LOADING);
                            wapServerBotStop({
                                companyId: id,
                                sessionUser: SessionInfo.userId,
                            })
                                .then(() => {
                                    loadView();
                                })
                                .catch((error) => {
                                    alert.showError(error.format());
                                })
                                .finally(() => {
                                    eventHandler.setEventType(EVENT_TYPES.SLEEP);
                                });
                        }}
                    />
                </>
            );
        } else if (wapView.exists && wapView.runningState.indexOf("Up") < 0) {
            //Indica si el bot esta c
            return (
                <>
                    <Image
                        src="/bot-exists.png"
                        alt="Bot de Whatsapp"
                        width={128}
                        height={128}
                        priority
                    />

                    <MaterialAlert severity="info" sx={{ marginTop: "20px", width: "100%" }}>
                        Es necesario iniciar el bot de Whatsapp para poder enviar notificaciones.
                    </MaterialAlert>

                    <Button
                        text="Iniciar bot de Whatsapp"
                        width="100%"
                        color="success"
                        style={{ height: "42px", marginTop: "10px" }}
                        onClick={() => {
                            eventHandler.setEventType(EVENT_TYPES.LOADING);
                            wapServerBotStart({
                                companyId: id,
                                sessionUser: SessionInfo.userId,
                            })
                                .then(() => {
                                    loadView();
                                })
                                .catch((error) => {
                                    alert.showError(error.format());
                                })
                                .finally(() => {
                                    eventHandler.setEventType(EVENT_TYPES.SLEEP);
                                });
                        }}
                    />

                    <Button
                        text="Eliminar el bot de Whatsapp"
                        width="100%"
                        color="error"
                        style={{ height: "42px", marginTop: "10px" }}
                        onClick={() => {
                            confirm.show(
                                "Se eliminará el bot de Whatsapp. ¿Esta seguro?",
                                () => {
                                    eventHandler.setEventType(EVENT_TYPES.LOADING);
                                    wapServerBotDelete({
                                        companyId: id,
                                        sessionUser: SessionInfo.userId,
                                    })
                                        .then(() => {
                                            loadView();
                                        })
                                        .catch((error) => {
                                            alert.showError(error.format());
                                        })
                                        .finally(() => {
                                            eventHandler.setEventType(EVENT_TYPES.SLEEP);
                                        });
                                },
                                () => { }
                            );
                        }}
                    />
                </>
            );
        } else if (wapView.serverId) {
            //El servidor fue asignado.
            return (
                <>
                    <Image
                        src="/bot-wa-server.png"
                        alt="Bot de Whatsapp"
                        width={128}
                        height={128}
                        priority
                    />
                    <MaterialAlert severity="info" sx={{ marginTop: "20px", width: "100%" }}>
                        Servidor asignado.{" "}
                        <b>
                            {wapView.serverName}. {wapView.serverDescription}.
                        </b>{" "}
                        Ahora en necesario crear el bot de Whatsapp.
                    </MaterialAlert>

                    <Button
                        text="Crear bot de Whatsapp"
                        width="100%"
                        color="primary"
                        style={{ height: "42px", marginTop: "10px" }}
                        onClick={() => {
                            eventHandler.setEventType(EVENT_TYPES.LOADING);
                            wapServerBotCreate({
                                companyId: id,
                                sessionUser: SessionInfo.userId,
                            })
                                .then(() => {
                                    setTimeout(() => {
                                        loadView();
                                    }, 5000);
                                })
                                .catch((error) => {
                                    alert.showError(error.format());
                                    eventHandler.setEventType(EVENT_TYPES.SLEEP);
                                });
                        }}
                    />

                    <Button
                        text="Desconectar del servidor"
                        width="100%"
                        color="secondary"
                        style={{ height: "42px", marginTop: "10px" }}
                        onClick={() => {
                            eventHandler.setEventType(EVENT_TYPES.LOADING);
                            wapServerQuit({
                                companyId: id,
                                sessionUser: SessionInfo.userId,
                            })
                                .then(() => {
                                    setTimeout(() => {
                                        loadView();
                                    }, 5000);
                                })
                                .catch((error) => {
                                    alert.showError(error.format());
                                    eventHandler.setEventType(EVENT_TYPES.SLEEP);
                                });
                        }}
                    />
                </>
            );
        }

        return <DefaultBotContent />;
    };

    return (
        <>
            <Location />

            <SecureByPlan content={SECURE_CONTENTS.WAP} companyId={id}>
                <div
                    style={{
                        marginTop: "20px",
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "start",
                        alignItems: "center",
                    }}
                >
                    <BotContent />
                </div>

                {wapView && (
                    <div
                        style={{
                            marginTop: "10px",
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "center",
                        }}
                    >
                        <Switch
                            checked={wapView.automaticNotifications}
                            onChange={(checked) => {
                                saveAutomaticNotifications(checked);
                            }}
                        />
                        <span
                            style={
                                wapView.automaticNotifications
                                    ? { color: "var(--green-darkestX2)" }
                                    : { color: "var(--error)" }
                            }
                        >
                            {wapView.automaticNotifications
                                ? "Notificaciones automaticas activadas"
                                : "Notificaciones automaticas desactivadas"}
                        </span>
                    </div>
                )}

                <div style={{ marginBottom: "40px" }}>&nbsp;</div>
            </SecureByPlan>
        </>
    );
}
