import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Switch, Loader } from '@mantine/core';
import { showNotification, updateNotification } from '@mantine/notifications';
import { IconCheck } from '@tabler/icons-react';
import { __ } from '@wordpress/i18n';
import { deactivateAddonPlugin, activateSocialLogin } from '../store/settingSlice';
import AddonInstallationModal from '../AddonInstallationModal';
import { ADDON_REGISTRY } from './addonRegistry';

const AddonCard = ({ icon, iconBg, iconColor, name, desc, version, isActive, onToggle, loading }) => {
    const [hovered, setHovered] = useState(false);

    return (
        <div
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
            style={{
                background: isActive ? '#F8FFF9' : '#fff',
                border: `1px solid ${isActive ? '#C7E5CB' : hovered ? '#C7D8E0' : '#E2E8F0'}`,
                borderRadius: 12,
                padding: 20,
                boxShadow: hovered ? '0 4px 12px rgba(0,0,0,.08)' : '0 1px 3px rgba(0,0,0,.07)',
                transition: '180ms ease',
                cursor: 'pointer',
            }}
        >
            {/* Top row: icon + status badge */}
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                <div style={{
                    width: 40, height: 40, borderRadius: 8,
                    background: iconBg,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                }}>
                    <svg viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}>
                        {icon}
                    </svg>
                </div>
                <span style={{
                    fontSize: 10,
                    fontWeight: 700,
                    padding: '2px 8px',
                    borderRadius: 20,
                    letterSpacing: '0.3px',
                    background: isActive ? '#DCFCE7' : '#F1F5F9',
                    color: isActive ? '#15803D' : '#94A3B8',
                }}>
                    {isActive ? __( 'Active', 'lazytasks-project-task-management' ) : __( 'Inactive', 'lazytasks-project-task-management' )}
                </span>
            </div>

            {/* Name */}
            <div style={{ fontSize: 13, fontWeight: 700, color: '#1A202C', marginTop: 10 }}>{name}</div>
            {/* Description */}
            <div style={{ fontSize: 12, color: '#64748B', marginTop: 4, lineHeight: 1.5 }}>{desc}</div>

            {/* Footer: version + toggle */}
            <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                marginTop: 14, paddingTop: 14, borderTop: '1px solid #E2E8F0',
            }}>
                <span style={{ fontSize: 11, color: '#94A3B8' }}>{version}</span>
                {loading ? (
                    <Loader size={18} color="#ED7D31" />
                ) : (
                    <Switch
                        checked={isActive}
                        onChange={onToggle}
                        size="sm"
                        color="#ED7D31"
                        styles={{ track: { cursor: 'pointer' } }}
                    />
                )}
            </div>
        </div>
    );
};

