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 }) => {
  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">{formatNumber(company?.revenue || 0)}</div>
          <div className="info-unit">میلیون ریال</div>
        </div>
        <div className="info-row">
          <div className="info-label">هزینه:</div>
          <div className="info-value cost">{formatNumber(company?.cost || 0)}</div>
          <div className="info-unit">میلیون ریال</div>
        </div>
        <div className="info-row">
          <div className="info-label">ظرفیت:</div>
          <div className="info-value capacity">{formatNumber(company?.capacity || 0)}</div>
          <div className="info-unit">تن در سال</div>
        </div>
      </div>
    </div>
  );
};

export function D3ImageInfo({ companies }: D3ImageInfoProps) {
  // Ensure we have exactly 6 companies
  const displayCompanies = companies;

  // Positions inside a 5x4 grid (col, row)
  // Layout keeps same visual logic: left/middle/right on two bands with spacing grid around
  const gridPositions = [
    { col: 2, row: 2 , colI : 1 , rowI : 2 , name : "بسپاران"}, // left - top band
    { col: 3, row: 2  , colI : 3 , rowI : 1 , name : "خوارزمی"}, // middle top (image sits in row 2, info box goes to row 1)
    { col: 4, row: 2 ,colI : 5 , rowI : 2 , name : "فراورش 1"}, // right - top band
    { col: 2, row: 3 , colI : 1 , rowI : 3 , name : "کیمیا"}, // left - bottom band
    { col: 3, row: 3 ,  colI : 3, rowI : 4  , name : "آب نیرو"}, // middle bottom (image sits in row 3, info box goes to row 4)
    { col: 4, row: 3  ,  colI : 5 , rowI : 3 , name : "فراورش 2"}, // right - bottom band
  ];
  
  return (
    <div className="w-full h-[500px] rounded-xl p-4">
      <div dir="ltr" className="company-grid-container">
        {displayCompanies.map((company, index) => {
          const gp  = gridPositions.find(v => v.name === company.name)  ;
          return (
          <>
            <div
              key={company.id}
              className={`company-item`}
              style={{ gridColumn: gp.col, gridRow: gp.row }}
            >
              <div className="company-image-containe">
                <img 
                  src={company.imageUrl} 
                  alt={company.name} 
                  className="company-image" 
                />
              </div>

              {company.name}
            </div>
              <InfoBox company={company} key={index +10} style={{ gridColumn: gp?.colI , gridRow: gp?.rowI  }}  />
          </>);
        })}
      </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 0 ;
          background-color: transparent;
        }


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

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

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

        }

        .info-label {
          color: #FFFFFF;
          font-size: 12px;
          font-weight: 400;
          text-align: right;
        }

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

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

        .info-unit {
          position: absolute;
          left: 12px;
          bottom: 0;
          color: #9CA3AF;
          font-size: 8px;
          font-weight: 400;
        }
      `}</style>
    </div>
  );
}