import React, { useContext, useEffect, useState } from "react";
import { Link, NavLink } from "react-router-dom";
import "flatpickr/dist/themes/material_blue.css";
import { ConfigContext } from "../../Context/ConfigContext";
import axios from "axios";
import StatusChart from "./StatusChart";
import ActiveProject from "./ActiveProject";
import { getTimeOfDay } from "../../Components/GlobalFunctions";
import CountUp from "react-countup";
import { ContentLoader } from "../../Components/Shimmer";
import EChartsBarChart from "./EChartsBarChart";
import TaskManagement from "./TaskManagement";

const Dashboard = () => {
  const [dash, setdash] = useState([]);
  const { apiURL, apiHeaderJson } = useContext(ConfigContext);
  const [loadingList, setLoadingList] = useState(false);

  const getOrderStatus = async () => {
    try {
      setLoadingList(true);
      const response = await axios.get(`${apiURL}api/GetDashboard`, {
        headers: apiHeaderJson,
      });
      setdash(response.data.data);
    } catch (error) {
      console.log(error);
    } finally {
      setLoadingList(false);
    }
  };

  useEffect(() => {
    getOrderStatus();
  }, []);

  // ⭐ CARD DEFINITIONS ARRAY (UI SAME — JUST CLEANER CODE)
  const cards = [
    {
      title: "Contractors",
      iconClass: "ri-hotel-fill",
      bgClass: "bg-success-subtle",
      textColor: "text-success",
      link: "/Contractor",
      count: dash?.contractors ?? 0,
    },
    {
      title: "Projects",
      iconClass: "ri-building-2-fill",
      bgClass: "bg-info-subtle",
      textColor: "text-info",
      link: "/ProjectList",
      count: dash?.tabs?.total_projects?.length ?? 0,
    },
    {
      title: "Clients",
      iconClass: "ri-team-fill",
      bgClass: "bg-warning-subtle",
      textColor: "text-warning",
      link: "/Client",
      count: dash?.clients ?? 0,
    },
    {
      title: "Consultant",
      iconClass: "ri-user-settings-fill",
      bgClass: "bg-primary-subtle",
      textColor: "text-primary",
      link: "/Consultant",
      count: dash?.consultants ?? 0,
    },
  ];

  return (
    <div className="main-content">
      <div className="page-content">
        {loadingList ? (
          <ContentLoader />
        ) : (
          <>
            <div className="container-fluid mt-3">
              <div className="row">
                <div className="col">
                  <div className="h-100">
                    {/* ------------------ HEADER ------------------ */}
                    <div className="row mb-3 pb-1">
                      <div className="col-12">
                        <div className="d-flex align-items-lg-center flex-lg-row flex-column">
                          <div className="flex-grow-1">
                            <h4 className="fs-16 mb-1">{getTimeOfDay()}, Admin !</h4>
                            <p className="text-muted mb-0">
                              Here's what's happening with your store today.
                            </p>
                          </div>

                          <div className="mt-3 mt-lg-0">
                            <div className="row g-3 mb-0 align-items-center">
                              <div className="col-auto">
                                <NavLink to="/Projects" className="btn btn-soft-dark">
                                  <i className="ri-add-circle-line align-middle me-1" />
                                  Add Project
                                </NavLink>
                              </div>

                              <div className="col-auto">
                                <NavLink to="/Client" className="btn btn-soft-dark">
                                  <i className="ri-add-circle-line align-middle me-1" />
                                  Add Client
                                </NavLink>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* ------------------ CARD ROW ------------------ */}
                    <div className="row">
                      {cards.map((card, index) => (
                        <div key={index} className="col-xl-3 col-md-6">
                          <div className="card card-animate">
                            <div className="card-body">
                              <div className="d-flex align-items-center">
                                <div className="flex-grow-1 overflow-hidden">
                                  <p className="text-uppercase fw-medium text-muted text-truncate mb-0">
                                    {card.title}
                                  </p>
                                </div>
                              </div>

                              <div className="d-flex align-items-end justify-content-between mt-4">
                                <div>
                                  <h4 className="fs-22 fw-semibold ff-secondary mb-4">
                                    <CountUp duration={3} end={card.count} />
                                  </h4>

                                  <Link to={card.link} className="text-decoration-underline text-muted">
                                    View All {card.title}
                                  </Link>
                                </div>

                                <div className="avatar-sm flex-shrink-0">
                                  <span className={`avatar-title ${card.bgClass} rounded fs-3`}>
                                    <i className={`${card.iconClass} ${card.textColor}`} />
                                  </span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>

                    <div className="row mt-3">
                      <TaskManagement />
                    </div>

                    {/* ------------------ CHARTS ------------------ */}
                    <div className="row">
                      <div className="col-xl-7">
                        <div className="card">
                          <EChartsBarChart />
                        </div>
                      </div>
                      <div className="col-xl-5">
                        <div className="card">
                          <ActiveProject />
                        </div>
                      </div>
                    </div>
                    {/* ------------------ TASK MANAGEMENT ------------------ */}
                  </div>
                </div>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Dashboard;
