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 { 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

  // 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(false);
  const { roiSummary } = useROISummaryData();

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

  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}%</span> ROI with payback
                  in just <span>{roiSummary.paybackPeriod}</span> months
                </div>
              </div>
              <div className="roi-details">
                <div className="progress-wrapper">
                  <SemiCircleProgress />
                  <div className="content">
                    you're on track to hit it by
                    <div className="key">July 2029</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}
                      </span>
                    </div>
                    <div className="metric-item">
                      <span className="metric-label">Revenue Generated</span>
                      <span className="metric-value">
                        <span>₹</span>

                        {roiSummary.revenueGenerated}
                      </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
                        : roiSummary.netLoss}
                    </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;