'use client';

import type { Product } from '../products/product.types';

interface TechnicalDetailsProps {
  product?: Product;
}

export default function TechnicalDetails({ product }: TechnicalDetailsProps) {
  const rows: [string, string][] = [];
  // New products are quote-based, so price, negotiable & currency are shown for used only
  const isNew = product?.type === 'new';

  if (product) {
    const manufacturer = product.brand || product.manufacturer;
    if (manufacturer) {
      rows.push(['Manufacturer', manufacturer]);
    }
    if (product.modelNumber || product.code) {
      rows.push(['Model Number', product.modelNumber || product.code]);
    }
    if (product.listingNo) {
      rows.push(['Listing Ref No', `#${product.listingNo}`]);
    }
    if (product.workingCondition && product.workingCondition !== 'NA') {
      rows.push(['Working Condition', String(product.workingCondition).toUpperCase()]);
    }
    if (product.physicalCondition && product.physicalCondition !== 'NA') {
      rows.push(['Physical Condition', String(product.physicalCondition).toUpperCase()]);
    }
    if (!isNew) {
      if (product.price) {
        rows.push(['Price', product.price]);
      }
      rows.push([
        'Price Negotiable',
        product.negotiable || product.isPriceNegotiable ? 'Yes' : 'No',
      ]);
      if (product.currency) {
        rows.push(['Currency', product.currency]);
      }
    }
    if (product.mainCategory && product.mainCategory !== '-') {
      rows.push(['Main Category', product.mainCategory]);
    }
    if (product.subCategory && product.subCategory !== '-') {
      rows.push(['Sub Category', product.subCategory]);
    }
    if (product.categoryName && product.categoryName !== product.mainCategory && product.categoryName !== '-') {
      rows.push(['Category', product.categoryName]);
    }
    if (product.accessoriesIncluded && product.accessoriesIncluded !== 'NA') {
      rows.push(['Accessories Included', product.accessoriesIncluded]);
    }
    if (product.optionalAccessories && product.optionalAccessories !== 'NA') {
      rows.push(['Optional Accessories', product.optionalAccessories]);
    }
    if (product.stockUnit) {
      rows.push(['Available Units', String(product.stockUnit)]);
    }
  }

  if (rows.length === 0) return null;

  return (
    <section className="py-10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
        <span className="font-helvetica text-[14px] font-normal uppercase leading-[20px] tracking-[1px] text-[#1657D9]">
          Technical Data
        </span>

        <h2 className="font-helvetica mt-2 text-[24px] font-medium leading-[28px] tracking-normal text-[#0E1420]">
          Specifications
        </h2>

        <div className="mt-8 overflow-hidden rounded-xl border border-gray-200 shadow-sm">
          {rows.map(([title, value], index) => (
            <div
              key={title}
              className={`grid grid-cols-[200px_1fr] sm:grid-cols-[260px_1fr] px-6 sm:px-8 py-4 ${
                index % 2 === 0 ? 'bg-[#F8F9FB]' : 'bg-white'
              }`}
            >
              <span className="font-helvetica text-[15px] sm:text-[16px] font-medium leading-[24px] text-[#3A4756]">
                {title}
              </span>

              <span className="font-helvetica justify-self-end text-[15px] sm:text-[16px] font-normal leading-[24px] text-right text-[#0B0F19]">
                {value}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}