import React, { useState, useEffect } from 'react';
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import { AdvancedOptionsSection } from '../../../ui/AdvancedOptionsSection';
import Tooltip from '../../../ui/Tooltip/Tooltip';
import { Info } from 'lucide-react';

interface WizardDataProps extends WizardStepProps {
  data: Record<string, any>;
  onDataChange: (data: Record<string, any>) => void;
}

// Single comprehensive step with all fields
const InventoryDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
  const [inventoryData, setInventoryData] = useState({
    // Required fields
    name: data.name || '',
    unitOfMeasure: data.unitOfMeasure || '',
    productType: data.productType || 'ingredient',

    // Basic fields
    sku: data.sku || '',
    barcode: data.barcode || '',
    ingredientCategory: data.ingredientCategory || '',
    productCategory: data.productCategory || '',
    description: data.description || '',
    brand: data.brand || '',

    // Pricing fields
    averageCost: data.averageCost || '',
    lastPurchasePrice: data.lastPurchasePrice || '',
    standardCost: data.standardCost || '',
    sellingPrice: data.sellingPrice || '',
    minimumPrice: data.minimumPrice || '',

    // Inventory management
    lowStockThreshold: data.lowStockThreshold || '',
    reorderPoint: data.reorderPoint || '',
    reorderQuantity: data.reorderQuantity || '',
    maxStockLevel: data.maxStockLevel || '',
    leadTimeDays: data.leadTimeDays || '',

    // Product information
    packageSize: data.packageSize || '',
    shelfLifeDays: data.shelfLifeDays || '',
    displayLifeHours: data.displayLifeHours || '',
    storageTempMin: data.storageTempMin || '',
    storageTempMax: data.storageTempMax || '',

    // Storage and handling
    storageInstructions: data.storageInstructions || '',
    isPerishable: data.isPerishable ?? true,
    handlingInstructions: data.handlingInstructions || '',

    // Supplier information
    preferredSupplierId: data.preferredSupplierId || '',
    supplierProductCode: data.supplierProductCode || '',

    // Quality and compliance
    allergenInfo: data.allergenInfo || '',
    nutritionalInfo: data.nutritionalInfo || '',
    certifications: data.certifications || '',

    // Physical properties
    weight: data.weight || '',
    volume: data.volume || '',
    dimensions: data.dimensions || '',
    color: data.color || '',

    // Status and tracking
    isActive: data.isActive ?? true,
    trackByLot: data.trackByLot ?? false,
    trackByExpiry: data.trackByExpiry ?? true,
    allowNegativeStock: data.allowNegativeStock ?? false,

    // Metadata
    notes: data.notes || '',
    tags: data.tags || '',
    customFields: data.customFields || '',
  });

  // Auto-generate SKU from name if not provided
  useEffect(() => {
    if (!inventoryData.sku && inventoryData.name) {
      const sku = `SKU-${inventoryData.name.substring(0, 3).toUpperCase()}-${Date.now().toString().slice(-4)}`;
      setInventoryData(prev => ({ ...prev, sku }));
    }
  }, [inventoryData.name]);

  // Sync with parent wizard state in real-time
  useEffect(() => {
    onDataChange({ ...data, ...inventoryData });
  }, [inventoryData]);

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          Inventory Item Details
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          Fill in the required information to create an inventory item
        </p>
      </div>

      {/* Required Fields */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="md:col-span-2">
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Name *
          </label>
          <input
            type="text"
            value={inventoryData.name}
            onChange={(e) => setInventoryData({ ...inventoryData, name: e.target.value })}
            placeholder="E.g., All-Purpose Flour, Sourdough Bread"
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Product Type *
          </label>
          <select
            value={inventoryData.productType}
            onChange={(e) => setInventoryData({ ...inventoryData, productType: e.target.value })}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          >
            <option value="ingredient">Ingredient</option>
            <option value="finished_product">Finished Product</option>
            <option value="packaging">Packaging</option>
            <option value="consumable">Consumable</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
            Unit of Measure *
          </label>
          <select
            value={inventoryData.unitOfMeasure}
            onChange={(e) => setInventoryData({ ...inventoryData, unitOfMeasure: e.target.value })}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
          >
            <option value="">Select...</option>
            <option value="kg">Kilograms (kg)</option>
            <option value="g">Grams (g)</option>
            <option value="l">Liters (L)</option>
            <option value="ml">Milliliters (ml)</option>
            <option value="units">Units</option>
            <option value="dozen">Dozen</option>
            <option value="lb">Pounds (lb)</option>
            <option value="oz">Ounces (oz)</option>
          </select>
        </div>
      </div>

      {/* Basic Information */}
      <div className="border-t border-[var(--border-primary)] pt-4">
        <h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3">Basic Information</h4>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              SKU
              <Tooltip content="Auto-generated from name, or enter custom SKU">
                <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
              </Tooltip>
            </label>
            <input
              type="text"
              value={inventoryData.sku}
              onChange={(e) => setInventoryData({ ...inventoryData, sku: e.target.value })}
              placeholder="SKU-XXX-1234"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Barcode
            </label>
            <input
              type="text"
              value={inventoryData.barcode}
              onChange={(e) => setInventoryData({ ...inventoryData, barcode: e.target.value })}
              placeholder="Barcode/UPC/EAN"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {inventoryData.productType === 'ingredient' ? 'Ingredient Category' : 'Product Category'}
            </label>
            <select
              value={inventoryData.productType === 'ingredient' ? inventoryData.ingredientCategory : inventoryData.productCategory}
              onChange={(e) => setInventoryData({
                ...inventoryData,
                [inventoryData.productType === 'ingredient' ? 'ingredientCategory' : 'productCategory']: e.target.value
              })}
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            >
              <option value="">Select...</option>
              {inventoryData.productType === 'ingredient' ? (
                <>
                  <option value="flour">Flours</option>
                  <option value="dairy">Dairy</option>
                  <option value="eggs">Eggs</option>
                  <option value="fats">Fats & Oils</option>
                  <option value="sweeteners">Sweeteners</option>
                  <option value="additives">Additives</option>
                  <option value="fruits">Fruits</option>
                  <option value="nuts">Nuts & Seeds</option>
                  <option value="spices">Spices</option>
                  <option value="leavening">Leavening Agents</option>
                </>
              ) : (
                <>
                  <option value="bread">Bread</option>
                  <option value="pastry">Pastry</option>
                  <option value="cake">Cakes</option>
                  <option value="cookies">Cookies</option>
                  <option value="specialty">Specialty Items</option>
                </>
              )}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Brand
            </label>
            <input
              type="text"
              value={inventoryData.brand}
              onChange={(e) => setInventoryData({ ...inventoryData, brand: e.target.value })}
              placeholder="Brand name"
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>

          <div className="md:col-span-2">
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              Description
            </label>
            <textarea
              value={inventoryData.description}
              onChange={(e) => setInventoryData({ ...inventoryData, description: e.target.value })}
              placeholder="Detailed description of the inventory item"
              rows={2}
              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            />
          </div>
        </div>
      </div>

      {/* Advanced Options */}
      <AdvancedOptionsSection
        title="Advanced Options"
        description="Optional fields for comprehensive inventory management"
      >
        {/* Pricing Information */}
        <div className="space-y-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            Pricing Information
          </h5>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Average Cost (€)
                <Tooltip content="Average cost per unit based on purchase history">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="number"
                value={inventoryData.averageCost}
                onChange={(e) => setInventoryData({ ...inventoryData, averageCost: e.target.value })}
                placeholder="0.00"
                step="0.01"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Last Purchase Price (€)
              </label>
              <input
                type="number"
                value={inventoryData.lastPurchasePrice}
                onChange={(e) => setInventoryData({ ...inventoryData, lastPurchasePrice: e.target.value })}
                placeholder="0.00"
                step="0.01"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Standard Cost (€)
                <Tooltip content="Standard/expected cost per unit for costing calculations">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="number"
                value={inventoryData.standardCost}
                onChange={(e) => setInventoryData({ ...inventoryData, standardCost: e.target.value })}
                placeholder="0.00"
                step="0.01"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Selling Price (€)
              </label>
              <input
                type="number"
                value={inventoryData.sellingPrice}
                onChange={(e) => setInventoryData({ ...inventoryData, sellingPrice: e.target.value })}
                placeholder="0.00"
                step="0.01"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Minimum Price (€)
              </label>
              <input
                type="number"
                value={inventoryData.minimumPrice}
                onChange={(e) => setInventoryData({ ...inventoryData, minimumPrice: e.target.value })}
                placeholder="0.00"
                step="0.01"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>
          </div>
        </div>

        {/* Inventory Management */}
        <div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            Inventory Management
          </h5>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Low Stock Threshold
                <Tooltip content="Alert when stock falls below this level">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="number"
                value={inventoryData.lowStockThreshold}
                onChange={(e) => setInventoryData({ ...inventoryData, lowStockThreshold: e.target.value })}
                placeholder="10"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Reorder Point
                <Tooltip content="Trigger reorder when stock reaches this level">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="number"
                value={inventoryData.reorderPoint}
                onChange={(e) => setInventoryData({ ...inventoryData, reorderPoint: e.target.value })}
                placeholder="20"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Reorder Quantity
                <Tooltip content="Standard quantity to order when reordering">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="number"
                value={inventoryData.reorderQuantity}
                onChange={(e) => setInventoryData({ ...inventoryData, reorderQuantity: e.target.value })}
                placeholder="100"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Max Stock Level
              </label>
              <input
                type="number"
                value={inventoryData.maxStockLevel}
                onChange={(e) => setInventoryData({ ...inventoryData, maxStockLevel: e.target.value })}
                placeholder="500"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Lead Time (days)
                <Tooltip content="Time between order placement and delivery">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="number"
                value={inventoryData.leadTimeDays}
                onChange={(e) => setInventoryData({ ...inventoryData, leadTimeDays: e.target.value })}
                placeholder="7"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>
          </div>
        </div>

        {/* Product Information */}
        <div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            Product Information
          </h5>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Package Size
              </label>
              <input
                type="text"
                value={inventoryData.packageSize}
                onChange={(e) => setInventoryData({ ...inventoryData, packageSize: e.target.value })}
                placeholder="E.g., 25kg bag, 12-pack"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Shelf Life (days)
              </label>
              <input
                type="number"
                value={inventoryData.shelfLifeDays}
                onChange={(e) => setInventoryData({ ...inventoryData, shelfLifeDays: e.target.value })}
                placeholder="365"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Display Life (hours)
                <Tooltip content="Hours product can be displayed before quality degrades">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="number"
                value={inventoryData.displayLifeHours}
                onChange={(e) => setInventoryData({ ...inventoryData, displayLifeHours: e.target.value })}
                placeholder="24"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Storage Temp Range (°C)
              </label>
              <div className="flex gap-2">
                <input
                  type="number"
                  value={inventoryData.storageTempMin}
                  onChange={(e) => setInventoryData({ ...inventoryData, storageTempMin: e.target.value })}
                  placeholder="Min"
                  step="0.1"
                  className="w-1/2 px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
                />
                <input
                  type="number"
                  value={inventoryData.storageTempMax}
                  onChange={(e) => setInventoryData({ ...inventoryData, storageTempMax: e.target.value })}
                  placeholder="Max"
                  step="0.1"
                  className="w-1/2 px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
                />
              </div>
            </div>
          </div>
        </div>

        {/* Storage & Handling */}
        <div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            Storage & Handling
          </h5>
          <div className="grid grid-cols-1 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Storage Instructions
              </label>
              <textarea
                value={inventoryData.storageInstructions}
                onChange={(e) => setInventoryData({ ...inventoryData, storageInstructions: e.target.value })}
                placeholder="E.g., Store in cool, dry place away from direct sunlight"
                rows={2}
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Handling Instructions
              </label>
              <textarea
                value={inventoryData.handlingInstructions}
                onChange={(e) => setInventoryData({ ...inventoryData, handlingInstructions: e.target.value })}
                placeholder="Special handling requirements"
                rows={2}
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={inventoryData.isPerishable}
                onChange={(e) => setInventoryData({ ...inventoryData, isPerishable: e.target.checked })}
                className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
              />
              <label className="text-sm text-[var(--text-secondary)]">
                Perishable Item
              </label>
            </div>
          </div>
        </div>

        {/* Supplier Information */}
        <div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            Supplier Information
          </h5>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Preferred Supplier ID
              </label>
              <input
                type="text"
                value={inventoryData.preferredSupplierId}
                onChange={(e) => setInventoryData({ ...inventoryData, preferredSupplierId: e.target.value })}
                placeholder="Supplier ID"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Supplier Product Code
              </label>
              <input
                type="text"
                value={inventoryData.supplierProductCode}
                onChange={(e) => setInventoryData({ ...inventoryData, supplierProductCode: e.target.value })}
                placeholder="Supplier's product code"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>
          </div>
        </div>

        {/* Quality & Compliance */}
        <div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            Quality & Compliance
          </h5>
          <div className="grid grid-cols-1 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Allergen Information
                <Tooltip content="Comma-separated list: e.g., gluten, milk, eggs, nuts">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="text"
                value={inventoryData.allergenInfo}
                onChange={(e) => setInventoryData({ ...inventoryData, allergenInfo: e.target.value })}
                placeholder="gluten, milk, eggs"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Nutritional Information
                <Tooltip content="Key nutrition facts as comma-separated list">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="text"
                value={inventoryData.nutritionalInfo}
                onChange={(e) => setInventoryData({ ...inventoryData, nutritionalInfo: e.target.value })}
                placeholder="calories:250, protein:8g, carbs:45g"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Certifications
                <Tooltip content="Comma-separated list: e.g., Organic, Non-GMO, Kosher">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="text"
                value={inventoryData.certifications}
                onChange={(e) => setInventoryData({ ...inventoryData, certifications: e.target.value })}
                placeholder="Organic, Non-GMO, Kosher"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>
          </div>
        </div>

        {/* Physical Properties */}
        <div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            Physical Properties
          </h5>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Weight (kg)
              </label>
              <input
                type="number"
                value={inventoryData.weight}
                onChange={(e) => setInventoryData({ ...inventoryData, weight: e.target.value })}
                placeholder="0.00"
                step="0.01"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Volume (L)
              </label>
              <input
                type="number"
                value={inventoryData.volume}
                onChange={(e) => setInventoryData({ ...inventoryData, volume: e.target.value })}
                placeholder="0.00"
                step="0.01"
                min="0"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Dimensions (L×W×H cm)
              </label>
              <input
                type="text"
                value={inventoryData.dimensions}
                onChange={(e) => setInventoryData({ ...inventoryData, dimensions: e.target.value })}
                placeholder="30×20×15"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Color
              </label>
              <input
                type="text"
                value={inventoryData.color}
                onChange={(e) => setInventoryData({ ...inventoryData, color: e.target.value })}
                placeholder="Product color"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>
          </div>
        </div>

        {/* Status & Tracking */}
        <div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            Status & Tracking
          </h5>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={inventoryData.isActive}
                onChange={(e) => setInventoryData({ ...inventoryData, isActive: e.target.checked })}
                className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
              />
              <label className="text-sm text-[var(--text-secondary)]">
                Active Item
              </label>
            </div>

            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={inventoryData.trackByLot}
                onChange={(e) => setInventoryData({ ...inventoryData, trackByLot: e.target.checked })}
                className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
              />
              <label className="text-sm text-[var(--text-secondary)]">
                Track by Lot/Batch
              </label>
            </div>

            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={inventoryData.trackByExpiry}
                onChange={(e) => setInventoryData({ ...inventoryData, trackByExpiry: e.target.checked })}
                className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
              />
              <label className="text-sm text-[var(--text-secondary)]">
                Track by Expiry Date
              </label>
            </div>

            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={inventoryData.allowNegativeStock}
                onChange={(e) => setInventoryData({ ...inventoryData, allowNegativeStock: e.target.checked })}
                className="rounded border-[var(--border-secondary)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
              />
              <label className="text-sm text-[var(--text-secondary)]">
                Allow Negative Stock
              </label>
            </div>
          </div>
        </div>

        {/* Additional Information */}
        <div className="space-y-4 border-t border-[var(--border-primary)] pt-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            Additional Information
          </h5>
          <div className="grid grid-cols-1 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Notes
              </label>
              <textarea
                value={inventoryData.notes}
                onChange={(e) => setInventoryData({ ...inventoryData, notes: e.target.value })}
                placeholder="Additional notes about this item"
                rows={3}
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Tags
                <Tooltip content="Comma-separated tags for easier search and filtering">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="text"
                value={inventoryData.tags}
                onChange={(e) => setInventoryData({ ...inventoryData, tags: e.target.value })}
                placeholder="organic, premium, seasonal"
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Custom Fields (JSON)
                <Tooltip content="Additional custom data in JSON format">
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <textarea
                value={inventoryData.customFields}
                onChange={(e) => setInventoryData({ ...inventoryData, customFields: e.target.value })}
                placeholder='{"custom_field": "value"}'
                rows={2}
                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)] font-mono text-xs"
              />
            </div>
          </div>
        </div>
      </AdvancedOptionsSection>
    </div>
  );
};

export const InventoryWizardSteps = (
  data: Record<string, any>,
  setData: (data: Record<string, any>) => void
): WizardStep[] => [
  {
    id: 'inventory-details',
    title: 'Inventory Details',
    component: (props) => <InventoryDetailsStep {...props} data={data} onDataChange={setData} />,
    validate: () => {
      return !!(data.name && data.unitOfMeasure && data.productType);
    },
  },
];