import React, { useMemo } from "react";
import PerformanceResult from "./result-card/PerformanceResult";
import EnergyUsage from "./result-card/EnergyUsage";
import { Bar, Line } from "react-chartjs-2";

const ComparisonResult = () => {
  const options = useMemo(
    () => ({
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: { display: false },
        legend: { display: false },
      },
      scales: {
        x: { display: false, grid: { display: false } },
        y: { display: false, grid: { display: false } },
      },
    }),
    []
  );

  // Color palette
  const purpleDark = "#6a0dad";
  const purpleLight = "#b19cd9";

  const throughputData = {
    labels: ["Layout 1", "Layout 2"],
    datasets: [
      {
        label: "Throughput (units/hr)",
        data: [500, 550],
        backgroundColor: [purpleDark, purpleLight],
        borderColor: [purpleDark, purpleLight],
        borderWidth: 1,
      },
    ],
  };

  const cycleTimeData = {
    labels: ["Layout 1", "Layout 2"],
    datasets: [
      {
        label: "Cycle Time (sec)",
        data: [110, 110],
        backgroundColor: [purpleLight],
        borderColor: purpleDark,
        borderWidth: 2,
        tension: 0.4,
        fill: false,
      },
    ],
  };

  const downtimeData = {
    labels: ["Layout 1", "Layout 2"],
    datasets: [
      {
        label: "Downtime (mins)",
        data: [17, 12],
        backgroundColor: [purpleDark, purpleLight],
        borderColor: [purpleDark, purpleLight],
        borderWidth: 1,
      },
    ],
  };

  const scrapRateData = {
    labels: ["Layout 1", "Layout 2"],
    datasets: [
      {
        label: "Scrap Rate (tons)",
        data: [2.7, 1.9],
        backgroundColor: [purpleDark, purpleLight],
        borderColor: [purpleDark, purpleLight],
        borderWidth: 1,
      },
    ],
  };

  return (
    <div className="compare-result-container">
      <div className="header">Performance Comparison</div>
      <div className="compare-result-wrapper">
        <EnergyUsage />

        <div className="throughPutCard-container comparisionCard">
          <h4>Throughput (units/hr)</h4>
          <div className="layers-wrapper">
            <div className="layer-wrapper">
              <div className="key">Layout 1</div>
              <div className="value">500/ hr</div>
            </div>
            <div className="layer-wrapper">
              <div className="key">Layout 2</div>
              <div className="value">550/ hr</div>
            </div>
          </div>
          <div className="chart">
            <Bar data={throughputData} options={options} />
          </div>
        </div>

        <div className="cycle-time-container comparisionCard">
          <div className="cycle-main">
            <div className="cycle-header">Cycle Time</div>
            <div className="layers-wrapper">
              <div className="layers">
                <div className="layer-name">Layout 1</div>
                <div className="layer-time">120 Sec</div>
                <div className="layer-profit">
                  <span>↑</span>19.6%
                </div>
              </div>
              <div className="layers">
                <div className="layer-name">Layout 2</div>
                <div className="layer-time">110 Sec</div>
                <div className="layer-profit">
                  <span>↑</span>1.6%
                </div>
              </div>
            </div>
          </div>
          <div className="chart">
            <Line data={cycleTimeData} options={options} />
          </div>
        </div>

        <div className="overallDowntime-container comparisionCard">
          <div className="overallDowntime-header">Overall Downtime</div>
          <div className="totalDownTime-wrapper">
            <div className="totalDownTime">
              <div className="totalDownTime-right">
                <div className="totalDownTime-label">Total down time</div>
                <div className="totalDownTime-subLabel">(Simulation 1)</div>
              </div>
              <div className="totalDownTime-left">
                <div className="value">17</div>
                <div className="key">mins</div>
              </div>
            </div>
            <div className="chart">
              <Bar data={downtimeData} options={options} />
            </div>
          </div>
        </div>

        <div className="overallScrapRate comparisionCard">
          <div className="overallScrapRate-header">Overall Scrap Rate</div>
          <div className="overallScrapRate-wrapper">
            <div className="overallScrapRate-value">
              <div className="overallScrapRate-label">Layout 1</div>
              <div className="overallScrapRate-key">Total scrap produced by</div>
              <div className="overallScrapRateKey-value">2.7 ton</div>
            </div>
            <div className="chart">
              <Bar data={scrapRateData} options={options} />
            </div>
          </div>
        </div>

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

export default ComparisonResult;