bakery-ia/frontend/src/components/domain/orders/OrderFormModal.tsx

import React, { useState, useEffect } from 'react';
import { X, Plus, Minus, User, ShoppingCart, FileText, Calculator, Package } from 'lucide-react';
import {
  Button,
  Input,
  Select,
  Card,
  Badge
} from '../../ui';
import { EditViewModal } from '../../ui/EditViewModal';
import type { StatusModalSection } from '../../ui/EditViewModal';
import {
  OrderCreate,
  OrderItemCreate,
  CustomerResponse,
  OrderType,
  PriorityLevel,
  DeliveryMethod,
  PaymentMethod,
  PaymentTerms,
  OrderSource,
  SalesChannel,
  CustomerCreate,
  CustomerType,
  CustomerSegment
} from '../../../api/types/orders';
import { useCustomers, useCreateCustomer } from '../../../api/hooks/orders';
import { useIngredients } from '../../../api/hooks/inventory';
import { ProductType, ProductCategory } from '../../../api/types/inventory';
import { useCurrentTenant } from '../../../stores/tenant.store';
import { useAuthUser } from '../../../stores/auth.store';
import { useTranslation } from 'react-i18next';

interface OrderFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (orderData: OrderCreate) => Promise<void>;
}


export const OrderFormModal: React.FC<OrderFormModalProps> = ({
  isOpen,
  onClose,
  onSave
}) => {
  const currentTenant = useCurrentTenant();
  const user = useAuthUser();
  const tenantId = currentTenant?.id || user?.tenant_id || '';
  const { t } = useTranslation(['orders', 'common']);

  // Create enum options using direct i18n
  const orderTypeOptions = Object.values(OrderType).map(value => ({
    value,
    label: t(`orders:order_types.${value}`)
  }));

  const priorityLevelOptions = Object.values(PriorityLevel).map(value => ({
    value,
    label: t(`orders:priority_levels.${value}`)
  }));

  const deliveryMethodOptions = Object.values(DeliveryMethod).map(value => ({
    value,
    label: t(`orders:delivery_methods.${value}`)
  }));

  const customerTypeOptions = Object.values(CustomerType).map(value => ({
    value,
    label: t(`orders:customer_types.${value}`)
  }));

  // Form state
  const [selectedCustomer, setSelectedCustomer] = useState<CustomerResponse | null>(null);
  const [orderItems, setOrderItems] = useState<OrderItemCreate[]>([]);
  const [orderData, setOrderData] = useState<Partial<OrderCreate>>({
    order_type: OrderType.STANDARD,
    priority: PriorityLevel.NORMAL,
    delivery_method: DeliveryMethod.PICKUP,
    discount_percentage: 0,
    delivery_fee: 0,
    payment_terms: PaymentTerms.IMMEDIATE,
    order_source: OrderSource.MANUAL,
    sales_channel: SalesChannel.DIRECT
  });

  // Customer modals
  const [showCustomerForm, setShowCustomerForm] = useState(false);
  const [showCustomerSelector, setShowCustomerSelector] = useState(false);
  const [newCustomerData, setNewCustomerData] = useState<Partial<CustomerCreate>>({
    customer_type: CustomerType.INDIVIDUAL,
    country: 'España',
    is_active: true,
    preferred_delivery_method: DeliveryMethod.PICKUP,
    payment_terms: PaymentTerms.IMMEDIATE,
    discount_percentage: 0,
    customer_segment: CustomerSegment.REGULAR,
    priority_level: PriorityLevel.NORMAL
  });

  // Simple product selection
  const [selectedProductId, setSelectedProductId] = useState('');
  const [selectedQuantity, setSelectedQuantity] = useState(1);

  // API hooks
  const { data: customers = [] } = useCustomers({
    tenant_id: tenantId,
    active_only: true,
    limit: 100
  });

  // Fetch finished products from inventory
  const { data: finishedProducts = [], isLoading: productsLoading } = useIngredients(
    tenantId,
    {
      product_type: ProductType.FINISHED_PRODUCT,
      is_active: true
    }
  );

  const createCustomerMutation = useCreateCustomer();

  // Calculate totals
  const subtotal = orderItems.reduce((sum, item) => sum + (item.quantity * item.unit_price), 0);
  const discountAmount = subtotal * (orderData.discount_percentage || 0) / 100;
  const taxAmount = (subtotal - discountAmount) * 0.21; // 21% VAT
  const total = subtotal - discountAmount + taxAmount + (orderData.delivery_fee || 0);

  useEffect(() => {
    if (!isOpen) {
      // Reset form when modal closes
      setSelectedCustomer(null);
      setOrderItems([]);
      setSelectedProductId('');
      setSelectedQuantity(1);
      setOrderData({
        order_type: OrderType.STANDARD,
        priority: PriorityLevel.NORMAL,
        delivery_method: DeliveryMethod.PICKUP,
        discount_percentage: 0,
        delivery_fee: 0,
        payment_terms: PaymentTerms.IMMEDIATE,
        order_source: OrderSource.MANUAL,
        sales_channel: SalesChannel.DIRECT
      });
    }
  }, [isOpen]);

  const handleAddSelectedProduct = () => {
    if (!selectedProductId || selectedQuantity <= 0) return;

    const product = finishedProducts.find(p => p.id === selectedProductId);
    if (!product) return;

    const existingItem = orderItems.find(item => item.product_id === selectedProductId);

    if (existingItem) {
      setOrderItems(items => items.map(item =>
        item.product_id === selectedProductId
          ? { ...item, quantity: item.quantity + selectedQuantity }
          : item
      ));
    } else {
      const newItem: OrderItemCreate = {
        product_id: product.id,
        product_name: product.name,
        product_sku: product.sku || undefined,
        product_category: product.category || undefined,
        quantity: selectedQuantity,
        unit_of_measure: product.unit_of_measure || 'unidad',
        unit_price: product.average_cost || product.standard_cost || 0,
        line_discount: 0
      };
      setOrderItems(items => [...items, newItem]);
    }

    // Reset selection
    setSelectedProductId('');
    setSelectedQuantity(1);
  };

  const handleUpdateItemQuantity = (productId: string, quantity: number) => {
    if (quantity <= 0) {
      setOrderItems(items => items.filter(item => item.product_id !== productId));
    } else {
      setOrderItems(items => items.map(item =>
        item.product_id === productId
          ? { ...item, quantity }
          : item
      ));
    }
  };

  const handleCreateCustomer = async () => {
    if (!newCustomerData.name || !tenantId) return;

    try {
      const customerData: CustomerCreate = {
        ...newCustomerData,
        tenant_id: tenantId,
        customer_code: `CUST-${Date.now()}` // Generate simple code
      } as CustomerCreate;

      const newCustomer = await createCustomerMutation.mutateAsync(customerData);
      setSelectedCustomer(newCustomer);
      setShowCustomerForm(false);
      setNewCustomerData({
        customer_type: CustomerType.INDIVIDUAL,
        country: 'España',
        is_active: true,
        preferred_delivery_method: DeliveryMethod.PICKUP,
        payment_terms: PaymentTerms.IMMEDIATE,
        discount_percentage: 0,
        customer_segment: CustomerSegment.REGULAR,
        priority_level: PriorityLevel.NORMAL
      });
    } catch (error) {
      console.error('Error creating customer:', error);
    }
  };

  const handleSaveOrder = async () => {
    if (!selectedCustomer || orderItems.length === 0 || !tenantId) return;

    const finalOrderData: OrderCreate = {
      tenant_id: tenantId,
      customer_id: selectedCustomer.id,
      order_type: orderData.order_type || OrderType.STANDARD,
      priority: orderData.priority || PriorityLevel.NORMAL,
      requested_delivery_date: orderData.requested_delivery_date || new Date().toISOString(),
      delivery_method: orderData.delivery_method || DeliveryMethod.PICKUP,
      delivery_fee: orderData.delivery_fee || 0,
      discount_percentage: orderData.discount_percentage || 0,
      payment_terms: orderData.payment_terms || PaymentTerms.IMMEDIATE,
      order_source: orderData.order_source || OrderSource.MANUAL,
      sales_channel: orderData.sales_channel || SalesChannel.DIRECT,
      items: orderItems,
      special_instructions: orderData.special_instructions
    };

    await onSave(finalOrderData);
    onClose();
  };


  // Convert form data to StatusModal sections
  const modalSections: StatusModalSection[] = [
    {
      title: 'Cliente',
      icon: User,
      fields: [
        {
          label: 'Cliente Seleccionado',
          value: selectedCustomer ? selectedCustomer.id : '',
          type: 'select',
          editable: true,
          placeholder: 'Seleccionar cliente...',
          options: customers.map(customer => ({
            value: customer.id,
            label: `${customer.name} (${customer.customer_code})`
          })),
          span: 1
        },
        {
          label: 'Nuevo Cliente',
          value: (
            <Button
              variant="outline"
              size="sm"
              onClick={() => setShowCustomerForm(true)}
              className="w-full"
            >
              <Plus className="w-4 h-4 mr-2" />
              Agregar Cliente
            </Button>
          ),
          span: 1
        }
      ]
    },
    {
      title: 'Detalles del Pedido',
      icon: FileText,
      fields: [
        {
          label: 'Tipo de Pedido',
          value: orderData.order_type || OrderType.STANDARD,
          type: 'select',
          editable: true,
          options: orderTypeOptions
        },
        {
          label: 'Prioridad',
          value: orderData.priority || PriorityLevel.NORMAL,
          type: 'select',
          editable: true,
          options: priorityLevelOptions
        },
        {
          label: 'Método de Entrega',
          value: orderData.delivery_method || DeliveryMethod.PICKUP,
          type: 'select',
          editable: true,
          options: deliveryMethodOptions
        },
        {
          label: 'Fecha de Entrega',
          value: orderData.requested_delivery_date?.split('T')[0] || '',
          type: 'date',
          editable: true
        }
      ]
    },
    {
      title: 'Productos',
      icon: Package,
      fields: [
        {
          label: 'Agregar Producto',
          value: (
            <div className="flex gap-3 items-end">
              <div className="flex-1">
                <select
                  value={selectedProductId}
                  onChange={(e) => setSelectedProductId(e.target.value)}
                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent bg-[var(--bg-primary)]"
                >
                  <option value="">Seleccionar producto...</option>
                  {finishedProducts.map(product => (
                    <option key={product.id} value={product.id}>
                      {product.name} - €{(product.average_cost || product.standard_cost || 0).toFixed(2)}
                    </option>
                  ))}
                </select>
              </div>
              <div className="w-24">
                <Input
                  type="number"
                  min="1"
                  value={selectedQuantity}
                  onChange={(e) => setSelectedQuantity(Number(e.target.value))}
                  placeholder="Cant."
                />
              </div>
              <Button
                onClick={handleAddSelectedProduct}
                disabled={!selectedProductId || selectedQuantity <= 0}
                className="whitespace-nowrap"
              >
                <Plus className="w-4 h-4 mr-1" />
                Agregar
              </Button>
            </div>
          ),
          span: 2
        },
        ...(orderItems.length > 0 ? [{
          label: 'Productos en el Pedido',
          value: (
            <div className="space-y-2">
              {orderItems.map((item, index) => (
                <div key={`${item.product_id}-${index}`} className="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
                  <div className="flex-1">
                    <h4 className="font-medium text-[var(--text-primary)]">{item.product_name}</h4>
                    <p className="text-sm text-[var(--text-secondary)]">
                      €{item.unit_price.toFixed(2)} × {item.quantity} = €{(item.unit_price * item.quantity).toFixed(2)}
                    </p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleUpdateItemQuantity(item.product_id, item.quantity - 1)}
                      disabled={item.quantity <= 1}
                    >
                      <Minus className="w-4 h-4" />
                    </Button>
                    <span className="min-w-[2rem] text-center font-medium">{item.quantity}</span>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleUpdateItemQuantity(item.product_id, item.quantity + 1)}
                    >
                      <Plus className="w-4 h-4" />
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => handleUpdateItemQuantity(item.product_id, 0)}
                      className="text-red-600 hover:text-red-700 ml-2"
                    >
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          ),
          span: 2
        }] : [])
      ]
    },
    {
      title: 'Resumen Financiero',
      icon: Calculator,
      fields: [
        {
          label: 'Subtotal',
          value: subtotal,
          type: 'currency',
          highlight: true
        },
        {
          label: 'Descuento',
          value: -discountAmount,
          type: 'currency'
        },
        {
          label: 'IVA (21%)',
          value: taxAmount,
          type: 'currency'
        },
        {
          label: 'Gastos de Envío',
          value: orderData.delivery_fee || 0,
          type: 'currency',
          editable: true
        },
        {
          label: 'Total',
          value: total,
          type: 'currency',
          highlight: true,
          span: 2
        }
      ]
    }
  ];

  const handleFieldChange = (sectionIndex: number, fieldIndex: number, value: string | number) => {
    const section = modalSections[sectionIndex];
    const field = section.fields[fieldIndex];

    // Update order data based on field changes
    if (section.title === 'Cliente') {
      if (field.label === 'Cliente Seleccionado') {
        const customer = customers.find(c => c.id === value);
        setSelectedCustomer(customer || null);
      }
    } else if (section.title === 'Detalles del Pedido') {
      if (field.label === 'Tipo de Pedido') {
        setOrderData(prev => ({ ...prev, order_type: value as OrderType }));
      } else if (field.label === 'Prioridad') {
        setOrderData(prev => ({ ...prev, priority: value as PriorityLevel }));
      } else if (field.label === 'Método de Entrega') {
        setOrderData(prev => ({ ...prev, delivery_method: value as DeliveryMethod }));
      } else if (field.label === 'Fecha de Entrega') {
        setOrderData(prev => ({ ...prev, requested_delivery_date: value ? `${value}T12:00:00Z` : undefined }));
      }
    } else if (section.title === 'Resumen Financiero' && field.label === 'Gastos de Envío') {
      setOrderData(prev => ({ ...prev, delivery_fee: Number(value) }));
    }
  };

  return (
    <>
      <EditViewModal
        isOpen={isOpen}
        onClose={onClose}
        mode="edit"
        title="Nuevo Pedido"
        subtitle="Complete los detalles del pedido"
        sections={modalSections}
        size="2xl"
        showDefaultActions={false}
        actions={[
          {
            label: 'Cancelar',
            variant: 'outline',
            onClick: onClose
          },
          {
            label: 'Crear Pedido',
            variant: 'primary',
            onClick: handleSaveOrder,
            disabled: !selectedCustomer || orderItems.length === 0
          }
        ]}
        onFieldChange={handleFieldChange}
      />

      {/* Legacy content for sections that need custom UI */}
      <div className="hidden">

      </div>


      {/* New Customer Modal - Using StatusModal for consistency */}
      <EditViewModal
        isOpen={showCustomerForm}
        onClose={() => setShowCustomerForm(false)}
        mode="edit"
        title="Nuevo Cliente"
        subtitle="Complete la información del cliente"
        size="lg"
        showDefaultActions={false}
        sections={[
          {
            title: 'Información Personal',
            icon: User,
            fields: [
              {
                label: 'Nombre *',
                value: newCustomerData.name || '',
                type: 'text',
                editable: true,
                required: true,
                placeholder: 'Nombre del cliente'
              },
              {
                label: 'Teléfono',
                value: newCustomerData.phone || '',
                type: 'tel',
                editable: true,
                placeholder: 'Número de teléfono'
              },
              {
                label: 'Email',
                value: newCustomerData.email || '',
                type: 'email',
                editable: true,
                placeholder: 'Correo electrónico',
                span: 2
              },
              {
                label: 'Tipo de Cliente',
                value: newCustomerData.customer_type || CustomerType.INDIVIDUAL,
                type: 'select',
                editable: true,
                options: customerTypeOptions
              },
              {
                label: 'Método de Entrega Preferido',
                value: newCustomerData.preferred_delivery_method || DeliveryMethod.PICKUP,
                type: 'select',
                editable: true,
                options: deliveryMethodOptions
              }
            ]
          }
        ]}
        actions={[
          {
            label: 'Cancelar',
            variant: 'outline',
            onClick: () => setShowCustomerForm(false)
          },
          {
            label: 'Crear Cliente',
            variant: 'primary',
            onClick: handleCreateCustomer,
            disabled: !newCustomerData.name
          }
        ]}
        onFieldChange={(sectionIndex, fieldIndex, value) => {
          // Get the customer modal sections instead of the order modal sections
          const customerModalSections = [
            {
              title: 'Información Personal',
              icon: User,
              fields: [
                { label: 'Nombre *' },
                { label: 'Teléfono' },
                { label: 'Email' },
                { label: 'Tipo de Cliente' },
                { label: 'Método de Entrega Preferido' }
              ]
            }
          ];

          const field = customerModalSections[sectionIndex]?.fields[fieldIndex];
          if (!field) return;

          if (field.label === 'Nombre *') {
            setNewCustomerData(prev => ({ ...prev, name: String(value) }));
          } else if (field.label === 'Teléfono') {
            setNewCustomerData(prev => ({ ...prev, phone: String(value) }));
          } else if (field.label === 'Email') {
            setNewCustomerData(prev => ({ ...prev, email: String(value) }));
          } else if (field.label === 'Tipo de Cliente') {
            setNewCustomerData(prev => ({ ...prev, customer_type: value as CustomerType }));
          } else if (field.label === 'Método de Entrega Preferido') {
            setNewCustomerData(prev => ({ ...prev, preferred_delivery_method: value as DeliveryMethod }));
          }
        }}
      />

      {/* Customer Selector Modal */}
      <EditViewModal
        isOpen={showCustomerSelector}
        onClose={() => setShowCustomerSelector(false)}
        mode="view"
        title="Seleccionar Cliente"
        subtitle="Elija un cliente existente o cree uno nuevo"
        size="lg"
        showDefaultActions={false}
        sections={[
          {
            title: 'Clientes Disponibles',
            icon: User,
            fields: [
              {
                label: 'Lista de clientes',
                value: (
                  <div className="space-y-3 max-h-96 overflow-y-auto">
                    {customers.length === 0 ? (
                      <div className="text-center py-8 text-[var(--text-secondary)]">
                        <p>No hay clientes disponibles</p>
                        <Button
                          size="sm"
                          onClick={() => {
                            setShowCustomerSelector(false);
                            setShowCustomerForm(true);
                          }}
                          className="mt-2"
                        >
                          Crear Primer Cliente
                        </Button>
                      </div>
                    ) : (
                      customers.map(customer => (
                        <div key={customer.id} className="border border-[var(--border-primary)] rounded-lg p-4 hover:bg-[var(--bg-secondary)]">
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <h4 className="font-medium text-[var(--text-primary)]">{customer.name}</h4>
                              <p className="text-sm text-[var(--text-secondary)]">
                                Código: {customer.customer_code}
                              </p>
                              <div className="text-sm text-[var(--text-secondary)] space-y-1 mt-2">
                                {customer.email && <div>📧 {customer.email}</div>}
                                {customer.phone && <div>📞 {customer.phone}</div>}
                              </div>
                            </div>
                            <Button
                              size="sm"
                              onClick={() => {
                                setSelectedCustomer(customer);
                                setShowCustomerSelector(false);
                              }}
                              variant={selectedCustomer?.id === customer.id ? 'primary' : 'outline'}
                            >
                              {selectedCustomer?.id === customer.id ? 'Seleccionado' : 'Seleccionar'}
                            </Button>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                ),
                span: 2
              }
            ]
          }
        ]}
        actions={[
          {
            label: 'Nuevo Cliente',
            variant: 'outline',
            onClick: () => {
              setShowCustomerSelector(false);
              setShowCustomerForm(true);
            }
          },
          {
            label: 'Cerrar',
            variant: 'primary',
            onClick: () => setShowCustomerSelector(false)
          }
        ]}
      />
    </>
  );
};

export default OrderFormModal;