import React from 'react';
import CloseIcon from '@mui/icons-material/Close';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';

interface IntegrationHelpModalProps {
    integrationId: string;
    integrationName: string;
    isOpen: boolean;
    onClose: () => void;
}

const IntegrationHelpModal: React.FC<IntegrationHelpModalProps> = ({
    integrationId,
    integrationName,
    isOpen,
    onClose
}) => {
    if (!isOpen) return null;

    // Help content for each integration
    const helpContent: { [key: string]: { steps: string[]; videoUrl: string } } = {
        mailchimp: {
            steps: [
                'Log in to your Mailchimp account at mailchimp.com',
                'Click on your profile icon in the top right corner',
                'Select "Account & Billing" from the dropdown menu',
                'Navigate to "Extras" → "API keys"',
                'Click "Create A Key" button to generate a new API key',
                'Copy the API key (format: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-us1)',
                'Go to "Audience" → "All contacts" to find your audience',
                'Click "Settings" → "Audience name and defaults"',
                'Copy the "Audience ID" (also called List ID)',
                'Paste both API Key and Audience ID in the integration settings',
                'Click "Test Connection" to verify, then "Save Settings"',
                'Toggle the integration ON to start sending form submissions'
            ],
            videoUrl: 'https://www.youtube.com/embed/dQw4w9WgXcQ' // Replace with actual tutorial video
        },
        google_sheets: {
            steps: [
                'Go to Google Cloud Console at console.cloud.google.com',
                'Create a new project or select an existing one',
                'Enable the Google Sheets API for your project',
                'Navigate to "APIs & Services" → "Credentials"',
                'Click "Create Credentials" → "OAuth 2.0 Client ID"',
                'Configure the OAuth consent screen if prompted',
                'Select "Web application" as the application type',
                'Add authorized redirect URIs (your WordPress site URL)',
                'Copy the Client ID and Client Secret',
                'Create a new Google Spreadsheet or open an existing one',
                'Copy the spreadsheet URL from your browser',
                'Paste Client ID, Client Secret, and Spreadsheet URL in settings',
                'Complete the OAuth authorization flow',
                'Click "Test Connection" to verify, then "Save Settings"',
                'Toggle the integration ON to start sending form submissions'
            ],
            videoUrl: 'https://www.youtube.com/embed/dQw4w9WgXcQ' // Replace with actual tutorial video
        },
        trello: {
            steps: [
                'Log in to your Trello account at trello.com',
                'Visit https://trello.com/app-key to get your API key',
                'Copy the API Key displayed on the page',
                'Click the "Token" link to generate an API token',
                'Authorize the application and copy the generated token',
                'Open the Trello board where you want to create cards',
                'Copy the Board ID from the URL (trello.com/b/BOARD_ID/name)',
                'Open the board and find the list where cards should be created',
                'To get List ID, add ".json" to your board URL and find the list',
                'Or use browser dev tools to inspect the list element',
                'Paste API Key, Token, Board ID, and List ID in settings',
                'Optionally customize the card title template (e.g., "New Lead: {name}")',
                'Click "Test Connection" to verify, then "Save Settings"',
                'Toggle the integration ON to start creating cards from submissions'
            ],
            videoUrl: 'https://www.youtube.com/embed/dQw4w9WgXcQ' // Replace with actual tutorial video
        }
    };

    const content = helpContent[integrationId] || {
        steps: ['No help content available for this integration.'],
        videoUrl: ''
    };

    return (
        <div className="integration-help-modal-overlay" onClick={onClose}>
            <div className="integration-help-modal" onClick={(e) => e.stopPropagation()}>
                <div className="help-modal-header">
                    <div className="help-modal-title">
                        <HelpOutlineIcon />
                        <h2>How to Connect {integrationName}</h2>
                    </div>
                    <button className="close-button" onClick={onClose}>
                        <CloseIcon />
                    </button>
                </div>

                <div className="help-modal-body">
                    <div className="help-instructions">
                        <h3>Step-by-Step Instructions:</h3>
                        <ol className="help-steps">
                            {content.steps.map((step, index) => (
                                <li key={index}>{step}</li>
                            ))}
                        </ol>
                    </div>

                    {content.videoUrl && (
                        <div className="help-video">
                            <h3>Video Tutorial:</h3>
                            <div className="video-container">
                                <iframe
                                    src={content.videoUrl}
                                    title={`${integrationName} Tutorial`}
                                    frameBorder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowFullScreen
                                ></iframe>
                            </div>
                        </div>
                    )}
                </div>

                <div className="help-modal-footer">
                    <button className="close-help-button" onClick={onClose}>
                        Got it, thanks!
                    </button>
                </div>
            </div>
        </div>
    );
};

export default IntegrationHelpModal;