/**
 * Step 5: Complete
 * Success screen with next steps
 */
import React from 'react';
import Button from '../../ui/button/Button';
import { Card } from '../../ui/card';
import { 
  CheckCircleIcon,
  ArrowRightIcon,
  BoltIcon,
  FileTextIcon,
  PieChartIcon,
  BoxCubeIcon,
} from '../../../icons';
import type { WizardData } from '../OnboardingWizard';

interface Step5CompleteProps {
  data: WizardData;
  onComplete: () => void;
  isLoading: boolean;
}

export default function Step5Complete({ 
  data, 
  onComplete,
  isLoading 
}: Step5CompleteProps) {
  const NEXT_STEPS = [
    {
      icon: <BoltIcon className="w-5 h-5" />,
      title: 'Run Automation',
      description: 'Start your content pipeline to generate articles',
      link: data.createdSiteId ? `/sites/${data.createdSiteId}/automation` : '/automation',
    },
    {
      icon: <FileTextIcon className="w-5 h-5" />,
      title: 'Add More Keywords',
      description: 'Expand your content strategy with more target keywords',
      link: '/planner/keywords',
    },
    {
      icon: <PieChartIcon className="w-5 h-5" />,
      title: 'View Dashboard',
      description: 'Monitor your content pipeline and metrics',
      link: '/dashboard',
    },
    {
      icon: <BoxCubeIcon className="w-5 h-5" />,
      title: 'Customize Settings',
      description: 'Fine-tune publishing schedules and preferences',
      link: data.createdSiteId ? `/sites/${data.createdSiteId}/settings` : '/account/settings',
    },
  ];

  return (
    <div className="text-center">
      {/* Success Animation */}
      <div className="mb-6">
        <div className="inline-flex items-center justify-center size-20 rounded-full bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400 mb-4">
          <CheckCircleIcon className="h-10 w-10" />
        </div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          You're All Set! 🎉
        </h1>
        <p className="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
          Your content pipeline is ready to go. IGNY8 will start processing your keywords and generating content automatically.
        </p>
      </div>

      {/* Summary */}
      <Card className="p-4 mb-6 bg-gray-50 dark:bg-gray-800 text-left">
        <h3 className="font-semibold text-gray-900 dark:text-white mb-3">
          What we set up:
        </h3>
        <ul className="space-y-2">
          <li className="flex items-center gap-2 text-sm">
            <CheckCircleIcon className="w-4 h-4 text-green-500" />
            <span className="text-gray-700 dark:text-gray-300">
              Site: <span className="font-medium">{data.siteName || 'Your Site'}</span>
            </span>
          </li>
          {data.integrationTested && (
            <li className="flex items-center gap-2 text-sm">
              <CheckCircleIcon className="w-4 h-4 text-green-500" />
              <span className="text-gray-700 dark:text-gray-300">
                WordPress integration connected
              </span>
            </li>
          )}
          {data.keywordsAdded && (
            <li className="flex items-center gap-2 text-sm">
              <CheckCircleIcon className="w-4 h-4 text-green-500" />
              <span className="text-gray-700 dark:text-gray-300">
                {data.keywordsCount} keyword{data.keywordsCount !== 1 ? 's' : ''} added to pipeline
              </span>
            </li>
          )}
          <li className="flex items-center gap-2 text-sm">
            <CheckCircleIcon className="w-4 h-4 text-green-500" />
            <span className="text-gray-700 dark:text-gray-300">
              Auto-approval & auto-publish enabled
            </span>
          </li>
          <li className="flex items-center gap-2 text-sm">
            <CheckCircleIcon className="w-4 h-4 text-green-500" />
            <span className="text-gray-700 dark:text-gray-300">
              Daily automation scheduled
            </span>
          </li>
        </ul>
      </Card>

      {/* Expected Timeline */}
      <Card className="p-4 mb-6 bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 text-left">
        <h3 className="font-semibold text-brand-900 dark:text-brand-100 mb-2">
          📅 What to expect:
        </h3>
        <ul className="text-sm text-brand-700 dark:text-brand-300 space-y-1">
          <li>• First content ideas: Within 24 hours</li>
          <li>• First articles ready: 2-3 days</li>
          <li>• First published to site: Based on your schedule</li>
        </ul>
        <p className="text-xs text-brand-600 dark:text-brand-400 mt-2">
          Run automation manually anytime to speed things up.
        </p>
      </Card>

      {/* Next Steps */}
      <div className="mb-6">
        <h3 className="font-semibold text-gray-900 dark:text-white mb-3 text-left">
          What's next:
        </h3>
        <div className="grid grid-cols-2 gap-3">
          {NEXT_STEPS.map((step, index) => (
            <div
              key={index}
              className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer"
            >
              <div className="size-8 rounded-lg bg-brand-100 dark:bg-brand-900/50 text-brand-600 dark:text-brand-400 flex items-center justify-center mb-2">
                {step.icon}
              </div>
              <h4 className="font-medium text-gray-900 dark:text-white text-sm">
                {step.title}
              </h4>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                {step.description}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <Button
        variant="primary"
        size="lg"
        onClick={onComplete}
        disabled={isLoading}
        className="gap-2 w-full"
      >
        {isLoading ? 'Loading...' : 'Go to Dashboard'}
        <ArrowRightIcon className="w-4 h-4" />
      </Button>
    </div>
  );
}