import React, { useState } from 'react';
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import {
  Edit3,
  Upload,
  CheckCircle2,
  AlertCircle,
  Download,
  FileSpreadsheet,
  Calendar,
  DollarSign,
  Package,
  CreditCard,
  Loader2,
  X,
} from 'lucide-react';
import { useTenant } from '../../../../stores/tenant.store';
import { salesService } from '../../../../api/services/sales';

// ========================================
// STEP 1: Entry Method Selection
// ========================================

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

const EntryMethodStep: React.FC<EntryMethodStepProps> = ({ data, onDataChange, onNext }) => {
  const [selectedMethod, setSelectedMethod] = useState<'manual' | 'upload'>(
    data.entryMethod || 'manual'
  );

  const handleSelect = (method: 'manual' | 'upload') => {
    setSelectedMethod(method);
    onDataChange({ ...data, entryMethod: method });
  };

  const handleContinue = () => {
    onDataChange({ ...data, entryMethod: selectedMethod });
    onNext();
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          ¿Cómo deseas registrar las ventas?
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          Elige el método que mejor se adapte a tus necesidades
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Manual Entry Option */}
        <button
          onClick={() => handleSelect('manual')}
          className={`
            p-6 rounded-xl border-2 transition-all duration-200 text-left
            hover:shadow-lg hover:-translate-y-1
            focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2
            ${
              selectedMethod === 'manual'
                ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5 shadow-md'
                : 'border-[var(--border-secondary)] bg-[var(--bg-primary)]'
            }
          `}
        >
          <div className="flex items-start gap-4">
            <div
              className={`
                p-3 rounded-lg transition-colors
                ${
                  selectedMethod === 'manual'
                    ? 'bg-[var(--color-primary)] text-white'
                    : 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
                }
              `}
            >
              <Edit3 className="w-6 h-6" />
            </div>
            <div className="flex-1">
              <h4 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
                Entrada Manual
              </h4>
              <p className="text-sm text-[var(--text-secondary)] mb-3">
                Ingresa una o varias ventas de forma individual
              </p>
              <div className="space-y-1 text-xs text-[var(--text-tertiary)]">
                <p className="flex items-center gap-1.5">
                  <CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
                  Ideal para totales diarios
                </p>
                <p className="flex items-center gap-1.5">
                  <CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
                  Control detallado por venta
                </p>
                <p className="flex items-center gap-1.5">
                  <CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
                  Fácil y rápido
                </p>
              </div>
            </div>
          </div>
        </button>

        {/* File Upload Option */}
        <button
          onClick={() => handleSelect('upload')}
          className={`
            relative p-6 rounded-xl border-2 transition-all duration-200 text-left
            hover:shadow-lg hover:-translate-y-1
            focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2
            ${
              selectedMethod === 'upload'
                ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5 shadow-md'
                : 'border-[var(--border-secondary)] bg-[var(--bg-primary)]'
            }
          `}
        >
          {/* Recommended Badge */}
          <div className="absolute top-3 right-3">
            <span className="px-2 py-1 text-xs rounded-full bg-gradient-to-r from-amber-100 to-orange-100 text-orange-800 font-semibold">
              ⭐ Recomendado para históricos
            </span>
          </div>

          <div className="flex items-start gap-4">
            <div
              className={`
                p-3 rounded-lg transition-colors
                ${
                  selectedMethod === 'upload'
                    ? 'bg-[var(--color-primary)] text-white'
                    : 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
                }
              `}
            >
              <Upload className="w-6 h-6" />
            </div>
            <div className="flex-1">
              <h4 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
                Cargar Archivo
              </h4>
              <p className="text-sm text-[var(--text-secondary)] mb-3">
                Importa desde Excel o CSV
              </p>
              <div className="space-y-1 text-xs text-[var(--text-tertiary)]">
                <p className="flex items-center gap-1.5">
                  <CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
                  Ideal para datos históricos
                </p>
                <p className="flex items-center gap-1.5">
                  <CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
                  Carga masiva (cientos de registros)
                </p>
                <p className="flex items-center gap-1.5">
                  <CheckCircle2 className="w-3.5 h-3.5 text-green-600" />
                  Ahorra tiempo significativo
                </p>
              </div>
            </div>
          </div>
        </button>
      </div>

      {/* Continue Button */}
      <div className="flex justify-end pt-4 border-t border-[var(--border-primary)]">
        <button
          onClick={handleContinue}
          className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 transition-colors font-medium inline-flex items-center gap-2"
        >
          Continuar
          <CheckCircle2 className="w-5 h-5" />
        </button>
      </div>
    </div>
  );
};

