page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useState, useEffect } from "react";
import { useParams, useRouter } from "next/navigation";
import { apiClient } from "@/lib/client/apiClient";
import { Icon } from '@/contexts/IconContext';
 
interface ProductData {
  // Basic Identity
  pid: number;
  name: string;
  description: string;
  shortName?: string;
  barcode?: string;
  plu?: string;
  
  // Pricing
  sellPrice: number;
  costPrice?: number;
  freight?: number;
  packaging?: number;
  confirmPrice?: boolean;
  franchisePrice?: number;
  priceBand1?: number;
  priceBand2?: number;
  priceBand3?: number;
  lowestPrice?: number;
  discountLimit1?: number;
  discountLimit2?: number;
  discountLimit3?: number;
  discountLimit4?: number;
  discountLimit5?: number;
  disableDiscounts?: boolean;
  decimalPlaces?: number;
  
  // Department Hierarchy (8 levels)
  department?: number;
  departmentName?: string;
  department2?: number;
  department3?: number;
  department4?: number;
  department5?: number;
  department6?: number;
  department7?: number;
  department8?: number;
  
  // Supplier
  supplierId?: number;
  supplierName?: string;
  supplierPartCode?: string;
  manufacturerPartCode?: string;
  
  // Stock
  stockLevel?: number;
  stockMin?: number;
  stockMax?: number;
  supplySource?: number;
  ignoreStockMovements?: boolean;
  recordStockMovements?: boolean;
  placement?: number;
  partCount?: number;
  warehouseLabelName?: string;
  
  // Core Attributes
  brand?: string;
  weightGm?: number;
  size?: string;
  mainColour?: number;
  measurement?: number;
  
  // Flags
  taxFlag?: number;
  sellFlags?: number;
  noSell?: boolean;
  hidden?: boolean;
  
  // Dates
  releaseDate?: string;
  availableDate?: string;
  
  // Shelf Labels
  shelfLabelFormat?: string;
  shelfLabelLine1?: string;
  shelfLabelLine2?: string;
  shelfLabelLine3?: string;
  
  // Optical/Eyewear
  alternateFit?: boolean;
  lensSize?: string;
  bridgeSize?: string;
  templeLength?: string;
  lensBaseCurve?: string;
  lensMaterial?: number;
  frameMaterial?: number;
  
  // Measurements
  measurementId?: number;
  stockMeasurementId?: number;
  displayMeasurementId?: number;
  packagingWeight?: number;
  lengthMm?: number;
  widthMm?: number;
  heightMm?: number;
  shippingCubic?: number;
  
  // Website/Marketing
  publishToWebsite?: boolean;
  websiteHandling?: number;
  webDescription?: string;
  webKeywords?: string;
  webBlurb?: string;
  searchRank?: number;
  displayRank?: number;
  websiteControl?: string;
  onSpecial?: boolean;
  outOfStock?: boolean;
  outOfSeason?: boolean;
  instoreOnly?: boolean;
  newProduct?: boolean;
  freeLocalDelivery?: boolean;
  highlightProduct?: boolean;
  featuredProduct?: boolean;
  promoteProduct?: boolean;
  marketingColor1?: string;
  marketingColor2?: string;
  marketingColor3?: string;
  marketingColor4?: string;
  installationUrl?: string;
  warrantyUrl?: string;
  upsellUrl?: string;
  marketingUrl?: string;
  webGroup?: string;
  
  // Supply/Ordering
  orderCategory?: number;
  messageWhenOrdering?: string;
  disableOrdering?: boolean;
  minUnitsPerOrder?: number;
  maxUnitsPerOrder?: number;
  priorityColorCode?: number;
  importanceLevel?: number;
  
  // System/Debug (read-only)
  physkey?: number;
  globalKey?: number;
  rve?: number;
  createDateTime?: string;
  processFlags?: number;
  shopifyId?: number;
  bigcommerceId?: number;
  rmSystem?: number;
  extractFlags?: number;
  comments?: string;
  
  // Additional Barcodes
  barcode512?: string;
  barcode513?: string;
  barcode514?: string;
  
  // Food Attributes (11 fields)
  isGlutenFree?: boolean;
  isOrganic?: boolean;
  isDairyFree?: boolean;
  isLowSugar?: boolean;
  isVegan?: boolean;
  isLowSalt?: boolean;
  isYeastFree?: boolean;
  isLowFat?: boolean;
  isRaw?: boolean;
  isKosher?: boolean;
  isEdible?: boolean;
  
  // Physical Product Attributes
  lensType?: string;
  madeFrom?: string;
  designShape?: string;
  polarised?: boolean;
  mirrored?: boolean;
  perishable?: boolean;
  blueLight?: boolean;
  
  // Supply Chain
  fairTrade?: boolean;
  countryMade?: string;
  nzMade?: boolean;
  
  // eCommerce
  gender?: string;
  asnzsCompliance?: string;
  
  // Extended Website Flags
  websiteBackgroundItem?: boolean;
  websitePositionTop?: boolean;
  websitePositionLeft?: boolean;
  websitePositionBottom?: boolean;
  websitePositionRight?: boolean;
  websiteTag?: string;
  
  // Extended Product Properties
  model?: string;
  itemColor?: string;
  cartridge?: string;
  refillable?: boolean;
  internalSupportUrl?: string;
  rxAble?: number;
  productCase?: string;
  warranty?: string;
  productManufacturer?: string;
  
  // Printing/Hardware
  paperSize?: string;
  printerConnectivity?: string;
  printingTechnology?: string;
  printerAdfCapacity?: string;
  printSpeed?: string;
  scanResolution?: string;
  printerPaperCapacity?: string;
  
  // Product Types
  nonTangibleItem?: boolean;
  oneOffItem?: boolean;
  
  // Prompting Controls
  promptRegno?: boolean;
  promptLTNZNo?: boolean;
  promptDocument?: boolean;
  promptCustomer?: boolean;
}
 
type TabType = "main" | "pricing" | "optical" | "measurements" | "website" | "supply" | "system" | "history";
 
// Reusable Card Component
interface CardProps {
  title: string;
  icon: string;
  children: React.ReactNode;
  className?: string;
}
 
