// ================================================================
// frontend/src/components/dashboard/SetupWizardBlocker.tsx
// ================================================================
/**
 * Setup Wizard Blocker - Critical Path Onboarding
 *
 * JTBD: "I cannot operate my bakery without basic configuration"
 *
 * This component blocks the entire dashboard when critical setup is incomplete.
 * Shows a full-page wizard to guide users through essential configuration.
 *
 * Triggers when:
 * - 0-2 critical sections complete (<50% progress)
 * - Missing: Ingredients (<3) OR Suppliers (<1) OR Recipes (<1)
 */

import React, { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { AlertCircle, Package, Users, BookOpen, ChevronRight, CheckCircle2, Circle } from 'lucide-react';

interface SetupSection {
  id: string;
  title: string;
  description: string;
  icon: React.ElementType;
  path: string;
  isComplete: boolean;
  count: number;
  minimum: number;
}

interface SetupWizardBlockerProps {
  criticalSections: SetupSection[];
  onComplete?: () => void;
}

export function SetupWizardBlocker({ criticalSections = [], onComplete }: SetupWizardBlockerProps) {
  const { t } = useTranslation(['dashboard', 'common']);
  const navigate = useNavigate();

  // Calculate progress
  const { completedCount, totalCount, progressPercentage, nextSection } = useMemo(() => {
    // Guard against undefined or invalid criticalSections
    if (!criticalSections || !Array.isArray(criticalSections) || criticalSections.length === 0) {
      return {
        completedCount: 0,
        totalCount: 0,
        progressPercentage: 0,
        nextSection: undefined,
      };
    }

    const completed = criticalSections.filter(s => s.isComplete).length;
    const total = criticalSections.length;
    const percentage = Math.round((completed / total) * 100);
    const next = criticalSections.find(s => !s.isComplete);

    return {
      completedCount: completed,
      totalCount: total,
      progressPercentage: percentage,
      nextSection: next,
    };
  }, [criticalSections]);

  const handleSectionClick = (path: string) => {
    navigate(path);
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4" style={{ backgroundColor: 'var(--bg-secondary)' }}>
      <div className="w-full max-w-3xl">
        {/* Warning Header */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-20 h-20 rounded-full mb-4" style={{ backgroundColor: 'var(--color-warning-100)' }}>
            <AlertCircle className="w-10 h-10" style={{ color: 'var(--color-warning-600)' }} />
          </div>
          <h1 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: 'var(--text-primary)' }}>
            ⚠️ {t('dashboard:setup_blocker.title', 'Configuración Requerida')}
          </h1>
          <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
            {t('dashboard:setup_blocker.subtitle', 'Necesitas completar la configuración básica antes de usar el panel de control')}
          </p>
        </div>

        {/* Progress Card */}
        <div className="bg-[var(--bg-primary)] border-2 border-[var(--border-primary)] rounded-xl shadow-xl p-8">
          {/* Progress Bar */}
          <div className="mb-8">
            <div className="flex items-center justify-between text-sm mb-3">
              <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>
                {t('dashboard:setup_blocker.progress', 'Progreso de Configuración')}
              </span>
              <span className="font-bold" style={{ color: 'var(--color-primary)' }}>
                {completedCount}/{totalCount} ({progressPercentage}%)
              </span>
            </div>
            <div className="w-full h-3 bg-[var(--bg-tertiary)] rounded-full overflow-hidden">
              <div
                className="h-full transition-all duration-500 ease-out"
                style={{
                  width: `${progressPercentage}%`,
                  background: 'linear-gradient(90deg, var(--color-primary), var(--color-success))',
                }}
              />
            </div>
          </div>

          {/* Critical Sections List */}
          <div className="space-y-4 mb-8">
            <h3 className="text-lg font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
              {t('dashboard:setup_blocker.required_steps', 'Pasos Requeridos')}
            </h3>

            {criticalSections.map((section, index) => {
              const Icon = section.icon || (() => <div>⚙️</div>);
              const isNext = section === nextSection;

              return (
                <button
                  key={section.id}
                  onClick={() => handleSectionClick(section.path)}
                  className={`w-full p-5 rounded-lg border-2 transition-all duration-200 text-left group ${
                    section.isComplete
                      ? 'border-[var(--color-success)]/30 bg-[var(--color-success)]/5'
                      : isNext
                      ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5 hover:bg-[var(--color-primary)]/10 shadow-md'
                      : 'border-[var(--border-secondary)] bg-[var(--bg-secondary)] hover:border-[var(--color-primary)] hover:bg-[var(--bg-primary)]'
                  }`}
                >
                  <div className="flex items-start gap-4">
                    {/* Step Number / Status */}
                    <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm ${
                      section.isComplete
                        ? 'bg-[var(--color-success)] text-white'
                        : isNext
                        ? 'bg-[var(--color-primary)] text-white'
                        : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
                    }`}>
                      {section.isComplete ? (
                        <CheckCircle2 className="w-5 h-5" />
                      ) : (
                        <span>{index + 1}</span>
                      )}
                    </div>

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

                    {/* Content */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <h4 className="font-bold text-lg" style={{ color: 'var(--text-primary)' }}>
                          {section.title}
                        </h4>
                        {isNext && !section.isComplete && (
                          <span className="px-2 py-0.5 bg-[var(--color-primary)] text-white rounded-full text-xs font-semibold">
                            {t('dashboard:setup_blocker.next', 'Siguiente')}
                          </span>
                        )}
                      </div>

                      <p className="text-sm mb-2" style={{ color: 'var(--text-secondary)' }}>
                        {section.description}
                      </p>

                      <div className="flex items-center gap-2 text-sm">
                        {section.isComplete ? (
                          <span className="font-semibold" style={{ color: 'var(--color-success)' }}>
                            ✅ {section.count} {t('dashboard:setup_blocker.added', 'agregado(s)')}
                          </span>
                        ) : (
                          <span className="font-semibold" style={{ color: 'var(--color-warning-700)' }}>
                            ⚠️ {t('dashboard:setup_blocker.minimum_required', 'Mínimo requerido')}: {section.minimum}
                          </span>
                        )}
                      </div>
                    </div>

                    {/* Chevron */}
                    <ChevronRight className={`w-6 h-6 flex-shrink-0 transition-transform group-hover:translate-x-1 ${
                      isNext ? 'text-[var(--color-primary)]' : 'text-[var(--text-tertiary)]'
                    }`} />
                  </div>
                </button>
              );
            })}
          </div>

          {/* Next Step CTA */}
          {nextSection && (
            <div className="p-5 rounded-xl border-2 border-[var(--color-primary)]/30" style={{ backgroundColor: 'var(--color-primary)]/5' }}>
              <div className="flex items-start gap-4">
                <AlertCircle className="w-6 h-6 flex-shrink-0" style={{ color: 'var(--color-primary)' }} />
                <div className="flex-1">
                  <h4 className="font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
                    👉 {t('dashboard:setup_blocker.start_with', 'Empieza por')}: {nextSection.title}
                  </h4>
                  <p className="text-sm mb-4" style={{ color: 'var(--text-secondary)' }}>
                    {nextSection.description}
                  </p>
                  <button
                    onClick={() => handleSectionClick(nextSection.path)}
                    className="px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl inline-flex items-center gap-2"
                    style={{
                      background: 'linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%)',
                      color: 'white',
                    }}
                  >
                    {t('dashboard:setup_blocker.configure_now', 'Configurar Ahora')} {nextSection.title}
                    <ChevronRight className="w-5 h-5" />
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* Help Text */}
          <div className="mt-6 pt-6 border-t" style={{ borderColor: 'var(--border-secondary)' }}>
            <p className="text-sm text-center" style={{ color: 'var(--text-tertiary)' }}>
              💡 {t('dashboard:setup_blocker.help_text', 'Una vez completes estos pasos, podrás acceder al panel de control completo y comenzar a usar todas las funciones de IA')}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}