import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import type { SetupStepProps } from '../SetupWizard';

export const CompletionStep: React.FC<SetupStepProps> = ({ onComplete, onUpdate }) => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  // Always allow to continue (but there's no next step)
  useEffect(() => {
    onUpdate?.({
      itemsCount: 1,
      canContinue: true,
    });
  }, [onUpdate]);

  const nextSteps = [
    {
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
        </svg>
      ),
      title: t('setup_wizard:completion.step1_title', 'Start Production'),
      description: t('setup_wizard:completion.step1_desc', 'Create your first production batch using your configured recipes'),
      action: t('setup_wizard:completion.step1_action', 'Go to Production'),
      link: '/app/operations/production',
    },
    {
      icon: (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
        </svg>
      ),
      title: t('setup_wizard:completion.step2_title', 'Order Inventory'),
      description: t('setup_wizard:completion.step2_desc', 'Place your first purchase order with your suppliers'),
      action: t('setup_wizard:completion.step2_action', 'View Procurement'),
      link: '/app/operations/procurement',
    },
    {
      icon: (
        <svg className="w-6 h-6" 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>
      ),
      title: t('setup_wizard:completion.step3_title', 'Track Analytics'),
      description: t('setup_wizard:completion.step3_desc', 'Monitor your production efficiency and costs in real-time'),
      action: t('setup_wizard:completion.step3_action', 'View Analytics'),
      link: '/app/analytics/production',
    },
  ];

  const tips = [
    {
      icon: '💡',
      title: t('setup_wizard:completion.tip1_title', 'Keep Inventory Updated'),
      description: t('setup_wizard:completion.tip1_desc', 'Regularly update stock levels to get accurate cost calculations and low-stock alerts'),
    },
    {
      icon: '📊',
      title: t('setup_wizard:completion.tip2_title', 'Monitor Quality Metrics'),
      description: t('setup_wizard:completion.tip2_desc', 'Use quality checks during production to identify issues early and maintain consistency'),
    },
    {
      icon: '🎯',
      title: t('setup_wizard:completion.tip3_title', 'Review Analytics Weekly'),
      description: t('setup_wizard:completion.tip3_desc', 'Check your production analytics every week to optimize recipes and reduce waste'),
    },
    {
      icon: '🤝',
      title: t('setup_wizard:completion.tip4_title', 'Maintain Supplier Relationships'),
      description: t('setup_wizard:completion.tip4_desc', 'Keep supplier information current and track order performance for better partnerships'),
    },
  ];

  const handleGoToDashboard = () => {
    onComplete?.({ completed: true });
    navigate('/app/dashboard');
  };

  return (
    <div className="space-y-8 max-w-4xl mx-auto">
      {/* Celebration Header */}
      <div className="text-center">
        <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-[var(--color-success)] to-[var(--color-primary)] rounded-full mb-6 animate-bounce">
          <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <h1 className="text-3xl md:text-4xl font-bold text-[var(--text-primary)] mb-3">
          {t('setup_wizard:completion.title', '🎉 Setup Complete!')}
        </h1>
        <p className="text-lg text-[var(--text-secondary)] max-w-2xl mx-auto">
          {t('setup_wizard:completion.subtitle', "Congratulations! Your bakery management system is ready to use. Let's get started with your first tasks.")}
        </p>
      </div>

      {/* Confetti Effect Placeholder */}
      <div className="relative">
        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
          <div className="text-6xl opacity-10 animate-pulse">🎊🎉🎊</div>
        </div>
      </div>

      {/* Next Steps */}
      <div>
        <h2 className="text-xl font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2">
          <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="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
          {t('setup_wizard:completion.next_steps', 'Recommended Next Steps')}
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {nextSteps.map((step, index) => (
            <div
              key={index}
              className="group bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg p-5 hover:border-[var(--color-primary)] hover:shadow-lg transition-all cursor-pointer"
              onClick={() => navigate(step.link)}
            >
              <div className="flex items-start gap-3 mb-3">
                <div className="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-primary)]/5 rounded-lg flex items-center justify-center text-[var(--color-primary)] group-hover:scale-110 transition-transform">
                  {step.icon}
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold text-[var(--text-primary)] mb-1 group-hover:text-[var(--color-primary)] transition-colors">
                    {step.title}
                  </h3>
                  <p className="text-sm text-[var(--text-secondary)] leading-relaxed">
                    {step.description}
                  </p>
                </div>
              </div>
              <button className="text-sm font-medium text-[var(--color-primary)] hover:underline flex items-center gap-1">
                {step.action}
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* Pro Tips */}
      <div>
        <h2 className="text-xl font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2">
          <svg className="w-6 h-6 text-[var(--color-warning)]" 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>
          {t('setup_wizard:completion.tips', 'Pro Tips for Success')}
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {tips.map((tip, index) => (
            <div
              key={index}
              className="bg-gradient-to-br from-[var(--bg-secondary)] to-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg p-4"
            >
              <div className="flex items-start gap-3">
                <div className="text-3xl">{tip.icon}</div>
                <div className="flex-1">
                  <h3 className="font-semibold text-[var(--text-primary)] mb-1">
                    {tip.title}
                  </h3>
                  <p className="text-sm text-[var(--text-secondary)] leading-relaxed">
                    {tip.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Quick Links */}
      <div className="bg-[var(--color-info)]/10 border border-[var(--color-info)]/20 rounded-lg p-6">
        <h3 className="font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
          <svg className="w-5 h-5 text-[var(--color-info)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          {t('setup_wizard:completion.need_help', 'Need Help?')}
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <button
            onClick={() => navigate('/app/settings/bakery')}
            className="flex items-center gap-2 p-3 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] transition-colors text-left"
          >
            <svg className="w-5 h-5 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <div className="flex-1 min-w-0">
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('setup_wizard:completion.settings', 'Settings')}</p>
              <p className="text-xs text-[var(--text-tertiary)]">{t('setup_wizard:completion.settings_desc', 'Configure preferences')}</p>
            </div>
          </button>

          <button
            onClick={() => navigate('/app/dashboard')}
            className="flex items-center gap-2 p-3 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] transition-colors text-left"
          >
            <svg className="w-5 h-5 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </svg>
            <div className="flex-1 min-w-0">
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('setup_wizard:completion.dashboard', 'Dashboard')}</p>
              <p className="text-xs text-[var(--text-tertiary)]">{t('setup_wizard:completion.dashboard_desc', 'View overview')}</p>
            </div>
          </button>

          <button
            onClick={() => navigate('/app/operations/recipes')}
            className="flex items-center gap-2 p-3 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] transition-colors text-left"
          >
            <svg className="w-5 h-5 text-[var(--text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <div className="flex-1 min-w-0">
              <p className="font-medium text-sm text-[var(--text-primary)]">{t('setup_wizard:completion.recipes', 'Recipes')}</p>
              <p className="text-xs text-[var(--text-tertiary)]">{t('setup_wizard:completion.recipes_desc', 'Manage recipes')}</p>
            </div>
          </button>
        </div>
      </div>

      {/* Final CTA */}
      <div className="text-center pt-4">
        <button
          onClick={handleGoToDashboard}
          className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-success)] text-white font-semibold rounded-lg hover:shadow-lg transform hover:scale-105 transition-all"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
          {t('setup_wizard:completion.go_dashboard', 'Go to Dashboard')}
        </button>
        <p className="text-sm text-[var(--text-tertiary)] mt-3">
          {t('setup_wizard:completion.thanks', 'Thank you for completing the setup! Happy baking! 🥖🥐🍰')}
        </p>
      </div>
    </div>
  );
};
