bakery-ia/frontend/src/components/domain/unified-wizard/wizards/CustomerOrderWizard.tsx

import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import { AdvancedOptionsSection } from '../../../ui/AdvancedOptionsSection';
import Tooltip from '../../../ui/Tooltip/Tooltip';
import {
  Users,
  Plus,
  Package,
  Truck,
  CreditCard,
  Search,
  Calendar,
  MapPin,
  Info,
  Loader2,
  CheckCircle2,
} from 'lucide-react';
import { useTenant } from '../../../../stores/tenant.store';
import OrdersService from '../../../../api/services/orders';
import { inventoryService } from '../../../../api/services/inventory';
import { ProductType } from '../../../../api/types/inventory';

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

// Step 1: Customer Selection
const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
  const { t } = useTranslation('wizards');
  const { currentTenant } = useTenant();
  const [searchQuery, setSearchQuery] = useState('');
  const [showNewCustomerForm, setShowNewCustomerForm] = useState(false);
  const [selectedCustomer, setSelectedCustomer] = useState(data.customer || null);
  const [customers, setCustomers] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [newCustomer, setNewCustomer] = useState({
    name: data.newCustomerName || '',
    type: data.newCustomerType || 'retail',
    phone: data.newCustomerPhone || '',
    email: data.newCustomerEmail || '',
  });

  useEffect(() => {
    fetchCustomers();
  }, []);

  // Update parent whenever customer selection changes
  const handleCustomerChange = (newCustomer: any, newShowForm: boolean) => {
    setSelectedCustomer(newCustomer);
    setShowNewCustomerForm(newShowForm);
    onDataChange({
      ...data,
      customer: newCustomer,
      showNewCustomerForm: newShowForm,
    });
  };

  // Update new customer data
  const handleNewCustomerChange = (updates: any) => {
    const updated = { ...newCustomer, ...updates };
    setNewCustomer(updated);
    onDataChange({
      ...data,
      showNewCustomerForm,
      newCustomerName: updated.name,
      newCustomerType: updated.type,
      newCustomerPhone: updated.phone,
      newCustomerEmail: updated.email,
    });
  };

  const fetchCustomers = async () => {
    if (!currentTenant?.id) return;

    setLoading(true);
    setError(null);

    try {
      const result = await OrdersService.getCustomers({
        tenant_id: currentTenant.id,
        active_only: true,
      });
      setCustomers(result);
    } catch (err: any) {
      console.error('Error loading customers:', err);
      setError(t('customerOrder.messages.errorLoadingCustomers'));
    } finally {
      setLoading(false);
    }
  };

  const filteredCustomers = customers.filter((customer) =>
    customer.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleSelectCustomer = (customer: any) => {
    handleCustomerChange(customer, false);
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <Users className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          {t('customerOrder.customerSelection.title')}
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          {t('customerOrder.customerSelection.subtitle')}
        </p>
      </div>

      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
          {error}
        </div>
      )}

      {loading ? (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
          <span className="ml-3 text-[var(--text-secondary)]">{t('customerOrder.messages.loadingCustomers')}</span>
        </div>
      ) : !showNewCustomerForm ? (
        <>
          {/* Search Bar */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-tertiary)]" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder={t('customerOrder.customerSelection.searchPlaceholder')}
              className="w-full pl-10 pr-4 py-3 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>

          {/* Customer List */}
          <div className="space-y-3 max-h-96 overflow-y-auto pr-2">
            {filteredCustomers.length === 0 ? (
              <div className="text-center py-8 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
                <Users className="w-12 h-12 mx-auto mb-3 text-[var(--text-tertiary)]" />
                <p className="text-[var(--text-secondary)] mb-1">{t('customerOrder.messages.noCustomersFound')}</p>
                <p className="text-sm text-[var(--text-tertiary)]">{t('customerOrder.messages.tryDifferentSearch')}</p>
              </div>
            ) : (
              filteredCustomers.map((customer) => (
                <button
                  key={customer.id}
                  onClick={() => handleSelectCustomer(customer)}
                  className={`w-full p-4 rounded-xl border-2 transition-all text-left group hover:shadow-md ${
                    selectedCustomer?.id === customer.id
                      ? 'border-[var(--color-primary)] bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-primary)]/5 shadow-sm'
                      : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50 hover:bg-[var(--bg-secondary)]/30'
                  }`}
                >
                  <div className="flex items-start gap-3">
                    <div className={`w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 transition-colors ${
                      selectedCustomer?.id === customer.id
                        ? 'bg-[var(--color-primary)] text-white'
                        : 'bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] group-hover:bg-[var(--color-primary)]/20 group-hover:text-[var(--color-primary)]'
                    }`}>
                      <Users className="w-6 h-6" />
                    </div>

                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <h4 className={`font-semibold truncate transition-colors ${
                          selectedCustomer?.id === customer.id
                            ? 'text-[var(--color-primary)]'
                            : 'text-[var(--text-primary)]'
                        }`}>
                          {customer.name}
                        </h4>
                        {selectedCustomer?.id === customer.id && (
                          <CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0" />
                        )}
                      </div>

                      <div className="flex flex-wrap items-center gap-2 text-sm text-[var(--text-secondary)]">
                        <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
                          customer.customer_type === 'wholesale'
                            ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
                            : customer.customer_type === 'restaurant'
                            ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300'
                            : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
                        }`}>
                          {t(`customerOrder.customerTypes.${customer.customer_type}`)}
                        </span>
                        {customer.phone && <span>📱 {customer.phone}</span>}
                      </div>
                    </div>
                  </div>
                </button>
              ))
            )}
          </div>

          {/* Create New Customer Button */}
          <button
            onClick={() => handleCustomerChange(null, true)}
            className="w-full p-4 border-2 border-dashed border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] transition-colors text-[var(--text-secondary)] hover:text-[var(--color-primary)] flex items-center justify-center gap-2"
          >
            <Plus className="w-5 h-5" />
            <span className="font-medium">{t('customerOrder.customerSelection.createNew')}</span>
          </button>
        </>
      ) : (
        <>
          {/* New Customer Form */}
          <div className="p-4 bg-[var(--bg-secondary)]/30 rounded-lg border border-[var(--border-secondary)]">
            <h4 className="font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2">
              <Plus className="w-5 h-5" />
              {t('customerOrder.messages.newCustomerHeader')}
            </h4>

            <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">
                  {t('customerOrder.customerSelection.customerName')} *
                </label>
                <input
                  type="text"
                  value={newCustomer.name}
                  onChange={(e) => handleNewCustomerChange({ name: e.target.value })}
                  placeholder={t('customerOrder.customerSelection.customerNamePlaceholder')}
                  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">
                  {t('customerOrder.customerSelection.customerType')} *
                </label>
                <select
                  value={newCustomer.type}
                  onChange={(e) => handleNewCustomerChange({ type: 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="retail">{t('customerOrder.customerTypes.retail')}</option>
                  <option value="wholesale">{t('customerOrder.customerTypes.wholesale')}</option>
                  <option value="event">{t('customerOrder.customerTypes.event')}</option>
                  <option value="restaurant">{t('customerOrder.customerTypes.restaurant')}</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                  {t('customerOrder.customerSelection.phone')} *
                </label>
                <input
                  type="tel"
                  value={newCustomer.phone}
                  onChange={(e) => handleNewCustomerChange({ phone: e.target.value })}
                  placeholder={t('customerOrder.customerSelection.phonePlaceholder')}
                  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">
                  {t('customerOrder.customerSelection.email')} ({t('common.optional')})
                </label>
                <input
                  type="email"
                  value={newCustomer.email}
                  onChange={(e) => handleNewCustomerChange({ email: e.target.value })}
                  placeholder={t('customerOrder.customerSelection.emailPlaceholder')}
                  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>

            <button
              onClick={() => handleCustomerChange(selectedCustomer, false)}
              className="mt-4 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
            >
              ← {t('customerOrder.customerSelection.backToList')}
            </button>
          </div>
        </>
      )}
    </div>
  );
};

// Step 2: Order Items
const OrderItemsStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
  const { t } = useTranslation('wizards');
  const { currentTenant } = useTenant();
  const [orderItems, setOrderItems] = useState(data.orderItems || []);
  const [products, setProducts] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchProducts();
  }, []);

  // Update parent whenever order items change
  const updateOrderItems = (newItems: any[]) => {
    setOrderItems(newItems);
    const totalAmount = newItems.reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0);
    onDataChange({ ...data, orderItems: newItems, totalAmount });
  };

  const fetchProducts = async () => {
    if (!currentTenant?.id) return;

    setLoading(true);
    setError(null);

    try {
      const allIngredients = await inventoryService.getIngredients(currentTenant.id);
      const finishedProducts = allIngredients.filter(
        (ingredient) => ingredient.product_type === ProductType.FINISHED_PRODUCT
      );
      setProducts(finishedProducts);
    } catch (err: any) {
      console.error('Error loading products:', err);
      setError(t('customerOrder.messages.errorLoadingProducts'));
    } finally {
      setLoading(false);
    }
  };

  const handleAddItem = () => {
    updateOrderItems([
      ...orderItems,
      {
        id: Date.now(),
        productId: '',
        productName: '',
        quantity: 1,
        unitPrice: 0,
        customRequirements: '',
        subtotal: 0,
        unitOfMeasure: 'units',
      },
    ]);
  };

  const handleUpdateItem = (index: number, field: string, value: any) => {
    const updated = orderItems.map((item: any, i: number) => {
      if (i === index) {
        const newItem = { ...item, [field]: value };

        if (field === 'productId') {
          const product = products.find((p) => p.id === value);
          if (product) {
            newItem.productName = product.name;
            newItem.unitPrice = product.average_cost || product.last_purchase_price || 0;
            newItem.unitOfMeasure = product.unit_of_measure;
          }
        }

        if (field === 'quantity' || field === 'unitPrice' || field === 'productId') {
          newItem.subtotal = (newItem.quantity || 0) * (newItem.unitPrice || 0);
        }
        return newItem;
      }
      return item;
    });
    updateOrderItems(updated);
  };

  const handleRemoveItem = (index: number) => {
    updateOrderItems(orderItems.filter((_: any, i: number) => i !== index));
  };

  const calculateTotal = () => {
    return orderItems.reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0);
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <Package className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          {t('customerOrder.orderItems.title')}
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          {t('customerOrder.orderItems.customer')}: <span className="font-semibold">{data.customer?.name || t('customerOrder.messages.newCustomer')}</span>
        </p>
      </div>

      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
          {error}
        </div>
      )}

      {loading ? (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
          <span className="ml-3 text-[var(--text-secondary)]">{t('customerOrder.messages.loadingProducts')}</span>
        </div>
      ) : (
        <>
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <label className="block text-sm font-medium text-[var(--text-secondary)]">
                {t('customerOrder.orderItems.orderProducts')}
              </label>
              <button
                onClick={handleAddItem}
                className="px-3 py-1.5 text-sm bg-[var(--color-primary)] text-white rounded-md hover:bg-[var(--color-primary)]/90 transition-colors flex items-center gap-1"
              >
                <Plus className="w-4 h-4" />
                {t('customerOrder.messages.addProduct')}
              </button>
            </div>

            {orderItems.length === 0 ? (
              <div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg text-[var(--text-tertiary)]">
                <Package className="w-12 h-12 mx-auto mb-3 opacity-50" />
                <p className="mb-2">{t('customerOrder.messages.noProductsInOrder')}</p>
                <p className="text-sm">{t('customerOrder.messages.clickAddProduct')}</p>
              </div>
            ) : (
              <div className="space-y-3">
                {orderItems.map((item: any, index: number) => (
                  <div
                    key={item.id}
                    className="p-4 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/30 space-y-3"
                  >
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-semibold text-[var(--text-primary)]">
                        {t('customerOrder.orderItems.productNumber', { number: index + 1 })}
                      </span>
                      <button
                        onClick={() => handleRemoveItem(index)}
                        className="p-1 text-red-500 hover:text-red-700 transition-colors"
                      >
                        ✕
                      </button>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                      <div className="md:col-span-2">
                        <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                          {t('customerOrder.orderItems.product')} *
                        </label>
                        <select
                          value={item.productId}
                          onChange={(e) => handleUpdateItem(index, 'productId', e.target.value)}
                          className="w-full px-3 py-2 text-sm 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="">{t('customerOrder.orderItems.selectProduct')}</option>
                          {products.map((product) => (
                            <option key={product.id} value={product.id}>
                              {product.name} - €{(product.average_cost || product.last_purchase_price || 0).toFixed(2)} / {product.unit_of_measure}
                            </option>
                          ))}
                        </select>
                      </div>

                      <div>
                        <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                          {t('customerOrder.orderItems.quantity')} *
                        </label>
                        <input
                          type="number"
                          value={item.quantity}
                          onChange={(e) => handleUpdateItem(index, 'quantity', parseFloat(e.target.value) || 0)}
                          className="w-full px-3 py-2 text-sm 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)]"
                          min="0"
                          step="1"
                        />
                      </div>

                      <div>
                        <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                          {t('customerOrder.orderItems.unitPrice')}
                        </label>
                        <input
                          type="number"
                          value={item.unitPrice}
                          onChange={(e) => handleUpdateItem(index, 'unitPrice', parseFloat(e.target.value) || 0)}
                          className="w-full px-3 py-2 text-sm 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)]"
                          min="0"
                          step="0.01"
                        />
                      </div>

                      <div className="md:col-span-2">
                        <label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                          {t('customerOrder.orderItems.specialRequirements')} ({t('common.optional')})
                        </label>
                        <input
                          type="text"
                          value={item.customRequirements}
                          onChange={(e) => handleUpdateItem(index, 'customRequirements', e.target.value)}
                          placeholder={t('customerOrder.orderItems.specialRequirementsPlaceholder')}
                          className="w-full px-3 py-2 text-sm 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 className="pt-2 border-t border-[var(--border-primary)] text-sm">
                      <span className="font-semibold text-[var(--text-primary)]">
                        {t('customerOrder.orderItems.subtotal')}: €{item.subtotal.toFixed(2)}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {orderItems.length > 0 && (
              <div className="p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 rounded-lg border-2 border-[var(--color-primary)]/20">
                <div className="flex justify-between items-center">
                  <span className="text-lg font-semibold text-[var(--text-primary)]">{t('customerOrder.messages.orderTotal')}:</span>
                  <span className="text-2xl font-bold text-[var(--color-primary)]">
                    €{calculateTotal().toFixed(2)}
                  </span>
                </div>
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
};

// Step 3: Delivery & Payment with ALL fields
const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange }) => {
  const { t } = useTranslation('wizards');
  const [orderData, setOrderData] = useState({
    // Required fields
    requestedDeliveryDate: data.requestedDeliveryDate || '',
    orderNumber: data.orderNumber || '',

    // Basic order info
    orderType: data.orderType || 'standard',
    priority: data.priority || 'normal',
    status: data.status || 'pending',

    // Delivery fields
    deliveryMethod: data.deliveryMethod || 'pickup',
    deliveryAddress: data.deliveryAddress || '',
    deliveryInstructions: data.deliveryInstructions || '',
    deliveryContactName: data.deliveryContactName || '',
    deliveryContactPhone: data.deliveryContactPhone || '',
    deliveryTimeWindow: data.deliveryTimeWindow || '',
    deliveryFee: data.deliveryFee || '',

    // Payment fields
    paymentMethod: data.paymentMethod || 'invoice',
    paymentTerms: data.paymentTerms || 'net_30',
    paymentStatus: data.paymentStatus || 'pending',
    paymentDueDate: data.paymentDueDate || '',

    // Pricing fields
    subtotalAmount: data.subtotalAmount || '',
    taxAmount: data.taxAmount || '',
    discountPercentage: data.discountPercentage || '',
    discountAmount: data.discountAmount || '',
    shippingCost: data.shippingCost || '',

    // Production & scheduling
    productionStartDate: data.productionStartDate || '',
    productionDueDate: data.productionDueDate || '',
    productionBatchNumber: data.productionBatchNumber || '',
    productionNotes: data.productionNotes || '',

    // Fulfillment
    actualDeliveryDate: data.actualDeliveryDate || '',
    pickupLocation: data.pickupLocation || '',
    shippingTrackingNumber: data.shippingTrackingNumber || '',
    shippingCarrier: data.shippingCarrier || '',

    // Source & channel
    orderSource: data.orderSource || 'manual',
    salesChannel: data.salesChannel || 'direct',
    salesRepId: data.salesRepId || '',

    // Communication
    customerPurchaseOrder: data.customerPurchaseOrder || '',
    internalNotes: data.internalNotes || '',
    customerNotes: data.customerNotes || '',
    specialInstructions: data.specialInstructions || '',

    // Notifications
    notifyCustomerOnStatusChange: data.notifyCustomerOnStatusChange ?? true,
    notifyCustomerOnDelivery: data.notifyCustomerOnDelivery ?? true,
    customerNotificationEmail: data.customerNotificationEmail || '',
    customerNotificationPhone: data.customerNotificationPhone || '',

    // Quality & requirements
    qualityCheckRequired: data.qualityCheckRequired ?? false,
    qualityCheckStatus: data.qualityCheckStatus || '',
    packagingInstructions: data.packagingInstructions || '',
    labelingRequirements: data.labelingRequirements || '',

    // Advanced options
    isRecurring: data.isRecurring ?? false,
    recurringSchedule: data.recurringSchedule || '',
    parentOrderId: data.parentOrderId || '',
    relatedOrderIds: data.relatedOrderIds || '',
    tags: data.tags || '',
    metadata: data.metadata || '',
  });

  // Update parent whenever order data changes
  const handleOrderDataChange = (newOrderData: any) => {
    setOrderData(newOrderData);
    onDataChange({ ...data, ...newOrderData });
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <Truck className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          {t('customerOrder.deliveryPayment.title')}
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          {t('customerOrder.deliveryPayment.subtitle')}
        </p>
      </div>

      {/* Required Fields */}
      <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">
            <Calendar className="w-4 h-4 inline mr-1.5" />
            {t('customerOrder.deliveryPayment.requestedDeliveryDate')} *
          </label>
          <input
            type="date"
            value={orderData.requestedDeliveryDate}
            onChange={(e) => handleOrderDataChange({ ...orderData, requestedDeliveryDate: e.target.value })}
            min={new Date().toISOString().split('T')[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">
            {t('customerOrder.deliveryPayment.orderNumberLabel')}
            <Tooltip content={t('customerOrder.deliveryPayment.orderNumberTooltip')}>
              <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
            </Tooltip>
          </label>
          <input
            type="text"
            value={orderData.orderNumber || t('customerOrder.deliveryPayment.autoGeneratedLabel')}
            readOnly
            disabled
            placeholder={t('customerOrder.deliveryPayment.autoGeneratedPlaceholder')}
            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)] text-[var(--text-tertiary)] cursor-not-allowed"
          />
        </div>
      </div>

      {/* Basic Order Info */}
      <div className="border-t border-[var(--border-primary)] pt-4">
        <h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3">{t('customerOrder.sections.basicInfo')}</h4>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('customerOrder.deliveryPayment.orderType')}
            </label>
            <select
              value={orderData.orderType}
              onChange={(e) => handleOrderDataChange({ ...orderData, orderType: 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="standard">{t('customerOrder.orderTypes.standard')}</option>
              <option value="custom">{t('customerOrder.orderTypes.custom')}</option>
              <option value="bulk">{t('customerOrder.orderTypes.bulk')}</option>
              <option value="urgent">{t('customerOrder.orderTypes.urgent')}</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('customerOrder.deliveryPayment.priority')}
            </label>
            <select
              value={orderData.priority}
              onChange={(e) => handleOrderDataChange({ ...orderData, priority: 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="low">{t('customerOrder.priorities.low')}</option>
              <option value="normal">{t('customerOrder.priorities.normal')}</option>
              <option value="high">{t('customerOrder.priorities.high')}</option>
              <option value="urgent">{t('customerOrder.priorities.urgent')}</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('customerOrder.deliveryPayment.status')}
            </label>
            <select
              value={orderData.status}
              onChange={(e) => handleOrderDataChange({ ...orderData, status: 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="pending">{t('customerOrder.statuses.pending')}</option>
              <option value="confirmed">{t('customerOrder.statuses.confirmed')}</option>
              <option value="in_production">{t('customerOrder.statuses.in_production')}</option>
              <option value="ready">{t('customerOrder.statuses.ready')}</option>
              <option value="delivered">{t('customerOrder.statuses.delivered')}</option>
            </select>
          </div>
        </div>
      </div>

      {/* Delivery Details */}
      <div className="border-t border-[var(--border-primary)] pt-4">
        <h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3">{t('customerOrder.sections.deliveryInfo')}</h4>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              <Truck className="w-4 h-4 inline mr-1.5" />
              {t('customerOrder.deliveryPayment.deliveryMethod')}
            </label>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              <button
                type="button"
                onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'pickup' })}
                className={`p-3 rounded-lg border-2 transition-all ${
                  orderData.deliveryMethod === 'pickup'
                    ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
                    : 'border-[var(--border-secondary)]'
                }`}
              >
                <p className="font-semibold text-sm">{t('customerOrder.deliveryMethods.pickup')}</p>
                <p className="text-xs text-[var(--text-tertiary)]">{t('customerOrder.deliveryMethods.pickupDesc')}</p>
              </button>
              <button
                type="button"
                onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'delivery' })}
                className={`p-3 rounded-lg border-2 transition-all ${
                  orderData.deliveryMethod === 'delivery'
                    ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
                    : 'border-[var(--border-secondary)]'
                }`}
              >
                <p className="font-semibold text-sm">{t('customerOrder.deliveryMethods.delivery')}</p>
                <p className="text-xs text-[var(--text-tertiary)]">{t('customerOrder.deliveryMethods.deliveryDesc')}</p>
              </button>
              <button
                type="button"
                onClick={() => handleOrderDataChange({ ...orderData, deliveryMethod: 'shipping' })}
                className={`p-3 rounded-lg border-2 transition-all ${
                  orderData.deliveryMethod === 'shipping'
                    ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
                    : 'border-[var(--border-secondary)]'
                }`}
              >
                <p className="font-semibold text-sm">{t('customerOrder.deliveryMethods.shipping')}</p>
                <p className="text-xs text-[var(--text-tertiary)]">{t('customerOrder.deliveryMethods.shippingDesc')}</p>
              </button>
            </div>
          </div>

          {(orderData.deliveryMethod === 'delivery' || orderData.deliveryMethod === 'shipping') && (
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                <MapPin className="w-4 h-4 inline mr-1.5" />
                {t('customerOrder.messages.deliveryAddress')} *
              </label>
              <textarea
                value={orderData.deliveryAddress}
                onChange={(e) => handleOrderDataChange({ ...orderData, deliveryAddress: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.deliveryAddressPlaceholder')}
                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="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customerOrder.deliveryPayment.deliveryContactName')}
              </label>
              <input
                type="text"
                value={orderData.deliveryContactName}
                onChange={(e) => handleOrderDataChange({ ...orderData, deliveryContactName: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.deliveryContactNamePlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.deliveryContactPhone')}
              </label>
              <input
                type="tel"
                value={orderData.deliveryContactPhone}
                onChange={(e) => handleOrderDataChange({ ...orderData, deliveryContactPhone: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.phoneNumberPlaceholder')}
                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>
      </div>

      {/* Payment Details */}
      <div className="border-t border-[var(--border-primary)] pt-4">
        <h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3">{t('customerOrder.sections.paymentInfo')}</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">
              <CreditCard className="w-4 h-4 inline mr-1.5" />
              {t('customerOrder.messages.paymentMethod')}
            </label>
            <select
              value={orderData.paymentMethod}
              onChange={(e) => handleOrderDataChange({ ...orderData, paymentMethod: 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="cash">{t('customerOrder.paymentMethods.cash')}</option>
              <option value="card">{t('customerOrder.paymentMethods.card')}</option>
              <option value="bank_transfer">{t('customerOrder.paymentMethods.bank_transfer')}</option>
              <option value="invoice">{t('customerOrder.paymentMethods.invoice')}</option>
              <option value="account">{t('customerOrder.paymentMethods.account')}</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('customerOrder.deliveryPayment.paymentTerms')}
            </label>
            <select
              value={orderData.paymentTerms}
              onChange={(e) => handleOrderDataChange({ ...orderData, paymentTerms: 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="immediate">{t('customerOrder.paymentTerms.immediate')}</option>
              <option value="net_30">{t('customerOrder.paymentTerms.net_30')}</option>
              <option value="net_60">{t('customerOrder.paymentTerms.net_60')}</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('customerOrder.deliveryPayment.paymentStatus')}
            </label>
            <select
              value={orderData.paymentStatus}
              onChange={(e) => handleOrderDataChange({ ...orderData, paymentStatus: 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="pending">{t('customerOrder.paymentStatuses.pending')}</option>
              <option value="partial">{t('customerOrder.paymentStatuses.partial')}</option>
              <option value="paid">{t('customerOrder.paymentStatuses.paid')}</option>
              <option value="overdue">{t('customerOrder.paymentStatuses.overdue')}</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
              {t('customerOrder.deliveryPayment.paymentDueDate')}
            </label>
            <input
              type="date"
              value={orderData.paymentDueDate}
              onChange={(e) => handleOrderDataChange({ ...orderData, paymentDueDate: 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)]"
            />
          </div>
        </div>
      </div>

      {/* Order Summary */}
      <div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg border border-[var(--border-secondary)]">
        <h4 className="font-semibold text-[var(--text-primary)] mb-3">{t('customerOrder.sections.orderSummary')}</h4>
        <div className="space-y-2 text-sm">
          <div className="flex justify-between">
            <span className="text-[var(--text-secondary)]">{t('customerOrder.orderItems.customer')}:</span>
            <span className="font-medium">{data.customer?.name || t('customerOrder.messages.newCustomer')}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-[var(--text-secondary)]">{t('customerOrder.deliveryPayment.products')}:</span>
            <span className="font-medium">{data.orderItems?.length || 0} {t('customerOrder.messages.items')}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-[var(--text-secondary)]">{t('customerOrder.messages.total')}:</span>
            <span className="font-semibold text-lg text-[var(--color-primary)]">
              €{data.totalAmount?.toFixed(2) || '0.00'}
            </span>
          </div>
        </div>
      </div>

      {/* Advanced Options */}
      <AdvancedOptionsSection
        title={t('customerOrder.sections.advancedOptions')}
        description={t('customerOrder.sections.advancedOptionsDescription')}
      >
        {/* Pricing Details */}
        <div className="space-y-4">
          <h5 className="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider">
            {t('customerOrder.sections.pricingDetails')}
          </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">
                {t('customerOrder.deliveryPayment.discount')}
              </label>
              <input
                type="number"
                value={orderData.discountPercentage}
                onChange={(e) => handleOrderDataChange({ ...orderData, discountPercentage: e.target.value })}
                placeholder="0"
                step="0.01"
                min="0"
                max="100"
                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">
                {t('customerOrder.deliveryPayment.deliveryFee')}
              </label>
              <input
                type="number"
                value={orderData.deliveryFee}
                onChange={(e) => handleOrderDataChange({ ...orderData, deliveryFee: 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>

        {/* Production & Scheduling */}
        <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">
            {t('customerOrder.sections.productionScheduling')}
          </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">
                {t('customerOrder.deliveryPayment.productionStartDate')}
              </label>
              <input
                type="date"
                value={orderData.productionStartDate}
                onChange={(e) => handleOrderDataChange({ ...orderData, productionStartDate: 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)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customerOrder.deliveryPayment.productionDueDate')}
              </label>
              <input
                type="date"
                value={orderData.productionDueDate}
                onChange={(e) => handleOrderDataChange({ ...orderData, productionDueDate: 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)]"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customerOrder.deliveryPayment.productionBatchNumber')}
              </label>
              <input
                type="text"
                value={orderData.productionBatchNumber}
                onChange={(e) => handleOrderDataChange({ ...orderData, productionBatchNumber: e.target.value })}
                placeholder={t('customerOrder.messages.productionBatchNumberPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.deliveryTimeWindow')}
              </label>
              <input
                type="text"
                value={orderData.deliveryTimeWindow}
                onChange={(e) => handleOrderDataChange({ ...orderData, deliveryTimeWindow: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.deliveryTimeWindowPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.productionNotes')}
              </label>
              <textarea
                value={orderData.productionNotes}
                onChange={(e) => handleOrderDataChange({ ...orderData, productionNotes: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.productionNotesPlaceholder')}
                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>

        {/* Fulfillment & 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">
            {t('customerOrder.sections.fulfillmentTracking')}
          </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">
                {t('customerOrder.deliveryPayment.shippingTrackingNumber')}
              </label>
              <input
                type="text"
                value={orderData.shippingTrackingNumber}
                onChange={(e) => handleOrderDataChange({ ...orderData, shippingTrackingNumber: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.shippingTrackingNumberPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.shippingCarrier')}
              </label>
              <input
                type="text"
                value={orderData.shippingCarrier}
                onChange={(e) => handleOrderDataChange({ ...orderData, shippingCarrier: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.shippingCarrierPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.pickupLocation')}
              </label>
              <input
                type="text"
                value={orderData.pickupLocation}
                onChange={(e) => handleOrderDataChange({ ...orderData, pickupLocation: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.pickupLocationPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.actualDeliveryDate')}
              </label>
              <input
                type="date"
                value={orderData.actualDeliveryDate}
                onChange={(e) => handleOrderDataChange({ ...orderData, actualDeliveryDate: 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)]"
              />
            </div>
          </div>
        </div>

        {/* Source & Channel */}
        <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">
            {t('customerOrder.sections.sourceChannel')}
          </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">
                {t('customerOrder.deliveryPayment.orderSource')}
              </label>
              <select
                value={orderData.orderSource}
                onChange={(e) => handleOrderDataChange({ ...orderData, orderSource: 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="manual">{t('customerOrder.orderSources.manual')}</option>
                <option value="phone">{t('customerOrder.orderSources.phone')}</option>
                <option value="email">{t('customerOrder.orderSources.email')}</option>
                <option value="website">{t('customerOrder.orderSources.website')}</option>
                <option value="app">{t('customerOrder.orderSources.app')}</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customerOrder.deliveryPayment.salesChannel')}
              </label>
              <select
                value={orderData.salesChannel}
                onChange={(e) => handleOrderDataChange({ ...orderData, salesChannel: 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="direct">{t('customerOrder.salesChannels.direct')}</option>
                <option value="wholesale">{t('customerOrder.salesChannels.wholesale')}</option>
                <option value="retail">{t('customerOrder.salesChannels.retail')}</option>
                <option value="online">{t('customerOrder.salesChannels.online')}</option>
              </select>
            </div>

            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customerOrder.deliveryPayment.salesRepId')}
              </label>
              <input
                type="text"
                value={orderData.salesRepId}
                onChange={(e) => handleOrderDataChange({ ...orderData, salesRepId: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.salesRepIdPlaceholder')}
                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>

        {/* Communication & Notes */}
        <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">
            {t('customerOrder.sections.communicationNotes')}
          </h5>
          <div className="grid grid-cols-1 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customerOrder.deliveryPayment.customerPurchaseOrder')}
              </label>
              <input
                type="text"
                value={orderData.customerPurchaseOrder}
                onChange={(e) => handleOrderDataChange({ ...orderData, customerPurchaseOrder: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.customerPurchaseOrderPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.deliveryInstructions')}
              </label>
              <textarea
                value={orderData.deliveryInstructions}
                onChange={(e) => handleOrderDataChange({ ...orderData, deliveryInstructions: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.deliveryInstructionsPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.specialInstructions')}
              </label>
              <textarea
                value={orderData.specialInstructions}
                onChange={(e) => handleOrderDataChange({ ...orderData, specialInstructions: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.specialInstructionsPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.internalNotes')}
              </label>
              <textarea
                value={orderData.internalNotes}
                onChange={(e) => handleOrderDataChange({ ...orderData, internalNotes: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.internalNotesPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.customerNotes')}
              </label>
              <textarea
                value={orderData.customerNotes}
                onChange={(e) => handleOrderDataChange({ ...orderData, customerNotes: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.customerNotesPlaceholder')}
                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>

        {/* Notifications */}
        <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">
            {t('customerOrder.sections.notifications')}
          </h5>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={orderData.notifyCustomerOnStatusChange}
                onChange={(e) => handleOrderDataChange({ ...orderData, notifyCustomerOnStatusChange: 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)]">
                {t('customerOrder.deliveryPayment.notifyOnStatusChange')}
              </label>
            </div>

            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={orderData.notifyCustomerOnDelivery}
                onChange={(e) => handleOrderDataChange({ ...orderData, notifyCustomerOnDelivery: 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)]">
                {t('customerOrder.deliveryPayment.notifyOnDelivery')}
              </label>
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customerOrder.deliveryPayment.notificationEmail')}
              </label>
              <input
                type="email"
                value={orderData.customerNotificationEmail}
                onChange={(e) => handleOrderDataChange({ ...orderData, customerNotificationEmail: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.notificationEmailPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.notificationPhone')}
              </label>
              <input
                type="tel"
                value={orderData.customerNotificationPhone}
                onChange={(e) => handleOrderDataChange({ ...orderData, customerNotificationPhone: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.phoneNumberPlaceholder')}
                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 & Requirements */}
        <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">
            {t('customerOrder.sections.qualityRequirements')}
          </h5>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={orderData.qualityCheckRequired}
                onChange={(e) => handleOrderDataChange({ ...orderData, qualityCheckRequired: 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)]">
                {t('customerOrder.deliveryPayment.qualityCheckRequired')}
              </label>
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customerOrder.deliveryPayment.qualityCheckStatus')}
              </label>
              <select
                value={orderData.qualityCheckStatus}
                onChange={(e) => handleOrderDataChange({ ...orderData, qualityCheckStatus: 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="">{t('customerOrder.qualityCheckStatuses.not_started')}</option>
                <option value="pending">{t('customerOrder.qualityCheckStatuses.pending')}</option>
                <option value="passed">{t('customerOrder.qualityCheckStatuses.passed')}</option>
                <option value="failed">{t('customerOrder.qualityCheckStatuses.failed')}</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                {t('customerOrder.deliveryPayment.packagingInstructions')}
              </label>
              <input
                type="text"
                value={orderData.packagingInstructions}
                onChange={(e) => handleOrderDataChange({ ...orderData, packagingInstructions: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.packagingInstructionsPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.labelingRequirements')}
              </label>
              <input
                type="text"
                value={orderData.labelingRequirements}
                onChange={(e) => handleOrderDataChange({ ...orderData, labelingRequirements: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.labelingRequirementsPlaceholder')}
                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>

        {/* Additional Options */}
        <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">
            {t('customerOrder.sections.additionalOptions')}
          </h5>
          <div className="grid grid-cols-1 gap-4">
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={orderData.isRecurring}
                onChange={(e) => handleOrderDataChange({ ...orderData, isRecurring: 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)]">
                {t('customerOrder.deliveryPayment.recurringOrder')}
              </label>
            </div>

            {orderData.isRecurring && (
              <div>
                <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                  {t('customerOrder.deliveryPayment.recurringSchedule')}
                </label>
                <input
                  type="text"
                  value={orderData.recurringSchedule}
                  onChange={(e) => handleOrderDataChange({ ...orderData, recurringSchedule: e.target.value })}
                  placeholder={t('customerOrder.deliveryPayment.recurringSchedulePlaceholder')}
                  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">
                {t('customerOrder.deliveryPayment.tags')}
                <Tooltip content={t('customerOrder.deliveryPayment.tagsTooltip')}>
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <input
                type="text"
                value={orderData.tags}
                onChange={(e) => handleOrderDataChange({ ...orderData, tags: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.tagsPlaceholder')}
                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">
                {t('customerOrder.deliveryPayment.metadata')}
                <Tooltip content={t('customerOrder.deliveryPayment.metadataTooltip')}>
                  <Info className="inline w-4 h-4 ml-1 text-[var(--text-tertiary)]" />
                </Tooltip>
              </label>
              <textarea
                value={orderData.metadata}
                onChange={(e) => handleOrderDataChange({ ...orderData, metadata: e.target.value })}
                placeholder={t('customerOrder.deliveryPayment.metadataPlaceholder')}
                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 CustomerOrderWizardSteps = (
  data: Record<string, any>,
  setData: (data: Record<string, any>) => void
): WizardStep[] => [
  {
    id: 'customer-selection',
    title: 'customerOrder.customerSelection.title',
    component: (props) => <CustomerSelectionStep {...props} data={data} onDataChange={setData} />,
    validate: () => {
      return !!(data.customer || (data.showNewCustomerForm && data.newCustomerName && data.newCustomerPhone));
    },
  },
  {
    id: 'order-items',
    title: 'customerOrder.orderItems.title',
    component: (props) => <OrderItemsStep {...props} data={data} onDataChange={setData} />,
    validate: () => {
      return !!(data.orderItems && data.orderItems.length > 0);
    },
  },
  {
    id: 'delivery-payment',
    title: 'customerOrder.deliveryPayment.title',
    component: (props) => <DeliveryPaymentStep {...props} data={data} onDataChange={setData} />,
    validate: () => {
      return !!(
        data.requestedDeliveryDate &&
        (data.deliveryMethod === 'pickup' || data.deliveryAddress)
      );
    },
  },
];