import React, { useState, useEffect } from "react";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, Typography, theme } from "antd";
import { ToastContainer, toast } from "react-toastify";
import { Box, Button } from "@mui/material";
import TextField from "@mui/material/TextField";
import EditButton from "./EditButton";
import { width } from "@mui/system";
import "react-toastify/dist/ReactToastify.css";
import { useSearchParams } from "react-router-dom";
import LoadingContainer from "./LoadingContainer";
import HomeIcon from "@mui/icons-material/Home";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useNavigate } from "react-router-dom";
import QueryStatsIcon from "@mui/icons-material/QueryStats";
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
import RotateRightIcon from "@mui/icons-material/RotateRight";
import {
  updatePartAanomolyData,
  updatePlaygroundCurrentPage,
  updatePlaygroundResults,
  updatePlaygroundTotalPages,
  updateSystemNo,
} from "../redux/actions/actions";

import SimpleDialog from "./SimpleDialog";
import SystemNumberDialog from "./SystemNumberDialog";
import ValidationContainer from "./ValidationContainer";
import QueryExecutorCard from "./QueryExecutorCard";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import QueryExecutortextArea from "./QueryExecutortextArea";
import AntdesignLayout from "./AntdesignLayout";
import TextInputField from "./TextInputField";
import { render } from "react-dom";
import { updatePlaygroundQuery } from "../redux/actions/actions";
import { useSelector, useDispatch } from "react-redux";

