import React, { useState, useEffect } from "react";
import { getParameterByName, param } from "@common-utils/Utils";
import DataService from "@common-services/DataService";

function otpFieldInit() {
    const inputs = document.querySelectorAll("#otp > *[id]");
    for (let i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener("keyup", function (event) {
            if (event.key === "Backspace") {
                inputs[i].value = "";
                if (i !== 0) inputs[i - 1].focus();
            } else {
                if ((event.keyCode > 47 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
                    inputs[i].value = event.key;
                    if (i !== inputs.length - 1) inputs[i + 1].focus();
                    event.preventDefault();
                } else if (
                    event.keyCode > 64 &&
                    event.keyCode < 91 &&
                    !((event.ctrlKey || event.metaKey) && event.keyCode === 86) //restricting the "V" key update when Ctrl + V / Cmd + V combination is pressed
                ) {
                    inputs[i].value = String.fromCharCode(event.keyCode);
                    if (i !== inputs.length - 1) inputs[i + 1].focus();
                    event.preventDefault();
                }
            }
        });

        // Capture paste event to handle pasting specifically
        inputs[i].addEventListener("paste", function (event) {
            event.preventDefault();
            const paste = (event.clipboardData || window.clipboardData).getData("text");
            paste?.split("").forEach((char, index) => {
                if (inputs[index]) {
                    inputs[index].value = char;
                }
            });
        });
    }
}

export default function Login() {
    const [msg, setMsg] = useState("");
    const [meta, setMeta] = useState({});

    const [civilId, setCivilId] = useState("");
    const [ecNo, setEcNo] = useState("");
    const [otpPrefix, setOtpPrefix] = useState("");

    useEffect(() => {
        saveClientVisit();

        const renderMsg = window.CONST.MESSAGES;
        if (renderMsg) {
            setMsg(renderMsg);
        }

        const renderData = JSON.parse(window.CONST.DATA);
        if (renderData) {
            setMeta(renderData);
        }

        console.log(renderData);
    }, []);

    useEffect(() => {
        if (meta.mode?.mode.includes("SLA")) {
            otpFieldInit();

            if (meta.modeData?.otpPrefix) {
                setCivilId(meta.modeData.civilId);
                setEcNo(meta.modeData.employeeNumber);
                setOtpPrefix(meta.modeData.otpPrefix);

                document.getElementById("civilId").disabled = true;
                document.getElementById("ecNo").disabled = true;
                document.getElementById("sendOtp").disabled = true;
            }
        }
    }, [meta]);

    const saveClientVisit = () => {
        const clientId = getParameterByName("clientId") || meta.clientId;

        let existing = JSON.parse(window.localStorage.getItem("clients"));
        existing = existing || {};
        existing[clientId] = {
            stamp: Date.now()
        };
        window.localStorage.setItem("clients", JSON.stringify(existing));
    };

    const onClickSendOtp = async () => {
        try {
            if (!civilId || !ecNo) return alert("Please enter valid Civil ID and EC Number");

            const res = await DataService.post("/api/v1/auth/send-otp", { civilId, employeeNumber: ecNo });

            if (res.statusKey === "SUCCESS") {
                if (res.results[0].mOtpPrefix) setOtpPrefix(res.results[0].mOtpPrefix);
            } else {
                setOtpPrefix("");
                return alert(res.message);
            }
        } catch (error) {
            console.error(error);
        }
    };

    const onClickLogin = async (e, mode) => {
        e.preventDefault();

        const clientId = getParameterByName("clientId") || meta.clientId;
        const ticketId = getParameterByName("ticketId") || meta.ticketId;
        const modeId = getParameterByName("modeId") || meta.mode._id;

        let formData = {
            clientId,
            ticketId,
            modeId
        };
        let isFormValid = true;
        if (e.target.elements) {
            Array.from(e.target.elements).forEach(input => {
                switch (input.type) {
                    case "text":
                    case "password":
                        if (input.name) formData[input.name] = input.value;
                        break;

                    default:
                        break;
                }
                if (input.name === "otp") {
                    const otpInputs = document.querySelectorAll("#otp > *[id]");
                    let otpStr = "";
                    for (let i = 0; i < otpInputs.length; i++) {
                        otpStr += otpInputs[i].value;
                    }
                    if (otpStr.length !== 6) {
                        isFormValid = false;
                    }
                    formData[input.name] = otpStr;
                }
            });
        }
        const formDataStr = param(formData);

        if (isFormValid) {
            window.location.href = `/sso/auth/${mode}/login${formDataStr ? "?" + formDataStr : ""}`;
        } else {
            alert("Please enter valid OTP");
        }
    };

    return (
        <>
            {msg && (
                <div id="message">
                    <div style={{ padding: "5px" }}>
                        <div id="inner-message" className="alert alert-error">
                            <button type="button" className="close" onClick={() => setMsg("")}>
                                &times;
                            </button>
                            {msg}
                        </div>
                    </div>
                </div>
            )}
            <section className="vh-100">
                <div className="container-fluid h-custom">
                    <div className="row d-flex justify-content-center align-items-center h-100">
                        <div className="col-md-9 col-lg-6 col-xl-5">
                            <img
                                src={require("@app-sso/assets/images/draw2.png")}
                                className="img-fluid"
                                alt="Sample image"
                            />
                        </div>
                        <div className="col-md-8 col-lg-6 col-xl-4 offset-xl-1 mt-5">
                            {/* MICROSOFT */}
                            {meta.mode?.mode.includes("MICROSOFT") && (
                                <div className="d-flex flex-row align-items-center justify-content-center">
                                    <a href="" onClick={e => onClickLogin(e, "microsoft")}>
                                        <img
                                            src={require("@app-sso/assets/images/ms-symbollockup_signin_light.svg")}
                                            alt="sign in with microsoft"
                                        ></img>
                                    </a>
                                </div>
                            )}

                            {/* PASSWORD */}
                            {meta.mode?.mode.includes("PASSWORD") && (
                                <>
                                    {meta.mode?.mode.includes("_OR_") && (
                                        <div className="divider d-flex align-items-center my-4">
                                            <p className="text-center fw-bold mx-3 mb-0">Or</p>
                                        </div>
                                    )}
                                    <form onSubmit={e => onClickLogin(e, "password")}>
                                        <div className="form-outline mb-2">
                                            <input
                                                type="text"
                                                name="uname"
                                                id="form3Example3"
                                                className="form-control form-control-md"
                                                placeholder="Enter a valid username"
                                                required
                                            />
                                            <label className="form-label" htmlFor="form3Example3">
                                                Username
                                            </label>
                                        </div>

                                        <div className="form-outline">
                                            <input
                                                type="password"
                                                name="pwd"
                                                id="form3Example4"
                                                className="form-control form-control-md"
                                                placeholder="Enter password"
                                                required
                                            />
                                            <label className="form-label" htmlFor="form3Example4">
                                                Password
                                            </label>
                                        </div>

                                        {/* <div className="d-flex justify-content-between align-items-center">
                                            <div className="form-check mb-0">
                                                <input
                                                    className="form-check-input me-2"
                                                    type="checkbox"
                                                    value=""
                                                    id="form2Example3"
                                                />
                                                <label className="form-check-label" htmlFor="form2Example3">
                                                    Remember me
                                                </label>
                                            </div>
                                            <a href="#!" className="text-body">
                                                Forgot password?
                                            </a>
                                        </div> */}

                                        <div className="text-center text-md-start">
                                            <button
                                                type="submit"
                                                className="btn btn-primary btn-md"
                                                style={{ paddingLeft: "2.5rem", paddingRight: "2.5rem" }}
                                            >
                                                Login
                                            </button>
                                            {/* <p className="small fw-bold mt-2 pt-1 mb-0">
                                                Don't have an account?{" "}
                                                <a href="#!" className="link-danger">
                                                    Register
                                                </a>
                                            </p> */}
                                        </div>
                                    </form>
                                </>
                            )}

                            {/* SLA */}
                            {meta.mode?.mode.includes("SLA") && (
                                <>
                                    {meta.mode?.mode.includes("_OR_") && (
                                        <div className="divider d-flex align-items-center my-4">
                                            <p className="text-center fw-bold mx-3 mb-0">Or</p>
                                        </div>
                                    )}
                                    <form onSubmit={e => onClickLogin(e, "sla")}>
                                        <div className="form-outline mb-2 overlay">
                                            <input
                                                type="text"
                                                name="civilId"
                                                id="civilId"
                                                className="form-control form-control-md"
                                                placeholder="Enter a valid Civil ID"
                                                required
                                                value={civilId}
                                                onChange={e => setCivilId(e.target.value)}
                                            />
                                            <label className="form-label" htmlFor="civilId">
                                                Civil ID
                                            </label>
                                        </div>

                                        <div className="form-outline mb-2">
                                            <input
                                                type="text"
                                                name="ecNo"
                                                id="ecNo"
                                                className="form-control form-control-md"
                                                placeholder="Enter a valid EC Number"
                                                required
                                                value={ecNo}
                                                onChange={e => setEcNo(e.target.value)}
                                            />
                                            <label className="form-label" htmlFor="ecNo">
                                                EC Number
                                            </label>
                                            <button
                                                id="sendOtp"
                                                style={{
                                                    position: "absolute",
                                                    right: "15px",
                                                    bottom: "220px"
                                                }}
                                                className="btn btn-primary btn-md"
                                                onClick={e => {
                                                    e.preventDefault();

                                                    onClickSendOtp();
                                                }}
                                            >
                                                send otp
                                            </button>
                                        </div>

                                        <input type="text" name="otpPrefix" hidden defaultValue={otpPrefix} />

                                        <input type="text" name="otp" hidden />

                                        <div className="d-flex justify-content-center align-items-center mb-3">
                                            <div className="position-relative">
                                                <div className="card p-2 text-center">
                                                    <h6>
                                                        Please enter the one time password <br /> to verify your account
                                                    </h6>
                                                    {/* <div>
                                                        <span>A code has been sent to</span> <small>*******9897</small>
                                                    </div> */}
                                                    <div
                                                        id="otp"
                                                        className="inputs d-flex flex-row justify-content-center mt-2"
                                                    >
                                                        <div className="m-2 text-center form-control rounded">
                                                            {otpPrefix}-
                                                        </div>
                                                        <input
                                                            className="m-2 text-center form-control rounded"
                                                            type="text"
                                                            id="first"
                                                            maxLength="1"
                                                        />
                                                        <input
                                                            className="m-2 text-center form-control rounded"
                                                            type="text"
                                                            id="second"
                                                            maxLength="1"
                                                        />
                                                        <input
                                                            className="m-2 text-center form-control rounded"
                                                            type="text"
                                                            id="third"
                                                            maxLength="1"
                                                        />
                                                        <input
                                                            className="m-2 text-center form-control rounded"
                                                            type="text"
                                                            id="fourth"
                                                            maxLength="1"
                                                        />
                                                        <input
                                                            className="m-2 text-center form-control rounded"
                                                            type="text"
                                                            id="fifth"
                                                            maxLength="1"
                                                        />
                                                        <input
                                                            className="m-2 text-center form-control rounded"
                                                            type="text"
                                                            id="sixth"
                                                            maxLength="1"
                                                        />
                                                    </div>
                                                </div>
                                                {/* <div className="card-2">
                                                    <div className="content d-flex justify-content-center align-items-center">
                                                        <span>Didn't get the code</span>&nbsp;
                                                        <a href="#" className="text-decoration-none ms-3">
                                                            Resend(1/3)
                                                        </a>
                                                    </div>
                                                </div> */}
                                            </div>
                                        </div>

                                        <div className="text-center text-md-start">
                                            <button
                                                type="submit"
                                                className="btn btn-primary btn-md"
                                                style={{ paddingLeft: "2.5rem", paddingRight: "2.5rem" }}
                                                disabled={!otpPrefix}
                                            >
                                                Submit
                                            </button>
                                        </div>
                                    </form>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}