// ========================================
// STEP 2a: Manual Entry Form
// ========================================

const ManualEntryStep: React.FC<EntryMethodStepProps> = ({ data, onDataChange, onNext }) => {
  const [salesItems, setSalesItems] = useState(data.salesItems || []);
  const [saleDate, setSaleDate] = useState(
    data.saleDate || new Date().toISOString().split('T')[0]
  );
  const [paymentMethod, setPaymentMethod] = useState(data.paymentMethod || 'cash');
  const [notes, setNotes] = useState(data.notes || '');

  const handleAddItem = () => {
    setSalesItems([
      ...salesItems,
      { id: Date.now(), product: '', quantity: 1, unitPrice: 0, subtotal: 0 },
    ]);
  };

  const handleUpdateItem = (index: number, field: string, value: any) => {
    const updated = salesItems.map((item: any, i: number) => {
      if (i === index) {
        const newItem = { ...item, [field]: value };
        // Auto-calculate subtotal
        if (field === 'quantity' || field === 'unitPrice') {
          newItem.subtotal = (newItem.quantity || 0) * (newItem.unitPrice || 0);
        }
        return newItem;
      }
      return item;
    });
    setSalesItems(updated);
  };

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

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

  const handleSave = () => {
    onDataChange({
      ...data,
      salesItems,
      saleDate,
      paymentMethod,
      notes,
      totalAmount: calculateTotal(),
    });
    onNext();
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          Registrar Venta Manual
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          Ingresa los detalles de la venta
        </p>
      </div>

      {/* Date and Payment Method */}
      <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" />
            Fecha de Venta *
          </label>
          <input
            type="date"
            value={saleDate}
            onChange={(e) => setSaleDate(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">
            <CreditCard className="w-4 h-4 inline mr-1.5" />
            Método de Pago *
          </label>
          <select
            value={paymentMethod}
            onChange={(e) => setPaymentMethod(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">Efectivo</option>
            <option value="card">Tarjeta</option>
            <option value="mobile">Pago Móvil</option>
            <option value="transfer">Transferencia</option>
            <option value="other">Otro</option>
          </select>
        </div>
      </div>

      {/* Sales Items */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <label className="block text-sm font-medium text-[var(--text-secondary)]">
            <Package className="w-4 h-4 inline mr-1.5" />
            Productos Vendidos
          </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"
          >
            + Agregar Producto
          </button>
        </div>

        {salesItems.length === 0 ? (
          <div className="text-center py-8 border-2 border-dashed border-[var(--border-secondary)] rounded-lg text-[var(--text-tertiary)]">
            <Package className="w-8 h-8 mx-auto mb-2 opacity-50" />
            <p>No hay productos agregados</p>
            <p className="text-sm">Haz clic en "Agregar Producto" para comenzar</p>
          </div>
        ) : (
          <div className="space-y-2">
            {salesItems.map((item: any, index: number) => (
              <div
                key={item.id}
                className="p-3 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/30"
              >
                <div className="grid grid-cols-12 gap-2 items-center">
                  <div className="col-span-12 sm:col-span-5">
                    <input
                      type="text"
                      placeholder="Nombre del producto"
                      value={item.product}
                      onChange={(e) => handleUpdateItem(index, 'product', e.target.value)}
                      className="w-full px-2 py-1.5 text-sm border border-[var(--border-secondary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
                    />
                  </div>
                  <div className="col-span-4 sm:col-span-2">
                    <input
                      type="number"
                      placeholder="Cant."
                      value={item.quantity}
                      onChange={(e) =>
                        handleUpdateItem(index, 'quantity', parseFloat(e.target.value) || 0)
                      }
                      className="w-full px-2 py-1.5 text-sm border border-[var(--border-secondary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
                      min="0"
                      step="1"
                    />
                  </div>
                  <div className="col-span-4 sm:col-span-2">
                    <input
                      type="number"
                      placeholder="Precio"
                      value={item.unitPrice}
                      onChange={(e) =>
                        handleUpdateItem(index, 'unitPrice', parseFloat(e.target.value) || 0)
                      }
                      className="w-full px-2 py-1.5 text-sm border border-[var(--border-secondary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
                      min="0"
                      step="0.01"
                    />
                  </div>
                  <div className="col-span-3 sm:col-span-2 text-sm font-semibold text-[var(--text-primary)]">
                    €{item.subtotal.toFixed(2)}
                  </div>
                  <div className="col-span-1 sm:col-span-1 flex justify-end">
                    <button
                      onClick={() => handleRemoveItem(index)}
                      className="p-1 text-red-500 hover:text-red-700 transition-colors"
                    >
                      ✕
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Total */}
        {salesItems.length > 0 && (
          <div className="pt-3 border-t border-[var(--border-primary)] text-right">
            <span className="text-lg font-bold text-[var(--text-primary)]">
              Total: €{calculateTotal().toFixed(2)}
            </span>
          </div>
        )}
      </div>

      {/* Notes */}
      <div>
        <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
          Notas (Opcional)
        </label>
        <textarea
          value={notes}
          onChange={(e) => setNotes(e.target.value)}
          placeholder="Información adicional sobre esta venta..."
          rows={3}
          className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)] text-sm"
        />
      </div>

      {/* Save Button */}
      <div className="flex justify-end pt-4 border-t border-[var(--border-primary)]">
        <button
          onClick={handleSave}
          disabled={salesItems.length === 0}
          className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
        >
          Guardar y Continuar
        </button>
      </div>
    </div>
  );
};

// ========================================
// STEP 2b: File Upload
// ========================================

const FileUploadStep: React.FC<EntryMethodStepProps> = ({ data, onDataChange, onNext }) => {
  const { currentTenant } = useTenant();
  const [file, setFile] = useState<File | null>(data.uploadedFile || null);
  const [validating, setValidating] = useState(false);
  const [importing, setImporting] = useState(false);
  const [validationResult, setValidationResult] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);
  const [downloadingTemplate, setDownloadingTemplate] = useState(false);

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0];
    if (selectedFile) {
      setFile(selectedFile);
      setValidationResult(null);
      setError(null);
    }
  };

  const handleRemoveFile = () => {
    setFile(null);
    setValidationResult(null);
    setError(null);
  };

  const handleValidate = async () => {
    if (!file || !currentTenant?.id) return;

    setValidating(true);
    setError(null);

    try {
      const result = await salesService.validateImportFile(currentTenant.id, file);
      setValidationResult(result);
    } catch (err: any) {
      console.error('Error validating file:', err);
      setError(err.response?.data?.detail || 'Error al validar el archivo');
    } finally {
      setValidating(false);
    }
  };

  const handleImport = async () => {
    if (!file || !currentTenant?.id) return;

    setImporting(true);
    setError(null);

    try {
      const result = await salesService.importSalesData(currentTenant.id, file, false);
      onDataChange({ ...data, uploadedFile: file, importResult: result });
      onNext();
    } catch (err: any) {
      console.error('Error importing file:', err);
      setError(err.response?.data?.detail || 'Error al importar el archivo');
    } finally {
      setImporting(false);
    }
  };

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

    setDownloadingTemplate(true);
    try {
      const blob = await salesService.downloadImportTemplate(currentTenant.id);
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'plantilla_ventas.csv';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (err: any) {
      console.error('Error downloading template:', err);
      setError('Error al descargar la plantilla');
    } finally {
      setDownloadingTemplate(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          Cargar Archivo de Ventas
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          Importa tus ventas desde Excel o CSV
        </p>
      </div>

      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm flex items-start gap-2">
          <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
          <span>{error}</span>
        </div>
      )}

      {/* Download Template Button */}
      <div className="flex justify-center">
        <button
          onClick={handleDownloadTemplate}
          disabled={downloadingTemplate}
          className="px-4 py-2 border border-[var(--border-secondary)] text-[var(--text-secondary)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors inline-flex items-center gap-2 disabled:opacity-50"
        >
          {downloadingTemplate ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              Descargando...
            </>
          ) : (
            <>
              <Download className="w-4 h-4" />
              Descargar Plantilla CSV
            </>
          )}
        </button>
      </div>

      {/* File Upload Area */}
      {!file ? (
        <div className="border-2 border-dashed border-[var(--border-secondary)] rounded-xl p-8 text-center bg-[var(--bg-secondary)]/30">
          <FileSpreadsheet className="w-16 h-16 mx-auto mb-4 text-[var(--color-primary)]/50" />
          <h4 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
            Arrastra un archivo aquí
          </h4>
          <p className="text-sm text-[var(--text-secondary)] mb-4">
            o haz clic para seleccionar
          </p>
          <label className="inline-block">
            <input
              type="file"
              accept=".csv,.xlsx,.xls"
              onChange={handleFileSelect}
              className="hidden"
            />
            <span className="px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 transition-colors cursor-pointer inline-block">
              Seleccionar Archivo
            </span>
          </label>
          <p className="text-xs text-[var(--text-tertiary)] mt-3">
            Formatos soportados: CSV, Excel (.xlsx, .xls)
          </p>
        </div>
      ) : (
        <div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-primary)]">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <FileSpreadsheet className="w-8 h-8 text-[var(--color-primary)]" />
              <div>
                <p className="font-medium text-[var(--text-primary)]">{file.name}</p>
                <p className="text-sm text-[var(--text-secondary)]">
                  {(file.size / 1024).toFixed(2)} KB
                </p>
              </div>
            </div>
            <button
              onClick={handleRemoveFile}
              className="p-1 text-red-500 hover:text-red-700 transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
          </div>

          {/* Validation Result */}
          {validationResult && (
            <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <p className="text-sm text-blue-800 font-medium mb-2">
                ✓ Archivo validado correctamente
              </p>
              <div className="text-xs text-blue-700 space-y-1">
                <p>Registros encontrados: {validationResult.total_rows || 0}</p>
                <p>Registros válidos: {validationResult.valid_rows || 0}</p>
                {validationResult.errors?.length > 0 && (
                  <p className="text-red-600">
                    Errores: {validationResult.errors.length}
                  </p>
                )}
              </div>
            </div>
          )}

          {/* Action Buttons */}
          <div className="mt-4 flex gap-3">
            {!validationResult && (
              <button
                onClick={handleValidate}
                disabled={validating}
                className="flex-1 px-4 py-2 border border-[var(--color-primary)] text-[var(--color-primary)] rounded-lg hover:bg-[var(--color-primary)]/5 transition-colors inline-flex items-center justify-center gap-2 disabled:opacity-50"
              >
                {validating ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin" />
                    Validando...
                  </>
                ) : (
                  <>
                    <CheckCircle2 className="w-4 h-4" />
                    Validar Archivo
                  </>
                )}
              </button>
            )}
            <button
              onClick={handleImport}
              disabled={importing || !validationResult}
              className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {importing ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Importando...
                </>
              ) : (
                <>
                  <Upload className="w-4 h-4" />
                  Importar Datos
                </>
              )}
            </button>
          </div>
        </div>
      )}

      <div className="text-center text-sm text-[var(--text-tertiary)]">
        <p>El archivo debe contener las columnas:</p>
        <p className="font-mono text-xs mt-1">
          fecha, producto, cantidad, precio_unitario, método_pago
        </p>
      </div>
    </div>
  );
};

