import React from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
} from "chart.js";
import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";

ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);

const ThroughputSummary = () => {
  // Define all data internally within the component
  const timeRange = {
    startTime: "08:00 AM",
    endTime: "09:00 AM",
  };

  const throughputData = {
    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50"],
    data: [5, 10, 8, 10, 12, 10],
    totalThroughput: 1240,
    assetUsage: 85,
  };

  const energyConsumption = {
    energyConsumed: 456,
    unit: "KWH",
  };

  // Dynamic shift data
  const shiftUtilization = [
    { shift: 1, percentage: 30, color: "#F3C64D" },
    { shift: 2, percentage: 40, color: "#67B3F4" },
    { shift: 3, percentage: 30, color: "#7981F5" },
  ];

  // Chart data configuration
  const chartData = {
    labels: throughputData.labels,
    datasets: [
      {
        label: "Units/hour",
        data: throughputData.data,
        borderColor: "#B392F0",
        tension: 0.4,
        pointRadius: 0, // Hide points
      },
    ],
  };

  const chartOptions = {
    responsive: true,
    scales: {
      x: {
        display: false, // hide X axis completely
      },
      y: {
        display: false, // hide Y axis completely
        min: 0, // force Y axis to start at 0
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: true,
      },
    },
  };
  

  return (
    <div className="production analysis-card">
      <div className="production-wrapper analysis-card-wrapper">
        <div className="card-header">
          <div className="header">
            <div className="main-header">Production Capacity</div>
            <div className="sub-header">
              {timeRange.startTime} - {timeRange.endTime}
            </div>
          </div>
          <div className="icon-wrapper">
            <ProductionCapacityIcon />
          </div>
        </div>

        <div className="process-container">
          <div className="throughput-value">
            <span className="value">{throughputData.totalThroughput}</span>{" "}
            Units/hour
          </div>
          <div className="lineChart">
            <div className="assetUsage">
              <div className="key">Asset usage</div>
              <div className="value">{throughputData.assetUsage}%</div>
            </div>
            <Line data={chartData} options={chartOptions} />
          </div>
        </div>

        <div className="footer">
          <div className="energyConsumption footer-card">
            <div className="header">Energy Consumption</div>
            <div className="value-container">
              <div className="energy-icon">
                <PowerIcon />
              </div>
              <div className="value-wrapper">
                <div className="value">{energyConsumption.energyConsumed}</div>
                <div className="unit">{energyConsumption.unit}</div>
              </div>
            </div>
          </div>
          <div className="shiftUtilization footer-card">
            <div className="header">Shift Utilization</div>
            <div className="value-container">
              <div className="value">{throughputData.assetUsage}%</div>

              <div className="progress-wrapper">
                {/* Dynamically create progress bars based on shiftUtilization array */}
                {shiftUtilization.map((shift, index) => (
                  <div
                    key={shift.shift}
                    className={`progress shift-${shift.shift}`}
                    style={{
                      width: `${shift.percentage}%`,
                      backgroundColor: shift.color,
                    }}
                  ></div>
                ))}
              </div>

              <div className="progress-indicator">
                {/* Dynamically create shift indicators with random colors */}
                {shiftUtilization.map((shift, index) => (
                  <div className="shift-wrapper" key={shift.shift}>
                    <span
                      className={`indicator shift-${shift.shift}`}
                      style={{ backgroundColor: shift.color }} // Random color for indicator
                    ></span>
                    <label>Shift {shift.shift}</label>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ThroughputSummary;

// Can we add dot pattern to background of lineChart and remove axis