/**
 * Step 1: Welcome
 * Redesigned intro with cleaner cards explaining what each step accomplishes
 */
import React from 'react';
import Button from '../../ui/button/Button';
import { 
  ArrowRightIcon,
  BoltIcon,
  FileTextIcon,
  PlugInIcon,
  CheckCircleIcon,
} from '../../../icons';

interface Step1WelcomeProps {
  onNext: () => void;
  onSkip: () => void;
  currentStep: number;
  totalSteps: number;
}

const WIZARD_STEPS = [
  {
    step: 1,
    icon: <FileTextIcon className="h-6 w-6" />,
    title: 'Add Your Site',
    description: 'Set up your first site with industry preferences',
    outcome: 'A configured site ready for content generation',
    color: 'brand',
  },
  {
    step: 2,
    icon: <PlugInIcon className="h-6 w-6" />,
    title: 'Connect Site',
    description: 'Install our plugin to enable direct publishing',
    outcome: 'One-click publishing to your site',
    color: 'success',
    optional: true,
  },
  {
    step: 3,
    icon: <BoltIcon className="h-6 w-6" />,
    title: 'Add Target Keywords',
    description: 'Define target keywords for AI content',
    outcome: 'Keywords ready for clustering and ideas',
    color: 'warning',
    optional: true,
  },
];

export default function Step1Welcome({ onNext, onSkip, currentStep, totalSteps }: Step1WelcomeProps) {
  return (
    <div>
      {/* Hero Section */}
      <div className="text-center mb-10">
        <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
          Welcome to IGNY8
        </h1>
        <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
          Let's set up your AI-powered content pipeline in just a few steps. 
          You'll be creating SEO-optimized content in minutes.
        </p>
      </div>

      {/* What You'll Accomplish - Horizontal Cards */}
      <div className="mb-10">
        <h2 className="text-base font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-5 text-center">
          What we'll set up together
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {WIZARD_STEPS.map((item) => (
            <div
              key={item.step}
              className="flex flex-col p-5 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-700"
            >
              <div className="flex items-center gap-3 mb-3">
                <div className={`size-12 rounded-lg flex items-center justify-center flex-shrink-0 ${
                  item.color === 'brand' 
                    ? 'bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400'
                    : item.color === 'success'
                    ? 'bg-success-100 dark:bg-success-900/50 text-success-600 dark:text-success-400'
                    : 'bg-warning-100 dark:bg-warning-900/50 text-warning-600 dark:text-warning-400'
                }`}>
                  {item.icon}
                </div>
                {item.optional && (
                  <span className="text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
                    Optional
                  </span>
                )}
              </div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                {item.title}
              </h3>
              <p className="text-base text-gray-500 dark:text-gray-400 mb-3 flex-1">
                {item.description}
              </p>
              <div className="flex items-center gap-2 text-sm text-success-600 dark:text-success-400">
                <CheckCircleIcon className="w-4 h-4 flex-shrink-0" />
                <span>{item.outcome}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Time Estimate */}
      <div className="text-center mb-8 p-4 rounded-xl bg-brand-50 dark:bg-brand-900/20 border border-brand-100 dark:border-brand-800">
        <p className="text-base text-brand-700 dark:text-brand-300">
          <span className="font-semibold">⏱️ Estimated time:</span> 3-5 minutes
        </p>
      </div>

      {/* Actions */}
      <div className="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
        <Button
          variant="ghost"
          tone="neutral"
          size="md"
          onClick={onSkip}
        >
          Skip for now
        </Button>
        <span className="text-sm text-gray-500 dark:text-gray-400">
          Step <span className="font-semibold text-gray-700 dark:text-gray-300">{currentStep}</span> of <span className="font-semibold text-gray-700 dark:text-gray-300">{totalSteps}</span>
        </span>
        <Button
          variant="primary"
          size="md"
          onClick={onNext}
          endIcon={<ArrowRightIcon className="w-5 h-5" />}
        >
          Let's Get Started
        </Button>
      </div>
    </div>
  );
}