import React, { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useCurrentTenant } from '../../../stores/tenant.store';
import { useIngredients } from '../../../api/hooks/inventory';
import { useSuppliers } from '../../../api/hooks/suppliers';
import { useRecipes } from '../../../api/hooks/recipes';
import { useQualityTemplates } from '../../../api/hooks/qualityTemplates';
import { CheckCircle2, Circle, AlertCircle, ChevronRight, Package, Users, BookOpen, Shield } from 'lucide-react';

interface ConfigurationSection {
  id: string;
  title: string;
  icon: React.ElementType;
  path: string;
  count: number;
  minimum: number;
  recommended: number;
  isOptional?: boolean;
  isComplete: boolean;
  nextAction?: string;
}

export const ConfigurationProgressWidget: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const currentTenant = useCurrentTenant();
  const tenantId = currentTenant?.id || '';

  // Fetch configuration data
  const { data: ingredients = [], isLoading: loadingIngredients } = useIngredients(tenantId, {}, { enabled: !!tenantId });
  const { data: suppliersData, isLoading: loadingSuppliers } = useSuppliers(tenantId, { enabled: !!tenantId });
  const suppliers = suppliersData?.suppliers || [];
  const { data: recipesData, isLoading: loadingRecipes } = useRecipes(tenantId, { enabled: !!tenantId });
  const recipes = recipesData?.recipes || [];
  const { data: qualityData, isLoading: loadingQuality } = useQualityTemplates(tenantId, { enabled: !!tenantId });
  const qualityTemplates = qualityData?.templates || [];

  const isLoading = loadingIngredients || loadingSuppliers || loadingRecipes || loadingQuality;

  // Calculate configuration sections
  const sections: ConfigurationSection[] = useMemo(() => [
    {
      id: 'inventory',
      title: t('dashboard:config.inventory', 'Inventory'),
      icon: Package,
      path: '/app/operations/inventory',
      count: ingredients.length,
      minimum: 3,
      recommended: 10,
      isComplete: ingredients.length >= 3,
      nextAction: ingredients.length < 3 ? t('dashboard:config.add_ingredients', 'Add at least {{count}} ingredients', { count: 3 - ingredients.length }) : undefined
    },
    {
      id: 'suppliers',
      title: t('dashboard:config.suppliers', 'Suppliers'),
      icon: Users,
      path: '/app/operations/suppliers',
      count: suppliers.length,
      minimum: 1,
      recommended: 3,
      isComplete: suppliers.length >= 1,
      nextAction: suppliers.length < 1 ? t('dashboard:config.add_supplier', 'Add your first supplier') : undefined
    },
    {
      id: 'recipes',
      title: t('dashboard:config.recipes', 'Recipes'),
      icon: BookOpen,
      path: '/app/operations/recipes',
      count: recipes.length,
      minimum: 1,
      recommended: 3,
      isComplete: recipes.length >= 1,
      nextAction: recipes.length < 1 ? t('dashboard:config.add_recipe', 'Create your first recipe') : undefined
    },
    {
      id: 'quality',
      title: t('dashboard:config.quality', 'Quality Standards'),
      icon: Shield,
      path: '/app/operations/production/quality',
      count: qualityTemplates.length,
      minimum: 0,
      recommended: 2,
      isOptional: true,
      isComplete: true, // Optional, so always "complete"
      nextAction: qualityTemplates.length < 2 ? t('dashboard:config.add_quality', 'Add quality checks (optional)') : undefined
    }
  ], [ingredients.length, suppliers.length, recipes.length, qualityTemplates.length, t]);

  // Calculate overall progress
  const { completedSections, totalSections, progressPercentage, nextIncompleteSection } = useMemo(() => {
    const requiredSections = sections.filter(s => !s.isOptional);
    const completed = requiredSections.filter(s => s.isComplete).length;
    const total = requiredSections.length;
    const percentage = Math.round((completed / total) * 100);
    const nextIncomplete = sections.find(s => !s.isComplete && !s.isOptional);

    return {
      completedSections: completed,
      totalSections: total,
      progressPercentage: percentage,
      nextIncompleteSection: nextIncomplete
    };
  }, [sections]);

  const isFullyConfigured = progressPercentage === 100;

  // Determine unlocked features
  const unlockedFeatures = useMemo(() => {
    const features: string[] = [];
    if (ingredients.length >= 3) features.push(t('dashboard:config.features.inventory_tracking', 'Inventory Tracking'));
    if (suppliers.length >= 1 && ingredients.length >= 3) features.push(t('dashboard:config.features.purchase_orders', 'Purchase Orders'));
    if (recipes.length >= 1 && ingredients.length >= 3) features.push(t('dashboard:config.features.production_planning', 'Production Planning'));
    if (recipes.length >= 1 && ingredients.length >= 3 && suppliers.length >= 1) features.push(t('dashboard:config.features.cost_analysis', 'Cost Analysis'));
    return features;
  }, [ingredients.length, suppliers.length, recipes.length, t]);

  if (isLoading) {
    return (
      <div className="bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg p-6">
        <div className="flex items-center gap-3">
          <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-[var(--color-primary)]"></div>
          <span className="text-sm text-[var(--text-secondary)]">{t('common:loading', 'Loading configuration...')}</span>
        </div>
      </div>
    );
  }

  // Don't show widget if fully configured
  if (isFullyConfigured) {
    return null;
  }

  return (
    <div className="bg-gradient-to-br from-[var(--bg-primary)] to-[var(--bg-secondary)] border-2 border-[var(--color-primary)]/20 rounded-xl shadow-lg overflow-hidden">
      {/* Header */}
      <div className="p-6 pb-4 border-b border-[var(--border-secondary)]">
        <div className="flex items-start justify-between mb-3">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center">
              <AlertCircle className="w-5 h-5 text-[var(--color-primary)]" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                🏗️ {t('dashboard:config.title', 'Complete Your Bakery Setup')}
              </h3>
              <p className="text-sm text-[var(--text-secondary)] mt-0.5">
                {t('dashboard:config.subtitle', 'Configure essential features to get started')}
              </p>
            </div>
          </div>
        </div>

        {/* Progress Bar */}
        <div className="mt-4">
          <div className="flex items-center justify-between text-sm mb-2">
            <span className="font-medium text-[var(--text-primary)]">
              {completedSections}/{totalSections} {t('dashboard:config.sections_complete', 'sections complete')}
            </span>
            <span className="text-[var(--color-primary)] font-bold">{progressPercentage}%</span>
          </div>
          <div className="w-full h-2.5 bg-[var(--bg-tertiary)] rounded-full overflow-hidden">
            <div
              className="h-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-success)] transition-all duration-500 ease-out"
              style={{ width: `${progressPercentage}%` }}
            />
          </div>
        </div>
      </div>

      {/* Sections List */}
      <div className="p-6 pt-4 space-y-3">
        {sections.map((section) => {
          const Icon = section.icon;
          const meetsRecommended = section.count >= section.recommended;

          return (
            <button
              key={section.id}
              onClick={() => navigate(section.path)}
              className={`w-full p-4 rounded-lg border-2 transition-all duration-200 text-left group ${
                section.isComplete
                  ? 'border-[var(--color-success)]/30 bg-[var(--color-success)]/5 hover:bg-[var(--color-success)]/10'
                  : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)] hover:bg-[var(--bg-secondary)]'
              }`}
            >
              <div className="flex items-center gap-4">
                {/* Status Icon */}
                <div className={`flex-shrink-0 ${
                  section.isComplete
                    ? 'text-[var(--color-success)]'
                    : 'text-[var(--text-tertiary)]'
                }`}>
                  {section.isComplete ? (
                    <CheckCircle2 className="w-5 h-5" />
                  ) : (
                    <Circle className="w-5 h-5" />
                  )}
                </div>

                {/* Section Icon */}
                <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                  section.isComplete
                    ? 'bg-[var(--color-success)]/10 text-[var(--color-success)]'
                    : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
                }`}>
                  <Icon className="w-5 h-5" />
                </div>

                {/* Content */}
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <h4 className="font-semibold text-[var(--text-primary)]">{section.title}</h4>
                    {section.isOptional && (
                      <span className="text-xs px-2 py-0.5 bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] rounded-full">
                        {t('common:optional', 'Optional')}
                      </span>
                    )}
                  </div>

                  <div className="flex items-center gap-3 text-sm">
                    <span className={`font-medium ${
                      section.isComplete
                        ? 'text-[var(--color-success)]'
                        : 'text-[var(--text-secondary)]'
                    }`}>
                      {section.count} {t('dashboard:config.added', 'added')}
                    </span>

                    {!section.isComplete && section.nextAction && (
                      <span className="text-[var(--text-tertiary)]">
                        • {section.nextAction}
                      </span>
                    )}

                    {section.isComplete && !meetsRecommended && (
                      <span className="text-[var(--text-tertiary)]">
                        • {section.recommended} {t('dashboard:config.recommended', 'recommended')}
                      </span>
                    )}
                  </div>
                </div>

                {/* Chevron */}
                <ChevronRight className="w-5 h-5 text-[var(--text-tertiary)] group-hover:text-[var(--color-primary)] transition-colors flex-shrink-0" />
              </div>
            </button>
          );
        })}
      </div>

      {/* Next Action / Unlocked Features */}
      <div className="px-6 pb-6">
        {nextIncompleteSection ? (
          <div className="p-4 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/30 rounded-lg">
            <div className="flex items-start gap-3">
              <AlertCircle className="w-5 h-5 text-[var(--color-warning)] flex-shrink-0 mt-0.5" />
              <div className="flex-1">
                <p className="text-sm font-medium text-[var(--text-primary)] mb-1">
                  👉 {t('dashboard:config.next_step', 'Next Step')}
                </p>
                <p className="text-sm text-[var(--text-secondary)] mb-3">
                  {nextIncompleteSection.nextAction}
                </p>
                <button
                  onClick={() => navigate(nextIncompleteSection.path)}
                  className="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] transition-colors text-sm font-medium inline-flex items-center gap-2"
                >
                  {t('dashboard:config.configure', 'Configure')} {nextIncompleteSection.title}
                  <ChevronRight className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        ) : unlockedFeatures.length > 0 && (
          <div className="p-4 bg-[var(--color-success)]/10 border border-[var(--color-success)]/30 rounded-lg">
            <div className="flex items-start gap-3">
              <CheckCircle2 className="w-5 h-5 text-[var(--color-success)] flex-shrink-0 mt-0.5" />
              <div>
                <p className="text-sm font-medium text-[var(--text-primary)] mb-2">
                  🎉 {t('dashboard:config.features_unlocked', 'Features Unlocked!')}
                </p>
                <ul className="space-y-1">
                  {unlockedFeatures.map((feature, idx) => (
                    <li key={idx} className="text-sm text-[var(--text-secondary)] flex items-center gap-2">
                      <CheckCircle2 className="w-3 h-3 text-[var(--color-success)]" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
