import React, { useState, useEffect, useContext } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useHistory } from "react-router-dom";
import moment from "moment";
import { notifyError } from "../utils/toast";
import {
  Doughnut,
  Bar,
} from "react-chartjs-2";
// import Chart from 'chart.js/auto';
import {
  Card,
  CardBody,
  Table,
  TableContainer,
  TableHeader,
  TableBody,
  TableRow,
  TableCell,
  Select,
  Button,
} from "@windmill/react-ui";
import { SidebarContext } from "../context/SidebarContext";
import PageTitle from "../components/Typography/PageTitle";
import Loading from "../components/preloader/Loading";
import resetLogo from "../assets/img/reset.png";
import ReportServices from "../services/ReportServices";
import EmployeeServices from "../services/EmployeeServices";

/**
 * Returning required redux state data
 * @param {Object} state - Redux state
 */
const getReduxData = (state) => {
  return {
    Loader: state.Loader
  };
};

const DashboardReport = () => {
  const dispatch = useDispatch();
  const navigate = useHistory();
  let data = useSelector(getReduxData);
  let loading = data?.Loader.loading;
  const localData = JSON.parse(localStorage.getItem('adminInfo'));
  const [employeeId, setEmployeeId] = useState(localData?.employeeId ? parseInt(localData?.employeeId) : "");
  const [latestDesignationSalesPerson, setLatestDesignationSalesPerson] = useState(false);
  const [rsm, setRsm] = useState();
  const [asm, setAsm] = useState();
  const [salesPerson, setSalesPerson] = useState();
  const [getEmployeesData, setGetEmployeesData] = useState([]);
  const [rsmList, setRsmList] = useState([]);
  const [asmList, setAsmList] = useState([]);
  const [salesPersonList, setSalesPersonList] = useState([]);
  const [mainLoader, setMainLoader] = useState(true);
  const {
    currentPage,
    setCurrentPage,
    handleChangePage,
    toggleDrawer,
  } = useContext(SidebarContext);

  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  function returnColorArray(number) {
    let colorArray = [];
    for (let i = 0; i < number; i++) {
      colorArray.push(getRandomColor());
    }
    return colorArray;
  }

  const centerTextPlugin = {
    id: 'centerText',
    beforeDraw(chart) {
      const { width, height, ctx } = chart;
      const datasets = chart.data.datasets[0];

      const total = datasets.data.reduce((sum, value) => sum + value, 0);

      ctx.save();
      ctx.font = '16px Arial';
      ctx.fillStyle = '#000';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('Total', width / 2, height / 2.8);

      ctx.font = '14px Arial';
      ctx.fillText(`${total}`, width / 2, height / 2.4);
      ctx.restore();
    },
  };

  // Chart.register(centerTextPlugin);

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: "bottom",
        onClick: null,
      },
    },
  };

  // STATES FOR FETCHING API RESPONSE
  const [teamAttendanceReports, setTeamAttendanceReports] = useState();
  const [callSummaryReports, setCallSummaryReports] = useState();
  const [employeeReports, setEmployeeReports] = useState();
  const [catalogReportsForCategory, setCatalogReportsForCategory] = useState();
  const [catalogReportsForProduct, setCatalogReportsForProduct] = useState();

  // STATES FOR LOADERS
  const [teamAttendanceReportsLoader, setTeamAttendanceReportsLoader] = useState(false);
  const [callSummaryReportsLoader, setCallSummaryReportsLoader] = useState(false);
  const [employeeReportsLoader, setEmployeeReportsLoader] = useState(false);
  const [catalogReportsForCategoryLoader, setCatalogReportsForCategoryLoader] = useState(false);
  const [catalogReportsForProductLoader, setCatalogReportsForProductLoader] = useState(false);

  //DISTRIBUTOR LENGTH
  const distributorLimit = 5;
  const employeeLimit = 5;
  const categoryLimit = 5;
  const productLimit = 5;

  const characterLength = 12;

  const barThickness = 40;

  // Ensure colors are generated before JSX
  const distributorColors = returnColorArray(distributorLimit);
  const employeeColors = returnColorArray(employeeLimit);
  const categoryColors = returnColorArray(categoryLimit);
  const productColors = returnColorArray(productLimit);

  const getEmployees = async (design_id) => {
    if (localData?.employeeId) {
      await getTeamById(localData?.employeeId, "rsm");
    }
    else {
      await EmployeeServices.getEmployees({
        design_id: design_id,
      })
        .then((res) => {
          setGetEmployeesData(res?.data);
          setEmployeeId(res?.data[0]?.employeeId);
          setRsm(res?.data[0]?.employeeId);
          getTeamById(res?.data[0]?.employeeId, "asm");
        })
        .catch((err) => console.log("ERROR in /getEmployees", err));
    }
  }

  useEffect(async () => {
    await getEmployees(3);
  }, []);

  const getTeamById = async (id, designation) => {
    await ReportServices.getTeamById({
      employeeId: parseInt(id),
      store_id: localData?.store_id ? parseInt(localData?.store_id) : "",
    })
      .then(res => {
        if (designation == "rsm") {
          setRsmList(res?.data);
        }
        else if (designation == "asm") {
          setAsmList(res?.data);
        }
        else if (designation == "salesperson") {
          setSalesPersonList(res?.data);
        }
        else {
          alert(`Only have ASM and Sales Person getTeamById query!`);
        }
      })
      .catch(err => console.log("Error in /getTeamById", err));
  }

  const getTeamAttendanceReports = async () => {
    setTeamAttendanceReportsLoader(true);
    await ReportServices.getTeamAttendanceReports({
      employeeId,
      date: new Date().toISOString().split("T")[0],
    })
      .then(res => setTeamAttendanceReports(res))
      .catch(err => console.log("Error in /getTeamAttendanceReports", err));
    setTeamAttendanceReportsLoader(false);
  };

  const getCallSummaryReports = async () => {
    setCallSummaryReportsLoader(true);
    await ReportServices.getRetailerReports({
      customerId: [],
      customerType: "None",
      employeeId: [
        employeeId
      ],
      // startDate: moment().startOf('month').format("YYYY-MM-DD"),
      // endDate: moment().endOf('month').format("YYYY-MM-DD"),
      startDate: new Date().toISOString().split("T")[0],
      endDate: new Date().toISOString().split("T")[0],
      frequency: "cumulative",
      visitType: "callSummary"
    })
      .then(res => setCallSummaryReports(res))
      .catch(err => console.log("Error in /getCallSummaryReports", err));
    setCallSummaryReportsLoader(false);
  };

  const getEmployeeReports = async () => {
    setEmployeeReportsLoader(true);
    await ReportServices.getEmployeeReports({
      employeeId,
      type: "month",
    })
      .then(res => setEmployeeReports(res))
      .catch(err => console.log("Error in /getEmployeeReports", err));
    setEmployeeReportsLoader(false);
  };

  const getCatalogReportsForCategory = async () => {
    setCatalogReportsForCategoryLoader(true);
    await ReportServices.getCatalogReports({
      employeeId,
      type: "month",
      catalog_type: "category",
    })
      .then(res => setCatalogReportsForCategory(res))
      .catch(err => console.log("Error in /getCatalogReportsForCategory", err));
    setCatalogReportsForCategoryLoader(false);
  };

  const getCatalogReportsForProduct = async () => {
    setCatalogReportsForProductLoader(true);
    await ReportServices.getCatalogReports({
      employeeId,
      type: "month",
      catalog_type: "product",
    })
      .then(res => setCatalogReportsForProduct(res))
      .catch(err => console.log("Error in /getCatalogReportsForProduct", err));
    setCatalogReportsForProductLoader(false);
  };

  const runAllReportAPIs = () => {
    getTeamAttendanceReports();
    getCallSummaryReports();
    getEmployeeReports();
    getCatalogReportsForCategory();
    getCatalogReportsForProduct();
  }

  const reset = () => {
    window.location.reload();
  }

  useEffect(() => {
    if (!employeeId) {
      // notifyError(`Employee ID is not available!`);
    }
    runAllReportAPIs();
  }, [employeeId]);

  const chartDataForTeamAttendanceReports = {
    datasets: [
      {
        data: [
          teamAttendanceReports?.present?.count || 0,
          teamAttendanceReports?.leaves?.count || 0,
          teamAttendanceReports?.defaulters?.count || 0,
        ],
        backgroundColor: ["#00a100", "#8bdce4", "#ff0000"],
        label: "Attendance Summary",
        total: teamAttendanceReports?.total
      },
    ],
    labels: [
      `Present (${teamAttendanceReports?.present?.percentage || 0}%)`,
      `Leaves (${teamAttendanceReports?.leaves?.percentage || 0}%)`,
      `Defaulters (${teamAttendanceReports?.defaulters?.percentage || 0}%)`,
    ],
  };

  const chartDataForCovergeCallSummaryReports = {
    datasets: [
      {
        data: [
          (callSummaryReports?.data[0]?.coverage_calls && callSummaryReports?.data[0]?.total_customers
            ? (callSummaryReports?.data[0]?.coverage_calls / callSummaryReports?.data[0]?.total_customers) * 100
            : 0) || 0,
          (callSummaryReports?.data[0]?.coverage_calls && callSummaryReports?.data[0]?.total_customers
            ? 100 - (callSummaryReports?.data[0]?.coverage_calls / callSummaryReports?.data[0]?.total_customers) * 100
            : 100) || 100,
          // 44 || 0,
          // 56 || 0,
        ],
        backgroundColor: ["#00a100", "#d5d6d7"],
        label: "Call Summary - Visited Calls",
      },
    ],
    labels: [
      `Visited Calls`,
      `Remaining`,
    ],
  };

  const chartDataForProductiveCallSummaryReports = {
    datasets: [
      {
        data: [
          (callSummaryReports?.data[0]?.productive_customers && callSummaryReports?.data[0]?.total_customers
            ? (callSummaryReports?.data[0]?.productive_customers / callSummaryReports?.data[0]?.total_customers) * 100
            : 0) || 0,
          (callSummaryReports?.data[0]?.productive_customers && callSummaryReports?.data[0]?.total_customers
            ? 100 - (callSummaryReports?.data[0]?.productive_customers / callSummaryReports?.data[0]?.total_customers) * 100
            : 100) || 100,
          // 8 || 0,
          // 92 || 0,
        ],
        backgroundColor: ["#3498db", "#d5d6d7"],
        label: "Call Summary - Productive Calls",
      },
    ],
    labels: [
      `Productive Calls`,
      `Remaining`,
    ],
  };

  const handleSubmit = () => {
    let latestEmployeeId;
    setLatestDesignationSalesPerson(false);
    // Check which variable exists in the preferred order of precedence (Sales Person > ASM > RSM)
    if (salesPerson) {
      latestEmployeeId = parseInt(salesPerson);
      setLatestDesignationSalesPerson(true);
    } else if (asm) {
      latestEmployeeId = parseInt(asm);
    } else if (rsm) {
      latestEmployeeId = parseInt(rsm);
    }
    if (latestEmployeeId) {
      setEmployeeId(latestEmployeeId);
      runAllReportAPIs();
    }
    else {
      setEmployeeId(localData?.employeeId ? parseInt(localData?.employeeId) : "");
      alert(`Please select an employee from the rsm dropdown first!`);
    }
  };

  return (
    <>
      <PageTitle>
        Dashboard Reports
      </PageTitle>

      <Card className="min-w-0 shadow-xs overflow-hidden bg-white dark:bg-gray-800 mb-5">
        <CardBody>
          <div className="flex justify-between items-center flex-wrap">

            <div className="flex flex-wrap space-x-8">
              {/* RSM Selector */}
              <div className="flex items-center font-bold">
                {/* <label htmlFor="rsmId">RSM:&nbsp;</label> */}
                <Select
                  id="rsmId"
                  className="border h-12 text-sm focus:outline-none block w-full bg-gray-100 dark:bg-white border-transparent focus:bg-white"
                  style={{ width: '16vw' }}
                  value={rsm}
                  onChange={(e) => {
                    setAsmList([]);
                    setSalesPersonList([]);
                    setAsm();
                    setSalesPerson();
                    setRsm(e.target.value);
                    getTeamById(e.target.value, "asm");
                  }}
                >
                  <option value="" hidden>Select RSM</option>
                  <optgroup label="Choose RSM">
                    {(rsmList?.flatMap(elem => elem?.teamMembers)?.length > 0 ? rsmList?.flatMap(elem => elem?.teamMembers) : getEmployeesData || []).map((elem, i) => (
                      <option key={i} value={elem?.employeeId}>
                        {elem?.firstName?.toUpperCase()} {elem?.lastName?.toUpperCase()}
                      </option>
                    ))}
                  </optgroup>
                </Select>
              </div>

              {/* ASM Selector */}
              {
                asmList?.flatMap(elem => elem?.teamMembers)?.length > 0 &&
                <div className="flex items-center font-bold">
                  {/* <label htmlFor="asmId">ASM:&nbsp;</label> */}
                  <Select
                    id="asmId"
                    className="border h-12 text-sm focus:outline-none block w-full bg-gray-100 dark:bg-white border-transparent focus:bg-white"
                    style={{ width: '16vw' }}
                    value={asm}
                    onChange={(e) => {
                      setSalesPersonList([]);
                      setSalesPerson();
                      setAsm(e.target.value);
                      getTeamById(e.target.value, "salesperson");
                    }}
                  >
                    <option value="" hidden>Select ASM</option>
                    <optgroup label="Choose ASM">
                      {asmList?.flatMap(elem => elem?.teamMembers)?.map((elem, i) => (
                        <option key={i} value={elem?.employeeId}>
                          {elem?.firstName?.toUpperCase()} {elem?.lastName?.toUpperCase()}
                        </option>
                      ))}
                    </optgroup>
                  </Select>
                </div>
              }

              {/* Sales Person Selector */}
              {
                salesPersonList?.flatMap(elem => elem?.teamMembers)?.length > 0 &&
                <div className="flex items-center font-bold">
                  {/* <label htmlFor="salesPersonId">Sales Person:&nbsp;</label> */}
                  <Select
                    id="salesPersonId"
                    className="border h-12 text-sm focus:outline-none block w-full bg-gray-100 dark:bg-white border-transparent focus:bg-white"
                    style={{ width: '16vw' }}
                    value={salesPerson}
                    onChange={(e) => {
                      setSalesPerson(e.target.value);
                      // getTeamById(e.target.value, "salesperson");
                    }}
                  >
                    <option value="" hidden>Select Sales Person</option>
                    <optgroup label="Choose Sales Person">
                      {salesPersonList?.flatMap(elem => elem?.teamMembers)?.map((elem, i) => (
                        <option key={i} value={elem?.employeeId}>
                          {elem?.firstName?.toUpperCase()} {elem?.lastName?.toUpperCase()}
                        </option>
                      ))}
                    </optgroup>
                  </Select>
                </div>
              }
            </div>

            <div className="flex items-center">
              <Button
                onClick={reset}
                className="w-full rounded-md h-12 mx-2"
                style={{ backgroundColor: "white", padding: '0px', border: '0.1px solid #d5d6d7', width: '190px' }}
              >
                <img src={resetLogo} width={20} height={20} title="Click To Reset The Fields" alt="RESET_LOGO" />&nbsp;
                <span className="text-black">RESET</span>
              </Button>
              <Button
                className="px-6 py-3 rounded-md"
                onClick={handleSubmit}
              >
                SUBMIT
              </Button>
            </div>
          </div>
        </CardBody>
      </Card>

      <Card className="min-w-0 shadow-xs overflow-hidden bg-white dark:bg-gray-800 mb-5">
        {
          // (false) ?
          (teamAttendanceReportsLoader == true || callSummaryReportsLoader == true) ?
            <h2 className="text-lg font-semibold mt-4 mb-4 text-center">
              Loading Summary Charts...
            </h2>
            :
            <CardBody className="flex flex-wrap justify-center items-center">
              {
                latestDesignationSalesPerson != true &&
                <div className={`
                  attendance-summary-container
                  `}>
                  {
                    teamAttendanceReportsLoader === true ? (
                      <div>
                        <h2 className="text-lg font-semibold mt-4 mb-4 text-center">
                          Loading Attendance Summary Chart...
                          &nbsp;&nbsp;&nbsp;
                        </h2>
                      </div>
                    ) : (
                      <div>
                        <h2 className="text-lg font-semibold mb-4 text-center">Attendance Summary - Today</h2>
                        <div style={{ maxWidth: '90%', height: '200px' }}>
                          {
                            // teamAttendanceReports?.total > 0 ?
                            <Doughnut
                              data={chartDataForTeamAttendanceReports}
                              options={chartOptions}
                              plugins={[
                                {
                                  id: 'centerText',
                                  beforeDraw: function (chart) {
                                    const { width } = chart;
                                    const { height } = chart;
                                    const ctx = chart.ctx;
                                    ctx.restore();
                                    ctx.font = '14px Arial';
                                    ctx.fillStyle = '#000';
                                    ctx.textAlign = 'center';
                                    ctx.textBaseline = 'middle';
                                    ctx.textBaseline = 'middle';

                                    const total = chart.data.datasets[0]?.total || chart.data.datasets[0]?.data.reduce((a, b) => a + b, 0);

                                    ctx.fillStyle = 'black';
                                    const text = `Total: ${total}`;
                                    const textX = Math.round((width - ctx.measureText(text).width) / 1.6);
                                    const textY = height / 3;

                                    ctx.fillText(text, textX, textY);
                                    ctx.save();
                                  },
                                },
                              ]}
                            />
                            // :
                            // "No Attendance data available at the moment!"
                          }
                        </div>
                      </div>
                    )
                  }
                </div>
              }

              <div className="attendance-summary-container">
                {
                  callSummaryReportsLoader === true ? (
                    <div>
                      <h2 className="text-lg font-semibold mt-4 mb-4 text-center">
                        Loading Call Summary Chart...
                      </h2>
                    </div>
                  ) : (
                    <div className="flex flex-wrap justify-center">
                      <h2 className="text-lg font-semibold mb-4 text-center w-full">Call Summary - Today</h2>

                      <div className="chart-container w-full flex justify-center" style={{ maxWidth: '170px', height: '200px' }}>
                        {
                          // callSummaryReports?.data[0]?.coverage_calls > 0 ? (
                          <Doughnut
                            data={chartDataForCovergeCallSummaryReports}
                            options={{
                              ...chartOptions,
                              responsive: true,
                              maintainAspectRatio: true,
                              plugins: {
                                legend: {
                                  display: true,
                                  position: "bottom",
                                  onClick: null,
                                },
                                tooltip: {
                                  callbacks: {
                                    label: function (context) {
                                      const dataLabel = context.label || "";
                                      const value = context.raw;
                                      return `${dataLabel}: ${value.toFixed(2)}%`;
                                    },
                                  },
                                },
                              }
                            }}
                          />
                          // ) : (
                          //   "No Visited Calls data available at the moment!"
                          // )
                        }
                      </div>

                      <div className="chart-container w-full flex justify-center" style={{ maxWidth: '170px', height: '200px' }}>
                        {
                          // callSummaryReports?.data[0]?.productive_customers > 0 ? (
                          <Doughnut
                            data={chartDataForProductiveCallSummaryReports}
                            options={{
                              ...chartOptions,
                              responsive: true,
                              maintainAspectRatio: true,
                              plugins: {
                                legend: {
                                  display: true,
                                  position: "bottom",
                                  onClick: null,
                                },
                                tooltip: {
                                  callbacks: {
                                    label: function (context) {
                                      const dataLabel = context.label || "";
                                      const value = context.raw;
                                      return `${dataLabel}: ${value.toFixed(2)}%`;
                                    },
                                  },
                                },
                              }
                            }}
                          />
                          // ) : (
                          //   "No productive call data available at the moment!"
                          // )
                        }
                      </div>
                    </div>
                  )
                }
              </div>
              {
                callSummaryReportsLoader == true ?
                  ""
                  :
                  <CardBody>
                    <div className="text-center">
                      <table className="min-w-full table-auto border-collapse">
                        <thead>
                          <tr className="bg-gray-200">
                            <th className="px-4 py-2 text-left">Metric</th>
                            <th className="px-4 py-2 text-right">Value</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr className="border-b hover:bg-gray-50">
                            <td className="px-4 py-2 text-left">Total Calls</td>
                            {/* <td className="px-4 py-2 text-right">{callSummaryReports?.data[0]?.total_customers || 0}</td> */}
                            <td className="px-4 py-2 text-right">{(parseFloat(callSummaryReports?.data[0]?.total_customers || 0))?.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</td>
                          </tr>
                          <tr className="border-b hover:bg-gray-50">
                            <td className="px-4 py-2 text-left">Visited Calls</td>
                            {/* <td className="px-4 py-2 text-right">{callSummaryReports?.data[0]?.coverage_calls || 0}</td> */}
                            <td className="px-4 py-2 text-right">{(parseFloat(callSummaryReports?.data[0]?.coverage_calls || 0))?.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</td>
                          </tr>
                          <tr className="border-b hover:bg-gray-50">
                            <td className="px-4 py-2 text-left">Productive Calls</td>
                            {/* <td className="px-4 py-2 text-right">{callSummaryReports?.data[0]?.productive_customers || 0}</td> */}
                            <td className="px-4 py-2 text-right">{(parseFloat(callSummaryReports?.data[0]?.productive_customers || 0))?.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</td>
                          </tr>
                          <tr className="border-b hover:bg-gray-50">
                            <td className="px-4 py-2 text-left">Line Items</td>
                            {/* <td className="px-4 py-2 text-right">{callSummaryReports?.data[0]?.total_items || 0}</td> */}
                            <td className="px-4 py-2 text-right">{(parseFloat(callSummaryReports?.data[0]?.total_items || 0))?.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</td>
                          </tr>
                          <tr className="border-b hover:bg-gray-50">
                            <td className="px-4 py-2 text-left">LPC</td>
                            <td className="px-4 py-2 text-right">{callSummaryReports?.data[0]?.avg_items_per_order || "0.00"}</td>
                          </tr>
                          <tr className="border-b hover:bg-gray-50">
                            <td className="px-4 py-2 text-left">Revenue</td>
                            <td className="px-4 py-2 text-right">{(parseFloat(callSummaryReports?.data[0]?.revenue || 0))?.toLocaleString('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 })}</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </CardBody>
              }
            </CardBody>
        }
      </Card>

      <div className="flex flex-wrap w-full space-x-4 lg:flex-row flex-col">

        <Card className="min-w-0 shadow-xs overflow-hidden bg-white dark:bg-gray-800 mb-5 flex-1">
          <CardBody>
            <h2 className="text-lg font-semibold mb-4 text-center">Top Distributors - MTD</h2>

            {/* Color-coded boxes between heading and chart */}
            {/* <div>
              {employeeReports?.distributorReports
                ?.filter((report) => report?.revenue > 0)
                ?.sort((a, b) => b?.revenue - a?.revenue)
                ?.slice(0, distributorLimit)
                ?.map((report, index) => (
                  <div key={index} className="flex items-center space-x-2">
                    <div
                      className="w-4 h-4 rounded-sm"
                      style={{ backgroundColor: distributorColors[index] }}
                    />
                    <span className="text-sm font-semibold">
                      {report?.store_name.trim()} - {parseFloat(report?.revenue)?.toLocaleString('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                    </span>
                  </div>
                ))}
            </div><br /> */}

            {
              employeeReports?.distributorReports?.filter((report) => report?.revenue > 0)?.length > 0 &&
              <>
                <div className="grid grid-cols-3 gap-x-4">
                  <span className="text-center invisible">Distributor</span>
                  <span className="text-right">Quantity</span>
                  <span className="text-right">Revenue</span>
                </div>
                <br />
              </>
            }
            <div className="grid grid-cols-3 gap-x-4 text-sm font-semibold w-full">
              {employeeReports?.distributorReports
                ?.filter((report) => report?.revenue > 0)
                ?.sort((a, b) => b?.revenue - a?.revenue)
                ?.slice(0, distributorLimit)
                ?.map((report, index) => (
                  <div key={index} className="contents">
                    {/* Color box and name */}
                    <div className="flex items-center space-x-2">
                      <div
                        className="w-4 h-4 rounded-sm"
                        style={{ backgroundColor: distributorColors[index] }}
                      />
                      <span className="text-left">{report?.store_name.trim()}</span>
                    </div>

                    {/* Quantity */}
                    <div className="text-right">{(parseFloat(report?.qty || "0"))?.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</div>
                    {/* Revenue */}
                    <div className="text-right">
                      {parseFloat(report?.revenue)?.toLocaleString('en-IN', {
                        style: 'currency',
                        currency: 'INR',
                        minimumFractionDigits: 0,
                        maximumFractionDigits: 0,
                      })}
                    </div>
                  </div>
                ))}
            </div><br />

            {/* Chart */}
            {employeeReportsLoader === true ? (
              <h3 style={{ width: "100%" }} className="text-sm font-semibold text-center"><Loading /></h3>
            ) : (
              <div style={{ width: "100%" }}>
                <Bar
                  data={{
                    labels: employeeReports?.distributorReports
                      ?.filter((report) => report?.revenue > 0)
                      ?.sort((a, b) => b?.revenue - a?.revenue)
                      ?.slice(0, distributorLimit)
                      ?.map((report) => report?.store_name.trim()),
                    datasets: [
                      {
                        label: "Revenue",
                        data: employeeReports?.distributorReports
                          ?.filter((report) => report?.revenue > 0)
                          ?.sort((a, b) => b?.revenue - a?.revenue)
                          ?.slice(0, distributorLimit)
                          ?.map((report) => report?.revenue),
                        backgroundColor: distributorColors,
                        borderWidth: 1,
                        barThickness: barThickness,
                      },
                    ],
                  }}
                  options={{
                    responsive: true,
                    plugins: {
                      legend: {
                        display: false,
                        position: "top",
                      },
                      title: {
                        display: false,
                        text: "Distributor Revenue",
                      },
                      tooltip: {
                        callbacks: {
                          label: function (context) {
                            const dataLabel = context.label || "";
                            const value = context.raw;
                            return `Revenue: ₹${value.toFixed(2)}`;
                          },
                        },
                      },
                    },
                    scales: {
                      y: {
                        beginAtZero: true,
                        ticks: {
                          callback: (value) => `₹${value}`,
                        },
                      },
                      x: {
                        beginAtZero: true,
                        ticks: {
                          callback: function (value, index) {
                            const distReport = employeeReports?.distributorReports
                              ?.filter((report) => report?.revenue > 0)
                              ?.sort((a, b) => b?.revenue - a?.revenue)
                              ?.slice(0, distributorLimit)[index];
                            return (distReport?.store_name.trim().length <= characterLength) ? distReport?.store_name.trim() : `${distReport?.store_name.trim().slice(0, characterLength)}...`;
                          },
                        },
                      }
                    },
                  }}
                />
              </div>
            )}
          </CardBody>
        </Card>

        {
          latestDesignationSalesPerson != true &&
          <Card className="min-w-0 shadow-xs overflow-hidden bg-white dark:bg-gray-800 mb-5 flex-1">
            <CardBody>
              <h2 className="text-lg font-semibold mb-4 text-center">L1 Team Sales - MTD</h2>

              {/* Color-coded boxes between heading and chart */}
              {/* <div>
                {employeeReports?.employeeReports
                  ?.filter((report) => report?.revenue > 0)
                  ?.sort((a, b) => b?.revenue - a?.revenue)
                  ?.slice(0, employeeLimit)
                  ?.map((report, index) => (
                    <div key={index} className="flex items-center space-x-2">
                      <div
                        className="w-4 h-4 rounded-sm"
                        style={{ backgroundColor: employeeColors[index] }}
                      />
                      <span className="text-sm font-semibold">
                        {report?.employee_name.trim()} - {parseFloat(report?.revenue)?.toLocaleString('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                      </span>
                    </div>
                  ))}
              </div><br /> */}

              {
                employeeReports?.employeeReports?.filter((report) => report?.revenue > 0)?.length > 0 &&
                <>
                  <div className="grid grid-cols-3 gap-x-4">
                    <span className="text-center invisible">Employees</span>
                    <span className="text-right">Quantity</span>
                    <span className="text-right">Revenue</span>
                  </div>
                  <br />
                </>
              }
              <div className="grid grid-cols-3 gap-x-4 text-sm font-semibold flex w-full">
                {employeeReports?.employeeReports
                  ?.filter((report) => report?.revenue > 0)
                  ?.sort((a, b) => b?.revenue - a?.revenue)
                  ?.slice(0, employeeLimit)
                  ?.map((report, index) => (
                    <div key={index} className="contents">
                      <div className="flex items-center space-x-2">
                        <div
                          className="w-4 h-4 rounded-sm"
                          style={{ backgroundColor: employeeColors[index] }}
                        />
                        <span className="text-left">{report?.employee_name.trim()}</span>
                      </div>

                      {/* Quantity */}
                      <div className="text-right">{(parseFloat(report?.qty || "0"))?.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</div>

                      {/* Revenue */}
                      <div className="text-right">{parseFloat(report?.revenue)?.toLocaleString('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 })}</div>


                    </div>
                  ))}
              </div><br />

              {/* Chart */}
              {employeeReportsLoader === true ? (
                <h3 style={{ width: "100%" }} className="text-sm font-semibold text-center"><Loading /></h3>
              ) : (
                <div style={{ width: "100%" }}>
                  <Bar
                    data={{
                      labels: employeeReports?.employeeReports
                        ?.filter((report) => report?.revenue > 0)
                        ?.sort((a, b) => b?.revenue - a?.revenue)
                        ?.slice(0, employeeLimit)
                        ?.map((report) => report?.employee_name.trim()),
                      datasets: [
                        {
                          label: "Revenue",
                          data: employeeReports?.employeeReports
                            ?.filter((report) => report?.revenue > 0)
                            ?.sort((a, b) => b?.revenue - a?.revenue)
                            ?.slice(0, employeeLimit)
                            ?.map((report) => report?.revenue),
                          backgroundColor: employeeColors,
                          borderWidth: 1,
                          barThickness: barThickness,
                        },
                      ],
                    }}
                    options={{
                      responsive: true,
                      plugins: {
                        legend: {
                          display: false,
                          position: "top",
                        },
                        title: {
                          display: false,
                          text: "Employee Revenue",
                        },
                        tooltip: {
                          callbacks: {
                            label: function (context) {
                              const dataLabel = context.label || "";
                              const value = context.raw;
                              return `Revenue: ₹${value.toFixed(2)}`;
                            },
                          },
                        },
                      },
                      indexAxis: 'y', // This makes the bar chart horizontal
                      scales: {
                        x: {
                          beginAtZero: true,
                          ticks: {
                            callback: (value) => `₹${value}`,
                          },
                        },
                        y: {
                          beginAtZero: true,
                          ticks: {
                            callback: function (value, index) {
                              const empReport = employeeReports?.employeeReports
                                ?.filter((report) => report?.revenue > 0)
                                ?.sort((a, b) => b?.revenue - a?.revenue)
                                ?.slice(0, employeeLimit)[index];
                              return (empReport?.employee_name.trim().length <= characterLength) ? empReport?.employee_name.trim() : `${empReport?.employee_name.trim().slice(0, characterLength)}...`;
                            },
                          },
                        }
                      },
                    }}
                  />
                </div>
              )}
            </CardBody>
          </Card>
        }

      </div>

      <div className="flex flex-wrap w-full space-x-4 lg:flex-row flex-col">
        <Card className="min-w-0 shadow-xs overflow-hidden bg-white dark:bg-gray-800 mb-5 flex-1">
          {
            (catalogReportsForCategoryLoader === true) ? (
              <h2 style={{ width: "100%" }} className="text-lg font-semibold mt-4 mb-4 text-center">
                <Loading />
              </h2>
            ) : (
              // <CardBody>
              //   <div style={{ width: "100%" }}>
              //     <h2 className="text-lg font-semibold mb-4 text-center">Category Sales - MTD</h2>

              //     {/* Color-coded boxes */}
              //     <div>
              //       {catalogReportsForCategory?.data
              //         ?.filter((report) => report?.revenue > 0)
              //         ?.sort((a, b) => b?.revenue - a?.revenue)
              //         ?.slice(0, categoryLimit)
              //         ?.map((report, index) => (
              //           <div key={index} className="flex items-center space-x-2">
              //             <div
              //               className="w-4 h-4 rounded-sm"
              //               style={{ backgroundColor: categoryColors[index] }} // Ensure color matches
              //             />
              //             <span className="text-sm font-semibold">
              //               {report?.category_name.trim()} - {parseFloat(report?.revenue)?.toLocaleString('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 })} ({report?.percentage}%)
              //             </span>
              //           </div>
              //         ))}
              //     </div><br />

              //     {/* Chart */}
              //     {catalogReportsForCategoryLoader === true ? (
              //       <h3 style={{ width: "100%" }} className="text-sm font-semibold text-center"><Loading /></h3>
              //     ) : (
              //       <div style={{ width: "100%" }}>
              //         <Bar
              //           data={{
              //             labels: catalogReportsForCategory?.data
              //               ?.filter((report) => report?.revenue > 0)
              //               ?.sort((a, b) => b?.revenue - a?.revenue)
              //               ?.slice(0, categoryLimit)
              //               ?.map((report) => `${report?.category_name.trim()} (${report?.percentage}%)`),
              //             datasets: [
              //               {
              //                 label: "Revenue",
              //                 data: catalogReportsForCategory?.data
              //                   ?.filter((report) => report?.revenue > 0)
              //                   ?.sort((a, b) => b?.revenue - a?.revenue)
              //                   ?.slice(0, categoryLimit)
              //                   ?.map((report) => report?.revenue),
              //                 backgroundColor: categoryColors, // Use exact same color array
              //                 borderWidth: 1,
              //                 barThickness: barThickness,
              //               },
              //             ],
              //           }}
              //           options={{
              //             responsive: true,
              //             plugins: {
              //               legend: {
              //                 display: false,
              //                 position: "top",
              //               },
              //               title: {
              //                 display: false,
              //                 text: "Category Revenue",
              //               },
              //               tooltip: {
              //                 callbacks: {
              //                   label: function (context) {
              //                     const dataLabel = context.label || "";
              //                     const value = context.raw;
              //                     return `Revenue: ₹${value.toFixed(2)}`;
              //                   },
              //                 },
              //               },
              //             },
              //             indexAxis: 'y', // This makes the bar chart horizontal
              //             scales: {
              //               x: {
              //                 beginAtZero: true,
              //                 ticks: {
              //                   callback: (value) => `₹${value}`,
              //                 },
              //               },
              //               y: {
              //                 beginAtZero: true,
              //                 ticks: {
              //                   callback: function (value, index) {
              //                     const category = catalogReportsForCategory?.data
              //                       ?.filter((report) => report?.revenue > 0)
              //                       ?.sort((a, b) => b?.revenue - a?.revenue)
              //                       ?.slice(0, categoryLimit)[index];
              //                     return (category?.category_name.trim().length <= characterLength) ? category?.category_name.trim() : `${category?.category_name.trim().slice(0, characterLength)}...`;
              //                   },
              //                 },
              //               }
              //             },
              //           }}
              //         />
              //       </div>
              //     )}
              //   </div>
              // </CardBody>
              catalogReportsForCategory?.data?.length > 0 ?
                <CardBody>
                  <div style={{ width: "100%" }}>
                    <h2 className="text-lg font-semibold mb-4 text-center">Category Sales - MTD</h2>
                    <TableContainer className="mb-8" style={{ maxHeight: '400px', overflowY: 'auto' }}>
                      <Table>
                        <TableHeader>
                          <TableRow>
                            {/* <TableCell>Category ID</TableCell> */}
                            <TableCell>Category Name</TableCell>
                            <TableCell>Revenue</TableCell>
                            <TableCell>Quantity</TableCell>
                            <TableCell>Percentage</TableCell>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {catalogReportsForCategory?.data?.length && catalogReportsForCategory?.data?.map((data, i) => (
                            <TableRow key={i}>
                              {/* <TableCell>
                                <span className="text-sm font-medium">
                                  {data?.category_id}
                                </span>
                              </TableCell> */}
                              <TableCell>
                                <span className="text-sm font-medium" style={{ width: '200px', textWrap: 'wrap' }}>
                                  {data?.category_name}
                                </span>
                              </TableCell>
                              <TableCell>
                                <span className="text-sm font-medium">
                                  {parseFloat(data?.revenue || 0)?.toLocaleString('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                                </span>
                              </TableCell>
                              <TableCell>
                                <span className="text-sm font-medium">
                                  {/* {data?.qty} */}
                                  {parseFloat(data?.qty || 0)?.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
                                </span>
                              </TableCell>
                              <TableCell>
                                <span className="text-sm font-medium">
                                  {data?.percentage}%
                                </span>
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </TableContainer>
                  </div>
                </CardBody>
                :
                <CardBody style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
                  <div style={{ textAlign: 'center' }}>
                    <h2 className="text-lg font-semibold mb-4">
                      No Category Sales available!
                    </h2>
                  </div>
                </CardBody>
            )
          }
        </Card>

        <Card className="min-w-0 shadow-xs overflow-hidden bg-white dark:bg-gray-800 mb-5 flex-1">
          {
            (catalogReportsForProductLoader === true) ? (
              <h2 width={{ width: "100%" }} className="text-lg font-semibold mt-4 mb-4 text-center">
                <Loading />
              </h2>
            ) : (
              <CardBody>
                <div style={{ width: "100%" }}>
                  <h2 className="text-lg font-semibold mb-4 text-center">Top Selling Products - MTD</h2>

                  {/* Color-coded boxes */}
                  {/* <div>
                    {catalogReportsForProduct?.data
                      ?.filter((report) => report?.revenue > 0)
                      ?.sort((a, b) => b?.revenue - a?.revenue)
                      ?.slice(0, productLimit)
                      ?.map((report, index) => (
                        <div key={index} className="flex items-center space-x-2">
                          <div
                            className="w-4 h-4 rounded-sm"
                            style={{ backgroundColor: productColors[index] }} // Ensure color matches
                          />
                          <span className="text-sm font-semibold">
                            {report?.product_name.trim()} - {parseFloat(report?.revenue)?.toLocaleString('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 })} ({report?.percentage}%)
                          </span>
                        </div>
                      ))}
                  </div><br /> */}

                  {
                    catalogReportsForProduct?.data?.filter((report) => report?.revenue > 0)?.length > 0 &&
                    <>
                      <div className="grid grid-cols-3 gap-x-4">
                        <span className="text-center invisible">Products</span>
                        <span className="text-right">Quantity</span>
                        <span className="text-right">Revenue</span>
                      </div>
                      <br />
                    </>
                  }
                  <div className=" grid grid-cols-3 gap-x-4 text-sm font-semibold flex w-full">
                    {catalogReportsForProduct?.data
                      ?.filter((report) => report?.revenue > 0)
                      ?.sort((a, b) => b?.revenue - a?.revenue)
                      ?.slice(0, productLimit)
                      ?.map((report, index) => (
                        <div key={index} className="contents">
                          <div className="flex items-center space-x-2">
                            <div
                              className="w-4 h-4 rounded-sm"
                              style={{ backgroundColor: productColors[index] }} // Ensure color matches
                            />
                            <span className="text-left" style={{ fontSize: '13px' }}>{report?.product_name.trim()}</span>
                          </div>


                          {/* Quantity */}
                          <div className="text-right">{(parseFloat(report?.qty || "0"))?.toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</div>

                          {/* Revenue */}
                          <div className="text-right">{parseFloat(report?.revenue)?.toLocaleString('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 })} ({report?.percentage}%)</div>
                        </div>

                      ))}
                  </div><br />

                  {/* Chart */}
                  {catalogReportsForProductLoader === true ? (
                    <h3 style={{ width: "100%" }} className="text-sm font-semibold text-center"><Loading /></h3>
                  ) : (
                    <div style={{ width: "100%" }}>
                      <Bar
                        data={{
                          labels: catalogReportsForProduct?.data
                            ?.filter((report) => report?.revenue > 0)
                            ?.sort((a, b) => b?.revenue - a?.revenue)
                            ?.slice(0, productLimit)
                            ?.map((report) => `${report?.product_name.trim()} (${report?.percentage}%)`),
                          datasets: [
                            {
                              label: "Revenue",
                              data: catalogReportsForProduct?.data
                                ?.filter((report) => report?.revenue > 0)
                                ?.sort((a, b) => b?.revenue - a?.revenue)
                                ?.slice(0, productLimit)
                                ?.map((report) => parseFloat(report?.revenue)),
                              backgroundColor: productColors, // Use exact same color array
                              borderWidth: 1,
                              barThickness: barThickness,
                            },
                          ],
                        }}
                        options={{
                          responsive: true,
                          plugins: {
                            legend: {
                              display: false,
                              position: "top",
                            },
                            title: {
                              display: false,
                              text: "Product Revenue",
                            },
                            tooltip: {
                              callbacks: {
                                label: function (context) {
                                  const dataLabel = context.label || "";
                                  const value = context.raw;
                                  return `Revenue: ₹${value.toFixed(2)}`;
                                },
                              },
                            },
                          },
                          scales: {
                            x: {
                              beginAtZero: true,
                              ticks: {
                                callback: function (value, index) {
                                  const product = catalogReportsForProduct?.data
                                    ?.filter((report) => report?.revenue > 0)
                                    ?.sort((a, b) => b?.revenue - a?.revenue)
                                    ?.slice(0, productLimit)[index];
                                  return (product?.product_name.trim().length <= characterLength) ? product?.product_name.trim() : `${product?.product_name.trim().slice(0, characterLength)}...`;
                                },
                              },
                            },
                            y: {
                              beginAtZero: true,
                              ticks: {
                                callback: function (value) {
                                  // Add the rupee symbol to the y-axis ticks
                                  return `₹${value.toLocaleString()}`;
                                },
                              },
                            },
                          },
                        }}
                      />
                    </div>
                  )}
                </div>
              </CardBody>
            )
          }
        </Card>
      </div>

    </>
  );
};

export default DashboardReport;