import React, { useEffect, useState } from "react";
import {
  CostBreakDownIcon,
  LightBulpIcon,
  ROISummaryIcon,
  ROISummaryProductName,
  SonarCrownIcon,
} from "../../icons/analysis";
import SemiCircleProgress from "./SemiCircleProgress";
import { ArrowIcon } from "../../icons/ExportCommonIcons";
import SkeletonUI from "../../templates/SkeletonUI";
import { useInputValues, useROISummaryData } from "../../../store/builder/store";

const ROISummary = ({
  roiSummaryData = {
    productName: "Product 1",
    roiPercentage: 133,
    paybackPeriod: 53,
    totalCost: "1,20,000",
    revenueGenerated: "2,80,000",
    netProfit: "1,60,000",
    netLoss: null,
    costBreakdown: [
      {
        item: "Raw Material A",
        unitCost: "10/unit",
        laborCost: "0",
        totalCost: "1000",
        sellingPrice: "1500",
      },
      {
        item: "Labor",
        unitCost: "10/unit",
        laborCost: "500",
        totalCost: "500",
        sellingPrice: "N/A",
      },
      {
        item: "Product 1",
        unitCost: "10/unit",
        laborCost: "200",
        totalCost: "200",
        sellingPrice: "2000",
      },
      {
        item: "Machine",
        unitCost: "-",
        laborCost: "-",
        totalCost: "20,000",
        sellingPrice: "N/A",
      },
      {
        item: "Total",
        unitCost: "-",
        laborCost: "-",
        totalCost: "1,20,000",
        sellingPrice: "-",
      },
      {
        item: "Net Profit",
        unitCost: "-",
        laborCost: "-",
        totalCost: "1,60,000",
        sellingPrice: "-",
      },
    ],
  },
}) => {
  const [isTableOpen, setIsTableOpen] = useState(false); // State to handle the table open/close
  const { inputValues } = useInputValues();
  const productionPeriod = parseFloat(inputValues["Production period"]);

  // Function to toggle the breakdown table visibility
  const toggleTable = () => {
    setIsTableOpen(!isTableOpen);
  };

  function getCurrentDate() {
    const now = new Date();
    const day = now.getDate().toString().padStart(2, "0");
    const month = now.toLocaleString("en-GB", { month: "long" });
    const year = now.getFullYear();
    return `${day} ${month}, ${year}`;
  }
  const [isLoading, setIsLoading] = useState(true);
  const { roiSummary } = useROISummaryData();


  useEffect(() => {
    if (roiSummary.productName) {
      setTimeout(() => {
        setIsLoading(false);
      }, 4500)
    } else {
      // If productName is empty, assume still loading
      setIsLoading(true);
    }
  }, [roiSummary]);

  function getPaybackDateFromYears(yearsToAdd: number) {
    const now = new Date();
    
    const totalMonths = Math.round(yearsToAdd * 12);
    
    const paybackDate = new Date(now.getFullYear(), now.getMonth() + totalMonths, now.getDate());
    const month = paybackDate.toLocaleString("en-GB", { month: "long" });
    const year = paybackDate.getFullYear();
    return `${month} ${year}`;
  }  
  
  return (
    <>

      {
        !isLoading && <div className="roiSummary-container analysis-card">
          <div className="roiSummary-wrapper analysis-card-wrapper">
            <div className="card-header">
              <div className="header">
                <div className="main-header">ROI Summary</div>
                <div className="sub-header">From {getCurrentDate()}</div>
              </div>
              <div className="icon-wrapper">
                <ROISummaryIcon />
              </div>
            </div>
            {!isLoading ? (
              <>
                <div className="product-info">
                  <ROISummaryProductName />
                  <div className="product-label">Product :</div>
                  <div className="product-name">{roiSummary.productName}</div>
                </div>
                <div className="playBack">
                  <SonarCrownIcon />
                  <div className="icon"></div>
                  <div className="info">
                    <span>{roiSummary.roiPercentage.toFixed(2)}%  </span>
                    ROI in the period of {productionPeriod} years
                    <span></span>
                  </div>
                </div>
                <div className="roi-details">
                  <div className="progress-wrapper">
                    <SemiCircleProgress
                      progress={(parseFloat(roiSummary.paybackPeriod.toFixed(2)) / (productionPeriod)) * 100}
                      years={parseFloat(roiSummary.paybackPeriod.toFixed(2))}
                    />
                    <div className="content">
                      you're on track to hit it by
                      <div className="key">{getPaybackDateFromYears(roiSummary.paybackPeriod)}</div>
                    </div>
                  </div>

                  <div className="metrics">
                    <div className="metric-wrapper">
                      <div className="metric-item">
                        <span className="metric-label">Total Cost Incurred</span>
                        <span className="metric-value">
                          <span>₹</span>
                          {roiSummary.totalCost.toFixed(0)}
                        </span>
                      </div>
                      <div className="metric-item">
                        <span className="metric-label">Revenue Generated</span>
                        <span className="metric-value">
                          <span>₹</span>

                          {roiSummary.revenueGenerated.toFixed(0)}
                        </span>
                      </div>
                    </div>
                    <div
                      className={`metric-item net-profit ${roiSummary.netProfit > 0 ? "profit" : "loss"}`}
                    >
                      <div className="metric-label">
                        <span>↑</span>
                        Net Profit
                      </div>
                      <div className="metric-value">
                        <span>₹</span>
                        {roiSummary.netProfit > 0
                          ? roiSummary.netProfit.toFixed(0)
                          : roiSummary.netLoss.toFixed(0)}
                      </div>
                    </div>
                  </div>
                </div>
                <div className="cost-breakdown">
                  <div className="breakdown-header" onClick={toggleTable}>
                    <div className="section-wrapper">
                      <CostBreakDownIcon />
                      <span className="section-title">Cost Breakdown</span>
                    </div>

                    <span className={`expand-icon ${isTableOpen ? "open" : ""}`}>
                      <ArrowIcon />
                    </span>
                  </div>
                  <div
                    className={`breakdown-table-wrapper ${isTableOpen ? "open" : "closed"
                      }`}
                    style={{
                      transition: "max-height 0.3s ease-in-out",
                      overflow: "hidden",
                    }}
                  >
                    <table className="breakdown-table">
                      <thead>
                        <tr>
                          <th>Item</th>
                          <th>Unit Cost</th>
                          <th>Labor Cost</th>
                          <th>Total Cost</th>
                          <th>Selling Price</th>
                        </tr>
                      </thead>
                      <tbody>
                        {roiSummaryData.costBreakdown.map((row, index) => (
                          <tr
                            key={index}
                            className={
                              row.item === "Total"
                                ? "total-row"
                                : row.item === "Net Profit"
                                  ? "net-profit-row"
                                  : ""
                            }
                          >
                            <td>{row.item}</td>
                            <td>{row.unitCost}</td>
                            <td>{row.laborCost}</td>
                            <td>{row.totalCost}</td>
                            <td>{row.sellingPrice}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
                {/* <div className="tips-section">
              <div className="tip-header">
                <span className="lightbulb-icon">
                  <LightBulpIcon />
                </span>
                <span className="tip-title">How to improve ROI?</span>
              </div>
              <div className="tip-description">
                Increase CNC utilization by{" "}
                <span className="highlight">10%</span> to shave{" "}
                <span className="highlight">0.5</span> months of payback period
                <div className="placeHolder-wrapper">
                  <div className="placeHolder"></div>
                  <div className="placeHolder"></div>
                </div>
              </div>
              <button className="get-tips-button">
                <div className="btn">Get ROI Boost Tips</div>
              </button>
            </div> */}
              </>
            ) : (
              <SkeletonUI type={"default"} />
              // <div> No Data</div>
            )}
          </div>
        </div>}
    </>
  );
};

export default ROISummary;