const { Header, Content, Footer, Sider } = Layout;
const QueryExecutor = () => {
  const [responseData, setResponseData] = useState([]);
  const [totalData, setTotalData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [imageColumn, setImageColumn] = useState(null);
  const [query, setQuery] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [paginationPages,setPaginationPages] = useState(null)
  const [limit, setLimit] = useState("");
  const recordsPerPage = 50;
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const reduxPlaygroundQuery = useSelector((state) => state?.playGroundQuery);
  const reduxPlaygroundPageNo = useSelector(
    (state) => state?.playGroundCurrentPage
  );
  const reduxPlaygroundTotalPages = useSelector(
    (state) => state?.playGroundtotalPages
  );
  const reduxPlaygroundResults = useSelector(
    (state) => state?.playGroundResults
  );
  console.log("Redux playground query : ", reduxPlaygroundQuery);
  console.log("Redux playground page no : ", reduxPlaygroundPageNo);
  console.log("Redux playground total pages : ", reduxPlaygroundTotalPages);
  console.log("Redux playground resutls : ", reduxPlaygroundResults);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  useEffect(() => {
    if (reduxPlaygroundQuery && !query) {
      setQuery(reduxPlaygroundQuery);
    }
  }, [reduxPlaygroundQuery]);

  useEffect(() => {
    if (reduxPlaygroundPageNo != 0 && totalPages == 0) {
      setTotalPages(reduxPlaygroundTotalPages);
    }
  }, [reduxPlaygroundTotalPages]);

  useEffect(() => {
    if (totalData.length == 0 && reduxPlaygroundResults.length > 0) {
      setTotalData(reduxPlaygroundResults);
      setImageColumn("s3_path")
    }
  }, [reduxPlaygroundResults]);

  useEffect(() => {
    if (currentPage == 0 && reduxPlaygroundPageNo !== 0) {
      console.log("Updating in use effect ============================= >")
      setCurrentPage(reduxPlaygroundPageNo);
    }
  }, [reduxPlaygroundPageNo]);

  const fetchQueryValue = async () => {
    if (query.includes("limit")) {
      alert("Please specify the limit in the input field.");
      return;
    }
    if (query.includes(";")) {
      alert("Please remove the special character from the query ';'");
      return;
    }
    if (!limit) {
      alert("Limit cannot be empty !!");
      return;
    }
    if (
      !query.includes("image_name") &&
      query.includes("ocr_scanned_part_c_v1")
    ) {
      alert("Selecting primary Key (image_name) is mandatory");
      return;
    }
    setIsLoading(true);
    const payload = {
      query: query,
      limit: limit,
    };

    try {
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchQueryValue`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      );
      const data = await response.json();
      setIsLoading(false);
      if (data.status === "success") {
        setTotalData(data.results);
        dispatch(updatePlaygroundResults(data?.results));
        const totalPageCount = Math.ceil(data?.results.length / recordsPerPage);
        setTotalPages(totalPageCount);
        dispatch(updatePlaygroundTotalPages(totalPages))
        setCurrentPage(1);
        setResponseData(data.results.slice(0, recordsPerPage));
      } else {
        toast.error(data.message);
      }
    } catch (error) {
      console.error("Error:", error);
    }
  };

  useEffect(() => {
    dispatch(updatePlaygroundQuery(query));
  }, [query]);


  useEffect(() => {
    if (totalData.length > 0) {
      setResponseData([])
      console.log(" ===========================>>>>>>>>>>>>>>>>>>>>>>>> ")
      setIsLoading(true);
      setTimeout(() => {
        const startIndex = (currentPage - 1) * recordsPerPage;
        const endIndex = startIndex + recordsPerPage;
        setResponseData(totalData.slice(startIndex, endIndex));
        setIsLoading(false);
      }, 1000);
    }
    dispatch(updatePlaygroundCurrentPage(currentPage));
    renderPagination()
  }, [currentPage, totalData]);

  const renderPagination = () => {
    const pages = [];
    for (let i = 1; i <= totalPages; i++) {
      pages.push(
        <span key={i}>
          {i > 1 && " | "}
          <a
            href="#!"
            onClick={() => setCurrentPage(i)}
            className={i === currentPage ? "active" : ""}
          >
            {i}
          </a>
        </span>
      );
    }
    setPaginationPages(pages)
  };

  useEffect(() => {
    renderPagination();
    dispatch(updatePlaygroundTotalPages(totalPages));
  }, [currentPage, totalPages]);

  const getTableData = () => {
    if (responseData.length === 0) return null;
    const keys = Object.keys(totalData[0]);

    return (
      <div className="w-100">
        <div className="text-left d-flex justify-content-between align-items-center">
          <h5>
            <strong>Total Results </strong> : {totalData.length}
          </h5>
          {totalData.length > 0 && (
            <div id="footer-container">
              <div
                id="footer-main"
                className="d-flex justify-content-center p-3 align-items-center"
              >
                <div className="d-flex justify-content-center align-items-center p-1">
                  <Box className="d-flex flex-column align-items-end">
                    <Box>{paginationPages}</Box>
                    <Box>
                      <strong>{currentPage}</strong>/
                      <strong>{totalPages}</strong>
                    </Box>
                  </Box>
                </div>
                <div className="d-flex gap-3">
                  {/* <button
                    className="btn text-light bg-primary rounded p-2 mx-3"
                    onClick={() =>
                      setCurrentPage((prev) => Math.max(prev - 1, 1))
                    }
                  >
                    Previous
                  </button>
                  <button
                    className="btn text-light bg-primary rounded p-2"
                    onClick={() =>
                      setCurrentPage((prev) => Math.min(prev + 1, totalPages))
                    }
                  >
                    Next
                  </button>
                  {} */}
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="my-2 overflow-auto">
          {responseData.map((data) => (
            <QueryExecutorCard
              data={data}
              s3_image_column={imageColumn}
              query={query}
            />
          ))}
        </div>
      </div>
    );
  };

  return (
    <AntdesignLayout>
      <div className="mx-3">
        <div className="my-3 d-flex flex-md-row flex-column">
          <div className="w-100 w-md-75">
            <QueryExecutortextArea query={query} setQuery={setQuery} />
          </div>
          <div className="d-none d-md-block w-25">
            <div className="w-100 d-flex flex-column gap-2 mx-2">
              <TextInputField
                placeholder={"limit"}
                value={limit}
                setValue={setLimit}
              />
              <TextInputField
                placeholder={"imageColumn"}
                value={imageColumn}
                setValue={setImageColumn}
              />
              <button
                className="btn bg-primary text-light"
                id="submit-btn"
                onClick={fetchQueryValue}
              >
                Submit
              </button>
            </div>
          </div>

          <div className="d-block d-md-none w-100">
            <div className="w-100 d-flex flex-column gap-2">
              <TextField
                className="rounded h6 bg-white"
                type="text"
                placeholder="Limit"
                id="limit-input"
                autoComplete="off"
                value={limit}
                onChange={(e) => setLimit(e.target.value)}
              />
              <TextField
                className="input rounded h6 bg-white"
                type="text"
                placeholder="Image column name"
                id="image-column-input"
                autoComplete="off"
                value={imageColumn}
                onChange={(e) => setImageColumn(e.target.value)}
              />
              <button
                className="btn bg-primary text-light"
                id="submit-btn"
                onClick={fetchQueryValue}
              >
                Submit
              </button>
            </div>
          </div>
        </div>
        <div
          id="results-container"
          className="d-flex w-100 justify-content-center"
        >
          {getTableData()}
        </div>
      </div>
      {isLoading && <LoadingContainer />}
    </AntdesignLayout>
  );
};

export default QueryExecutor;