const Card: React.FC<CardProps> = ({ title, icon, children, className = "" }) => (
  <div className={`bg-surface rounded-xl shadow-lg p-6 border border-border hover:shadow-xl transition-shadow ${className}`}>
    <div className="flex items-center gap-3 mb-4">
      <div className="w-10 h-10 bg-gradient-to-br from-brand to-brand-2 rounded-lg flex items-center justify-center">
        <Icon name={icon} size={24} className="text-white" />
      </div>
      <h2 className="text-xl font-bold text-text">{title}</h2>
    </div>
    <div className="space-y-4">
      {children}
    </div>
  </div>
);
 
// Reusable Field Component
interface FieldProps {
  label: string;
  value: any;
  editValue: any;
  isEditing: boolean;
  type?: "text" | "number" | "textarea" | "select" | "checkbox" | "date";
  options?: { value: any; label: string }[];
  onChange: (value: any) => void;
  className?: string;
  placeholder?: string;
}
 
const Field: React.FC<FieldProps> = ({
  label,
  value,
  editValue,
  isEditing,
  type = "text",
  options = [],
  onChange,
  className = "",
  placeholder
}) => (
  <div className={className}>
    <p className="text-sm text-muted mb-1">{label}</p>
    {isEditing ? (
      <>
        {type === "checkbox" ? (
          <label className="flex items-center gap-2 cursor-pointer">
            <input
              type="checkbox"
              checked={editValue || false}
              onChange={(e) => onChange(e.target.checked)}
              className="w-5 h-5 text-brand focus:ring-brand border-border rounded"
            />
            <span className="text-text">{editValue ? "Yes" : "No"}</span>
          </label>
        ) : type === "select" ? (
          <select
            value={editValue || ''}
            onChange={(e) => onChange(e.target.value)}
            className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
          >
            <option value="">Select...</option>
            {options.map(opt => (
              <option key={opt.value} value={opt.value}>{opt.label}</option>
            ))}
          </select>
        ) : type === "textarea" ? (
          <textarea
            value={editValue || ''}
            onChange={(e) => onChange(e.target.value)}
            className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
            rows={3}
            placeholder={placeholder}
          />
        ) : (
          <input
            type={type}
            value={editValue || ''}
            onChange={(e) => onChange(type === "number" ? parseFloat(e.target.value) || 0 : e.target.value)}
            className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
            placeholder={placeholder}
          />
        )}
      </>
    ) : (
      <p className="text-text font-medium">
        {type === "checkbox" ? (value ? "Yes" : "No") : (value !== null && value !== undefined ? value : "N/A")}
      </p>
    )}
  </div>
);
 
