import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button } from '../../../ui/Button';
import { useCurrentTenant } from '../../../../stores/tenant.store';

interface CompletionStepProps {
  onNext: () => void;
  onPrevious: () => void;
  onComplete: (data?: any) => void;
  isFirstStep: boolean;
  isLastStep: boolean;
}

export const CompletionStep: React.FC<CompletionStepProps> = ({
  onComplete
}) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const currentTenant = useCurrentTenant();

  const handleStartUsingSystem = () => {
    onComplete({ redirectTo: '/app/dashboard' });
    navigate('/app/dashboard');
  };

  const handleExploreDashboard = () => {
    onComplete({ redirectTo: '/app/dashboard' });
    navigate('/app/dashboard');
  };

  return (
    <div className="text-center space-y-8">
      {/* Success Icon */}
      <div className="mx-auto w-24 h-24 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
        <svg className="w-12 h-12 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
        </svg>
      </div>

      {/* Success Message */}
      <div className="space-y-4">
        <h1 className="text-3xl font-bold text-[var(--text-primary)]">
          {t('onboarding:completion.congratulations', '¡Felicidades! Tu Sistema Está Listo')}
        </h1>
        <p className="text-lg text-[var(--text-secondary)] max-w-2xl mx-auto">
          {t('onboarding:completion.all_configured', 'Has configurado exitosamente {{name}} con nuestro sistema de gestión inteligente. Todo está listo para empezar a optimizar tu panadería.', { name: currentTenant?.name })}
        </p>
      </div>

      {/* What You Configured */}
      <div className="bg-[var(--bg-secondary)] rounded-lg p-6 max-w-3xl mx-auto text-left">
        <h3 className="font-semibold text-lg mb-4 text-center text-[var(--text-primary)]">
          {t('onboarding:completion.what_configured', 'Lo Que Has Configurado')}
        </h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-success)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div>
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('onboarding:completion.bakery_info', 'Información de Panadería')}</p>
              <p className="text-xs text-[var(--text-secondary)]">{t('onboarding:completion.bakery_info_desc', 'Datos básicos registrados')}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-success)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div>
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('onboarding:completion.inventory_ai', 'Inventario con IA')}</p>
              <p className="text-xs text-[var(--text-secondary)]">{t('onboarding:completion.inventory_ai_desc', 'Productos analizados y categorizados')}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-success)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div>
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('onboarding:completion.suppliers_added', 'Proveedores Agregados')}</p>
              <p className="text-xs text-[var(--text-secondary)]">{t('onboarding:completion.suppliers_added_desc', 'Red de suministro configurada')}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-success)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div>
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('onboarding:completion.recipes_configured', 'Recetas Configuradas')}</p>
              <p className="text-xs text-[var(--text-secondary)]">{t('onboarding:completion.recipes_configured_desc', 'Producción lista para usar')}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-success)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div>
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('onboarding:completion.quality_set', 'Calidad Establecida')}</p>
              <p className="text-xs text-[var(--text-secondary)]">{t('onboarding:completion.quality_set_desc', 'Estándares definidos')}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-success)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div>
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('onboarding:completion.team_invited', 'Equipo Invitado')}</p>
              <p className="text-xs text-[var(--text-secondary)]">{t('onboarding:completion.team_invited_desc', 'Colaboradores configurados')}</p>
            </div>
          </div>

          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-success)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <div>
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('onboarding:completion.ml_model_trained', 'Modelo IA Entrenado')}</p>
              <p className="text-xs text-[var(--text-secondary)]">{t('onboarding:completion.ml_model_trained_desc', 'Predicciones personalizadas activas')}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Next Steps */}
      <div className="bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-primary)]/5 border border-[var(--color-primary)]/20 rounded-lg p-6 max-w-2xl mx-auto text-left">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 bg-[var(--color-primary)] text-white rounded-full flex items-center justify-center text-xl font-bold flex-shrink-0">
            🚀
          </div>
          <div>
            <h3 className="font-semibold text-lg mb-2 text-[var(--text-primary)]">{t('onboarding:completion.ready_to_start', '¡Listo para Empezar!')}</h3>
            <p className="text-sm text-[var(--text-secondary)] mb-3">
              {t('onboarding:completion.explore_message', 'Ahora puedes explorar el panel de control y comenzar a gestionar tu panadería con inteligencia artificial.')}
            </p>
            <div className="space-y-2">
              <div className="flex items-start gap-2 text-sm">
                <svg className="w-4 h-4 text-[var(--color-primary)] mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
                <span className="text-[var(--text-secondary)]">{t('onboarding:completion.view_analytics', 'Ve análisis y predicciones de demanda')}</span>
              </div>
              <div className="flex items-start gap-2 text-sm">
                <svg className="w-4 h-4 text-[var(--color-primary)] mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span className="text-[var(--text-secondary)]">{t('onboarding:completion.manage_operations', 'Gestiona producción y operaciones diarias')}</span>
              </div>
              <div className="flex items-start gap-2 text-sm">
                <svg className="w-4 h-4 text-[var(--color-primary)] mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                </svg>
                <span className="text-[var(--text-secondary)]">{t('onboarding:completion.optimize_costs', 'Optimiza costos y reduce desperdicios')}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="flex justify-center items-center pt-4">
        <Button
          onClick={handleExploreDashboard}
          size="lg"
          className="px-8"
        >
          {t('onboarding:completion.go_to_dashboard', 'Ir al Panel de Control →')}
        </Button>
      </div>

      {/* Help Text */}
      <div className="text-sm text-[var(--text-tertiary)]">
        {t('onboarding:completion.need_help', '¿Necesitas ayuda? Visita nuestra')}{' '}
        <a
          href="/help"
          className="text-[var(--color-primary)] hover:underline"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('onboarding:completion.user_guide', 'guía de usuario')}
        </a>{' '}
        {t('onboarding:completion.or_contact', 'o contacta a nuestro')}{' '}
        <a
          href="mailto:support@bakery-ia.com"
          className="text-[var(--color-primary)] hover:underline"
        >
          {t('onboarding:completion.support_team', 'equipo de soporte')}
        </a>
      </div>
    </div>
  );
};