import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '../../../ui/Button';
import type { SetupStepProps } from '../SetupWizard';

export const WelcomeStep: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
  const { t } = useTranslation();

  // Automatically enable continue button (this is an info/welcome step)
  useEffect(() => {
    // This step is always ready to continue
  }, []);

  const handleGetStarted = () => {
    onComplete({ viewed: true });
  };

  const handleSkip = () => {
    if (onSkip) onSkip();
  };

  return (
    <div className="text-center space-y-8 py-8">
      {/* Welcome Icon */}
      <div className="mx-auto w-24 h-24 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
        <svg
          className="w-12 h-12 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>
      </div>

      {/* Welcome Message */}
      <div className="space-y-4 max-w-2xl mx-auto">
        <h1 className="text-3xl font-bold text-[var(--text-primary)]">
          {t('setup_wizard:welcome.title', 'Excellent! Your AI is Ready')}
        </h1>
        <p className="text-lg text-[var(--text-secondary)]">
          {t('setup_wizard:welcome.subtitle', 'Now let\'s set up your bakery\'s daily operations so the system can help you manage:')}
        </p>
      </div>

      {/* Feature Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-3xl mx-auto text-left">
        <div className="bg-[var(--bg-secondary)] rounded-lg p-4 flex items-start gap-3">
          <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
            📦
          </div>
          <div>
            <h3 className="font-semibold text-[var(--text-primary)] mb-1">
              {t('setup_wizard:welcome.feature_inventory', 'Inventory Tracking')}
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              {t('setup_wizard:welcome.feature_inventory_desc', 'Real-time stock levels & reorder alerts')}
            </p>
          </div>
        </div>

        <div className="bg-[var(--bg-secondary)] rounded-lg p-4 flex items-start gap-3">
          <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
            👨‍🍳
          </div>
          <div>
            <h3 className="font-semibold text-[var(--text-primary)] mb-1">
              {t('setup_wizard:welcome.feature_recipes', 'Recipe Costing')}
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              {t('setup_wizard:welcome.feature_recipes_desc', 'Automatic cost calculation & profitability analysis')}
            </p>
          </div>
        </div>

        <div className="bg-[var(--bg-secondary)] rounded-lg p-4 flex items-start gap-3">
          <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
            ✅
          </div>
          <div>
            <h3 className="font-semibold text-[var(--text-primary)] mb-1">
              {t('setup_wizard:welcome.feature_quality', 'Quality Monitoring')}
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              {t('setup_wizard:welcome.feature_quality_desc', 'Track standards & production quality')}
            </p>
          </div>
        </div>

        <div className="bg-[var(--bg-secondary)] rounded-lg p-4 flex items-start gap-3">
          <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
            👥
          </div>
          <div>
            <h3 className="font-semibold text-[var(--text-primary)] mb-1">
              {t('setup_wizard:welcome.feature_team', 'Team Coordination')}
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              {t('setup_wizard:welcome.feature_team_desc', 'Assign tasks & track responsibilities')}
            </p>
          </div>
        </div>
      </div>

      {/* Time Estimate */}
      <div className="bg-[var(--bg-secondary)]/50 border border-[var(--border-secondary)] rounded-lg p-6 max-w-2xl mx-auto">
        <div className="flex items-center justify-center gap-2 mb-3">
          <svg
            className="w-5 h-5 text-[var(--color-primary)]"
            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="font-semibold text-[var(--text-primary)]">
            {t('setup_wizard:welcome.time_estimate', 'Takes about 15-20 minutes')}
          </span>
        </div>
        <p className="text-sm text-[var(--text-secondary)]">
          {t('setup_wizard:welcome.save_resume', 'You can save progress and resume anytime')}
        </p>
      </div>

      {/* Action Buttons */}
      <div className="flex flex-col sm:flex-row gap-3 justify-center items-center pt-4">
        <Button variant="ghost" onClick={handleSkip} className="sm:order-1">
          {t('setup_wizard:welcome.skip', 'I\'ll Do This Later')}
        </Button>
        <Button variant="primary" size="lg" onClick={handleGetStarted} className="sm:order-2 px-8">
          {t('setup_wizard:welcome.get_started', 'Let\'s Get Started! →')}
        </Button>
      </div>
    </div>
  );
};
