import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import type { SetupStepProps } from '../SetupWizard';
import { useSuppliers } from '../../../../api/hooks/suppliers';
import { useIngredients } from '../../../../api/hooks/inventory';
import { useRecipes } from '../../../../api/hooks/recipes';
import { useQualityTemplates } from '../../../../api/hooks/qualityTemplates';
import { useCurrentTenant } from '../../../../stores/tenant.store';
import { useAuthUser } from '../../../../stores/auth.store';

export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete, canContinue }) => {
  const { t } = useTranslation();

  // Get tenant ID
  const currentTenant = useCurrentTenant();
  const user = useAuthUser();
  const tenantId = currentTenant?.id || user?.tenant_id || '';

  // Fetch all data for review
  const { data: suppliersData, isLoading: suppliersLoading } = useSuppliers(tenantId);
  const { data: ingredientsData, isLoading: ingredientsLoading } = useIngredients(tenantId);
  const { data: recipesData, isLoading: recipesLoading } = useRecipes(tenantId);
  const { data: qualityTemplatesData, isLoading: qualityLoading } = useQualityTemplates(tenantId);

  const suppliers = suppliersData || [];
  const ingredients = ingredientsData || [];
  const recipes = recipesData || [];
  const qualityTemplates = qualityTemplatesData || [];

  const isLoading = suppliersLoading || ingredientsLoading || recipesLoading || qualityLoading;

  // Always allow to continue (review step is informational)
  useEffect(() => {
    onUpdate?.({
      itemsCount: suppliers.length + ingredients.length + recipes.length,
      canContinue: true,
    });
  }, [suppliers.length, ingredients.length, recipes.length, onUpdate]);

  // Calculate some helpful stats
  const totalCost = ingredients.reduce((sum, ing) => sum + (ing.standard_cost || 0), 0);
  const avgRecipeIngredients = recipes.length > 0
    ? recipes.reduce((sum, recipe) => sum + (recipe.ingredients?.length || 0), 0) / recipes.length
    : 0;

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[var(--color-success)]/20 to-[var(--color-primary)]/20 rounded-full mb-4">
          <svg className="w-8 h-8 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h2 className="text-2xl font-bold text-[var(--text-primary)] mb-2">
          {t('setup_wizard:review.title', 'Review Your Setup')}
        </h2>
        <p className="text-[var(--text-secondary)] max-w-2xl mx-auto">
          {t('setup_wizard:review.subtitle', "Let's review everything you've configured. You can go back and make changes if needed.")}
        </p>
      </div>

      {isLoading ? (
        <div className="text-center py-12">
          <svg className="animate-spin h-8 w-8 text-[var(--color-primary)] mx-auto" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
          </svg>
          <p className="mt-2 text-sm text-[var(--text-secondary)]">
            {t('common:loading', 'Loading...')}
          </p>
        </div>
      ) : (
        <>
          {/* Overview Stats */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="bg-gradient-to-br from-blue-500/10 to-blue-600/5 border border-blue-500/20 rounded-lg p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--text-secondary)]">{t('setup_wizard:review.suppliers', 'Suppliers')}</p>
                  <p className="text-2xl font-bold text-[var(--text-primary)] mt-1">{suppliers.length}</p>
                </div>
                <svg className="w-10 h-10 text-blue-500/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
              </div>
            </div>

            <div className="bg-gradient-to-br from-green-500/10 to-green-600/5 border border-green-500/20 rounded-lg p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--text-secondary)]">{t('setup_wizard:review.ingredients', 'Ingredients')}</p>
                  <p className="text-2xl font-bold text-[var(--text-primary)] mt-1">{ingredients.length}</p>
                </div>
                <svg className="w-10 h-10 text-green-500/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                </svg>
              </div>
            </div>

            <div className="bg-gradient-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/20 rounded-lg p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--text-secondary)]">{t('setup_wizard:review.recipes', 'Recipes')}</p>
                  <p className="text-2xl font-bold text-[var(--text-primary)] mt-1">{recipes.length}</p>
                </div>
                <svg className="w-10 h-10 text-purple-500/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
            </div>

            <div className="bg-gradient-to-br from-orange-500/10 to-orange-600/5 border border-orange-500/20 rounded-lg p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--text-secondary)]">{t('setup_wizard:review.quality', 'Quality Checks')}</p>
                  <p className="text-2xl font-bold text-[var(--text-primary)] mt-1">{qualityTemplates.length}</p>
                </div>
                <svg className="w-10 h-10 text-orange-500/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
            </div>
          </div>

          {/* Detailed Sections */}
          <div className="space-y-4">
            {/* Suppliers Section */}
            {suppliers.length > 0 && (
              <div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-secondary)]">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="font-semibold text-[var(--text-primary)] flex items-center gap-2">
                    <svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                    </svg>
                    {t('setup_wizard:review.suppliers_title', 'Suppliers')}
                    <span className="text-sm font-normal text-[var(--text-tertiary)]">({suppliers.length})</span>
                  </h3>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                  {suppliers.slice(0, 6).map((supplier) => (
                    <div key={supplier.id} className="flex items-center gap-2 p-2 bg-[var(--bg-primary)] rounded border border-[var(--border-secondary)]">
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-sm text-[var(--text-primary)] truncate">{supplier.name}</p>
                        {supplier.email && (
                          <p className="text-xs text-[var(--text-tertiary)] truncate">{supplier.email}</p>
                        )}
                      </div>
                      {supplier.is_active && (
                        <span className="flex-shrink-0 w-2 h-2 bg-green-500 rounded-full" title="Active" />
                      )}
                    </div>
                  ))}
                  {suppliers.length > 6 && (
                    <div className="flex items-center justify-center p-2 text-sm text-[var(--text-secondary)]">
                      +{suppliers.length - 6} {t('setup_wizard:review.more', 'more')}
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* Ingredients Section */}
            {ingredients.length > 0 && (
              <div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-secondary)]">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="font-semibold text-[var(--text-primary)] flex items-center gap-2">
                    <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                    </svg>
                    {t('setup_wizard:review.ingredients_title', 'Inventory Items')}
                    <span className="text-sm font-normal text-[var(--text-tertiary)]">({ingredients.length})</span>
                  </h3>
                  {totalCost > 0 && (
                    <p className="text-sm text-[var(--text-secondary)]">
                      {t('setup_wizard:review.total_cost', 'Total value')}: <span className="font-medium text-[var(--text-primary)]">${totalCost.toFixed(2)}</span>
                    </p>
                  )}
                </div>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                  {ingredients.slice(0, 8).map((ingredient) => (
                    <div key={ingredient.id} className="flex items-center gap-2 p-2 bg-[var(--bg-primary)] rounded border border-[var(--border-secondary)]">
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-xs text-[var(--text-primary)] truncate">{ingredient.name}</p>
                        <p className="text-xs text-[var(--text-tertiary)]">{ingredient.unit_of_measure}</p>
                      </div>
                    </div>
                  ))}
                  {ingredients.length > 8 && (
                    <div className="flex items-center justify-center p-2 text-sm text-[var(--text-secondary)]">
                      +{ingredients.length - 8} {t('setup_wizard:review.more', 'more')}
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* Recipes Section */}
            {recipes.length > 0 && (
              <div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-secondary)]">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="font-semibold text-[var(--text-primary)] flex items-center gap-2">
                    <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    {t('setup_wizard:review.recipes_title', 'Recipes')}
                    <span className="text-sm font-normal text-[var(--text-tertiary)]">({recipes.length})</span>
                  </h3>
                  {avgRecipeIngredients > 0 && (
                    <p className="text-sm text-[var(--text-secondary)]">
                      {t('setup_wizard:review.avg_ingredients', 'Avg ingredients')}: <span className="font-medium text-[var(--text-primary)]">{avgRecipeIngredients.toFixed(1)}</span>
                    </p>
                  )}
                </div>
                <div className="space-y-2">
                  {recipes.slice(0, 4).map((recipe) => (
                    <div key={recipe.id} className="flex items-center justify-between p-3 bg-[var(--bg-primary)] rounded border border-[var(--border-secondary)]">
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-sm text-[var(--text-primary)] truncate">{recipe.name}</p>
                        <div className="flex items-center gap-3 mt-1">
                          <span className="text-xs text-[var(--text-tertiary)]">
                            {recipe.ingredients?.length || 0} {t('setup_wizard:review.ingredients', 'ingredients')}
                          </span>
                          <span className="text-xs text-[var(--text-tertiary)]">
                            {t('setup_wizard:review.yields', 'Yields')}: {recipe.yield_quantity} {recipe.yield_unit}
                          </span>
                          {recipe.category && (
                            <span className="text-xs px-2 py-0.5 bg-[var(--bg-secondary)] rounded-full text-[var(--text-secondary)]">
                              {recipe.category}
                            </span>
                          )}
                        </div>
                      </div>
                      {recipe.estimated_cost_per_unit && (
                        <div className="ml-4 text-right">
                          <p className="text-xs text-[var(--text-tertiary)]">{t('setup_wizard:review.cost', 'Cost')}</p>
                          <p className="font-medium text-sm text-[var(--text-primary)]">${Number(recipe.estimated_cost_per_unit).toFixed(2)}</p>
                        </div>
                      )}
                    </div>
                  ))}
                  {recipes.length > 4 && (
                    <div className="flex items-center justify-center p-2 text-sm text-[var(--text-secondary)]">
                      +{recipes.length - 4} {t('setup_wizard:review.more', 'more')}
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* Quality Templates Section */}
            {qualityTemplates.length > 0 && (
              <div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-secondary)]">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="font-semibold text-[var(--text-primary)] flex items-center gap-2">
                    <svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {t('setup_wizard:review.quality_title', 'Quality Check Templates')}
                    <span className="text-sm font-normal text-[var(--text-tertiary)]">({qualityTemplates.length})</span>
                  </h3>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                  {qualityTemplates.map((template) => (
                    <div key={template.id} className="flex items-center gap-2 p-2 bg-[var(--bg-primary)] rounded border border-[var(--border-secondary)]">
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-sm text-[var(--text-primary)] truncate">{template.name}</p>
                        <p className="text-xs text-[var(--text-tertiary)]">{template.check_type}</p>
                      </div>
                      {template.is_required && (
                        <span className="flex-shrink-0 text-xs px-2 py-0.5 bg-red-500/10 text-red-600 rounded-full">
                          {t('setup_wizard:review.required', 'Required')}
                        </span>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Summary Message */}
          <div className="bg-gradient-to-r from-[var(--color-success)]/10 to-[var(--color-primary)]/10 border border-[var(--color-success)]/20 rounded-lg p-6 text-center">
            <svg className="w-12 h-12 text-[var(--color-success)] mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            <h3 className="font-semibold text-lg text-[var(--text-primary)] mb-2">
              {t('setup_wizard:review.ready_title', 'Your Bakery is Ready to Go!')}
            </h3>
            <p className="text-[var(--text-secondary)] max-w-xl mx-auto">
              {t('setup_wizard:review.ready_message',
                "You've successfully configured {{suppliers}} suppliers, {{ingredients}} ingredients, and {{recipes}} recipes. Click 'Complete Setup' to finish and start using the system.",
                { suppliers: suppliers.length, ingredients: ingredients.length, recipes: recipes.length }
              )}
            </p>
          </div>

          {/* Help Text */}
          <div className="text-center">
            <p className="text-sm text-[var(--text-tertiary)] flex items-center justify-center gap-2">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              {t('setup_wizard:review.help', 'Need to make changes? Use the "Back" button to return to any step.')}
            </p>
          </div>
        </>
      )}

      {/* Continue button - only shown when used in onboarding context */}
      {onComplete && (
        <div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
          <button
            onClick={() => onComplete()}
            disabled={canContinue === false}
            className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
          >
            {t('setup_wizard:navigation.continue', 'Continue →')}
          </button>
        </div>
      )}
    </div>
  );
};