import React, { useState, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Package, Salad, AlertCircle, ArrowRight, ArrowLeft, CheckCircle } from 'lucide-react';
import Button from '../../../ui/Button/Button';
import Card from '../../../ui/Card/Card';
import Input from '../../../ui/Input/Input';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { useAddStock, useStock } from '../../../../api/hooks/inventory';
import { useAutoSaveDraft, useStepDraft, useDeleteStepDraft } from '../../../../api/hooks/onboarding';
import InfoCard from '../../../ui/InfoCard';

const STEP_NAME = 'initial-stock-entry';

export interface ProductWithStock {
  id: string;
  name: string;
  type: 'ingredient' | 'finished_product';
  category?: string;
  unit?: string;
  initialStock?: number;
}

export interface InitialStockEntryStepProps {
  products?: ProductWithStock[]; // Made optional - will use empty array if not provided
  onUpdate?: (data: { productsWithStock: ProductWithStock[] }) => void;
  onComplete?: () => void;
  onPrevious?: () => void;
  initialData?: {
    productsWithStock?: ProductWithStock[];
  };
}

export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
  products: initialProducts,
  onUpdate,
  onComplete,
  onPrevious,
  initialData,
}) => {
  const { t } = useTranslation();
  const currentTenant = useCurrentTenant();
  const tenantId = currentTenant?.id || '';
  const addStockMutation = useAddStock();
  const { data: stockData } = useStock(tenantId);
  const [isSaving, setIsSaving] = useState(false);

  const [products, setProducts] = useState<ProductWithStock[]>(() => {
    if (initialData?.productsWithStock) {
      return initialData.productsWithStock;
    }
    // Handle case where initialProducts is undefined (shouldn't happen, but defensive)
    if (!initialProducts || initialProducts.length === 0) {
      return [];
    }
    return initialProducts.map(p => ({
      ...p,
      initialStock: p.initialStock ?? undefined,
    }));
  });

  // Draft auto-save hooks
  const { data: draftData, isLoading: isLoadingDraft } = useStepDraft(STEP_NAME);
  const { saveDraft, cancelPendingSave } = useAutoSaveDraft(STEP_NAME, 2000);
  const deleteStepDraft = useDeleteStepDraft();
  const initializedRef = useRef(false);
  const draftCheckedRef = useRef(false);
  const stepCompletedRef = useRef(false); // Track if step has been completed to prevent draft saves after completion

  // Restore draft data on mount (only once)
  useEffect(() => {
    if (isLoadingDraft || initializedRef.current) return;

    initializedRef.current = true;
    draftCheckedRef.current = true;

    if (draftData?.draft_data?.products && Array.isArray(draftData.draft_data.products)) {
      // Restore products with stock values from draft
      setProducts(draftData.draft_data.products);
      console.log('✅ Restored initial-stock-entry draft:', draftData.draft_data.products.length, 'products');
    }
  }, [isLoadingDraft, draftData]);

  // Auto-save draft when products change
  useEffect(() => {
    // CRITICAL: Do not save drafts after the step has been completed
    // This prevents overwriting completed status with draft data
    if (stepCompletedRef.current) {
      console.log('⏸️  Skipping draft save - step already completed');
      return;
    }

    if (!draftCheckedRef.current) return;
    // Only save if we have products with stock values
    const productsWithValues = products.filter(p => p.initialStock !== undefined);
    if (productsWithValues.length === 0) return;

    const draftPayload = {
      products,
    };

    saveDraft(draftPayload);
  }, [products, saveDraft]);

  // Merge existing stock from backend on mount
  useEffect(() => {
    if (!stockData?.items || products.length === 0) return;

    console.log('🔄 Merging backend stock data into initial stock entry state...', { itemsCount: stockData.items.length });

    let hasChanges = false;
    const updatedProducts = products.map(p => {
      const existingStock = stockData.items.find(s => s.ingredient_id === p.id);

      // Only merge if user hasn't entered value yet
      if (existingStock && p.initialStock === undefined) {
        hasChanges = true;
        return {
          ...p,
          initialStock: existingStock.current_quantity
        };
      }
      return p;
    });

    if (hasChanges) {
      setProducts(updatedProducts);
      onUpdate?.({ productsWithStock: updatedProducts });
    }
  }, [stockData]); // Only depend on stockData to avoid infinite loop

  const ingredients = products.filter(p => p.type === 'ingredient');
  const finishedProducts = products.filter(p => p.type === 'finished_product');

  const handleStockChange = (productId: string, value: string) => {
    const numValue = value === '' ? undefined : parseFloat(value);
    const updatedProducts = products.map(p =>
      p.id === productId ? { ...p, initialStock: numValue } : p
    );

    setProducts(updatedProducts);
    onUpdate?.({ productsWithStock: updatedProducts });
  };

  const handleSetAllToZero = () => {
    const updatedProducts = products.map(p => ({ ...p, initialStock: 0 }));
    setProducts(updatedProducts);
    onUpdate?.({ productsWithStock: updatedProducts });
  };

  const handleSkipForNow = () => {
    // Set all undefined values to 0
    const updatedProducts = products.map(p => ({
      ...p,
      initialStock: p.initialStock ?? 0,
    }));
    setProducts(updatedProducts);
    onUpdate?.({ productsWithStock: updatedProducts });
    onComplete?.();
  };

  const handleContinue = async () => {
    setIsSaving(true);
    try {
      // STEP 0: Check for existing stock to avoid duplication
      const existingStockMap = new Map(
        stockData?.items?.map(s => [s.ingredient_id, s.current_quantity]) || []
      );

      // Create stock entries only for products where:
      // 1. initialStock is defined AND > 0
      // 2. AND (it doesn't exist OR the value is different)
      const stockEntriesToSync = products.filter(p => {
        const currentVal = p.initialStock ?? 0;
        const backendVal = existingStockMap.get(p.id);

        // Only sync if it's new (> 0 and doesn't exist) or changed
        if (backendVal === undefined) {
          return currentVal > 0;
        }
        return currentVal !== backendVal;
      });

      console.log(`📦 Stock processing: ${stockEntriesToSync.length} to sync, ${products.length - stockEntriesToSync.length} skipped.`);

      if (stockEntriesToSync.length > 0) {
        // Create or update stock entries
        // Note: useAddStock currently handles creation/initial set.
        // If the backend requires a different endpoint for updates, this might need adjustment.
        // For onboarding, we assume addStock is a "set-and-forget" for initial levels.
        const stockPromises = stockEntriesToSync.map(product =>
          addStockMutation.mutateAsync({
            tenantId,
            stockData: {
              ingredient_id: product.id,
              current_quantity: product.initialStock || 0,
              unit_cost: 0,
            }
          })
        );

        await Promise.all(stockPromises);
        console.log(`✅ Synced ${stockEntriesToSync.length} stock entries successfully`);
      }

      // CRITICAL: Mark step as completed BEFORE canceling auto-save
      // This prevents any pending auto-save from overwriting the completion
      stepCompletedRef.current = true;

      // Cancel any pending auto-save and delete draft on successful completion
      cancelPendingSave();
      try {
        await deleteStepDraft.mutateAsync(STEP_NAME);
        console.log('✅ Deleted initial-stock-entry draft after successful completion');
      } catch {
        // Ignore errors when deleting draft
      }

      onComplete?.();
    } catch (error) {
      console.error('Error syncing stock entries:', error);
      alert(t('onboarding:stock.error_creating_stock', 'Error al guardar los niveles de stock. Por favor, inténtalo de nuevo.'));
    } finally {
      setIsSaving(false);
    }
  };

  const productsWithStock = products.filter(p => p.initialStock !== undefined && p.initialStock >= 0);
  const productsWithoutStock = products.filter(p => p.initialStock === undefined);
  const completionPercentage = products.length > 0 ? (productsWithStock.length / products.length) * 100 : 100;
  const allCompleted = productsWithoutStock.length === 0;

  // If no products, show a skip message
  if (products.length === 0) {
    return (
      <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
        <div className="text-center space-y-4">
          <div className="text-6xl">✓</div>
          <h2 className="text-xl md:text-2xl font-bold text-[var(--text-primary)]">
            {t('onboarding:stock.no_products_title', 'Stock Inicial')}
          </h2>
          <p className="text-[var(--text-secondary)]">
            {t('onboarding:stock.no_products_message', 'Podrás configurar los niveles de stock más tarde en la sección de inventario.')}
          </p>
          <Button onClick={handleContinue} variant="primary" rightIcon={<ArrowRight />}>
            {t('common:continue', 'Continuar')}
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4 md:space-y-6">
      {/* Why This Matters */}
      <InfoCard
        variant="info"
        title={t('setup_wizard:why_this_matters', '¿Por qué es importante?')}
        description={t(
          'onboarding:stock.info_text',
          'Sin niveles de stock iniciales, el sistema no puede alertarte sobre stock bajo, planificar producción o calcular costos correctamente. Tómate un momento para ingresar tus cantidades actuales.'
        )}
      />

      {/* Progress */}
      <div className="space-y-2">
        <div className="flex items-center justify-between text-sm">
          <span className="text-[var(--text-secondary)]">
            {t('onboarding:stock.progress', 'Progreso de captura')}
          </span>
          <span className="font-medium text-[var(--text-primary)]">
            {productsWithStock.length} / {products.length}
          </span>
        </div>
        <div className="w-full bg-[var(--bg-secondary)] rounded-full h-2">
          <div
            className="bg-[var(--color-primary)] h-2 rounded-full transition-all duration-300"
            style={{ width: `${completionPercentage}%` }}
          />
        </div>
      </div>

      {/* Quick Actions */}
      <div className="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-2">
        <Button onClick={handleSetAllToZero} variant="outline" size="sm" className="w-full sm:w-auto">
          {t('onboarding:stock.set_all_zero', 'Establecer todo a 0')}
        </Button>
        <Button onClick={handleSkipForNow} variant="ghost" size="sm" className="w-full sm:w-auto">
          {t('onboarding:stock.skip_for_now', 'Omitir por ahora (se establecerá a 0)')}
        </Button>
      </div>

      {/* Ingredients Section */}
      {ingredients.length > 0 && (
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 rounded-lg flex items-center justify-center">
              <Salad className="w-4 h-4 text-[var(--color-success)]" />
            </div>
            <h3 className="font-semibold text-[var(--text-primary)]">
              {t('onboarding:stock.ingredients', 'Ingredientes')} ({ingredients.length})
            </h3>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {ingredients.map(product => {
              const hasStock = product.initialStock !== undefined;
              return (
                <Card key={product.id} className={hasStock ? 'bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 border-[var(--color-success)]/30' : ''}>
                  <div className="p-3">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1">
                        <div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
                          {product.name}
                          {hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-success)]" />}
                        </div>
                        {product.category && (
                          <div className="text-xs text-[var(--text-secondary)] uppercase">{t(`inventory:enums.ingredient_category.${product.category}`, product.category)}</div>
                        )}
                      </div>
                      <div className="flex items-center gap-2">
                        <Input
                          type="number"
                          value={product.initialStock ?? ''}
                          onChange={(e) => handleStockChange(product.id, e.target.value)}
                          placeholder="0"
                          min="0"
                          step="0.01"
                          className="w-20 sm:w-24 text-right min-h-[44px]"
                        />
                        <span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
                          {t(`inventory:enums.unit_of_measure.${product.unit}`, product.unit || 'kg')}
                        </span>
                      </div>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        </div>
      )}

      {/* Finished Products Section */}
      {finishedProducts.length > 0 && (
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 rounded-lg flex items-center justify-center">
              <Package className="w-4 h-4 text-[var(--color-info)]" />
            </div>
            <h3 className="font-semibold text-[var(--text-primary)]">
              {t('onboarding:stock.finished_products', 'Productos Terminados')} ({finishedProducts.length})
            </h3>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {finishedProducts.map(product => {
              const hasStock = product.initialStock !== undefined;
              return (
                <Card key={product.id} className={hasStock ? 'bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 border-[var(--color-info)]/30' : ''}>
                  <div className="p-3">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1">
                        <div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
                          {product.name}
                          {hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-info)]" />}
                        </div>
                        {product.category && (
                          <div className="text-xs text-[var(--text-secondary)] uppercase">{t(`inventory:enums.ingredient_category.${product.category}`, product.category)}</div>
                        )}
                      </div>
                      <div className="flex items-center gap-2">
                        <Input
                          type="number"
                          value={product.initialStock ?? ''}
                          onChange={(e) => handleStockChange(product.id, e.target.value)}
                          placeholder="0"
                          min="0"
                          step="1"
                          className="w-24 text-right"
                        />
                        <span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
                          {t(`inventory:enums.unit_of_measure.${product.unit}`, product.unit || t('common:units', 'unidades'))}
                        </span>
                      </div>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        </div>
      )}

      {/* Warning for incomplete */}
      {!allCompleted && (
        <InfoCard
          variant="warning"
          title={t('onboarding:stock.incomplete_warning', 'Faltan {{count}} productos por completar', {
            count: productsWithoutStock.length,
          })}
          description={t(
            'onboarding:stock.incomplete_help',
            'Puedes continuar, pero recomendamos ingresar todas las cantidades para un mejor control de inventario.'
          )}
        />
      )}

      {/* Footer Actions */}
      <div className="flex items-center justify-between pt-6 border-t border-[var(--border-primary)]">
        <Button onClick={onPrevious} variant="ghost" leftIcon={<ArrowLeft />}>
          {t('common:previous', 'Anterior')}
        </Button>

        <Button
          onClick={handleContinue}
          variant="primary"
          rightIcon={<ArrowRight />}
          disabled={isSaving}
        >
          {isSaving
            ? t('common:saving', 'Guardando...')
            : allCompleted
              ? t('onboarding:stock.continue_to_next', 'Continuar →')
              : t('onboarding:stock.continue_anyway', 'Continuar de todos modos')}
        </Button>
      </div>
    </div>
  );
};

export default InitialStockEntryStep;