import React from "react";
import AddToPersonalizedButton from "../common/AddToPersonalizedButton";
import "../styles/AuditCompletionChart.css";

const AuditCompletionChart = ({ data, widgetId }) => {
  const getBarHeight = (value, max) => {
    return (value / max) * 100;
  };

  const maxAudits = Math.max(...data.map((d) => d.completed));

  return (
    <div className="chart-container chart-container--has-add-btn" tabIndex={-1}>
      {widgetId && <AddToPersonalizedButton widgetId={widgetId} />}
      <div className="chart-header">
        <h2 className="chart-title">Audit Completion by Month</h2>
        <div className="chart-legend">
          <div className="chart-legend-item">
            <div className="chart-legend-color high"></div>
            <span>On target (≥90%)</span>
          </div>
          <div className="chart-legend-item">
            <div className="chart-legend-color low"></div>
            <span>Below target (&lt;90%)</span>
          </div>
        </div>
      </div>
      <p className="chart-subtitle">
        <strong>In short:</strong> One bar per month. Taller bar = more audits (created that month). Orange = on target (≥90% completion rate); gray = below target. Hover a bar for exact counts.
      </p>
      <div className="chart-content">
        <div className="chart-y-axis">
          <span className="chart-y-axis-label">Audits</span>
          <span>{maxAudits}</span>
          <span>{Math.round(maxAudits * 0.75)}</span>
          <span>{Math.round(maxAudits * 0.5)}</span>
          <span>{Math.round(maxAudits * 0.25)}</span>
          <span>0</span>
        </div>

        <div className="chart-bars-container">
          {data.map((item, index) => {
            const completionRate = (item.completed / item.scheduled) * 100;
            const barHeight = getBarHeight(item.completed, maxAudits);
            return (
              <div key={index} className="chart-bar-wrapper">
                <div className="chart-tooltip">
                  <div className="chart-tooltip-month">{item.month}</div>
                  <div className="chart-tooltip-detail">
                    Audits: {item.completed}
                  </div>
                  <div className="chart-tooltip-rate">
                    Completion rate: {completionRate.toFixed(1)}% {completionRate >= 90 ? "(on target)" : "(below target)"}
                  </div>
                </div>

                <div className="chart-bar-container">
                  <div
                    className={`chart-bar ${
                      completionRate >= 90 ? "high" : "low"
                    }`}
                    style={{ height: `${barHeight}%` }}
                  >
                    {barHeight > 18 && (
                      <div className="chart-bar-value">{item.completed}</div>
                    )}
                  </div>
                </div>

                <div className="chart-month-label">{item.month}</div>
                <div className="chart-rate-label">
                  {completionRate.toFixed(0)}%
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default AuditCompletionChart;