// ========================================
// STEP 3: Review & Confirm
// ========================================

const ReviewStep: React.FC<EntryMethodStepProps> = ({ data, onComplete }) => {
  const { currentTenant } = useTenant();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleConfirm = async () => {
    if (!currentTenant?.id) {
      setError('No se pudo obtener información del tenant');
      return;
    }

    setLoading(true);
    setError(null);

    try {
      if (data.entryMethod === 'manual' && data.salesItems) {
        // Create individual sales records for each item
        for (const item of data.salesItems) {
          const salesData = {
            product_name: item.product,
            product_category: 'general', // Could be enhanced with category selection
            quantity_sold: item.quantity,
            unit_price: item.unitPrice,
            total_amount: item.subtotal,
            sale_date: data.saleDate,
            sales_channel: 'retail',
            source: 'manual',
            payment_method: data.paymentMethod,
            notes: data.notes,
          };

          await salesService.createSalesRecord(currentTenant.id, salesData);
        }
      }

      onComplete();
    } catch (err: any) {
      console.error('Error saving sales data:', err);
      setError(err.response?.data?.detail || 'Error al guardar los datos de ventas');
    } finally {
      setLoading(false);
    }
  };

  const isManual = data.entryMethod === 'manual';
  const isUpload = data.entryMethod === 'upload';

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <div className="flex items-center justify-center mb-3">
          <div className="p-3 bg-green-100 rounded-full">
            <CheckCircle2 className="w-8 h-8 text-green-600" />
          </div>
        </div>
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          Revisar y Confirmar
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          Verifica que toda la información sea correcta
        </p>
      </div>

      {error && (
        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm flex items-start gap-2">
          <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
          <span>{error}</span>
        </div>
      )}

      {isManual && data.salesItems && (
        <div className="space-y-4">
          {/* Summary */}
          <div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg">
            <div className="grid grid-cols-2 gap-3 text-sm">
              <div>
                <span className="text-[var(--text-secondary)]">Fecha:</span>
                <p className="font-semibold text-[var(--text-primary)]">{data.saleDate}</p>
              </div>
              <div>
                <span className="text-[var(--text-secondary)]">Método de Pago:</span>
                <p className="font-semibold text-[var(--text-primary)] capitalize">
                  {data.paymentMethod}
                </p>
              </div>
            </div>
          </div>

          {/* Items */}
          <div>
            <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-2">
              Productos ({data.salesItems.length})
            </h4>
            <div className="space-y-2">
              {data.salesItems.map((item: any) => (
                <div
                  key={item.id}
                  className="p-3 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-primary)] flex justify-between items-center"
                >
                  <div className="flex-1">
                    <p className="font-medium text-[var(--text-primary)]">{item.product}</p>
                    <p className="text-sm text-[var(--text-secondary)]">
                      {item.quantity} × €{item.unitPrice.toFixed(2)}
                    </p>
                  </div>
                  <div className="text-right">
                    <p className="font-semibold text-[var(--text-primary)]">
                      €{item.subtotal.toFixed(2)}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Total */}
          <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)]">Total:</span>
              <span className="text-2xl font-bold text-[var(--color-primary)]">
                €{data.totalAmount?.toFixed(2)}
              </span>
            </div>
          </div>

          {/* Notes */}
          {data.notes && (
            <div className="p-3 bg-[var(--bg-secondary)]/30 rounded-lg">
              <p className="text-sm text-[var(--text-secondary)] mb-1">Notas:</p>
              <p className="text-sm text-[var(--text-primary)]">{data.notes}</p>
            </div>
          )}
        </div>
      )}

      {isUpload && data.importResult && (
        <div className="space-y-4">
          <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
            <p className="text-green-800 font-semibold mb-2">
              ✓ Archivo importado correctamente
            </p>
            <div className="text-sm text-green-700 space-y-1">
              <p>Registros importados: {data.importResult.successful_imports || 0}</p>
              <p>Registros fallidos: {data.importResult.failed_imports || 0}</p>
            </div>
          </div>
        </div>
      )}

      {/* Confirm Button */}
      <div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-primary)]">
        <button
          onClick={handleConfirm}
          disabled={loading || (isUpload && !data.importResult)}
          className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {loading ? (
            <>
              <Loader2 className="w-5 h-5 animate-spin" />
              Guardando...
            </>
          ) : (
            <>
              <CheckCircle2 className="w-5 h-5" />
              Confirmar y Guardar
            </>
          )}
        </button>
      </div>
    </div>
  );
};

