import React from 'react';
import { useNavigate } from 'react-router-dom';
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 navigate = useNavigate();
  const currentTenant = useCurrentTenant();

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

  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)]">
          ¡Bienvenido a Bakery IA!
        </h1>
        <p className="text-lg text-[var(--text-secondary)] max-w-2xl mx-auto">
          Tu panadería <strong>{currentTenant?.name}</strong> está lista para usar nuestro sistema de gestión inteligente.
        </p>
      </div>

      {/* Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
        <div className="bg-[var(--bg-secondary)] rounded-lg p-6 text-center">
          <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg mx-auto mb-4 flex items-center justify-center">
            <svg className="w-6 h-6 text-[var(--color-primary)]" 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>
          <h3 className="font-semibold mb-2">Panadería Registrada</h3>
          <p className="text-sm text-[var(--text-secondary)]">
            Tu información empresarial está configurada y lista
          </p>
        </div>

        <div className="bg-[var(--bg-secondary)] rounded-lg p-6 text-center">
          <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg mx-auto mb-4 flex items-center justify-center">
            <svg className="w-6 h-6 text-[var(--color-primary)]" 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>
          <h3 className="font-semibold mb-2">Inventario Creado</h3>
          <p className="text-sm text-[var(--text-secondary)]">
            Tus productos base están configurados con datos iniciales
          </p>
        </div>

        <div className="bg-[var(--bg-secondary)] rounded-lg p-6 text-center">
          <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg mx-auto mb-4 flex items-center justify-center">
            <svg className="w-6 h-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
            </svg>
          </div>
          <h3 className="font-semibold mb-2">IA Entrenada</h3>
          <p className="text-sm text-[var(--text-secondary)]">
            Tu modelo de inteligencia artificial está listo para predecir demanda
          </p>
        </div>
      </div>

      {/* Next Steps */}
      <div className="bg-[var(--bg-secondary)] rounded-lg p-6 max-w-2xl mx-auto text-left">
        <h3 className="font-semibold mb-4 text-center">Próximos Pasos</h3>
        <div className="space-y-3">
          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-primary)] text-white rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0 mt-0.5">
              1
            </div>
            <div>
              <p className="font-medium">Explora el Dashboard</p>
              <p className="text-sm text-[var(--text-secondary)]">
                Revisa las métricas principales y el estado de tu inventario
              </p>
            </div>
          </div>
          
          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-primary)] text-white rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0 mt-0.5">
              2
            </div>
            <div>
              <p className="font-medium">Registra Ventas Diarias</p>
              <p className="text-sm text-[var(--text-secondary)]">
                Mantén tus datos actualizados para mejores predicciones
              </p>
            </div>
          </div>
          
          <div className="flex items-start gap-3">
            <div className="w-6 h-6 bg-[var(--color-primary)] text-white rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0 mt-0.5">
              3
            </div>
            <div>
              <p className="font-medium">Configura Alertas</p>
              <p className="text-sm text-[var(--text-secondary)]">
                Recibe notificaciones sobre inventario bajo y productos próximos a vencer
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Action Button */}
      <div className="pt-4">
        <Button
          onClick={handleGetStarted}
          size="lg"
          className="px-8"
        >
          Comenzar a Usar Bakery IA
        </Button>
      </div>

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