/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState } from "react";
import { getDashboard } from "../../../../../Api/CustomerApi";
import { UserTypes } from "@/Constant/enums";

interface DashboardData {
  live_orders?: number;
  cod_amount?: string | number;
  orders_this_month?: number;
  amount_this_month?: string | number;
  orders_placed_today?: string | number;
  today_pickup_orders?: string | number | any;
  today_same_day_delivery_orders?: string | number | any;
}

const Cards = ({ setOrderCardDetails }: any) => {
  const [dashboard, setDashboard] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const storedUser = localStorage.getItem("ALL_DATA");
  const allData = storedUser ? JSON.parse(storedUser)?.data : null;
  useEffect(() => {
    const fetchDashboard = async () => {
      setLoading(true);
      try {
        const data = await getDashboard();
        setDashboard(data);
        setOrderCardDetails(data);
      } catch {
        setDashboard(null);
        setOrderCardDetails(null);
      } finally {
        setLoading(false);
      }
    };
    fetchDashboard();
  }, [setOrderCardDetails]);
  return (
    <div className="card card-style mt-0 bg-transparent mx-0 mb-0 pt-lg-5 mt-lg-5">
      <div className="content mb-0 mt-1 mx-0">
        <div className="row text-center mb-0 mx-0">
          {/* allData?.userType?.id === UserTypes?.NormalCustomer */}
          {/* Live Orders */}
          <div className="col-lg-3 col-6 dashboard-top1">
            <div className="card card-style border-solid border-purple rounded-sm">
              <div className="sub-box d-float-center justify-content-between mb-0 mx-0">
                <div className="text-box d-float-center justify-content-between">
                  <p className="mb-0 pt-1">
                    <span className="font-20 d-block color-dark font-700">
                      <i className="ri ri-truck-line font-24 text-grey"></i>
                    </span>
                    <span className="font-14 d-block font-500 box-subHead">
                      Live Orders
                    </span>
                  </p>
                </div>
                <div className="icon-box py-2">
                  <p className="icon1 icon-l0 d-float-center justify-content-center bg-purple rounded-sm">
                    {loading ? "--" : dashboard?.live_orders ?? 0}
                  </p>
                </div>
              </div>
            </div>
          </div>
          {/* order placed today */}
          <div className="col-lg-3 col-6 dashboard-top1">
            <div className="card card-style border-solid border-purple rounded-sm">
              <div className="sub-box d-float-center justify-content-between mb-0 mx-0">
                <div className="text-box d-float-center justify-content-between">
                  <p className="mb-0 pt-1">
                    <span className="font-20 d-block color-dark font-700">
                      <i className="ri ri-archive-2-line font-24 text-grey"></i>
                    </span>
                    <span className="font-14 d-block font-500 box-subHead">
                      Orders Placed Today
                    </span>
                  </p>
                </div>
                <div className="icon-box py-2">
                  <p className="icon1 icon-l0 d-float-center justify-content-center bg-purple rounded-sm">
                    {loading ? "--" : dashboard?.orders_placed_today ?? 0}
                  </p>
                </div>
              </div>
            </div>
          </div>
          {allData?.userType?.id === UserTypes?.CorporateCodCustomer ? (
            <>
              {/* today_pickup_orders*/}
              <div className="col-lg-3 col-6 dashboard-top1">
                <div className="card card-style border-solid border-purple rounded-sm">
                  <div className="sub-box d-float-center justify-content-between mb-0 mx-0">
                    <div className="text-box d-float-center justify-content-between">
                      <p className="mb-0 pt-1">
                        <span className="font-20 d-block color-dark font-700">
                          <i className="ri ri-truck-line font-24 text-grey"></i>
                        </span>
                        <span className="font-14 d-block font-500 box-subHead">
                          Today Pickup & Delivery
                        </span>
                      </p>
                    </div>
                    <div className="icon-box py-2">
                      <p className="icon1 icon-l0 d-float-center justify-content-center bg-purple rounded-sm">
                        {loading
                          ? "--"
                          : parseInt(dashboard?.today_pickup_orders || 0) +
                            parseInt(
                              dashboard?.today_same_day_delivery_orders || 0
                            )}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              {/* Amount (This Month) */}
              <div className="col-lg-3 col-6 dashboard-top1">
                <div className="card card-style border-solid border-purple rounded-sm">
                  <div className="sub-box d-float-center justify-content-between mb-0 mx-0">
                    <div className="text-box d-float-center justify-content-between">
                      <p className="mb-0 pt-1">
                        <span className="font-20 d-block color-dark font-700">
                          <i className="ri ri-wallet-3-line font-24 text-grey"></i>
                        </span>
                        <span className="font-14 d-block font-500 box-subHead">
                          Cod Amount
                        </span>
                      </p>
                    </div>
                    <div className="icon-box py-2">
                      <p className="icon1 icon-l0 d-float-center justify-content-center bg-purple rounded-sm">
                        {loading ? "--" : dashboard?.cod_amount ?? "0"}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </>
          ) : (
            <>
              {/* today_pickup_orders*/}
              <div className="col-lg-3 col-6 dashboard-top1">
                <div className="card card-style border-solid border-purple rounded-sm">
                  <div className="sub-box d-float-center justify-content-between mb-0 mx-0">
                    <div className="text-box d-float-center justify-content-between">
                      <p className="mb-0 pt-1">
                        <span className="font-20 d-block color-dark font-700">
                          <i className="ri ri-inbox-unarchive-line font-24 text-grey"></i>
                        </span>
                        <span className="font-14 d-block font-500 box-subHead">
                          Today Pickup Orders
                        </span>
                      </p>
                    </div>
                    <div className="icon-box py-2">
                      <p className="icon1 icon-l0 d-float-center justify-content-center bg-purple rounded-sm">
                        {loading ? "--" : dashboard?.today_pickup_orders ?? 0}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              {/* Amount (This Month) */}
              <div className="col-lg-3 col-6 dashboard-top1">
                <div className="card card-style border-solid border-purple rounded-sm">
                  <div className="sub-box d-float-center justify-content-between mb-0 mx-0">
                    <div className="text-box d-float-center justify-content-between">
                      <p className="mb-0 pt-1">
                        <span className="font-20 d-block color-dark font-700">
                          <i className="ri ri-inbox-archive-line font-24 text-grey"></i>
                        </span>
                        <span className="font-14 d-block font-500 box-subHead">
                          Today Delivery Orders
                        </span>
                      </p>
                    </div>
                    <div className="icon-box py-2">
                      <p className="icon1 icon-l0 d-float-center justify-content-center bg-purple rounded-sm">
                        {loading
                          ? "--"
                          : dashboard?.today_same_day_delivery_orders ?? "0"}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default Cards;