// ========================================
// Export Wizard Steps
// ========================================

export const SalesEntryWizardSteps = (
  data: Record<string, any>,
  setData: (data: Record<string, any>) => void
): WizardStep[] => {
  const entryMethod = data.entryMethod;

  // Dynamic steps based on entry method
  const steps: WizardStep[] = [
    {
      id: 'entry-method',
      title: 'Método de Entrada',
      description: 'Elige cómo registrar las ventas',
      component: (props) => (
        <EntryMethodStep {...props} data={data} onDataChange={setData} />
      ),
    },
  ];

  if (entryMethod === 'manual') {
    steps.push({
      id: 'manual-entry',
      title: 'Ingresar Datos',
      description: 'Registra los detalles de la venta',
      component: (props) => <ManualEntryStep {...props} data={data} onDataChange={setData} />,
    });
  } else if (entryMethod === 'upload') {
    steps.push({
      id: 'file-upload',
      title: 'Cargar Archivo',
      description: 'Importa ventas desde archivo',
      component: (props) => <FileUploadStep {...props} data={data} onDataChange={setData} />,
    });
  }

  steps.push({
    id: 'review',
    title: 'Revisar',
    description: 'Confirma los datos antes de guardar',
    component: (props) => <ReviewStep {...props} data={data} onDataChange={setData} />,
  });

  return steps;
};