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 handleGoToDashboard = () => {
    onComplete?.({ completed: true });
    navigate('/app/dashboard');
  };

  return (
    <div className="text-center space-y-8 py-8 max-w-3xl mx-auto">
      {/* 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>

      {/* Completion Message */}
      <div className="space-y-4">
        <h1 className="text-3xl font-bold text-[var(--text-primary)]">
          {t('setup_wizard:completion.title', 'Setup Complete!')}
        </h1>
        <p className="text-lg text-[var(--text-secondary)]">
          {t('setup_wizard:completion.subtitle', "Your bakery management system is ready to use.")}
        </p>
      </div>

      {/* Next Steps */}
      <div className="text-left">
        <h2 className="text-xl font-semibold text-[var(--text-primary)] mb-4">
          {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="bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg p-4 hover:border-[var(--color-primary)] transition-colors cursor-pointer"
              onClick={() => navigate(step.link)}
            >
              <div className="flex items-start gap-3">
                <div className="flex-shrink-0 w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center text-[var(--color-primary)]">
                  {step.icon}
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold text-[var(--text-primary)] mb-1">
                    {step.title}
                  </h3>
                  <p className="text-sm text-[var(--text-secondary)]">
                    {step.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Action Button */}
      <div className="pt-4">
        <button
          onClick={handleGoToDashboard}
          className="inline-flex items-center gap-2 px-8 py-3 bg-[var(--color-primary)] text-white font-semibold rounded-lg hover:bg-[var(--color-primary-700)] transition-colors"
        >
          {t('setup_wizard:completion.go_dashboard', 'Go to Dashboard')}
          <svg className="w-5 h-5" 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>
  );
};
