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';
import { BarChart, ShoppingCart, Users, TrendingUp, Zap, CheckCircle2 } from 'lucide-react';

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 handleExploreDashboard = async () => {
    // CRITICAL: Ensure tenant access is loaded before navigating
    console.log('🔄 [CompletionStep] Ensuring tenant setup is complete before dashboard navigation...');

    // Mark onboarding as fully completed before navigating
    // This ensures the dashboard doesn't redirect back to onboarding
    await onComplete({
      redirectTo: '/app/dashboard',
      markFullyCompleted: true
    });

    // Small delay to ensure backend state updates complete
    await new Promise(resolve => setTimeout(resolve, 800));

    console.log('✅ [CompletionStep] Navigating to dashboard...');
    navigate('/app/dashboard');
  };

  return (
    <div className="text-center space-y-8 max-w-4xl mx-auto px-4 animate-fade-in">
      {/* Success Icon */}
      <div className="relative mx-auto w-32 h-32">
        <div className="absolute inset-0 bg-[var(--color-success)]/20 rounded-full animate-pulse"></div>
        <div className="relative w-32 h-32 bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success)]/80 rounded-full flex items-center justify-center shadow-xl">
          <CheckCircle2 className="w-16 h-16 text-white" />
        </div>
      </div>

      {/* Success Message */}
      <div className="space-y-4">
        <h1 className="text-3xl md:text-4xl font-bold text-[var(--text-primary)]">
          {t('onboarding:completion.congratulations', 'Congratulations! Your System Is Ready')}
        </h1>
        <p className="text-base md:text-lg text-[var(--text-secondary)] max-w-2xl mx-auto">
          {t('onboarding:completion.all_configured', 'You have successfully configured {name} with our intelligent management system. Everything is ready to start optimizing your bakery.', { name: currentTenant?.name })}
        </p>
      </div>

      {/* What You Configured */}
      <div className="bg-[var(--bg-secondary)] rounded-xl p-6 md:p-7 max-w-2xl mx-auto text-left border border-[var(--border-color)]">
        <h3 className="font-bold text-lg md:text-xl mb-5 text-center text-[var(--text-primary)]">
          {t('onboarding:completion.what_configured', 'What You Have Configured')}
        </h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-[var(--color-success)] flex-shrink-0" />
            <span className="text-sm text-[var(--text-primary)]">{t('onboarding:completion.bakery_info', 'Bakery Information')}</span>
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-[var(--color-success)] flex-shrink-0" />
            <span className="text-sm text-[var(--text-primary)]">{t('onboarding:completion.inventory_ai', 'AI Inventory')}</span>
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-[var(--color-success)] flex-shrink-0" />
            <span className="text-sm text-[var(--text-primary)]">{t('onboarding:completion.suppliers_added', 'Suppliers Added')}</span>
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-[var(--color-success)] flex-shrink-0" />
            <span className="text-sm text-[var(--text-primary)]">{t('onboarding:completion.recipes_configured', 'Recipes Configured')}</span>
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-[var(--color-success)] flex-shrink-0" />
            <span className="text-sm text-[var(--text-primary)]">{t('onboarding:completion.quality_set', 'Quality Standards')}</span>
          </div>
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-[var(--color-success)] flex-shrink-0" />
            <span className="text-sm text-[var(--text-primary)]">{t('onboarding:completion.team_invited', 'Team Members')}</span>
          </div>
        </div>
      </div>

      {/* Quick Access Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
        <button
          onClick={() => navigate('/app/dashboard')}
          className="p-4 bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-all duration-200 hover:shadow-lg text-left group"
        >
          <BarChart className="w-8 h-8 text-[var(--color-primary)] mb-2 group-hover:scale-110 transition-transform" />
          <h4 className="font-semibold text-sm text-[var(--text-primary)]">
            {t('onboarding:completion.quick.analytics', 'Analytics')}
          </h4>
        </button>

        <button
          onClick={() => navigate('/app/inventory')}
          className="p-4 bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-all duration-200 hover:shadow-lg text-left group"
        >
          <ShoppingCart className="w-8 h-8 text-[var(--color-success)] mb-2 group-hover:scale-110 transition-transform" />
          <h4 className="font-semibold text-sm text-[var(--text-primary)]">
            {t('onboarding:completion.quick.inventory', 'Inventory')}
          </h4>
        </button>

        <button
          onClick={() => navigate('/app/procurement')}
          className="p-4 bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-all duration-200 hover:shadow-lg text-left group"
        >
          <Users className="w-8 h-8 text-[var(--color-info)] mb-2 group-hover:scale-110 transition-transform" />
          <h4 className="font-semibold text-sm text-[var(--text-primary)]">
            {t('onboarding:completion.quick.procurement', 'Purchases')}
          </h4>
        </button>

        <button
          onClick={() => navigate('/app/production')}
          className="p-4 bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-all duration-200 hover:shadow-lg text-left group"
        >
          <TrendingUp className="w-8 h-8 text-[var(--color-warning)] mb-2 group-hover:scale-110 transition-transform" />
          <h4 className="font-semibold text-sm text-[var(--text-primary)]">
            {t('onboarding:completion.quick.production', 'Production')}
          </h4>
        </button>
      </div>

      {/* Tips for Success */}
      <div className="bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-success)]/5 border border-[var(--color-primary)]/20 rounded-xl p-6 max-w-2xl mx-auto text-left">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-success)] text-white rounded-lg flex items-center justify-center flex-shrink-0">
            <Zap className="w-6 h-6" />
          </div>
          <div className="flex-1">
            <h3 className="font-bold text-lg mb-3 text-[var(--text-primary)]">
              {t('onboarding:completion.tips_title', 'Tips to Maximize Your Success')}
            </h3>
            <ul className="space-y-2 text-sm text-[var(--text-secondary)]">
              <li className="flex items-start gap-2">
                <CheckCircle2 className="w-4 h-4 text-[var(--color-success)] mt-0.5 flex-shrink-0" />
                <span>{t('onboarding:completion.tip1', 'Review the dashboard daily for insights')}</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 className="w-4 h-4 text-[var(--color-success)] mt-0.5 flex-shrink-0" />
                <span>{t('onboarding:completion.tip2', 'Update inventory regularly')}</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 className="w-4 h-4 text-[var(--color-success)] mt-0.5 flex-shrink-0" />
                <span>{t('onboarding:completion.tip3', 'Use AI predictions for planning')}</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 className="w-4 h-4 text-[var(--color-success)] mt-0.5 flex-shrink-0" />
                <span>{t('onboarding:completion.tip4', 'Invite your team to collaborate')}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Primary Action Button */}
      <div className="flex justify-center pt-4">
        <Button
          onClick={handleExploreDashboard}
          size="lg"
          className="px-12 py-4 text-base md:text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
        >
          {t('onboarding:completion.go_to_dashboard', 'Start Using the System')}
        </Button>
      </div>

      {/* Help Text */}
      <div className="text-sm text-[var(--text-tertiary)]">
        {t('onboarding:completion.need_help', 'Need help? Visit our')}{' '}
        <a
          href="/help"
          className="text-[var(--color-primary)] hover:underline"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('onboarding:completion.user_guide', 'user guide')}
        </a>{' '}
        {t('onboarding:completion.or_contact', 'or contact our')}{' '}
        <a
          href="mailto:support@bakery-ia.com"
          className="text-[var(--color-primary)] hover:underline"
        >
          {t('onboarding:completion.support_team', 'support team')}
        </a>
      </div>
    </div>
  );
};