const AddonSettingsV3 = () => {
    const dispatch = useDispatch();
    const { socialLoginConfiguration, whiteboardAddonState, timeTrackerAddonState, performanceAddonState } = useSelector((state) => state.settings.setting);

    const [addonModalOpened, setAddonModalOpened] = useState(false);
    const [activeAddonSlug, setActiveAddonSlug] = useState('lazytasks-whiteboard');
    const [whiteboardLoading, setWhiteboardLoading] = useState(false);
    const [timeTrackerLoading, setTimeTrackerLoading] = useState(false);
    const [performanceLoading, setPerformanceLoading] = useState(false);
    const [socialLoading, setSocialLoading] = useState(false);

    const whiteboardActive = whiteboardAddonState === 'installed_active';
    const timeTrackerActive = timeTrackerAddonState === 'installed_active';
    const performanceActive = performanceAddonState === 'installed_active';
    const socialActive = !!(socialLoginConfiguration?.social_login_enabled);

    const handleWhiteboardToggle = () => {
        if (whiteboardAddonState === 'not_installed' || whiteboardAddonState === 'installed_inactive') {
            setActiveAddonSlug('lazytasks-whiteboard');
            setAddonModalOpened(true);
            return;
        }
        if (whiteboardActive) {
            setWhiteboardLoading(true);
            showNotification({ id: 'addon', loading: true, title: __( 'Addon', 'lazytasks-project-task-management' ), message: __( 'Deactivating...', 'lazytasks-project-task-management' ), disallowClose: true, color: 'green' });
            dispatch(deactivateAddonPlugin({ addon: 'lazytasks-whiteboard' })).then((response) => {
                setWhiteboardLoading(false);
                if (response.payload?.status === 200) {
                    updateNotification({ id: 'addon', title: __( 'Addon Deactivated', 'lazytasks-project-task-management' ), message: response.payload.message, icon: <IconCheck />, color: 'teal', autoClose: 3000 });
                    window.location.reload();
                } else {
                    updateNotification({ id: 'addon', title: __( 'Failed', 'lazytasks-project-task-management' ), message: response.payload?.message || __( 'Error', 'lazytasks-project-task-management' ), color: 'red', autoClose: 2000 });
                }
            }).catch(() => setWhiteboardLoading(false));
        }
    };

    const handleTimeTrackerToggle = () => {
        if (timeTrackerAddonState === 'not_installed' || timeTrackerAddonState === 'installed_inactive') {
            setActiveAddonSlug('lazytasks-timetracker');
            setAddonModalOpened(true);
            return;
        }
        if (timeTrackerActive) {
            setTimeTrackerLoading(true);
            showNotification({ id: 'addon-tt', loading: true, title: __( 'Addon', 'lazytasks-project-task-management' ), message: __( 'Deactivating...', 'lazytasks-project-task-management' ), disallowClose: true, color: 'green' });
            dispatch(deactivateAddonPlugin({ addon: 'lazytasks-timetracker' })).then((response) => {
                setTimeTrackerLoading(false);
                if (response.payload?.status === 200) {
                    updateNotification({ id: 'addon-tt', title: __( 'Addon Deactivated', 'lazytasks-project-task-management' ), message: response.payload.message, icon: <IconCheck />, color: 'teal', autoClose: 3000 });
                    window.location.reload();
                } else {
                    updateNotification({ id: 'addon-tt', title: __( 'Failed', 'lazytasks-project-task-management' ), message: response.payload?.message || __( 'Error', 'lazytasks-project-task-management' ), color: 'red', autoClose: 2000 });
                }
            }).catch(() => setTimeTrackerLoading(false));
        }
    };

    const handlePerformanceToggle = () => {
        if (performanceAddonState === 'not_installed' || performanceAddonState === 'installed_inactive') {
            setActiveAddonSlug('lazytasks-performance');
            setAddonModalOpened(true);
            return;
        }
        if (performanceActive) {
            setPerformanceLoading(true);
            showNotification({ id: 'addon-perf', loading: true, title: __( 'Addon', 'lazytasks-project-task-management' ), message: __( 'Deactivating...', 'lazytasks-project-task-management' ), disallowClose: true, color: 'green' });
            dispatch(deactivateAddonPlugin({ addon: 'lazytasks-performance' })).then((response) => {
                setPerformanceLoading(false);
                if (response.payload?.status === 200) {
                    updateNotification({ id: 'addon-perf', title: __( 'Addon Deactivated', 'lazytasks-project-task-management' ), message: response.payload.message, icon: <IconCheck />, color: 'teal', autoClose: 3000 });
                    window.location.reload();
                } else {
                    updateNotification({ id: 'addon-perf', title: __( 'Failed', 'lazytasks-project-task-management' ), message: response.payload?.message || __( 'Error', 'lazytasks-project-task-management' ), color: 'red', autoClose: 2000 });
                }
            }).catch(() => setPerformanceLoading(false));
        }
    };

    const handleSocialToggle = () => {
        setSocialLoading(true);
        dispatch(activateSocialLogin({ social_login_settings: { social_login_enabled: !socialActive } })).then((response) => {
            setSocialLoading(false);
            if (response.payload?.status === 200) {
                showNotification({ title: socialActive ? __( 'Social Login Deactivated', 'lazytasks-project-task-management' ) : __( 'Social Login Activated', 'lazytasks-project-task-management' ), message: response.payload.message, icon: <IconCheck />, color: 'teal', autoClose: 3000 });
            } else {
                showNotification({ title: __( 'Failed', 'lazytasks-project-task-management' ), message: response.payload?.message || __( 'Error', 'lazytasks-project-task-management' ), color: 'red', autoClose: 2000 });
            }
        }).catch(() => setSocialLoading(false));
    };

    return (
        <>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
                {ADDON_REGISTRY.socialLogin.status === 'released' ? (
                    <AddonCard
                        iconBg={ADDON_REGISTRY.socialLogin.iconBg}
                        iconColor={ADDON_REGISTRY.socialLogin.iconColor}
                        icon={<><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></>}
                        name={ADDON_REGISTRY.socialLogin.name}
                        desc={ADDON_REGISTRY.socialLogin.desc}
                        version={ADDON_REGISTRY.socialLogin.version}
                        isActive={socialActive}
                        onToggle={handleSocialToggle}
                        loading={socialLoading}
                    />
                ) : (
                    <div style={{
                        background: '#fff',
                        border: '1px solid #E2E8F0',
                        borderRadius: 12,
                        padding: 20,
                        boxShadow: '0 1px 3px rgba(0,0,0,.07)',
                        position: 'relative',
                        overflow: 'hidden',
                    }}>
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(0.5px)', zIndex: 2, borderRadius: 12 }} />
                        <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 3, fontSize: 9, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 20, background: '#F1F5F9', color: '#94A3B8', border: '1px solid #E2E8F0' }}>{__('Coming Soon', 'lazytasks-project-task-management')}</div>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                            <div style={{ width: 40, height: 40, borderRadius: 8, background: ADDON_REGISTRY.socialLogin.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <svg viewBox="0 0 24 24" fill="none" stroke={ADDON_REGISTRY.socialLogin.iconColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}>
                                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                                </svg>
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: '#1A202C', marginTop: 10 }}>{ADDON_REGISTRY.socialLogin.name}</div>
                        <div style={{ fontSize: 12, color: '#64748B', marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.socialLogin.desc}</div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: '1px solid #E2E8F0' }}>
                            <span style={{ fontSize: 11, color: '#94A3B8' }}>{ADDON_REGISTRY.socialLogin.version}</span>
                            <span style={{ fontSize: 10, fontWeight: 600, color: '#94A3B8' }}>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</span>
                        </div>
                    </div>
                )}
                {ADDON_REGISTRY.whiteboard.status === 'released' ? (
                    <AddonCard
                        iconBg={ADDON_REGISTRY.whiteboard.iconBg}
                        iconColor={ADDON_REGISTRY.whiteboard.iconColor}
                        icon={<><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></>}
                        name={ADDON_REGISTRY.whiteboard.name}
                        desc={ADDON_REGISTRY.whiteboard.desc}
                        version={ADDON_REGISTRY.whiteboard.version}
                        isActive={whiteboardActive}
                        onToggle={handleWhiteboardToggle}
                        loading={whiteboardLoading}
                    />
                ) : (
                    <div style={{
                        background: '#fff',
                        border: '1px solid #E2E8F0',
                        borderRadius: 12,
                        padding: 20,
                        boxShadow: '0 1px 3px rgba(0,0,0,.07)',
                        position: 'relative',
                        overflow: 'hidden',
                    }}>
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(0.5px)', zIndex: 2, borderRadius: 12 }} />
                        <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 3, fontSize: 9, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 20, background: '#F1F5F9', color: '#94A3B8', border: '1px solid #E2E8F0' }}>{__('Coming Soon', 'lazytasks-project-task-management')}</div>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                            <div style={{ width: 40, height: 40, borderRadius: 8, background: ADDON_REGISTRY.whiteboard.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <svg viewBox="0 0 24 24" fill="none" stroke={ADDON_REGISTRY.whiteboard.iconColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}>
                                    <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>
                                </svg>
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: '#1A202C', marginTop: 10 }}>{ADDON_REGISTRY.whiteboard.name}</div>
                        <div style={{ fontSize: 12, color: '#64748B', marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.whiteboard.desc}</div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: '1px solid #E2E8F0' }}>
                            <span style={{ fontSize: 11, color: '#94A3B8' }}>{ADDON_REGISTRY.whiteboard.version}</span>
                            <span style={{ fontSize: 10, fontWeight: 600, color: '#94A3B8' }}>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</span>
                        </div>
                    </div>
                )}
                {/* Time Tracker */}
                {ADDON_REGISTRY.timeTracker.status === 'released' ? (
                    <AddonCard
                        iconBg={ADDON_REGISTRY.timeTracker.iconBg}
                        iconColor={ADDON_REGISTRY.timeTracker.iconColor}
                        icon={<><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>}
                        name={ADDON_REGISTRY.timeTracker.name}
                        desc={ADDON_REGISTRY.timeTracker.desc}
                        version={ADDON_REGISTRY.timeTracker.version}
                        isActive={timeTrackerActive}
                        onToggle={handleTimeTrackerToggle}
                        loading={timeTrackerLoading}
                    />
                ) : (
                    <div style={{
                        background: '#fff',
                        border: '1px solid #E2E8F0',
                        borderRadius: 12,
                        padding: 20,
                        boxShadow: '0 1px 3px rgba(0,0,0,.07)',
                        position: 'relative',
                        overflow: 'hidden',
                    }}>
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(0.5px)', zIndex: 2, borderRadius: 12 }} />
                        <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 3, fontSize: 9, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 20, background: '#F1F5F9', color: '#94A3B8', border: '1px solid #E2E8F0' }}>{__('Coming Soon', 'lazytasks-project-task-management')}</div>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                            <div style={{ width: 40, height: 40, borderRadius: 8, background: ADDON_REGISTRY.timeTracker.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <svg viewBox="0 0 24 24" fill="none" stroke={ADDON_REGISTRY.timeTracker.iconColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}>
                                    <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                                </svg>
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: '#1A202C', marginTop: 10 }}>{ADDON_REGISTRY.timeTracker.name}</div>
                        <div style={{ fontSize: 12, color: '#64748B', marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.timeTracker.desc}</div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: '1px solid #E2E8F0' }}>
                            <span style={{ fontSize: 11, color: '#94A3B8' }}>{ADDON_REGISTRY.timeTracker.version}</span>
                            <span style={{ fontSize: 10, fontWeight: 600, color: '#94A3B8' }}>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</span>
                        </div>
                    </div>
                )}
                {/* Performance Scorer */}
                {ADDON_REGISTRY.performance.status === 'released' ? (
                    <AddonCard
                        iconBg={ADDON_REGISTRY.performance.iconBg}
                        iconColor={ADDON_REGISTRY.performance.iconColor}
                        icon={<><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></>}
                        name={ADDON_REGISTRY.performance.name}
                        desc={ADDON_REGISTRY.performance.desc}
                        version={ADDON_REGISTRY.performance.version}
                        isActive={performanceActive}
                        onToggle={handlePerformanceToggle}
                        loading={performanceLoading}
                    />
                ) : (
                    <div style={{
                        background: '#fff',
                        border: '1px solid #E2E8F0',
                        borderRadius: 12,
                        padding: 20,
                        boxShadow: '0 1px 3px rgba(0,0,0,.07)',
                        position: 'relative',
                        overflow: 'hidden',
                    }}>
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(0.5px)', zIndex: 2, borderRadius: 12 }} />
                        <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 3, fontSize: 9, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 20, background: '#F1F5F9', color: '#94A3B8', border: '1px solid #E2E8F0' }}>{__('Coming Soon', 'lazytasks-project-task-management')}</div>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                            <div style={{ width: 40, height: 40, borderRadius: 8, background: ADDON_REGISTRY.performance.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <svg viewBox="0 0 24 24" fill="none" stroke={ADDON_REGISTRY.performance.iconColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}>
                                    <path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/>
                                </svg>
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: '#1A202C', marginTop: 10 }}>{ADDON_REGISTRY.performance.name}</div>
                        <div style={{ fontSize: 12, color: '#64748B', marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.performance.desc}</div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: '1px solid #E2E8F0' }}>
                            <span style={{ fontSize: 11, color: '#94A3B8' }}>{ADDON_REGISTRY.performance.version}</span>
                            <span style={{ fontSize: 10, fontWeight: 600, color: '#94A3B8' }}>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</span>
                        </div>
                    </div>
                )}
            </div>

            <AddonInstallationModal
                opened={addonModalOpened}
                onClose={() => setAddonModalOpened(false)}
                isSetting={true}
                addonSlug={activeAddonSlug}
            />
        </>
    );
};

export default AddonSettingsV3;