import React from "react";
import { Link } from "react-router-dom";

const DonutChart = ({ totalProjects = [] }) => {

  const getStatusDetails = (status) => {
    switch (Number(status)) {
      case 0:
        return { label: "Active", color: "primary" };
      case 1:
        return { label: "In-Active", color: "danger" };
      case 2:
        return { label: "Completed", color: "success" };
      default:
        return { label: "Unknown", color: "secondary" };
    }
  };

  const projectData = totalProjects?.filter((row) => Number(row.project_status) === 0)

  return (
    <>
      <div className="card-header align-items-center d-flex">
        <h4 className="card-title mb-0 flex-grow-1">Active Project</h4>
      </div>

      <div
        data-simplebar="init"
        style={{ height: '76vh' }}
        className="simplebar-scrollable-y"
      >
        <div className="simplebar-wrapper" style={{ margin: 0 }}>
          <div className="simplebar-mask">
            <div className="simplebar-offset" style={{ right: 0, bottom: 0 }}>
              <div
                className="simplebar-content-wrapper"
                tabIndex={0}
                role="region"
                aria-label="scrollable content"
                style={{ height: "auto", overflow: "hidden scroll" }}
              >
                <div className="simplebar-content" style={{ padding: 0 }}>

                  {projectData && projectData.length > 0 ? (
                    projectData.map((item, index) => {
                      const status = getStatusDetails(item.project_status);

                      return (
                        <div
                          className={`list-group ${index === 0 ? '' : ' mt-3'} px-3`}
                          key={item.project_id}
                        >
                          <Link
                            to={`/ProjectProfile/${item.project_id}`}
                            className="list-group-item list-group-item-action mt-3"
                          >

                            {/* STATUS BADGE */}
                            <div className="float-end">
                              <span className={`badge bg-${status.color}-subtle text-${status.color}`}>
                                {status.label}
                              </span>
                            </div>

                            {/* HEADER */}
                            <div className="d-flex mb-2 align-items-center">
                              <div className="flex-shrink-0">
                                <img
                                  src={
                                    item.project_logo
                                      ? item.project_logo
                                      : "/assets/images/users/flat-design.jpg"
                                  }
                                  alt=""
                                  className="avatar-sm rounded-circle"
                                />
                              </div>
                              <div className="flex-grow-1 ms-3">
                                <h5 className="list-title fs-15 mb-1">
                                  {item.project_title}
                                </h5>
                                <p className="list-text mb-0 fs-12">
                                  {item.project_description}
                                </p>
                              </div>
                            </div>

                            {/* DETAILS */}
                            <div className="row mb-3 mt-3">
                              <div className="col-6 col-md-6">
                                <div className="d-flex">
                                  <div className="flex-shrink-0 avatar-xs align-self-center me-3">
                                    <div className="avatar-title bg-light rounded-circle fs-16 text-primary">
                                      <i className="ri-calendar-check-fill" />
                                    </div>
                                  </div>
                                  <div className="flex-grow-1 overflow-hidden">
                                    <p className="mb-1">Duration :</p>
                                    <h6 className="text-truncate mb-0 fw-semibold">
                                      {item.project_start_date} to {item.project_end_date}
                                    </h6>
                                  </div>
                                </div>
                              </div>

                              <div className="col-6 col-md-6">
                                <div className="d-flex">
                                  <div className="flex-shrink-0 avatar-xs align-self-center me-3">
                                    <div className="avatar-title bg-light rounded-circle fs-16 text-primary">
                                      <i className="ri-map-pin-line" />
                                    </div>
                                  </div>
                                  <div className="flex-grow-1 overflow-hidden">
                                    <p className="mb-1">Location :</p>
                                    <span className="fw-semibold">
                                      {item.project_address}
                                    </span>
                                  </div>
                                </div>
                              </div>
                            </div>

                          </Link>
                        </div>
                      );
                    })
                  ) : (
                    <div
                      className="d-flex justify-content-center align-items-center"
                      style={{ height: '60vh' }}
                    >
                      <h3 className="text-muted">No Data Found...!</h3>
                    </div>
                  )}

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default DonutChart;
