inogen/app/components/dashboard/d3-image-info.tsx

//شماتیک آپادانا

import React from "react";
import { formatNumber } from "~/lib/utils";

export type CompanyInfo = {
  id: string;
  imageUrl: string;
  name: string;
  costReduction: number;
  revenue?: number;
  capacity?: number;
  costI: number;
  capacityI: number;
  revenueI: number;
  cost: number | string;
};

export type D3ImageInfoProps = {
  companies: CompanyInfo[];
  width?: number;
  height?: number;
};

const InfoBox = ({ company, style }: { company: CompanyInfo; style: any }) => {
  // const hideCapacity = company.name === "واحد 300"; // اگر واحد 300 بود ظرفیت مخفی شود
  const hideCapacity = false;
  return (
    <div className={`info-box`} style={style}>
      <div className="info-box-content">
        <div className="info-row">
          <div className="info-label">درآمد:</div>
          <div className="info-value revenue text-[12px]">{formatNumber(company?.revenue || 0)}</div>
          <div className="info-unit">میلیون ریال</div>
        </div>
        <div className="info-row">
          <div className="info-label">هزینه:</div>
          {hideCapacity ? (
            <div className="info-value cost2 text-[12px]">{formatNumber(company?.cost || 0)}</div>
          ) : (
            <div className="info-value cost text-[12px]">{formatNumber(company?.cost || 0)}</div>
          )}
          <div className="info-unit">میلیون ریال</div>
        </div>
        {!hideCapacity && (
          <div className="info-row">
            <div className="info-label">ظرفیت:</div>
            <div className="info-value capacity text-[12px]">{formatNumber(company?.capacity || 0)}</div>
            <div className="info-unit">تن در سال</div>
          </div>
        )}
      </div>
    </div>
  );
};

export function D3ImageInfo({ companies }: D3ImageInfoProps) {
  // واحدهای جدید - 4 واحد
  const sample = [
    { id: "واحد 100", name: "واحد 100", imageUrl: "/abniro.png" },
    { id: "واحد 200", name: "واحد 200", imageUrl: "/besparan.png" },
    { id: "واحد 300", name: "واحد 300", imageUrl: "/khwarazmi.png" },
    { id: "واحد 400", name: "واحد 400", imageUrl: "/faravash1.png" }
  ];



  const merged = sample.map(company => {
    const found = companies.find(item => item.id === company.id);
    return found
      ? found
      : { ...company, cost: 0, capacity: 0, revenue: 0, costReduction: 0, costI: 0, capacityI: 0, revenueI: 0 };
  });

  const displayCompanies = merged;
  console.log(displayCompanies);

  // موقعیت‌های جدید برای چیدمان لوزی شکل (3 ردیف - 1-2-1)
  // گرید 5x4 نگه داشته شده اما موقعیت‌ها تغییر کرده
  const gridPositions = [
    { col: 2, row: 1, colI: 1, rowI: 1, name: "واحد 100" }, // ردیف اول - ستون اول
    { col: 4, row: 1, colI: 5, rowI: 1, name: "واحد 200" }, // ردیف اول - ستون دوم
    { col: 2, row: 3, colI: 1, rowI: 3, name: "واحد 300" }, // ردیف دوم - ستون اول
    { col: 4, row: 3, colI: 5, rowI: 3, name: "واحد 400" }, // ردیف دوم - ستون دوم
  ];

  return (
    <div className="w-full h-[500px] rounded-xl">
      <div dir="ltr" className="company-grid-container">
        {displayCompanies.map((company, index) => {
          const gp = gridPositions.find(v => v.name === company.name);
          return (
            <React.Fragment key={company.id}>
              <div
                className={`company-item`}
                style={{ gridColumn: gp?.col, gridRow: gp?.row }}
              >
                <div className="company-image-container">
                  <img
                    src={company.imageUrl}
                    alt={company.name}
                    className="company-image"
                  />
                </div>
                {company.name}
              </div>
              <InfoBox company={company} style={{ gridColumn: gp?.colI, gridRow: gp?.rowI }} />
            </React.Fragment>
          );
        })}
      </div>

      <style jsx>{`
        .company-grid-container {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          grid-template-rows: repeat(4, 1fr);
          gap: 5px;
          width: 100%;
          height: 500px;
        }

        .company-item {
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .company-image-container {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
        }

        .company-image {
          object-fit: contain;
          height: 100px;
        }

        .info-box {
          border: 1px solid #3F415A;
          border-radius: 10px;
          height: max-content;
          align-self: center;
          justify-self: center;
          padding: .2rem 1.2rem;
          min-width: 8rem;
          background-color: transparent;
        }

        .info-box-content {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .info-row {
          position: relative;
          margin: .1rem 0;
          display: flex;
          gap: .5rem;
          justify-content: space-between;
          direction: rtl;
        }

        .info-row:has(.info-value.revenue) {
          border-bottom: 1px solid #3AEA83;
        }

        .info-row:has(.info-value.cost) {
          border-bottom: 1px solid #F76276;
        }

        .info-label {
          color: #FFFFFF;
          font-size: 11px;
          font-weight: 300;
          text-align: right;
          margin: auto 0;
        }

        .info-value {
          color: #34D399;
          font-size: 14px;
          font-weight: 500;
          text-align: right;
          margin-bottom: .5rem;
        }

        .info-value.revenue { color: #fff; }
        .info-value.cost { color: #fff; }
        .info-value.cost2 { color: #fff; }
        .info-value.capacity { color: #fff; }

        .info-unit {
          position: absolute;
          left: 0;
          bottom: 2px;
          color: #ACACAC;
          font-size: 6px;
          font-weight: 400;
        }
      `}</style>
    </div>
  );
}