import React from "react";
import HorizontalBarChart from "../Charts/HorizontalBarChart";
import { useProjects } from "../../hooks/useProjects";

const ProjectCompletionChart = () => {
  const { data, isLoading: loading } = useProjects();

  const projects = Array.isArray(data)
    ? data
    : data?.data && Array.isArray(data.data)
    ? data.data
    : [];

  // Bar chart logic
  const projectNames = projects?.map((p) => p.name) ?? [];
  const projectProgress =
    projects?.map((p) => {
      const completed = p.completedWork || 0;
      const planned = p.plannedWork || 1;
      const percent = planned ? (completed / planned) * 100 : 0;
      return Math.min(Math.round(percent), 100);
    }) || [];

  return (
    <div className="card h-100">
      <div className="card-header d-flex align-items-start justify-content-between">
        <div className="card-title mb-0 text-start">
          <h5 className="mb-1 fw-bold ">Projects</h5>
          <p className="card-subtitle">Projects Completion Status</p>
        </div>
      </div>
      <div className="card-body ms-n7">
        <HorizontalBarChart
          categories={projectNames}
          seriesData={projectProgress}
          loading={loading}
        />
      </div>
    </div>
  );
};

export default ProjectCompletionChart;