import React from 'react';
import SettingsIcon from '@mui/icons-material/Settings';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import MailOutlineIcon from '@mui/icons-material/MailOutline';
import TableChartIcon from '@mui/icons-material/TableChart';
import DashboardIcon from '@mui/icons-material/Dashboard';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ErrorIcon from '@mui/icons-material/Error';
import LockIcon from '@mui/icons-material/Lock';

interface Integration {
    id: string;
    name: string;
    description: string;
    icon: string;
    enabled: boolean;
    configured: boolean;
}

interface IntegrationCardProps {
    integration: Integration;
    onToggle: (id: string) => void;
    onSettings: (integration: Integration) => void;
    onHelp: (integration: Integration) => void;
    disabled?: boolean;
    isProUser?: boolean;
    onProClick?: () => void;
}

const IntegrationCard: React.FC<IntegrationCardProps> = ({
    integration,
    onToggle,
    onSettings,
    onHelp,
    disabled = false,
    isProUser = true,
    onProClick
}) => {
    const getIcon = (iconName: string) => {
        const icons: { [key: string]: any } = {
            'MailOutline': MailOutlineIcon,
            'TableChart': TableChartIcon,
            'Dashboard': DashboardIcon,
        };
        const IconComponent = icons[iconName] || MailOutlineIcon;
        return <IconComponent />;
    };

    const handleToggleChange = () => {
        if (disabled || !isProUser) return;
        onToggle(integration.id);
    };

    const handleSettingsClick = () => {
        if (disabled || !isProUser) return;
        onSettings(integration);
    };

    const handleHelpClick = (e: React.MouseEvent) => {
        e.stopPropagation();
        onHelp(integration);
    };

    return (
        <div className={`integration-card ${integration.enabled ? 'enabled' : ''} ${disabled ? 'disabled' : ''} ${!isProUser ? 'pro-locked-card' : ''}`}>
            {!isProUser && (
                <div className="pro-hover-overlay" onClick={onProClick}>
                    <div className="pro-hover-badge">
                        <LockIcon />
                        <span>PRO</span>
                    </div>
                </div>
            )}
            <div className="integration-icon">
                {getIcon(integration.icon)}
            </div>

            <div className="integration-content">
                <div className="integration-header">
                    <div className="integration-title-group">
                        <h3>{integration.name}</h3>
                        <button
                            className="help-icon-button"
                            onClick={handleHelpClick}
                            title="How to connect"
                            disabled={!isProUser}
                        >
                            <HelpOutlineIcon />
                        </button>
                    </div>
                    <div className="integration-status">
                        {integration.configured ? (
                            <span className="status-badge configured">
                                <CheckCircleIcon />
                                Configured
                            </span>
                        ) : (
                            <span className="status-badge not-configured">
                                <ErrorIcon />
                                Not Configured
                            </span>
                        )}
                    </div>
                </div>

                <p className="integration-description">{integration.description}</p>

                <div className="integration-actions">
                    <button
                        className="settings-button"
                        onClick={handleSettingsClick}
                        disabled={disabled || !isProUser}
                        title="Configure integration"
                    >
                        <SettingsIcon />
                        Settings
                    </button>

                    <label className="toggle-switch">
                        <input
                            type="checkbox"
                            checked={integration.enabled}
                            onChange={handleToggleChange}
                            disabled={disabled || !isProUser}
                        />
                        <span className="toggle-slider"></span>
                    </label>
                </div>
            </div>
        </div>
    );
};

export default IntegrationCard;