/**
 * Onboarding Screen Component
 */

import React, { useState } from 'react';
import { __ } from '@wordpress/i18n';
import Select from 'react-select';
import { useContentPlan } from '../context/ContentPlanContext';
import ErrorMessage from './ErrorMessage';

interface OnboardingScreenProps {
    onComplete: () => void;
    onSkip: () => void;
}

const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
    onComplete,
    onSkip,
}) => {
    const {
        getString,
        saveSettings,
        updateSettings,
        isNewWebsite,
        generateContentPlan,
        createMultipleContentPlanItems,
        setCurrentTaskId,
        fetchTasks,
    } = useContentPlan();

    const [formData, setFormData] = useState({
        goal: 'traffic' as string, // Changed to single selection
        language: 'English',
        termsAccepted: false,
        customRecommendations: '',
    });

    const [errors, setErrors] = useState<{ [key: string]: string }>({});
    const [isSubmitting, setIsSubmitting] = useState(false);

    // Available goals with descriptions
    const goalOptions = [
        {
            value: 'traffic',
            label: getString('generation_modal', 'goal_traffic', 'Traffic'),
            description: getString(
                'onboarding',
                'goal_traffic_description',
                'Grow your organic reach and page views'
            ),
        },
        {
            value: 'leads',
            label: getString('generation_modal', 'goal_leads', 'Leads'),
            description: getString(
                'onboarding',
                'goal_leads_description',
                'Generate qualified leads and conversions'
            ),
        },
        {
            value: 'authority',
            label: getString('generation_modal', 'goal_authority', 'Authority'),
            description: getString(
                'onboarding',
                'goal_authority_description',
                'Establish expertise and thought leadership'
            ),
        },
    ];

    // Available languages (same as ContentPlanGenerationModal)
    const languageOptions = [
        { value: 'English', label: 'English' },
        { value: 'Spanish', label: 'Spanish' },
        { value: 'French', label: 'French' },
        { value: 'German', label: 'German' },
        { value: 'Italian', label: 'Italian' },
        { value: 'Portuguese', label: 'Portuguese' },
        { value: 'Dutch', label: 'Dutch' },
        { value: 'Russian', label: 'Russian' },
        { value: 'Chinese (Simplified)', label: 'Chinese (Simplified)' },
        { value: 'Chinese (Traditional)', label: 'Chinese (Traditional)' },
        { value: 'Japanese', label: 'Japanese' },
        { value: 'Korean', label: 'Korean' },
        { value: 'Arabic', label: 'Arabic' },
        { value: 'Hebrew', label: 'Hebrew' },
        { value: 'Turkish', label: 'Turkish' },
        { value: 'Persian (Farsi)', label: 'Persian (Farsi)' },
        { value: 'Urdu', label: 'Urdu' },
        { value: 'Hindi', label: 'Hindi' },
        { value: 'Bengali', label: 'Bengali' },
        { value: 'Punjabi', label: 'Punjabi' },
        { value: 'Marathi', label: 'Marathi' },
        { value: 'Gujarati', label: 'Gujarati' },
        { value: 'Tamil', label: 'Tamil' },
        { value: 'Telugu', label: 'Telugu' },
        { value: 'Kannada', label: 'Kannada' },
        { value: 'Malayalam', label: 'Malayalam' },
        { value: 'Sinhala', label: 'Sinhala' },
        { value: 'Nepali', label: 'Nepali' },
        { value: 'Vietnamese', label: 'Vietnamese' },
        { value: 'Thai', label: 'Thai' },
        { value: 'Indonesian', label: 'Indonesian' },
        { value: 'Malay', label: 'Malay' },
        { value: 'Filipino (Tagalog)', label: 'Filipino (Tagalog)' },
        { value: 'Polish', label: 'Polish' },
        { value: 'Czech', label: 'Czech' },
        { value: 'Slovak', label: 'Slovak' },
        { value: 'Hungarian', label: 'Hungarian' },
        { value: 'Romanian', label: 'Romanian' },
        { value: 'Bulgarian', label: 'Bulgarian' },
        { value: 'Ukrainian', label: 'Ukrainian' },
        { value: 'Serbian', label: 'Serbian' },
        { value: 'Croatian', label: 'Croatian' },
        { value: 'Slovenian', label: 'Slovenian' },
        { value: 'Greek', label: 'Greek' },
        { value: 'Swedish', label: 'Swedish' },
        { value: 'Norwegian', label: 'Norwegian' },
        { value: 'Danish', label: 'Danish' },
        { value: 'Finnish', label: 'Finnish' },
        { value: 'Icelandic', label: 'Icelandic' },
        { value: 'Lithuanian', label: 'Lithuanian' },
        { value: 'Latvian', label: 'Latvian' },
        { value: 'Estonian', label: 'Estonian' },
        { value: 'Albanian', label: 'Albanian' },
        { value: 'Armenian', label: 'Armenian' },
        { value: 'Georgian', label: 'Georgian' },
        { value: 'Afrikaans', label: 'Afrikaans' },
        { value: 'Swahili', label: 'Swahili' },
    ];

    const handleGoalChange = (goalValue: string) => {
        setFormData(prev => ({
            ...prev,
            goal: goalValue,
        }));
        if (errors.goal) {
            setErrors(prev => ({ ...prev, goal: '' }));
        }
    };

    const handleLanguageChange = (selectedOption: any) => {
        const value = selectedOption?.value || 'English';
        setFormData(prev => ({ ...prev, language: value }));
        if (errors.language) {
            setErrors(prev => ({ ...prev, language: '' }));
        }
    };

    const handleTermsChange = (checked: boolean) => {
        setFormData(prev => ({ ...prev, termsAccepted: checked }));
        if (errors.termsAccepted) {
            setErrors(prev => ({ ...prev, termsAccepted: '' }));
        }
    };

    const handleCustomRecommendationsChange = (value: string) => {
        setFormData(prev => ({ ...prev, customRecommendations: value }));
    };

    const validateForm = (): boolean => {
        const newErrors: { [key: string]: string } = {};

        if (!formData.goal) {
            newErrors.goal = getString(
                'onboarding',
                'error_goal_required',
                'Please select a goal'
            );
        }

        if (!formData.language) {
            newErrors.language = getString(
                'onboarding',
                'error_language_required',
                'Please select a language'
            );
        }

        if (!formData.termsAccepted) {
            newErrors.termsAccepted = getString(
                'onboarding',
                'error_terms_required',
                'You must agree to the Terms of Use and Privacy Policy'
            );
        }

        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        if (!validateForm()) {
            return;
        }

        setIsSubmitting(true);
        // Clear any previous errors
        setErrors({});

        // Track if all operations completed successfully
        let allOperationsSucceeded = false;

        try {
            // Save onboarding form data WITHOUT marking as completed yet
            // We'll mark it as completed only after successful generation
            await saveSettings({
                goals: [formData.goal], // Convert single goal to array format
                language: formData.language,
                customRecommendations: formData.customRecommendations || '',
                // NOTE: onboarding_completed will be set to true AFTER successful generation
            });

            // Prepare generation form data (same format as ContentPlanGenerationModal)
            const generationFormData = {
                goals: [formData.goal],
                publishInterval: 7, // Default: Publish every 7 days
                totalPosts: 5, // Generate 5 posts for onboarding (as mentioned in hero text)
                language: formData.language,
                customLanguage: '',
                customRecommendations: formData.customRecommendations || '',
            };

            // Call the context function which will handle the API call and return generated items
            let result;
            try {
                result = await generateContentPlan(generationFormData);
            } catch (genError: any) {
                // Re-throw generation errors to be handled by outer catch block
                console.error(
                    'OnboardingScreen: generateContentPlan threw error:',
                    genError
                );
                throw genError;
            }

            // Defensive check: ensure result is valid and doesn't contain error indicators
            if (!result) {
                throw new Error(
                    getString(
                        'onboarding',
                        'error_submit_failed',
                        'Failed to complete onboarding: No response from server'
                    )
                );
            }

            // Check for error indicators in result (defensive check)
            const resultAny = result as any;
            if (resultAny.error || resultAny.status_code >= 400) {
                const errorMessage =
                    resultAny.error ||
                    resultAny.message ||
                    (resultAny.validation_errors &&
                    typeof resultAny.validation_errors === 'object'
                        ? Object.values(resultAny.validation_errors)[0]
                        : null) ||
                    getString(
                        'onboarding',
                        'error_submit_failed',
                        'Failed to complete onboarding'
                    );
                throw new Error(
                    typeof errorMessage === 'string'
                        ? errorMessage
                        : 'Failed to generate content plan'
                );
            }

            const generatedItems = result.items;
            const latestDateFromBackend = result.latestScheduledDate;
            const taskId = result.taskId;

            // If taskId is present, set it in context (tasks panel will show in main view)
            if (taskId) {
                setCurrentTaskId(taskId);
                // Fetch tasks immediately to get the latest status
                // Don't await - let it run in background so onboarding can complete quickly
                fetchTasks({ limit: 20 }).catch(err => {
                    console.error('Error fetching tasks:', err);
                });
                // Also fetch again after a delay to catch quick failures (e.g., moderation blocks)
                setTimeout(() => {
                    fetchTasks({ limit: 20 }).catch(err => {
                        console.error('Error fetching tasks (delayed):', err);
                    });
                }, 1500);
            } else if (generatedItems && generatedItems.length > 0) {
                // Automatically add all generated items to the plan
                await createMultipleContentPlanItems(
                    generatedItems,
                    generationFormData.publishInterval,
                    1, // planId
                    latestDateFromBackend
                );
            }

            // Mark all operations as successful
            allOperationsSucceeded = true;

            // NOW mark onboarding as completed since generation succeeded
            await saveSettings({
                onboarding_completed: true,
            });

            // Only call onComplete callback after ALL operations succeed
            // This ensures the onboarding popup only closes on successful backend response
            onComplete();
        } catch (error: any) {
            console.error('Failed to complete onboarding:', error);
            console.error('Error object structure:', {
                error,
                errorData: error?.data,
                errorResponse: error?.response,
                errorMessage: error?.message,
            });

            // Extract error message from error object
            // WordPress apiFetch may throw errors with response data nested in error.data or error.response
            let errorMsg = 'Unknown error';
            if (error && typeof error === 'object') {
                // Check multiple possible locations for error data
                const responseData =
                    error.data ||
                    error.response ||
                    error.response?.data ||
                    error;

                // Check for error field in response (highest priority)
                if (responseData.error) {
                    errorMsg = responseData.error;
                }
                // Check if error has a message property
                else if (error.message) {
                    errorMsg = error.message;
                }
                // Check if error has validation_errors
                else if (
                    responseData.validation_errors &&
                    typeof responseData.validation_errors === 'object'
                ) {
                    const validationErrors = responseData.validation_errors;
                    const firstError = Object.values(validationErrors)[0];
                    errorMsg =
                        typeof firstError === 'string'
                            ? firstError
                            : 'Validation error';
                }
                // Check for message in response data
                else if (responseData.message) {
                    errorMsg = responseData.message;
                }
            } else if (typeof error === 'string') {
                errorMsg = error;
            }

            // Check if this is a connection error and replace with friendly message
            const connectionErrorPatterns = [
                'cURL error 7',
                'Failed to connect',
                "Couldn't connect to server",
                'Connection refused',
                'Connection timeout',
                'Network error',
            ];
            const isConnectionError = connectionErrorPatterns.some(pattern =>
                errorMsg.toLowerCase().includes(pattern.toLowerCase())
            );

            if (isConnectionError) {
                errorMsg = getString(
                    'generation_modal',
                    'connection_error',
                    "🚀 Houston, we have a connection problem.\n\nWe can't reach our backend right now.\n\nPlease try again in a moment or contact support if this keeps happening."
                );
            }

            // Set error and keep popup open (don't call onComplete)
            console.error(
                'OnboardingScreen: Error occurred, keeping popup open. Error:',
                errorMsg
            );
            setErrors({
                submit:
                    errorMsg ||
                    getString(
                        'onboarding',
                        'error_submit_failed',
                        'Failed to complete onboarding'
                    ),
            });

            // Ensure onComplete is NOT called on error
            if (allOperationsSucceeded) {
                console.warn(
                    'OnboardingScreen: WARNING - allOperationsSucceeded was true but error occurred!'
                );
            }
        } finally {
            setIsSubmitting(false);
        }
    };

    const handleSkip = async () => {
        try {
            // Prepare complete onboarding settings with current form values
            const onboardingSettings = {
                onboarding_completed: true,
                goals: [formData.goal], // Convert single goal to array format
                language: formData.language,
                customRecommendations: formData.customRecommendations || '',
            };

            // Optimistically update settings in context - this will trigger re-render and show dashboard immediately
            updateSettings(onboardingSettings);

            // Save complete onboarding settings to backend in the background (fire and forget)
            // Don't await - let it happen in background while dashboard is already showing
            saveSettings(onboardingSettings).catch(error => {
                console.error('Failed to save onboarding skip:', error);
                // On error, we could optionally revert the optimistic update, but for UX we'll keep it
            });
        } catch (error) {
            console.error('Failed to skip onboarding:', error);
            // Even on error, update optimistically to show dashboard
            updateSettings({
                onboarding_completed: true,
                goals: [formData.goal],
                language: formData.language,
                customRecommendations: formData.customRecommendations || '',
            });
        }
    };

    return (
        <div
            className="min-h-screen font-wp flex items-center justify-center p-4 sm:p-6 md:p-8"
            style={{ backgroundColor: '#f0f0f1' }}
        >
            <div className="w-full max-w-4xl">
                <div className="cpepai-card p-6 sm:p-8 md:p-10">
                    {/* Hero Section */}
                    <div className="text-center mb-6">
                        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-wp-text mb-2 sm:mb-3">
                            {getString(
                                'onboarding',
                                'hero_title',
                                'Create your first 5 posts completely free.'
                            )}
                        </h1>
                        <p className="text-base sm:text-lg text-wp-gray">
                            {getString(
                                'onboarding',
                                'hero_subtitle',
                                'No API keys or external setup required - everything works out of the box.'
                            )}
                        </p>
                    </div>

                    {/* Visual Illustration */}
                    <div className="flex justify-center mb-6">
                        <div className="w-full max-w-xs">
                            <img
                                src={
                                    (window as any).cpepai_data?.pluginUrl +
                                    'src/images/onboarding_img.png'
                                }
                                alt={getString(
                                    'onboarding',
                                    'onboarding_image_alt',
                                    'Content Plan Illustration'
                                )}
                                className="w-full h-auto"
                            />
                        </div>
                    </div>

                    {/* Benefits List - Compact 2-column layout */}
                    <div className="mb-6 -ml-1 sm:ml-0">
                        <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3 text-sm text-wp-text">
                            <li className="flex items-start">
                                <svg
                                    className="w-3.5 h-3.5 text-primary mr-2 mt-0.5 flex-shrink-0"
                                    fill="currentColor"
                                    viewBox="0 0 20 20"
                                >
                                    <path
                                        fillRule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clipRule="evenodd"
                                    />
                                </svg>
                                <span>
                                    {getString(
                                        'onboarding',
                                        'benefit_content_plan',
                                        'Automatically generate a multi-month content plan'
                                    )}
                                </span>
                            </li>
                            <li className="flex items-start">
                                <svg
                                    className="w-3.5 h-3.5 text-primary mr-2 mt-0.5 flex-shrink-0"
                                    fill="currentColor"
                                    viewBox="0 0 20 20"
                                >
                                    <path
                                        fillRule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clipRule="evenodd"
                                    />
                                </svg>
                                <span>
                                    {getString(
                                        'onboarding',
                                        'benefit_seo_posts',
                                        'High-quality SEO-optimized posts'
                                    )}
                                </span>
                            </li>
                            <li className="flex items-start">
                                <svg
                                    className="w-3.5 h-3.5 text-primary mr-2 mt-0.5 flex-shrink-0"
                                    fill="currentColor"
                                    viewBox="0 0 20 20"
                                >
                                    <path
                                        fillRule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clipRule="evenodd"
                                    />
                                </svg>
                                <span>
                                    {getString(
                                        'onboarding',
                                        'benefit_editors',
                                        'Works with Gutenberg, Elementor, and Classic Editor'
                                    )}
                                </span>
                            </li>
                            <li className="flex items-start">
                                <svg
                                    className="w-3.5 h-3.5 text-primary mr-2 mt-0.5 flex-shrink-0"
                                    fill="currentColor"
                                    viewBox="0 0 20 20"
                                >
                                    <path
                                        fillRule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clipRule="evenodd"
                                    />
                                </svg>
                                <span>
                                    {getString(
                                        'onboarding',
                                        'benefit_no_setup',
                                        'No technical setup needed'
                                    )}
                                </span>
                            </li>
                        </ul>
                    </div>

                    {/* Form Card Container */}
                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-6 sm:p-7">
                        <form onSubmit={handleSubmit} className="space-y-6">
                            {/* Goals - Radio buttons with descriptions */}
                            <div>
                                <label className="block text-sm font-semibold text-wp-text mb-3">
                                    {getString(
                                        'onboarding',
                                        'goals_label',
                                        'Choose your content strategy focus'
                                    )}
                                    <span className="text-red-500 ml-1">*</span>
                                </label>
                                <div className="space-y-4">
                                    {goalOptions.map(goal => (
                                        <label
                                            key={goal.value}
                                            className="flex cursor-pointer group cpepai-onboarding-radio-label"
                                        >
                                            <input
                                                type="radio"
                                                name="goal"
                                                value={goal.value}
                                                checked={
                                                    formData.goal === goal.value
                                                }
                                                onChange={() =>
                                                    handleGoalChange(goal.value)
                                                }
                                                className="mr-3 text-primary focus:ring-primary border-gray-300 flex-shrink-0"
                                            />
                                            <div className="flex-1">
                                                <div className="text-sm font-bold text-wp-text group-hover:text-primary transition-colors">
                                                    {goal.label}
                                                </div>
                                                <div className="text-xs text-wp-gray mt-0.5">
                                                    {goal.description}
                                                </div>
                                            </div>
                                        </label>
                                    ))}
                                </div>
                                {errors.goal && (
                                    <p className="cpepai-form-error text-xs sm:text-sm mt-2">
                                        {errors.goal}
                                    </p>
                                )}
                            </div>

                            {/* Language */}
                            <div>
                                <label
                                    htmlFor="onboarding-language"
                                    className="block text-sm font-semibold text-wp-text mb-2"
                                >
                                    {getString(
                                        'onboarding',
                                        'language_label',
                                        'Language'
                                    )}
                                    <span className="text-red-500 ml-1">*</span>
                                </label>
                                <Select
                                    id="onboarding-language"
                                    value={languageOptions.find(
                                        option =>
                                            option.value === formData.language
                                    )}
                                    onChange={handleLanguageChange}
                                    options={languageOptions}
                                    isSearchable={true}
                                    placeholder={getString(
                                        'onboarding',
                                        'language_placeholder',
                                        'Select a language'
                                    )}
                                    className="react-select-container"
                                    classNamePrefix="react-select"
                                />
                                {errors.language && (
                                    <p className="cpepai-form-error text-xs sm:text-sm mt-2">
                                        {errors.language}
                                    </p>
                                )}
                            </div>

                            {/* Custom Recommendations - Show when is_new_website is true */}
                            {isNewWebsite && (
                                <div>
                                    <label
                                        htmlFor="customRecommendations"
                                        className="block text-sm font-semibold text-wp-text mb-2"
                                    >
                                        {getString(
                                            'generation_modal',
                                            'custom_recommendations_label',
                                            'Custom Recommendations'
                                        )}
                                    </label>
                                    <textarea
                                        id="customRecommendations"
                                        value={formData.customRecommendations}
                                        onChange={e =>
                                            handleCustomRecommendationsChange(
                                                e.target.value
                                            )
                                        }
                                        className="cpepai-form-input w-full px-2 sm:px-3 py-2 sm:py-3 text-sm sm:text-base min-h-[80px] sm:min-h-[100px] resize-y"
                                        placeholder={getString(
                                            'generation_modal',
                                            'custom_recommendations_placeholder',
                                            'Enter any specific recommendations or requirements for the content plan...'
                                        )}
                                        rows={4}
                                    />
                                    <p className="text-xs text-gray-500 mt-1">
                                        {getString(
                                            'generation_modal',
                                            'custom_recommendations_help',
                                            'Optional: Provide specific guidance, topics to focus on, or requirements for the generated content plan.'
                                        )}
                                    </p>
                                </div>
                            )}

                            {/* Terms Confirmation - Moved closer to button */}
                            <div className="pt-1">
                                <label className="flex cursor-pointer cpepai-onboarding-checkbox-label">
                                    <input
                                        type="checkbox"
                                        checked={formData.termsAccepted}
                                        onChange={e =>
                                            handleTermsChange(e.target.checked)
                                        }
                                        className="mr-3 text-primary focus:ring-primary border-gray-300 rounded flex-shrink-0"
                                    />
                                    <span className="text-sm text-wp-text leading-relaxed">
                                        {getString(
                                            'onboarding',
                                            'terms_prefix',
                                            'I agree to the'
                                        )}{' '}
                                        <a
                                            href="https://contentplan.app/terms-of-use/"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="text-primary hover:underline font-medium"
                                        >
                                            {getString(
                                                'onboarding',
                                                'terms_of_use',
                                                'Terms of Use'
                                            )}
                                        </a>{' '}
                                        {getString(
                                            'onboarding',
                                            'terms_and',
                                            'and'
                                        )}{' '}
                                        <a
                                            href="https://contentplan.app/privacy-policy/"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="text-primary hover:underline font-medium"
                                        >
                                            {getString(
                                                'onboarding',
                                                'privacy_policy',
                                                'Privacy Policy'
                                            )}
                                        </a>
                                        <span className="text-red-500 ml-1">
                                            *
                                        </span>
                                    </span>
                                </label>
                                {errors.termsAccepted && (
                                    <p className="cpepai-form-error text-xs sm:text-sm mt-2">
                                        {errors.termsAccepted}
                                    </p>
                                )}
                            </div>

                            {/* Primary CTA Button - Full width */}
                            <div className="pt-1">
                                <button
                                    type="submit"
                                    className="cpepai-button cpepai-button--primary w-full px-6 py-3 text-base font-medium"
                                    disabled={
                                        isSubmitting || !formData.termsAccepted
                                    }
                                >
                                    {isSubmitting
                                        ? getString(
                                              'onboarding',
                                              'generating',
                                              'Generating...'
                                          )
                                        : getString(
                                              'onboarding',
                                              'submit_button',
                                              'Generate your first post ideas'
                                          )}
                                </button>

                                {/* Reassurance text - Larger, directly under button */}
                                <div className="text-center text-sm text-wp-gray mt-3 space-y-1.5">
                                    <p className="font-medium">
                                        {getString(
                                            'onboarding',
                                            'no_credit_card',
                                            'No credit card required'
                                        )}
                                    </p>
                                    <p>
                                        {getString(
                                            'onboarding',
                                            'free_plan',
                                            'Free plan included'
                                        )}
                                    </p>
                                </div>

                                {/* Error Message */}
                                {errors.submit && (
                                    <div className="mt-4">
                                        <ErrorMessage
                                            message={errors.submit}
                                            title={getString(
                                                'generation_modal',
                                                'error_title',
                                                'Generation Failed'
                                            )}
                                        />
                                    </div>
                                )}
                            </div>
                        </form>
                    </div>

                    {/* Skip onboarding - Small text link below everything */}
                    <div className="text-center mt-4">
                        <button
                            type="button"
                            onClick={handleSkip}
                            className="text-sm text-wp-gray hover:text-wp-text underline transition-colors"
                            disabled={isSubmitting}
                        >
                            {getString(
                                'onboarding',
                                'skip_button',
                                'Skip onboarding'
                            )}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default OnboardingScreen;