export default function ProductDetailPage() {
  const params = useParams();
  const router = useRouter();
  const productId = params.id as string;
 
  const [activeTab, setActiveTab] = useState<TabType>("main");
  const [product, setProduct] = useState<ProductData | null>(null);
  const [departments, setDepartments] = useState<Record<number, string>>({});
  const [loading, setLoading] = useState(true);
  const [isEditing, setIsEditing] = useState(false);
  const [editForm, setEditForm] = useState<Partial<ProductData>>({});
  const [departmentHierarchy, setDepartmentHierarchy] = useState<Record<number, number[]>>({});
 
  useEffect(() => {
    loadProductData();
    loadDepartments();
    loadHierarchy();
  }, [productId]);
 
  const loadHierarchy = async () => {
    try {
      const result = await apiClient.getDepartmentHierarchy();
      if (result.success && result.data) {
        setDepartmentHierarchy(result.data);
      }
    } catch (error) {
      console.error('Failed to load department hierarchy:', error);
    }
  };
 
  const loadProductData = async () => {
    try {
      setLoading(true);
      const result = await apiClient.get(`/v1/openapi/products/${productId}`);
      
      if (result?.success && result?.data) {
        const p = result.data;
        const productData: ProductData = {
          pid: p.Pid || p.pid,
          name: p.Name || p.name || '',
          description: p.Description || p.description || '',
          shortName: p.ShortName || p.shortName,
          barcode: p.Barcode || p.barcode,
          plu: p.Plu || p.plu,
          sellPrice: p.SellPrice || p.sellPrice || 0,
          costPrice: p.CostPrice || p.costPrice,
          
          // Pricing extras
          freight: p.Freight || p.freight,
          packaging: p.Packaging || p.packaging,
          confirmPrice: p.ConfirmPrice || p.confirmPrice,
          franchisePrice: p.FranchisePrice || p.franchisePrice,
          priceBand1: p.PriceBand1 || p.priceBand1,
          priceBand2: p.PriceBand2 || p.priceBand2,
          priceBand3: p.PriceBand3 || p.priceBand3,
          lowestPrice: p.LowestPrice || p.lowestPrice,
          discountLimit1: p.DiscountLimit1 || p.discountLimit1,
          discountLimit2: p.DiscountLimit2 || p.discountLimit2,
          discountLimit3: p.DiscountLimit3 || p.discountLimit3,
          discountLimit4: p.DiscountLimit4 || p.discountLimit4,
          discountLimit5: p.DiscountLimit5 || p.discountLimit5,
          disableDiscounts: p.DisableDiscounts || p.disableDiscounts,
          decimalPlaces: p.DecimalPlaces || p.decimalPlaces,
          
          // Departments
          department: p.Department || p.department,
          departmentName: p.DepartmentName || p.departmentName,
          department2: p.Department2 || p.department2,
          department3: p.Department3 || p.department3,
          department4: p.Department4 || p.department4,
          department5: p.Department5 || p.department5,
          department6: p.Department6 || p.department6,
          department7: p.Department7 || p.department7,
          department8: p.Department8 || p.department8,
          
          // Supplier
          supplierId: p.SupplierId || p.supplierId,
          supplierName: p.SupplierName || p.supplierName,
          supplierPartCode: p.SupplierPartCode || p.supplierPartCode,
          manufacturerPartCode: p.ManufacturerPartCode || p.manufacturerPartCode,
          
          // Stock
          stockLevel: p.StockLevel || p.stockLevel,
          stockMin: p.StockMin || p.stockMin,
          stockMax: p.StockMax || p.stockMax,
          supplySource: p.SupplySource || p.supplySource,
          ignoreStockMovements: p.IgnoreStockMovements || p.ignoreStockMovements,
          recordStockMovements: p.RecordStockMovements || p.recordStockMovements,
          placement: p.Placement || p.placement,
          partCount: p.PartCount || p.partCount,
          warehouseLabelName: p.WarehouseLabelName || p.warehouseLabelName,
          
          // Core attributes
          brand: p.Brand || p.brand,
          weightGm: p.WeightGm || p.weightGm,
          size: p.Size || p.size,
          mainColour: p.MainColour || p.mainColour,
          measurement: p.Measurement || p.measurement,
          
          // Flags
          taxFlag: p.TaxFlag || p.taxFlag,
          sellFlags: p.SellFlags || p.sellFlags,
          noSell: p.NoSell || p.noSell,
          hidden: p.Hidden || p.hidden,
          
          // Dates
          releaseDate: p.ReleaseDate || p.releaseDate,
          availableDate: p.AvailableDate || p.availableDate,
          
          // Shelf Labels
          shelfLabelFormat: p.ShelfLabelFormat || p.shelfLabelFormat,
          shelfLabelLine1: p.ShelfLabelLine1 || p.shelfLabelLine1,
          shelfLabelLine2: p.ShelfLabelLine2 || p.shelfLabelLine2,
          shelfLabelLine3: p.ShelfLabelLine3 || p.shelfLabelLine3,
          
          // Optical
          alternateFit: p.AlternateFit || p.alternateFit,
          lensSize: p.LensSize || p.lensSize,
          bridgeSize: p.BridgeSize || p.bridgeSize,
          templeLength: p.TempleLength || p.templeLength,
          lensBaseCurve: p.LensBaseCurve || p.lensBaseCurve,
          lensMaterial: p.LensMaterial || p.lensMaterial,
          frameMaterial: p.FrameMaterial || p.frameMaterial,
          
          // Measurements
          measurementId: p.MeasurementId || p.measurementId,
          stockMeasurementId: p.StockMeasurementId || p.stockMeasurementId,
          displayMeasurementId: p.DisplayMeasurementId || p.displayMeasurementId,
          packagingWeight: p.PackagingWeight || p.packagingWeight,
          lengthMm: p.LengthMm || p.lengthMm,
          widthMm: p.WidthMm || p.widthMm,
          heightMm: p.HeightMm || p.heightMm,
          shippingCubic: p.ShippingCubic || p.shippingCubic,
          
          // Website/Marketing
          publishToWebsite: p.PublishToWebsite || p.publishToWebsite,
          websiteHandling: p.WebsiteHandling || p.websiteHandling,
          webDescription: p.WebDescription || p.webDescription,
          webKeywords: p.WebKeywords || p.webKeywords,
          webBlurb: p.WebBlurb || p.webBlurb,
          searchRank: p.SearchRank || p.searchRank,
          displayRank: p.DisplayRank || p.displayRank,
          websiteControl: p.WebsiteControl || p.websiteControl,
          onSpecial: p.OnSpecial || p.onSpecial,
          outOfStock: p.OutOfStock || p.outOfStock,
          outOfSeason: p.OutOfSeason || p.outOfSeason,
          instoreOnly: p.InstoreOnly || p.instoreOnly,
          newProduct: p.NewProduct || p.newProduct,
          freeLocalDelivery: p.FreeLocalDelivery || p.freeLocalDelivery,
          highlightProduct: p.HighlightProduct || p.highlightProduct,
          featuredProduct: p.FeaturedProduct || p.featuredProduct,
          promoteProduct: p.PromoteProduct || p.promoteProduct,
          marketingColor1: p.MarketingColor1 || p.marketingColor1,
          marketingColor2: p.MarketingColor2 || p.marketingColor2,
          marketingColor3: p.MarketingColor3 || p.marketingColor3,
          marketingColor4: p.MarketingColor4 || p.marketingColor4,
          installationUrl: p.InstallationUrl || p.installationUrl,
          warrantyUrl: p.WarrantyUrl || p.warrantyUrl,
          upsellUrl: p.UpsellUrl || p.upsellUrl,
          marketingUrl: p.MarketingUrl || p.marketingUrl,
          webGroup: p.WebGroup || p.webGroup,
          
          // Supply/Ordering
          orderCategory: p.OrderCategory || p.orderCategory,
          messageWhenOrdering: p.MessageWhenOrdering || p.messageWhenOrdering,
          disableOrdering: p.DisableOrdering || p.disableOrdering,
          minUnitsPerOrder: p.MinUnitsPerOrder || p.minUnitsPerOrder,
          maxUnitsPerOrder: p.MaxUnitsPerOrder || p.maxUnitsPerOrder,
          priorityColorCode: p.PriorityColorCode || p.priorityColorCode,
          importanceLevel: p.ImportanceLevel || p.importanceLevel,
          
          // System/Debug
          physkey: p.Physkey || p.physkey,
          globalKey: p.GlobalKey || p.globalKey,
          rve: p.Rve || p.rve,
          createDateTime: p.CreateDateTime || p.createDateTime,
          processFlags: p.ProcessFlags || p.processFlags,
          shopifyId: p.ShopifyId || p.shopifyId,
          bigcommerceId: p.BigcommerceId || p.bigcommerceId,
          rmSystem: p.RmSystem || p.rmSystem,
          extractFlags: p.ExtractFlags || p.extractFlags,
          comments: p.Comments || p.comments,
          
          // Additional Barcodes
          barcode512: p.Barcode512 || p.barcode512,
          barcode513: p.Barcode513 || p.barcode513,
          barcode514: p.Barcode514 || p.barcode514,
          
          // Food Attributes
          isGlutenFree: p.IsGlutenFree || p.isGlutenFree,
          isOrganic: p.IsOrganic || p.isOrganic,
          isDairyFree: p.IsDairyFree || p.isDairyFree,
          isLowSugar: p.IsLowSugar || p.isLowSugar,
          isVegan: p.IsVegan || p.isVegan,
          isLowSalt: p.IsLowSalt || p.isLowSalt,
          isYeastFree: p.IsYeastFree || p.isYeastFree,
          isLowFat: p.IsLowFat || p.isLowFat,
          isRaw: p.IsRaw || p.isRaw,
          isKosher: p.IsKosher || p.isKosher,
          isEdible: p.IsEdible || p.isEdible,
          
          // Physical Product Attributes
          lensType: p.LensType || p.lensType,
          madeFrom: p.MadeFrom || p.madeFrom,
          designShape: p.DesignShape || p.designShape,
          polarised: p.Polarised || p.polarised,
          mirrored: p.Mirrored || p.mirrored,
          perishable: p.Perishable || p.perishable,
          blueLight: p.BlueLight || p.blueLight,
          
          // Supply Chain
          fairTrade: p.FairTrade || p.fairTrade,
          countryMade: p.CountryMade || p.countryMade,
          nzMade: p.NZMade || p.nzMade,
          
          // eCommerce
          gender: p.Gender || p.gender,
          asnzsCompliance: p.ASNZSCompliance || p.asnzsCompliance,
          
          // Extended Website Flags
          websiteBackgroundItem: p.WebsiteBackgroundItem || p.websiteBackgroundItem,
          websitePositionTop: p.WebsitePositionTop || p.websitePositionTop,
          websitePositionLeft: p.WebsitePositionLeft || p.websitePositionLeft,
          websitePositionBottom: p.WebsitePositionBottom || p.websitePositionBottom,
          websitePositionRight: p.WebsitePositionRight || p.websitePositionRight,
          websiteTag: p.WebsiteTag || p.websiteTag,
          
          // Extended Product Properties
          model: p.Model || p.model,
          itemColor: p.ItemColor || p.itemColor,
          cartridge: p.Cartridge || p.cartridge,
          refillable: p.Refillable || p.refillable,
          internalSupportUrl: p.InternalSupportUrl || p.internalSupportUrl,
          rxAble: p.RxAble || p.rxAble,
          productCase: p.ProductCase || p.productCase,
          warranty: p.Warranty || p.warranty,
          productManufacturer: p.ProductManufacturer || p.productManufacturer,
          
          // Printing/Hardware
          paperSize: p.PaperSize || p.paperSize,
          printerConnectivity: p.PrinterConnectivity || p.printerConnectivity,
          printingTechnology: p.PrintingTechnology || p.printingTechnology,
          printerAdfCapacity: p.PrinterAdfCapacity || p.printerAdfCapacity,
          printSpeed: p.PrintSpeed || p.printSpeed,
          scanResolution: p.ScanResolution || p.scanResolution,
          printerPaperCapacity: p.PrinterPaperCapacity || p.printerPaperCapacity,
          
          // Product Types
          nonTangibleItem: p.NonTangibleItem || p.nonTangibleItem,
          oneOffItem: p.OneOffItem || p.oneOffItem,
          
          // Prompting Controls
          promptRegno: p.PromptRegno || p.promptRegno,
          promptLTNZNo: p.PromptLTNZNo || p.promptLTNZNo,
          promptDocument: p.PromptDocument || p.promptDocument,
          promptCustomer: p.PromptCustomer || p.promptCustomer,
        };
        
        setProduct(productData);
        setEditForm(productData);
      }
    } catch (error) {
      console.error("Error loading product:", error);
    } finally {
      setLoading(false);
    }
  };
 
  const loadDepartments = async () => {
    try {
      const result = await apiClient.getDepartments();
      
      if (result.success && result.data) {
        const deptMap: Record<number, string> = {};
        let deptArray: any[] = [];
        
        if (Array.isArray(result.data)) {
          deptArray = result.data;
        } else if ((result.data as any)?.DATS) {
          deptArray = (result.data as any).DATS;
        }
 
        deptArray.forEach((dept: any) => {
          const id = dept.f100 || dept.Depid || dept.depid || dept.id;
          const name = dept.f101 || dept.Name || dept.name;
          if (id && name) {
            deptMap[id] = name;
          }
        });
        
        setDepartments(deptMap);
      }
    } catch (error) {
      console.error('Error loading departments:', error);
    }
  };
 
  const getDepartmentName = (deptId?: number): string => {
    if (!deptId) return 'N/A';
    return departments[deptId] || `Department ${deptId}`;
  };
 
  const handleEditToggle = () => {
    if (isEditing) {
      setEditForm(product || {});
    }
    setIsEditing(!isEditing);
  };
 
  const handleSave = async () => {
    try {
      setLoading(true);
      
      const response = await fetch(`/api/v1/openapi/products/${productId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(editForm),
      });
 
      const result = await response.json();
 
      if (response.ok && result.success) {
        setProduct(editForm as ProductData);
        setIsEditing(false);
        await loadProductData();
      } else {
        alert(`Failed to update product: ${result.error || 'Unknown error'}`);
      }
    } catch (error) {
      console.error('Error saving product:', error);
      alert('Error saving product. Please try again.');
    } finally {
      setLoading(false);
    }
  };
 
  if (loading) {
    return (
      <div className="p-6 min-h-screen bg-bg">
        <div className="flex items-center justify-center h-64">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand mx-auto"></div>
            <p className="mt-4 text-muted">Loading product data...</p>
          </div>
        </div>
      </div>
    );
  }
 
  if (!product) {
    return (
      <div className="p-6 min-h-screen bg-bg">
        <div className="max-w-7xl mx-auto">
          <div className="bg-surface rounded-lg shadow-md p-8 text-center">
            <h2 className="text-2xl font-bold text-text mb-4">Product Not Found</h2>
            <p className="text-muted mb-6">The product with ID {productId} could not be found.</p>
            <button
              onClick={() => router.push("/pages/products")}
              className="px-6 py-2 bg-brand text-white rounded-lg hover:bg-brand-2 transition-colors"
            >
              Back to Products
            </button>
          </div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="p-6 min-h-screen bg-gradient-to-br from-bg via-bg to-surface">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-6 bg-surface rounded-xl shadow-lg p-6 border border-border">
          <div className="flex items-center justify-between">
            <div className="flex-1">
              <button
                onClick={() => router.push("/pages/products")}
                className="text-brand hover:text-brand-2 mb-3 flex items-center gap-2 transition-colors group"
              >
                <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
                Back to Products
              </button>
              <div className="flex items-center gap-4">
                <div className="w-16 h-16 bg-gradient-to-br from-brand to-brand-2 rounded-xl flex items-center justify-center shadow-lg">
                  <Icon name="inventory_2" size={36} className="text-white" />
                </div>
                <div>
                  <h1 className="text-3xl font-bold text-text">{product.name}</h1>
                  <div className="flex items-center gap-3 mt-1">
                    <span className="text-muted text-sm">Product ID: {product.pid}</span>
                    {product.barcode && (
                      <>
                        <span className="text-muted">•</span>
                        <span className="text-muted text-sm font-mono">{product.barcode}</span>
                      </>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <div className="flex gap-2">
              {isEditing ? (
                <>
                  <button
                    onClick={handleEditToggle}
                    className="px-4 py-2 bg-muted/80 text-white rounded-lg hover:bg-muted transition-colors flex items-center gap-2"
                  >
                    <Icon name="close" size={20} />
                    Cancel
                  </button>
                  <button
                    onClick={handleSave}
                    className="px-4 py-2 bg-brand text-white rounded-lg hover:bg-brand-2 transition-colors flex items-center gap-2 shadow-md"
                  >
                    <Icon name="save" size={20} />
                    Save Changes
                  </button>
                </>
              ) : (
                <button
                  onClick={handleEditToggle}
                  className="px-4 py-2 bg-brand text-white rounded-lg hover:bg-brand-2 transition-colors flex items-center gap-2 shadow-md"
                >
                  <Icon name="edit" size={20} />
                  Edit Product
                </button>
              )}
            </div>
          </div>
        </div>
 
        {/* Tabs */}
        <div className="mb-6 bg-surface/50 backdrop-blur-sm rounded-xl shadow-lg border border-border p-2">
          <nav className="grid grid-cols-4 lg:grid-cols-8 gap-2">
            {[
              { id: "main", label: "Main", icon: "info" },
              { id: "pricing", label: "Pricing", icon: "payments" },
              { id: "optical", label: "Optical", icon: "visibility" },
              { id: "measurements", label: "Measure", icon: "straighten" },
              { id: "website", label: "Website", icon: "language" },
              { id: "supply", label: "Supply", icon: "local_shipping" },
              { id: "system", label: "System", icon: "settings" },
              { id: "history", label: "History", icon: "history" }
            ].map(tab => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as TabType)}
                className={`py-3 px-4 font-semibold text-sm rounded-lg transition-all ${
                  activeTab === tab.id
                    ? "bg-gradient-to-r from-brand to-brand-2 text-white shadow-lg shadow-brand/30"
                    : "bg-transparent text-muted hover:bg-surface-2 hover:text-text"
                }`}
              >
                <div className="flex flex-col items-center justify-center gap-1">
                  <Icon name={tab.icon} size={20} />
                  <span className="text-xs">{tab.label}</span>
                </div>
              </button>
            ))}
          </nav>
        </div>
 
        {/* Tab Content */}
        {activeTab === "main" && (
          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
            {/* Basic Information Card */}
            <Card title="Basic Information" icon="description">
              <Field 
                label="Product Name" 
                value={product.name} 
                editValue={editForm.name}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, name: v})}
              />
              <Field 
                label="Description" 
                value={product.description} 
                editValue={editForm.description}
                isEditing={isEditing}
                type="textarea"
                onChange={(v) => setEditForm({...editForm, description: v})}
              />
              <Field 
                label="Short Name" 
                value={product.shortName} 
                editValue={editForm.shortName}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, shortName: v})}
              />
              <Field 
                label="Brand" 
                value={product.brand} 
                editValue={editForm.brand}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, brand: v})}
              />
              <Field 
                label="Size" 
                value={product.size} 
                editValue={editForm.size}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, size: v})}
              />
              <Field 
                label="Weight (g)" 
                value={product.weightGm} 
                editValue={editForm.weightGm}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, weightGm: v})}
              />
            </Card>
 
            {/* Barcodes Card */}
            <Card title="Barcodes & Identifiers" icon="qr_code_2">
              <Field 
                label="Primary Barcode" 
                value={product.barcode} 
                editValue={editForm.barcode}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, barcode: v})}
              />
              <Field 
                label="PLU" 
                value={product.plu} 
                editValue={editForm.plu}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, plu: v})}
              />
              <Field 
                label="Alternate Barcode (512)" 
                value={product.barcode512} 
                editValue={editForm.barcode512}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, barcode512: v})}
              />
              <Field 
                label="Alternate Barcode (513)" 
                value={product.barcode513} 
                editValue={editForm.barcode513}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, barcode513: v})}
              />
              <Field 
                label="Alternate Barcode (514)" 
                value={product.barcode514} 
                editValue={editForm.barcode514}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, barcode514: v})}
              />
            </Card>
 
            {/* Product Types & Special Handling Card */}
            <Card title="Product Types" icon="category">
              <Field 
                label="Non-Tangible Item" 
                value={product.nonTangibleItem} 
                editValue={editForm.nonTangibleItem}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, nonTangibleItem: v})}
              />
              <Field 
                label="One-Off Item" 
                value={product.oneOffItem} 
                editValue={editForm.oneOffItem}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, oneOffItem: v})}
              />
              <Field 
                label="Cartridge/Refillable" 
                value={product.cartridge} 
                editValue={editForm.cartridge}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, cartridge: v})}
              />
              <Field 
                label="Refillable" 
                value={product.refillable} 
                editValue={editForm.refillable}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, refillable: v})}
              />
              <Field 
                label="Prompt Vehicle Registration" 
                value={product.promptRegno} 
                editValue={editForm.promptRegno}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, promptRegno: v})}
              />
              <Field 
                label="Prompt LTNZ Number" 
                value={product.promptLTNZNo} 
                editValue={editForm.promptLTNZNo}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, promptLTNZNo: v})}
              />
              <Field 
                label="Prompt Document" 
                value={product.promptDocument} 
                editValue={editForm.promptDocument}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, promptDocument: v})}
              />
              <Field 
                label="Prompt Customer" 
                value={product.promptCustomer} 
                editValue={editForm.promptCustomer}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, promptCustomer: v})}
              />
            </Card>
 
            {/* Department Hierarchy Card */}
            <Card title="Department Hierarchy" icon="account_tree">
              <Field 
                label="Department (1)" 
                value={getDepartmentName(product.department)} 
                editValue={editForm.department}
                isEditing={isEditing}
                type="select"
                options={Object.entries(departments).map(([id, name]) => ({ value: id, label: name }))}
                onChange={(v) => setEditForm({...editForm, department: parseInt(v) || undefined})}
              />
              {(product.department2 || isEditing) && (
                <Field 
                  label="Department (2)" 
                  value={getDepartmentName(product.department2)} 
                  editValue={editForm.department2}
                  isEditing={isEditing}
                  type="select"
                  options={Object.entries(departments).map(([id, name]) => ({ value: id, label: name }))}
                  onChange={(v) => setEditForm({...editForm, department2: parseInt(v) || undefined})}
                />
              )}
              {(product.department3 || isEditing) && (
                <Field 
                  label="Department (3)" 
                  value={getDepartmentName(product.department3)} 
                  editValue={editForm.department3}
                  isEditing={isEditing}
                  type="select"
                  options={Object.entries(departments).map(([id, name]) => ({ value: id, label: name }))}
                  onChange={(v) => setEditForm({...editForm, department3: parseInt(v) || undefined})}
                />
              )}
              {(product.department4 || isEditing) && (
                <Field 
                  label="Department (4)" 
                  value={getDepartmentName(product.department4)} 
                  editValue={editForm.department4}
                  isEditing={isEditing}
                  type="select"
                  options={Object.entries(departments).map(([id, name]) => ({ value: id, label: name }))}
                  onChange={(v) => setEditForm({...editForm, department4: parseInt(v) || undefined})}
                />
              )}
            </Card>
 
            {/* Supplier Card */}
            <Card title="Supplier Information" icon="store">
              <div>
                <p className="text-sm text-muted mb-1">Supplier Name</p>
                <p className="text-text font-medium">{product.supplierName || 'N/A'}</p>
              </div>
              <Field 
                label="Supplier Part Code" 
                value={product.supplierPartCode} 
                editValue={editForm.supplierPartCode}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, supplierPartCode: v})}
              />
              <Field 
                label="Manufacturer Part Code" 
                value={product.manufacturerPartCode} 
                editValue={editForm.manufacturerPartCode}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, manufacturerPartCode: v})}
              />
            </Card>
 
            {/* Product Flags Card */}
            <Card title="Product Flags & Dates" icon="flag">
              <Field 
                label="No Sell" 
                value={product.noSell} 
                editValue={editForm.noSell}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, noSell: v})}
              />
              <Field 
                label="Hidden" 
                value={product.hidden} 
                editValue={editForm.hidden}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, hidden: v})}
              />
              <Field 
                label="Release Date" 
                value={product.releaseDate} 
                editValue={editForm.releaseDate}
                isEditing={isEditing}
                type="date"
                onChange={(v) => setEditForm({...editForm, releaseDate: v})}
              />
              <Field 
                label="Available Date" 
                value={product.availableDate} 
                editValue={editForm.availableDate}
                isEditing={isEditing}
                type="date"
                onChange={(v) => setEditForm({...editForm, availableDate: v})}
              />
            </Card>
          </div>
        )}
 
        {activeTab === "pricing" && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Core Pricing Card */}
            <Card title="Core Pricing" icon="attach_money">
              <Field 
                label="Sell Price" 
                value={product.sellPrice} 
                editValue={editForm.sellPrice}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, sellPrice: v})}
              />
              <Field 
                label="Cost Price" 
                value={product.costPrice} 
                editValue={editForm.costPrice}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, costPrice: v})}
              />
              <Field 
                label="Freight" 
                value={product.freight} 
                editValue={editForm.freight}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, freight: v})}
              />
              <Field 
                label="Packaging" 
                value={product.packaging} 
                editValue={editForm.packaging}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, packaging: v})}
              />
              <Field 
                label="Decimal Places" 
                value={product.decimalPlaces} 
                editValue={editForm.decimalPlaces}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, decimalPlaces: v})}
              />
            </Card>
 
            {/* Advanced Pricing Card */}
            <Card title="Advanced Pricing" icon="trending_up">
              <Field 
                label="Confirm Price" 
                value={product.confirmPrice} 
                editValue={editForm.confirmPrice}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, confirmPrice: v})}
              />
              <Field 
                label="Franchise Price" 
                value={product.franchisePrice} 
                editValue={editForm.franchisePrice}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, franchisePrice: v})}
              />
              <Field 
                label="Price Band 1" 
                value={product.priceBand1} 
                editValue={editForm.priceBand1}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, priceBand1: v})}
              />
              <Field 
                label="Price Band 2" 
                value={product.priceBand2} 
                editValue={editForm.priceBand2}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, priceBand2: v})}
              />
              <Field 
                label="Price Band 3" 
                value={product.priceBand3} 
                editValue={editForm.priceBand3}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, priceBand3: v})}
              />
            </Card>
 
            {/* Discount Limits Card */}
            <Card title="Discount Limits" icon="discount">
              <Field 
                label="Disable Discounts" 
                value={product.disableDiscounts} 
                editValue={editForm.disableDiscounts}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, disableDiscounts: v})}
              />
              <Field 
                label="Lowest Price" 
                value={product.lowestPrice} 
                editValue={editForm.lowestPrice}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, lowestPrice: v})}
              />
              <Field 
                label="Discount Limit 1" 
                value={product.discountLimit1} 
                editValue={editForm.discountLimit1}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, discountLimit1: v})}
              />
              <Field 
                label="Discount Limit 2" 
                value={product.discountLimit2} 
                editValue={editForm.discountLimit2}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, discountLimit2: v})}
              />
            </Card>
 
            {/* Stock Control Card */}
            <Card title="Stock Control" icon="inventory">
              <Field 
                label="Current Stock" 
                value={product.stockLevel} 
                editValue={editForm.stockLevel}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, stockLevel: v})}
              />
              <Field 
                label="Stock Min" 
                value={product.stockMin} 
                editValue={editForm.stockMin}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, stockMin: v})}
              />
              <Field 
                label="Stock Max" 
                value={product.stockMax} 
                editValue={editForm.stockMax}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, stockMax: v})}
              />
              <Field 
                label="Ignore Stock Movements" 
                value={product.ignoreStockMovements} 
                editValue={editForm.ignoreStockMovements}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, ignoreStockMovements: v})}
              />
              <Field 
                label="Record Stock Movements" 
                value={product.recordStockMovements} 
                editValue={editForm.recordStockMovements}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, recordStockMovements: v})}
              />
            </Card>
          </div>
        )}
 
        {activeTab === "optical" && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <Card title="Optical/Eyewear" icon="visibility">
              <Field 
                label="Alternate Fit" 
                value={product.alternateFit} 
                editValue={editForm.alternateFit}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, alternateFit: v})}
              />
              <Field 
                label="Lens Size" 
                value={product.lensSize} 
                editValue={editForm.lensSize}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, lensSize: v})}
              />
              <Field 
                label="Bridge Size" 
                value={product.bridgeSize} 
                editValue={editForm.bridgeSize}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, bridgeSize: v})}
              />
              <Field 
                label="Temple Length" 
                value={product.templeLength} 
                editValue={editForm.templeLength}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, templeLength: v})}
              />
              <Field 
                label="Lens Base Curve" 
                value={product.lensBaseCurve} 
                editValue={editForm.lensBaseCurve}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, lensBaseCurve: v})}
              />
              <Field 
                label="Lens Type" 
                value={product.lensType} 
                editValue={editForm.lensType}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, lensType: v})}
              />
              <Field 
                label="Polarised" 
                value={product.polarised} 
                editValue={editForm.polarised}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, polarised: v})}
              />
              <Field 
                label="Mirrored" 
                value={product.mirrored} 
                editValue={editForm.mirrored}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, mirrored: v})}
              />
              <Field 
                label="Blue Light Protection" 
                value={product.blueLight} 
                editValue={editForm.blueLight}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, blueLight: v})}
              />
              <Field 
                label="RxAble (Prescription Capable)" 
                value={product.rxAble} 
                editValue={editForm.rxAble}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, rxAble: v})}
              />
            </Card>
 
            <Card title="Physical Attributes" icon="category">
              <Field 
                label="Model" 
                value={product.model} 
                editValue={editForm.model}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, model: v})}
              />
              <Field 
                label="Item Color" 
                value={product.itemColor} 
                editValue={editForm.itemColor}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, itemColor: v})}
              />
              <Field 
                label="Design Shape" 
                value={product.designShape} 
                editValue={editForm.designShape}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, designShape: v})}
              />
              <Field 
                label="Made From" 
                value={product.madeFrom} 
                editValue={editForm.madeFrom}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, madeFrom: v})}
              />
              <Field 
                label="Product Case" 
                value={product.productCase} 
                editValue={editForm.productCase}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, productCase: v})}
              />
              <Field 
                label="Warranty" 
                value={product.warranty} 
                editValue={editForm.warranty}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, warranty: v})}
              />
              <Field 
                label="Product Manufacturer" 
                value={product.productManufacturer} 
                editValue={editForm.productManufacturer}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, productManufacturer: v})}
              />
            </Card>
 
            <Card title="Food & Supply Chain" icon="restaurant">
              <Field 
                label="Gluten Free" 
                value={product.isGlutenFree} 
                editValue={editForm.isGlutenFree}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, isGlutenFree: v})}
              />
              <Field 
                label="Organic" 
                value={product.isOrganic} 
                editValue={editForm.isOrganic}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, isOrganic: v})}
              />
              <Field 
                label="Dairy Free" 
                value={product.isDairyFree} 
                editValue={editForm.isDairyFree}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, isDairyFree: v})}
              />
              <Field 
                label="Vegan" 
                value={product.isVegan} 
                editValue={editForm.isVegan}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, isVegan: v})}
              />
              <Field 
                label="Kosher" 
                value={product.isKosher} 
                editValue={editForm.isKosher}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, isKosher: v})}
              />
              <Field 
                label="Perishable" 
                value={product.perishable} 
                editValue={editForm.perishable}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, perishable: v})}
              />
              <Field 
                label="Fair Trade" 
                value={product.fairTrade} 
                editValue={editForm.fairTrade}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, fairTrade: v})}
              />
              <Field 
                label="NZ Made" 
                value={product.nzMade} 
                editValue={editForm.nzMade}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, nzMade: v})}
              />
              <Field 
                label="Country Made" 
                value={product.countryMade} 
                editValue={editForm.countryMade}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, countryMade: v})}
              />
            </Card>
          </div>
        )}
 
        {activeTab === "measurements" && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card title="Measurements" icon="straighten">
              <Field 
                label="Length (mm)" 
                value={product.lengthMm} 
                editValue={editForm.lengthMm}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, lengthMm: v})}
              />
              <Field 
                label="Width (mm)" 
                value={product.widthMm} 
                editValue={editForm.widthMm}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, widthMm: v})}
              />
              <Field 
                label="Height (mm)" 
                value={product.heightMm} 
                editValue={editForm.heightMm}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, heightMm: v})}
              />
              <Field 
                label="Packaging Weight" 
                value={product.packagingWeight} 
                editValue={editForm.packagingWeight}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, packagingWeight: v})}
              />
              <Field 
                label="Shipping Cubic" 
                value={product.shippingCubic} 
                editValue={editForm.shippingCubic}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, shippingCubic: v})}
              />
            </Card>
          </div>
        )}
 
        {activeTab === "website" && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <Card title="Website Configuration" icon="language">
              <Field 
                label="Publish to Website" 
                value={product.publishToWebsite} 
                editValue={editForm.publishToWebsite}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, publishToWebsite: v})}
              />
              <Field 
                label="Web Description" 
                value={product.webDescription} 
                editValue={editForm.webDescription}
                isEditing={isEditing}
                type="textarea"
                onChange={(v) => setEditForm({...editForm, webDescription: v})}
              />
              <Field 
                label="Web Keywords" 
                value={product.webKeywords} 
                editValue={editForm.webKeywords}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, webKeywords: v})}
              />
              <Field 
                label="Web Blurb" 
                value={product.webBlurb} 
                editValue={editForm.webBlurb}
                isEditing={isEditing}
                type="textarea"
                onChange={(v) => setEditForm({...editForm, webBlurb: v})}
              />
              <Field 
                label="Website Tag" 
                value={product.websiteTag} 
                editValue={editForm.websiteTag}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, websiteTag: v})}
              />
              <Field 
                label="Gender" 
                value={product.gender} 
                editValue={editForm.gender}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, gender: v})}
              />
              <Field 
                label="AS/NZS Compliance" 
                value={product.asnzsCompliance} 
                editValue={editForm.asnzsCompliance}
                isEditing={isEditing}
                onChange={(v) => setEditForm({...editForm, asnzsCompliance: v})}
              />
            </Card>
 
            <Card title="Marketing Flags" icon="sell">
              <Field 
                label="On Special" 
                value={product.onSpecial} 
                editValue={editForm.onSpecial}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, onSpecial: v})}
              />
              <Field 
                label="New Product" 
                value={product.newProduct} 
                editValue={editForm.newProduct}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, newProduct: v})}
              />
              <Field 
                label="Featured Product" 
                value={product.featuredProduct} 
                editValue={editForm.featuredProduct}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, featuredProduct: v})}
              />
              <Field 
                label="Highlight Product" 
                value={product.highlightProduct} 
                editValue={editForm.highlightProduct}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, highlightProduct: v})}
              />
              <Field 
                label="Promote Product" 
                value={product.promoteProduct} 
                editValue={editForm.promoteProduct}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, promoteProduct: v})}
              />
              <Field 
                label="Out of Stock" 
                value={product.outOfStock} 
                editValue={editForm.outOfStock}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, outOfStock: v})}
              />
              <Field 
                label="Out of Season" 
                value={product.outOfSeason} 
                editValue={editForm.outOfSeason}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, outOfSeason: v})}
              />
              <Field 
                label="In-store Only" 
                value={product.instoreOnly} 
                editValue={editForm.instoreOnly}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, instoreOnly: v})}
              />
            </Card>
 
            <Card title="Website Positioning" icon="web">
              <Field 
                label="Background Item" 
                value={product.websiteBackgroundItem} 
                editValue={editForm.websiteBackgroundItem}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, websiteBackgroundItem: v})}
              />
              <Field 
                label="Position Top" 
                value={product.websitePositionTop} 
                editValue={editForm.websitePositionTop}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, websitePositionTop: v})}
              />
              <Field 
                label="Position Left" 
                value={product.websitePositionLeft} 
                editValue={editForm.websitePositionLeft}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, websitePositionLeft: v})}
              />
              <Field 
                label="Position Bottom" 
                value={product.websitePositionBottom} 
                editValue={editForm.websitePositionBottom}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, websitePositionBottom: v})}
              />
              <Field 
                label="Position Right" 
                value={product.websitePositionRight} 
                editValue={editForm.websitePositionRight}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, websitePositionRight: v})}
              />
            </Card>
          </div>
        )}
 
        {activeTab === "supply" && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card title="Supply & Ordering" icon="local_shipping">
              <Field 
                label="Disable Ordering" 
                value={product.disableOrdering} 
                editValue={editForm.disableOrdering}
                isEditing={isEditing}
                type="checkbox"
                onChange={(v) => setEditForm({...editForm, disableOrdering: v})}
              />
              <Field 
                label="Min Units Per Order" 
                value={product.minUnitsPerOrder} 
                editValue={editForm.minUnitsPerOrder}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, minUnitsPerOrder: v})}
              />
              <Field 
                label="Max Units Per Order" 
                value={product.maxUnitsPerOrder} 
                editValue={editForm.maxUnitsPerOrder}
                isEditing={isEditing}
                type="number"
                onChange={(v) => setEditForm({...editForm, maxUnitsPerOrder: v})}
              />
              <Field 
                label="Message When Ordering" 
                value={product.messageWhenOrdering} 
                editValue={editForm.messageWhenOrdering}
                isEditing={isEditing}
                type="textarea"
                placeholder="Communication notes for ordering staff"
                onChange={(v) => setEditForm({...editForm, messageWhenOrdering: v})}
              />
            </Card>
          </div>
        )}
 
        {activeTab === "system" && (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card title="System Information" icon="settings">
              <div>
                <p className="text-sm text-muted mb-1">Physical Key</p>
                <p className="text-text font-mono">{product.physkey || 'N/A'}</p>
              </div>
              <div>
                <p className="text-sm text-muted mb-1">Global Key</p>
                <p className="text-text font-mono">{product.globalKey || 'N/A'}</p>
              </div>
              <div>
                <p className="text-sm text-muted mb-1">RVE (Replication Version)</p>
                <p className="text-text font-mono">{product.rve || 'N/A'}</p>
              </div>
              <div>
                <p className="text-sm text-muted mb-1">Created</p>
                <p className="text-text">{product.createDateTime ? new Date(product.createDateTime).toLocaleString() : 'N/A'}</p>
              </div>
              <div>
                <p className="text-sm text-muted mb-1">Shopify ID</p>
                <p className="text-text font-mono">{product.shopifyId || 'N/A'}</p>
              </div>
              <div>
                <p className="text-sm text-muted mb-1">BigCommerce ID</p>
                <p className="text-text font-mono">{product.bigcommerceId || 'N/A'}</p>
              </div>
            </Card>
 
            <Card title="Comments" icon="comment">
              <Field 
                label="Internal Comments" 
                value={product.comments} 
                editValue={editForm.comments}
                isEditing={isEditing}
                type="textarea"
                placeholder="Internal notes about this product"
                onChange={(v) => setEditForm({...editForm, comments: v})}
              />
            </Card>
          </div>
        )}
 
        {activeTab === "history" && (
          <div className="grid grid-cols-1 gap-6">
            <Card title="Product History" icon="history">
              <p className="text-muted">Sales history, stock movements, and price changes will be displayed here.</p>
            </Card>
          </div>
        )}
      </div>
    </div>
  );
}