import React, { useState, useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useSearchParams } from 'react-router-dom';
import { showNotification } from '@mantine/notifications';
import { Modal, Text, Button, Group, Stack, ThemeIcon, Divider, Loader, HoverCard, ActionIcon, Tooltip, Switch, Paper, SimpleGrid, TextInput, PasswordInput, Badge, SegmentedControl, NumberInput } from '@mantine/core';
import { IconCheck, IconInfoCircle, IconCopy } from '@tabler/icons-react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import {
    fetchSettings,
    fetchTimezoneOptions,
    editSetting,
    editPortalSetting,
    installAddonPlugin,
    deactivateAddonPlugin,
    activateSocialLogin,
    saveFirebaseWithUpstream,
} from '../store/settingSlice';
import { fetchAllTags, createTag, deleteTag } from '../store/tagSlice';
import { parseTrelloFile, runTrelloImport, setStep, updateMemberMapping, resetImport, takeOverWizard, cancelWizard, setSelectedWorkspaceId, updateWorkspaceDraft, setCreatingWorkspace, updateProjectDraft, setMemberRole, addExtraMember, removeExtraMember, updateExtraMemberRole, appendWpUser, setNotifyMembers, setSectionName, reorderSectionPlan, setDesignatedCompleteTrelloListId, updateStatus, setDesignatedCompleteStatus, updatePriority, setTagName, setTaskOption, setNavbarToggle, setActivityLogLevel, setCardAcknowledged, acknowledgeAllCards, clearAllAcknowledgements, setTaskOverride, clearTaskOverrides } from '../store/trelloImportSlice';
import { createCompany, fetchAllCompanies } from '../store/companySlice';
import { fetchAllRoles } from '../../../store/auth/roleSlice';
import { createUser } from '../../../store/auth/userSlice';
import { parseTodoistFile, runTodoistImport, setStep as setTodoistStep, updateMemberMapping as updateTodoistMemberMapping, updatePriorityMapping, resetImport as resetTodoistImport } from '../store/todoistImportSlice';
import AddonInstallationModal from '../AddonInstallationModal';
import { ADDON_REGISTRY } from './addonRegistry';
import { __, sprintf } from '@wordpress/i18n';
import PrivacyAnalyticsSettings from './PrivacyAnalyticsSettings';
import TrelloImportStepper from './TrelloImportStepper';
import { hasPermission } from '../../ui/permissions';
import useAvailableHeight from '../../../utils/useAvailableHeight';
import { testSmtpConnection } from '../../../services/SettingService';

/* ─── Design tokens ──────────────────────────────────────── */
const S = {
    orange: '#ED7D31', orangeDk: '#D46A1E', orangeLt: '#FEF0E6',
    teal: '#39758D', tealLt: '#EBF1F4', tealDk: '#2C5C6E',
    bg: '#F4F6F8', white: '#FFFFFF', border: '#E2E8F0',
    text: '#1A202C', muted: '#64748B', light: '#94A3B8',
    danger: '#EF4444', success: '#10B981',
    shadow: '0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05)',
    radius: 12, radiusSm: 6,
};

/* ─── Micro-components ───────────────────────────────────── */
const Toggle = ({ checked, onChange, disabled }) => (
    <Switch
        checked={checked}
        onChange={(e) => !disabled && onChange(e.currentTarget.checked)}
        disabled={disabled}
        size="md"
        color="orange"
        styles={{ track: { cursor: disabled ? 'not-allowed' : 'pointer' } }}
    />
);

const Btn = ({ children, variant = 'primary', onClick, style: extra, disabled, type = 'button' }) => {
    const colorMap = { primary: 'orange', secondary: 'teal', ghost: 'gray', danger: 'red', outline: 'gray' };
    const variantMap = { primary: 'filled', secondary: 'light', ghost: 'subtle', danger: 'light', outline: 'outline' };
    return (
        <Button
            type={type}
            variant={variantMap[variant] || 'filled'}
            color={colorMap[variant] || 'orange'}
            size="xs"
            disabled={disabled}
            onClick={disabled ? undefined : onClick}
            style={{ fontWeight: 600, ...extra }}
        >
            {children}
        </Button>
    );
};

const FormGroup = ({ label, hint, required, children, style: extra }) => (
    <Stack gap={5} style={extra}>
        <Text component="label" fz={12} fw={600} c={S.text} style={{ letterSpacing: '0.1px' }}>
            {label}
            {required && <span style={{ color: S.orange, marginLeft: 2 }}>*</span>}
            {hint && <Text component="span" fz={11} fw={400} c={S.light} ml={4}>{hint}</Text>}
        </Text>
        {children}
    </Stack>
);

const inputStyle = {
    height: 34, padding: '0 10px', border: `1px solid ${S.border}`, borderRadius: S.radiusSm,
    fontSize: 13, fontFamily: 'inherit', color: S.text, background: S.white, outline: 'none', width: '100%',
    boxSizing: 'border-box',
};

const Card = ({ children, style: extra }) => (
    <Paper shadow="xs" p={24} radius={S.radius} withBorder style={extra}>
        {children}
    </Paper>
);

const CardTitle = ({ icon, children }) => (
    <Group gap={8} mb={16}>
        <ThemeIcon variant="transparent" size={16} color={S.teal}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
                {icon}
            </svg>
        </ThemeIcon>
        <Text fw={600} fz={14} c={S.text}>{children}</Text>
    </Group>
);

const ToggleRow = ({ label, desc, checked, onChange, first, disabled }) => (
    <Group justify="space-between" align="flex-start" gap={16}
        style={{ padding: '14px 0', borderTop: first ? 'none' : `1px solid ${S.border}` }}>
        <div style={{ flex: 1 }}>
            <Text fw={600} fz={13} c={S.text}>{label}</Text>
            {desc && <Text fz={12} c="dimmed" mt={2}>{desc}</Text>}
        </div>
        <div style={{ marginTop: 2 }}><Toggle checked={checked} onChange={onChange} disabled={disabled} /></div>
    </Group>
);

const SectionHeader = ({ title, desc, actions }) => (
    <Group justify="space-between" align="center" wrap="nowrap" mb={20}
        style={{ position: 'sticky', top: 0, zIndex: 10, background: '#F4F6F8', paddingTop: 4, paddingBottom: 4 }}>
        <div style={{ minWidth: 0, flex: 1 }}>
            <Text fz={16} fw={700} c={S.text}>{title}</Text>
            {desc && <Text fz={13} c="dimmed" mt={2}>{desc}</Text>}
        </div>
        {actions && <div style={{ flexShrink: 0, marginLeft: 16, whiteSpace: 'nowrap' }}>{actions}</div>}
    </Group>
);


const NavItem = ({ icon, label, isActive, onClick, badge, badgeVariant = 'teal', disabled }) => {
    const [hov, setHov] = useState(false);
    return (
        <button
            onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
            onClick={disabled ? undefined : onClick}
            style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px',
                cursor: disabled ? 'default' : 'pointer',
                color: isActive ? S.orange : disabled ? '#CBD5E1' : hov ? S.teal : S.muted,
                fontWeight: isActive ? 600 : 500, fontSize: 13,
                background: isActive ? S.orangeLt : hov && !disabled ? S.tealLt : 'none',
                borderLeft: isActive ? `3px solid ${S.orange}` : '3px solid transparent',
                border: 'none', width: '100%', textAlign: 'left',
                position: 'relative', fontFamily: 'inherit', transition: '180ms ease',
            }}
        >
            <span style={{ flexShrink: 0, display: 'flex', opacity: disabled ? 0.4 : 1 }}>{icon}</span>
            <span style={{ flex: 1 }}>{label}</span>
            {badge && (
                <span style={{
                    fontSize: 10, fontWeight: 600, padding: '1px 6px', borderRadius: 20,
                    background: badgeVariant === 'off' ? '#F1F5F9' : badgeVariant === 'on' ? '#DCFCE7' : S.tealLt,
                    color: badgeVariant === 'off' ? S.light : badgeVariant === 'on' ? '#15803D' : S.teal,
                }}>{badge}</span>
            )}
        </button>
    );
};

const SectionLabel = ({ label, badge }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.8px', color: S.light, padding: '14px 14px 6px' }}>
        <span style={{ flex: 1 }}>{label}</span>
        {badge && (
            <span style={{ fontSize: 9, fontWeight: 600, padding: '1px 5px', borderRadius: 20, background: '#FFF7ED', color: '#C2410C', textTransform: 'capitalize', letterSpacing: 0 }}>{badge}</span>
        )}
    </div>
);

const Icon = ({ d, size = 16, stroke = 'currentColor', sw = 2 }) => (
    <svg viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={{ width: size, height: size }}>
        {typeof d === 'string' ? <path d={d} /> : d}
    </svg>
);

const FieldError = ({ msg }) => msg ? (
    <div style={{ fontSize: 11, color: S.danger, marginTop: 2 }}>{msg}</div>
) : null;

/* ──────────────────────────────────────────────────────────
   PANEL 1: General Settings
──────────────────────────────────────────────────────────── */
const GeneralSettingsPanel = () => {
    const dispatch = useDispatch();
    const { settings, currentTimezone, timezones = [], serialSettings = {}, maxUploadSize = 0, maxUploadSizeHuman = '', configuredMaxFileUploadSizeMb = null } = useSelector(s => s.settings.setting);

    const [portalTitle, setPortalTitle] = useState('');
    const [timezone, setTimezone] = useState('');
    const [logoFile, setLogoFile] = useState(null);
    const [logoPath, setLogoPath] = useState('');
    const [showLogoInHeader, setShowLogoInHeader] = useState(true);
    const [showTitleInHeader, setShowTitleInHeader] = useState(true);
    const [headerTitleSize, setHeaderTitleSize] = useState('s');
    const [showCardStatusBorder, setShowCardStatusBorder] = useState(true);
    const [showCardPriorityBorder, setShowCardPriorityBorder] = useState(true);
    const [headerMenuDisplay, setHeaderMenuDisplay] = useState('icon-text');
    const [headerTitleColor, setHeaderTitleColor] = useState('#1A202C');
    const [headerBgColor, setHeaderBgColor] = useState('#FFFFFF');
    const [headerBgGradient, setHeaderBgGradient] = useState(false);
    const [headerBgColor2, setHeaderBgColor2] = useState('#EBF1F4');
    const [serialEnabled, setSerialEnabled] = useState(false);
    const [serialNumber, setSerialNumber] = useState('');
    const [isSerialSubmitted, setIsSerialSubmitted] = useState(false);
    const [serialError, setSerialError] = useState('');
    const [maxFileUploadSize, setMaxFileUploadSize] = useState('');
    const [maxFileUploadSizeError, setMaxFileUploadSizeError] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const fileInputRef = useRef(null);

    useEffect(() => { dispatch(fetchTimezoneOptions()); }, [dispatch]);

    useEffect(() => {
        if (settings?.core_setting) {
            try {
                const parsed = JSON.parse(settings.core_setting);
                if (parsed?.site_title) setPortalTitle(parsed.site_title);
                if (parsed?.site_logo) setLogoPath(parsed.site_logo);
                setShowLogoInHeader(parsed?.show_logo_in_header !== false);
                setShowTitleInHeader(parsed?.show_title_in_header !== false);
                if (parsed?.header_title_size) setHeaderTitleSize(parsed.header_title_size);
                setShowCardStatusBorder(parsed?.show_card_status_border !== false);
                setShowCardPriorityBorder(parsed?.show_card_priority_border !== false);
                if (parsed?.header_menu_display) setHeaderMenuDisplay(parsed.header_menu_display);
                if (parsed?.header_title_color) setHeaderTitleColor(parsed.header_title_color);
                if (parsed?.header_bg_color) setHeaderBgColor(parsed.header_bg_color);
                setHeaderBgGradient(parsed?.header_bg_gradient === true);
                if (parsed?.header_bg_color2) setHeaderBgColor2(parsed.header_bg_color2);
            } catch {}
        }
        if (currentTimezone) setTimezone(currentTimezone);
    }, [settings, currentTimezone]);

    useEffect(() => {
        if (serialSettings) {
            setSerialEnabled(!!serialSettings.enabled);
            if (serialSettings.number) {
                setSerialNumber(serialSettings.number.toString());
                setIsSerialSubmitted(true);
            }
        }
    }, [serialSettings]);

    useEffect(() => {
        setMaxFileUploadSize(configuredMaxFileUploadSizeMb ?? '');
    }, [configuredMaxFileUploadSizeMb]);

    const handleSerialChange = (val) => {
        setSerialError('');
        if (/^\d{0,4}$/.test(val)) {
            const n = parseInt(val, 10);
            if (val === '') setSerialError(__( 'Reference number cannot be empty', 'lazytasks-project-task-management' ));
            else if (n === 0) setSerialError(__( 'Reference number cannot be 0', 'lazytasks-project-task-management' ));
            else if (n > 4000) setSerialError(__( 'Reference number cannot be greater than 4000', 'lazytasks-project-task-management' ));
            setSerialNumber(val);
        }
    };

    const handleSubmit = async () => {
        if (serialEnabled && !isSerialSubmitted) {
            if (!serialNumber) { setSerialError(__( 'Reference number cannot be empty', 'lazytasks-project-task-management' )); return; }
            const n = parseInt(serialNumber, 10);
            if (n <= 0 || n > 4000) { setSerialError(__( 'Invalid reference number', 'lazytasks-project-task-management' )); return; }
        }
        const serverMaxMb = Math.floor((maxUploadSize || 0) / 1048576);
        let maxFileUploadSizeToSend = '';
        if (maxFileUploadSize !== '' && maxFileUploadSize !== null && maxFileUploadSize !== undefined) {
            const mb = Number(maxFileUploadSize);
            if (!Number.isFinite(mb) || mb <= 0) {
                setMaxFileUploadSizeError(__( 'Must be a positive number', 'lazytasks-project-task-management' ));
                return;
            }
            if (serverMaxMb > 0 && mb > serverMaxMb) {
                setMaxFileUploadSizeError(sprintf(
                    /* translators: %s: server max upload size in MB */
                    __( 'Cannot exceed server limit of %s MB', 'lazytasks-project-task-management' ),
                    serverMaxMb
                ));
                return;
            }
            maxFileUploadSizeToSend = mb;
        }
        setMaxFileUploadSizeError('');
        setIsSubmitting(true);
        const coreSetting = { site_title: portalTitle, show_logo_in_header: showLogoInHeader, show_title_in_header: showTitleInHeader, header_title_size: headerTitleSize, show_card_status_border: showCardStatusBorder, show_card_priority_border: showCardPriorityBorder, header_menu_display: headerMenuDisplay, header_title_color: headerTitleColor, header_bg_color: headerBgColor, header_bg_gradient: headerBgGradient, header_bg_color2: headerBgColor2 };
        if (maxFileUploadSizeToSend !== '') coreSetting.max_file_upload_size = maxFileUploadSizeToSend;
        const formData = new FormData();
        if (logoFile) formData.append('site_logo', logoFile);
        formData.append('timezone', timezone);
        formData.append('serial_number', serialNumber);
        formData.append('is_serial_enabled', serialEnabled);
        formData.append('settings', JSON.stringify({ ...settings, core_setting: coreSetting, type: 'general' }));
        const res = await dispatch(editSetting({ data: formData }));
        setIsSubmitting(false);
        const ok = res.payload?.status === 200;
        if (ok && serialEnabled && serialNumber) setIsSerialSubmitted(true);
        showNotification({ title: __( 'General Settings', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 2000 });
    };

    const handleReset = () => {
        dispatch(fetchSettings());
    };

    return (
        <>
            <SectionHeader
                title={__( 'General Settings', 'lazytasks-project-task-management' )}
                desc={__( 'Configure your portal\'s branding, regional preferences, and task reference numbers.', 'lazytasks-project-task-management' )}
                actions={
                    <div style={{ display: 'flex', gap: 8 }}>
                        <Btn variant="ghost" onClick={handleReset}>{__( 'Reset', 'lazytasks-project-task-management' )}</Btn>
                        <Btn variant="primary" onClick={handleSubmit} disabled={isSubmitting}>
                            <Icon d="M20 6 9 17 4 12" sw={2.5} size={14} />
                            {isSubmitting ? __( 'Saving…', 'lazytasks-project-task-management' ) : __( 'Save Changes', 'lazytasks-project-task-management' )}
                        </Btn>
                    </div>
                }
            />
            <Card>
                <CardTitle icon={<><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 1 0-16 0"/></>}>{__( 'Branding', 'lazytasks-project-task-management' )}</CardTitle>
                <SimpleGrid cols={2} spacing={16} mb={16}>
                    <FormGroup label={__( 'Portal Title', 'lazytasks-project-task-management' )} required>
                        <input style={inputStyle} value={portalTitle} onChange={e => setPortalTitle(e.target.value)} placeholder={__( 'Enter portal title', 'lazytasks-project-task-management' )} />
                    </FormGroup>
                    <FormGroup label={__( 'Timezone', 'lazytasks-project-task-management' )} hint={__( 'Used for task due dates', 'lazytasks-project-task-management' )}>
                        <select style={{ ...inputStyle, cursor: 'pointer' }} value={timezone} onChange={e => setTimezone(e.target.value)}>
                            {timezones.map(tz => (
                                <option key={tz.value} value={tz.value}>{tz.label}</option>
                            ))}
                        </select>
                    </FormGroup>
                </SimpleGrid>
                <div>
                        <FormGroup label={__( 'Portal Logo', 'lazytasks-project-task-management' )} hint={__( '160 × 160px recommended · PNG or JPG', 'lazytasks-project-task-management' )}>
                            <input
                                ref={fileInputRef} type="file"
                                accept="image/png,image/jpeg,image/jpg"
                                style={{ display: 'none' }}
                                onChange={e => {
                                    const f = e.target.files[0];
                                    if (f) {
                                        const allowedExtensions = ['.png', '.jpeg', '.jpg'];
                                        const ext = f.name.substring(f.name.lastIndexOf('.')).toLowerCase();
                                        const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
                                        if (!allowedExtensions.includes(ext) || !allowedTypes.includes(f.type)) {
                                            showNotification({ title: __( 'Invalid file type', 'lazytasks-project-task-management' ), message: __( 'Please upload a PNG or JPEG image.', 'lazytasks-project-task-management' ), color: 'red' });
                                            e.target.value = '';
                                            return;
                                        }
                                        setLogoFile(f); setLogoPath(URL.createObjectURL(f));
                                    }
                                }}
                            />
                            <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                                <div
                                    onClick={() => fileInputRef.current?.click()}
                                    style={{ flex: 1, border: `2px dashed ${S.border}`, borderRadius: S.radius, padding: 20, textAlign: 'center', cursor: 'pointer' }}
                                >
                                    {logoPath ? (
                                        <img src={logoPath} alt={__('logo', 'lazytasks-project-task-management')} style={{ width: 64, height: 64, objectFit: 'contain', borderRadius: S.radiusSm, margin: '0 auto 10px', display: 'block' }} />
                                    ) : (
                                        <div style={{ width: 64, height: 64, background: 'linear-gradient(135deg, #EBF1F4, #dde8ec)', borderRadius: S.radiusSm, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px' }}>
                                            <Icon d={<><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></>} stroke={S.teal} />
                                        </div>
                                    )}
                                    <div style={{ fontSize: 12, color: S.muted }}>
                                        <strong style={{ color: S.orange }}>{__( 'Click to upload', 'lazytasks-project-task-management' )}</strong> {__( 'or drag & drop', 'lazytasks-project-task-management' )}
                                    </div>
                                    <div style={{ fontSize: 11, color: S.light, marginTop: 2 }}>{__( "PNG, JPG up to 2MB", "lazytasks-project-task-management" )}</div>
                                </div>
                                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flexShrink: 0, paddingTop: 4 }}>
                                    <Btn variant="secondary" style={{ height: 30, fontSize: 12 }} onClick={() => fileInputRef.current?.click()}>{__( 'Upload', 'lazytasks-project-task-management' )}</Btn>
                                    <Btn variant="ghost" style={{ height: 30, fontSize: 12 }} onClick={() => { setLogoFile(null); setLogoPath(''); }}>{__( 'Remove', 'lazytasks-project-task-management' )}</Btn>
                                </div>
                            </div>
                        </FormGroup>
                    </div>

                {/* Header Display */}
                <div style={{ paddingTop: 20, marginTop: 20, borderTop: `1px solid ${S.border}` }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Icon d={<><rect x="3" y="3" width="18" height="4" rx="1"/><path d="M3 10h18M3 17h18"/></>} stroke={S.teal} size={14} />
                        {__( 'Header Display', 'lazytasks-project-task-management' )}
                    </div>
                    <ToggleRow
                        first
                        label={__( 'Show Logo in Header', 'lazytasks-project-task-management' )}
                        desc={__( 'Display the portal logo in the top navigation bar.', 'lazytasks-project-task-management' )}
                        checked={showLogoInHeader}
                        onChange={setShowLogoInHeader}
                    />
                    <ToggleRow
                        label={__( 'Show Portal Title in Header', 'lazytasks-project-task-management' )}
                        desc={__( 'Display the portal title centered in the top navigation bar.', 'lazytasks-project-task-management' )}
                        checked={showTitleInHeader}
                        onChange={setShowTitleInHeader}
                    />
                    {showTitleInHeader && (<>
                        <Group gap={16} style={{ padding: '10px 16px 14px', borderBottom: `1px solid ${S.border}` }}>
                            <Text fz={12} c={S.muted} style={{ minWidth: 110 }}>{__( 'Select Header Size', 'lazytasks-project-task-management' )}</Text>
                            <SegmentedControl
                                value={headerTitleSize}
                                onChange={setHeaderTitleSize}
                                size="xs"
                                color="teal"
                                data={[
                                    { value: 's', label: __('S', 'lazytasks-project-task-management') },
                                    { value: 'm', label: __('M', 'lazytasks-project-task-management') },
                                    { value: 'lg', label: __('LG', 'lazytasks-project-task-management') },
                                ]}
                            />
                        </Group>
                        <Group gap={16} style={{ padding: '10px 16px 14px', borderBottom: `1px solid ${S.border}` }}>
                            <Text fz={12} c={S.muted} style={{ minWidth: 110 }}>{__( 'Header Background Color', 'lazytasks-project-task-management' )}</Text>
                            <input type="color" value={headerBgColor}
                                onChange={e => setHeaderBgColor(e.target.value)}
                                style={{ width: 36, height: 30, border: `1px solid ${S.border}`, borderRadius: S.radiusSm, cursor: 'pointer', padding: 2 }} />
                            {headerBgGradient && (
                                <input type="color" value={headerBgColor2}
                                    onChange={e => setHeaderBgColor2(e.target.value)}
                                    style={{ width: 36, height: 30, border: `1px solid ${S.border}`, borderRadius: S.radiusSm, cursor: 'pointer', padding: 2 }} />
                            )}
                            <Toggle checked={headerBgGradient} onChange={setHeaderBgGradient} />
                            <Text fz={12} c={S.muted} style={{ whiteSpace: 'nowrap' }}>{__( 'Gradient', 'lazytasks-project-task-management' )}</Text>
                        </Group>
                        {(headerBgGradient || headerBgColor.toUpperCase() !== '#FFFFFF') && (
                            <div style={{ margin: '-4px 16px 10px', height: 8, borderRadius: 4,
                                background: headerBgGradient
                                    ? `linear-gradient(to right, ${headerBgColor}, ${headerBgColor2})`
                                    : headerBgColor,
                                border: `1px solid ${S.border}` }} />
                        )}
                        <div style={{ padding: '10px 16px 14px', borderBottom: `1px solid ${S.border}`, display: 'flex', alignItems: 'center', gap: 16 }}>
                            <span style={{ fontSize: 12, color: S.muted, minWidth: 110 }}>
                                {__( 'Portal Title Color', 'lazytasks-project-task-management' )}
                            </span>
                            <input type="color" value={headerTitleColor}
                                onChange={e => setHeaderTitleColor(e.target.value)}
                                style={{ width: 36, height: 30, border: `1px solid ${S.border}`, borderRadius: S.radiusSm, cursor: 'pointer', padding: 2 }} />
                            <span style={{ fontSize: 12, color: S.light }}>{headerTitleColor}</span>
                        </div>
                    </>)}

                    {/* Menu Item Display */}
                    <div style={{
                        display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16,
                        padding: '14px 0', borderTop: `1px solid ${S.border}`,
                    }}>
                        <div style={{ flex: 1 }}>
                            <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>{__( 'Menu Item Display', 'lazytasks-project-task-management' )}</div>
                            <div style={{ fontSize: 12, color: S.muted, marginTop: 2 }}>{__( 'Choose how menu items appear in the header bar.', 'lazytasks-project-task-management' )}</div>
                        </div>
                        <select style={{ ...inputStyle, width: 180, cursor: 'pointer', marginTop: 2 }}
                            value={headerMenuDisplay} onChange={e => setHeaderMenuDisplay(e.target.value)}>
                            <option value="icon-text">{__( 'Icon + Text', 'lazytasks-project-task-management' )}</option>
                            <option value="icon-only">{__( 'Icon Only', 'lazytasks-project-task-management' )}</option>
                            <option value="text-only">{__( 'Text Only', 'lazytasks-project-task-management' )}</option>
                        </select>
                    </div>
                </div>

                {/* Task Reference Numbers */}
                <div style={{ paddingTop: 20, marginTop: 20, borderTop: `1px solid ${S.border}` }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Icon d={<><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></>} stroke={S.teal} size={14} />
                        {__( 'Task Reference Numbers', 'lazytasks-project-task-management' )}
                    </div>
                    <ToggleRow
                        first
                        label={__( 'Enable Task Reference Numbers', 'lazytasks-project-task-management' )}
                        desc={__( 'Once enabled and numbering begins, the starting number cannot be changed. Each new task receives an auto-incremented reference ID.', 'lazytasks-project-task-management' )}
                        checked={serialEnabled}
                        onChange={setSerialEnabled}
                    />
                    {serialEnabled && (
                        <div style={{ marginTop: 16 }}>
                            {isSerialSubmitted && (
                                <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', background: S.tealLt, border: `1px solid #C8DDE5`, borderRadius: S.radiusSm, marginBottom: 14 }}>
                                    <Icon d={<><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></>} stroke={S.teal} size={16} />
                                    <p style={{ fontSize: 12, color: S.tealDk, lineHeight: 1.5, margin: 0 }}>{__( 'The starting number has been set and is now locked.', 'lazytasks-project-task-management' )}</p>
                                </div>
                            )}
                            {!isSerialSubmitted && (
                                <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', background: S.tealLt, border: `1px solid #C8DDE5`, borderRadius: S.radiusSm, marginBottom: 14 }}>
                                    <Icon d={<><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></>} stroke={S.teal} size={16} />
                                    <p style={{ fontSize: 12, color: S.tealDk, lineHeight: 1.5, margin: 0 }}>{__( 'The starting number can only be set once. After the first task is created with a reference number, this field will be locked.', 'lazytasks-project-task-management' )}</p>
                                </div>
                            )}
                            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, flexWrap: 'wrap' }}>
                                <FormGroup label={__( 'Starting Number', 'lazytasks-project-task-management' )} hint="1 – 4000" style={{ width: 160 }}>
                                    <input
                                        style={{ ...inputStyle, opacity: isSerialSubmitted ? 0.6 : 1 }}
                                        value={serialNumber}
                                        onChange={e => handleSerialChange(e.target.value)}
                                        disabled={isSerialSubmitted}
                                        placeholder="0001"
                                    />
                                    <FieldError msg={serialError} />
                                </FormGroup>
                                <FormGroup label={__( 'Preview', 'lazytasks-project-task-management' )}>
                                    <div style={{ display: 'inline-flex', alignItems: 'center', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, overflow: 'hidden', marginTop: 8 }}>
                                        <span style={{ padding: '5px 10px', fontSize: 13, fontWeight: 600, color: S.muted }}>
                                            #{String(serialNumber || 1).padStart(4, '0')}
                                        </span>
                                    </div>
                                </FormGroup>
                            </div>
                        </div>
                    )}
                </div>

                {/* Board Card Borders */}
                <div style={{ paddingTop: 20, marginTop: 20, borderTop: `1px solid ${S.border}` }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Icon d={<><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>} stroke={S.teal} size={14} />
                        {__( 'Board Card Borders', 'lazytasks-project-task-management' )}
                    </div>
                    <ToggleRow
                        first
                        label={__( 'Show Status Color Border', 'lazytasks-project-task-management' )}
                        desc={__( 'Display a colored bottom border on board cards based on the task status color.', 'lazytasks-project-task-management' )}
                        checked={showCardStatusBorder}
                        onChange={setShowCardStatusBorder}
                    />
                    <ToggleRow
                        label={__( 'Show Priority Color Border', 'lazytasks-project-task-management' )}
                        desc={__( 'Display a colored left border on board cards based on the task priority color.', 'lazytasks-project-task-management' )}
                        checked={showCardPriorityBorder}
                        onChange={setShowCardPriorityBorder}
                    />
                </div>

                {/* File Uploads */}
                <div style={{ paddingTop: 20, marginTop: 20, borderTop: `1px solid ${S.border}` }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Icon d={<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></>} stroke={S.teal} size={14} />
                        {__( 'File Uploads', 'lazytasks-project-task-management' )}
                    </div>
                    <FormGroup
                        label={__( 'Max File Upload Size (MB)', 'lazytasks-project-task-management' )}
                        hint={maxUploadSizeHuman ? sprintf(
                            /* translators: %s: human-readable max upload size */
                            __( 'Recommended max: %s (your server limit)', 'lazytasks-project-task-management' ),
                            maxUploadSizeHuman
                        ) : ''}
                        style={{ maxWidth: 260 }}
                    >
                        <NumberInput
                            value={maxFileUploadSize}
                            onChange={(v) => { setMaxFileUploadSize(v); setMaxFileUploadSizeError(''); }}
                            min={1}
                            max={Math.floor((maxUploadSize || 0) / 1048576) || undefined}
                            clampBehavior="strict"
                            allowDecimal={false}
                            allowNegative={false}
                            hideControls={false}
                            placeholder={maxUploadSizeHuman ? sprintf(
                                /* translators: %s: human-readable server upload limit */
                                __( 'Defaults to server limit (%s)', 'lazytasks-project-task-management' ),
                                maxUploadSizeHuman
                            ) : __( 'Defaults to server limit', 'lazytasks-project-task-management' )}
                            error={maxFileUploadSizeError || undefined}
                        />
                    </FormGroup>
                </div>

            </Card>
        </>
    );
};

/* ──────────────────────────────────────────────────────────
   PANEL 2: Portal Settings
──────────────────────────────────────────────────────────── */
const PortalSettingsPanel = () => {
    const dispatch = useDispatch();
    const { portalSettings = {} } = useSelector(s => s.settings.setting);

    const [portalEnabled, setPortalEnabled] = useState(false);
    const [slug, setSlug] = useState('lazytasks');
    const [slugError, setSlugError] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [urlCopied, setUrlCopied] = useState(false);

    const homeUrl = typeof appLocalizer !== 'undefined' ? appLocalizer?.homeUrl : 'https://yourdomain.com';

    useEffect(() => {
        if (portalSettings) {
            setPortalEnabled(portalSettings.status === 'publish');
            setSlug(portalSettings.slug || 'lazytasks');
        }
    }, [portalSettings]);

    const handleSlugChange = (val) => {
        const sanitized = val.toLowerCase().replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
        if (sanitized.length > 12) setSlugError(__( 'Maximum 12 characters allowed', 'lazytasks-project-task-management' ));
        else setSlugError('');
        setSlug(sanitized);
    };

    const handleSubmit = async () => {
        if (portalEnabled) {
            if (!slug) { setSlugError(__( 'Portal Slug cannot be empty', 'lazytasks-project-task-management' )); return; }
            if (slug.length > 12) { setSlugError(__( 'Maximum 12 characters allowed', 'lazytasks-project-task-management' )); return; }
        }
        setIsSubmitting(true);
        const res = await dispatch(editPortalSetting({ data: { is_portal_enable: portalEnabled, portal_slug: slug } })).unwrap().catch(err => ({ status: 500, message: err?.message || __('Error', 'lazytasks-project-task-management') }));
        setIsSubmitting(false);
        const ok = res.status === 200;
        showNotification({ title: __( 'Portal Settings', 'lazytasks-project-task-management' ), message: res.message || '', color: ok ? 'green' : 'red', autoClose: 2000 });
        if (ok) {
            setTimeout(() => {
                if (!portalEnabled) window.location.href = '/wp-admin/admin.php?page=lazytasks-page#/v3/settings';
                else if (typeof appLocalizer !== 'undefined' && !appLocalizer?.is_admin && res.data?.permalink) {
                    window.location.href = res.data.permalink + '#/v3/settings';
                }
            }, 1000);
        }
    };

    return (
        <>
            <SectionHeader
                title={__( 'Portal Settings', 'lazytasks-project-task-management' )}
                desc={__( 'Enable and configure the public-facing client portal.', 'lazytasks-project-task-management' )}
                actions={
                    <Btn variant="primary" onClick={handleSubmit} disabled={isSubmitting}>
                        <Icon d="M20 6 9 17 4 12" sw={2.5} size={14} />
                        {isSubmitting ? __( 'Saving…', 'lazytasks-project-task-management' ) : __( 'Save Changes', 'lazytasks-project-task-management' )}
                    </Btn>
                }
            />
            <Card>
                <CardTitle icon={<><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8m-4-4v4"/></>}>{__( 'Frontend Portal', 'lazytasks-project-task-management' )}</CardTitle>
                <ToggleRow
                    first
                    label={__( 'Enable Frontend Portal', 'lazytasks-project-task-management' )}
                    desc={__( 'Allow clients and guests to access tasks via a public URL without logging into WP Admin.', 'lazytasks-project-task-management' )}
                    checked={portalEnabled}
                    onChange={setPortalEnabled}
                />
                {portalEnabled && (
                    <div style={{ marginTop: 16 }}>
                        <FormGroup label={__( 'Portal Slug', 'lazytasks-project-task-management' )} hint={__( 'Max 12 characters · letters, numbers, hyphens', 'lazytasks-project-task-management' )} style={{ maxWidth: 420 }}>
                            <div style={{ display: 'flex', border: `1px solid ${slugError ? S.danger : S.border}`, borderRadius: S.radiusSm, overflow: 'hidden' }}>
                                <span style={{ display: 'flex', alignItems: 'center', padding: '0 10px', background: '#F8FAFC', borderRight: `1px solid ${S.border}`, fontSize: 12, color: S.muted, whiteSpace: 'nowrap', fontWeight: 500 }}>
                                    {homeUrl}/
                                </span>
                                <input
                                    style={{ ...inputStyle, border: 'none', borderRadius: 0, flex: 1 }}
                                    value={slug}
                                    onChange={e => handleSlugChange(e.target.value)}
                                    maxLength={12}
                                    placeholder="lazytasks"
                                />
                            </div>
                            <FieldError msg={slugError} />
                            <span style={{ fontSize: 11, color: S.light }}>{__( 'Only letters, numbers, and hyphens allowed.', 'lazytasks-project-task-management' )}</span>
                        </FormGroup>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: '#F8FAFC', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, marginTop: 8 }}>
                            <Icon d={<><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></>} size={14} stroke={S.light} />
                            <span style={{ fontSize: 12, color: S.muted, fontFamily: 'monospace', flex: 1 }}>
                                {homeUrl}/<strong style={{ color: S.teal }}>{slug || 'lazytasks'}</strong>
                            </span>
                            <button
                                onClick={() => {
                                    const text = `${homeUrl}/${slug || 'lazytasks'}`;
                                    if (navigator.clipboard) {
                                        navigator.clipboard.writeText(text).catch(() => {});
                                    } else {
                                        const el = document.createElement('textarea');
                                        el.value = text;
                                        el.style.cssText = 'position:fixed;opacity:0';
                                        document.body.appendChild(el);
                                        el.select();
                                        document.execCommand('copy');
                                        document.body.removeChild(el);
                                    }
                                    setUrlCopied(true);
                                    setTimeout(() => setUrlCopied(false), 2000);
                                }}
                                title={urlCopied ? __( 'Copied!', 'lazytasks-project-task-management' ) : __( 'Copy URL', 'lazytasks-project-task-management' )}
                                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, display: 'flex', alignItems: 'center', color: urlCopied ? S.teal : S.muted }}
                            >
                                {urlCopied
                                    ? <Icon d="M20 6 9 17 4 12" sw={2.5} size={14} />
                                    : <Icon d={<><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></>} size={14} />
                                }
                            </button>
                        </div>
                    </div>
                )}
            </Card>
        </>
    );
};

/* ──────────────────────────────────────────────────────────
   PANEL 3: Notification Settings
──────────────────────────────────────────────────────────── */
const NotifCard = ({ iconBg, iconColor, iconPath, title, sub, enabled, onToggle, children, onSave, saving, status, extraFooter }) => (
    <div style={{ background: S.white, border: `1px solid ${S.border}`, borderRadius: S.radius, overflow: 'hidden', boxShadow: S.shadow }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '16px 18px 14px', borderBottom: `1px solid ${S.border}` }}>
            <div style={{ width: 36, height: 36, borderRadius: S.radiusSm, background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon d={iconPath} stroke={iconColor} size={18} />
            </div>
            <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: S.text }}>{title}</div>
                <div style={{ fontSize: 11, color: S.muted, marginTop: 1 }}>{sub}</div>
            </div>
            <Toggle checked={enabled} onChange={onToggle} />
        </div>
        <div style={{ padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 12, minHeight: 120 }}>
            {children}
        </div>
        <div style={{ padding: '12px 18px', borderTop: `1px solid ${S.border}`, background: '#FAFBFC', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, fontWeight: 600, color: status === 'connected' ? S.success : status === 'error' ? S.danger : S.light }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor', display: 'inline-block' }} />
                {status === 'connected' ? __( 'Connected', 'lazytasks-project-task-management' ) : status === 'error' ? __( 'Could not connect', 'lazytasks-project-task-management' ) : __( 'Not configured', 'lazytasks-project-task-management' )}
            </span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                {extraFooter}
                <Btn variant="primary" style={{ height: 28, fontSize: 11, padding: '0 12px' }} onClick={onSave} disabled={saving}>
                    {saving ? __( 'Saving…', 'lazytasks-project-task-management' ) : __( 'Save', 'lazytasks-project-task-management' )}
                </Btn>
            </div>
        </div>
    </div>
);

const NotifField = ({ label, error, children }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <label style={{ fontSize: 11, fontWeight: 600, color: S.text }}>{label}</label>
        {children}
        <FieldError msg={error} />
    </div>
);

const notifInputStyle = { ...inputStyle, height: 30, fontSize: 12, padding: '0 8px' };

const NotificationSettingsPanel = () => {
    const dispatch = useDispatch();
    const { settings, is_wpsms_active, is_lazytasks_premium_active } = useSelector(s => s.settings.setting);

    /* SMTP state */
    const [smtpEnabled, setSmtpEnabled] = useState(false);
    const [activeMailer, setActiveMailer] = useState('wordpress');
    const [smtpHost, setSmtpHost] = useState('');
    const [smtpPort, setSmtpPort] = useState(587);
    const [smtpUser, setSmtpUser] = useState('');
    const [smtpPass, setSmtpPass] = useState('');
    const [smtpSenderName, setSmtpSenderName] = useState('');
    const [smtpSenderEmail, setSmtpSenderEmail] = useState('');
    const [smtpEncryption, setSmtpEncryption] = useState('tls');
    const [smtpSaving, setSmtpSaving] = useState(false);
    const [smtpTesting, setSmtpTesting] = useState(false);
    const [smtpConnectionStatus, setSmtpConnectionStatus] = useState(null); // null | 'connected' | 'error'

    /* SMS state */
    const [smsEnabled, setSmsEnabled] = useState(false);
    const [smsSaving, setSmsSaving] = useState(false);

    /* Firebase state */
    const [firebaseEnabled, setFirebaseEnabled] = useState(false);
    const [firebaseClientEmail, setFirebaseClientEmail] = useState('');
    const [firebasePrivateKey, setFirebasePrivateKey] = useState('');
    const [firebaseSaving, setFirebaseSaving] = useState(false);
    const firebaseClientEmailRef = useRef(null);
    const firebasePrivateKeyRef = useRef(null);

    useEffect(() => {
        if (!settings) return;
        try {
            if (settings.smtp_configuration) {
                const p = JSON.parse(settings.smtp_configuration);
                if (p.is_smtp_enabled) setSmtpEnabled(p.is_smtp_enabled);
                if (p.active_mailer) setActiveMailer(p.active_mailer);
                if (p.smtp_host) setSmtpHost(p.smtp_host);
                if (p.smtp_port) setSmtpPort(p.smtp_port);
                if (p.smtp_username) setSmtpUser(p.smtp_username);
                if (p.smtp_password) setSmtpPass(p.smtp_password);
                if (p.smtp_sender_name) setSmtpSenderName(p.smtp_sender_name);
                if (p.smtp_sender_email) setSmtpSenderEmail(p.smtp_sender_email);
                if (p.smtp_encryption) setSmtpEncryption(p.smtp_encryption);
            }
        } catch {}
        try {
            if (settings.sms_configuration) {
                const p = JSON.parse(settings.sms_configuration);
                if (p.is_sms_enabled) setSmsEnabled(p.is_sms_enabled);
            }
        } catch {}
        try {
            if (settings.firebase_configuration) {
                const p = JSON.parse(settings.firebase_configuration);
                if (p.is_firebase_enabled) setFirebaseEnabled(p.is_firebase_enabled);
                if (p.firebase_client_email) setFirebaseClientEmail(p.firebase_client_email);
                if (p.firebase_private_key) setFirebasePrivateKey(p.firebase_private_key);
            }
        } catch {}
    }, [settings]);

    const checkSmtpConnection = async () => {
        try {
            const result = await testSmtpConnection();
            setSmtpConnectionStatus(result.connected ? 'connected' : 'error');
        } catch {
            setSmtpConnectionStatus('error');
        }
    };

    useEffect(() => {
        if (smtpEnabled) checkSmtpConnection();
    }, [settings]);

    const handleTestConnection = async () => {
        setSmtpTesting(true);
        try {
            const result = await testSmtpConnection(true);
            setSmtpConnectionStatus(result.connected ? 'connected' : 'error');
            showNotification({
                title: __( 'SMTP Test', 'lazytasks-project-task-management' ),
                message: result.message || (result.connected ? __( 'Connection successful!', 'lazytasks-project-task-management' ) : __( 'Connection failed.', 'lazytasks-project-task-management' )),
                color: result.connected ? 'green' : 'red',
                autoClose: 4000,
            });
        } catch {
            setSmtpConnectionStatus('error');
            showNotification({ title: __( 'SMTP Test', 'lazytasks-project-task-management' ), message: __( 'Connection failed.', 'lazytasks-project-task-management' ), color: 'red', autoClose: 4000 });
        }
        setSmtpTesting(false);
    };

    const saveSmtp = async () => {
        setSmtpSaving(true);
        const values = { is_smtp_enabled: smtpEnabled, active_mailer: activeMailer, smtp_host: smtpHost, smtp_port: smtpPort, smtp_username: smtpUser, smtp_password: smtpPass, smtp_sender_name: smtpSenderName, smtp_sender_email: smtpSenderEmail, smtp_encryption: smtpEncryption };
        const formData = new FormData();
        formData.append('settings', JSON.stringify({ ...settings, smtp_configuration: values, type: 'smtp' }));
        const res = await dispatch(editSetting({ data: formData }));
        setSmtpSaving(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __( 'SMTP Settings', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 2000 });
        if (ok) await checkSmtpConnection();
    };

    const saveSms = async () => {
        setSmsSaving(true);
        const values = { is_sms_enabled: smsEnabled, active_sms_gateway: 'wordpress', sms_service_provider: 'reve' };
        const formData = new FormData();
        formData.append('settings', JSON.stringify({ ...settings, sms_configuration: values, type: 'sms' }));
        const res = await dispatch(editSetting({ data: formData }));
        setSmsSaving(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __( 'SMS Settings', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 2000 });
    };

    const saveFirebase = async () => {
        if (firebaseEnabled) {
            if (!firebaseClientEmail) {
                firebaseClientEmailRef.current?.focus();
                showNotification({ title: __( 'Firebase Settings', 'lazytasks-project-task-management' ), message: __( 'Client Email and Private Key are required.', 'lazytasks-project-task-management' ), color: 'red', autoClose: 2000 });
                return;
            }
            if (!firebasePrivateKey) {
                firebasePrivateKeyRef.current?.focus();
                showNotification({ title: __( 'Firebase Settings', 'lazytasks-project-task-management' ), message: __( 'Client Email and Private Key are required.', 'lazytasks-project-task-management' ), color: 'red', autoClose: 2000 });
                return;
            }
        }
        setFirebaseSaving(true);
        const res = await dispatch(saveFirebaseWithUpstream({
            is_firebase_enabled: firebaseEnabled,
            firebase_client_email: firebaseClientEmail,
            firebase_private_key: firebasePrivateKey,
        }));
        setFirebaseSaving(false);
        const ok = res.payload?.success === true;
        showNotification({
            title: __( 'Firebase Settings', 'lazytasks-project-task-management' ),
            message: res.payload?.message || (ok
                ? __( 'Firebase settings saved.', 'lazytasks-project-task-management' )
                : __( 'Could not save Firebase settings.', 'lazytasks-project-task-management' )),
            color: ok ? 'green' : 'red',
            autoClose: 3000,
        });
    };

    const smtpStatus = !smtpEnabled ? 'disconnected' : smtpConnectionStatus || 'disconnected';
    const smsStatus = is_wpsms_active && smsEnabled ? 'connected' : 'disconnected';
    const firebaseStatus = is_lazytasks_premium_active && firebaseEnabled && firebaseClientEmail ? 'connected' : 'disconnected';

    return (
        <>
            <SectionHeader title={__( 'Notification Settings', 'lazytasks-project-task-management' )} desc={__( 'Configure email, SMS, and push notification providers.', 'lazytasks-project-task-management' )} />
            <SimpleGrid cols={3} spacing={16}>

                {/* SMTP */}
                <NotifCard
                    iconBg="#EEF2FF" iconColor="#6366F1"
                    iconPath={<><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>}
                    title={__( 'SMTP Configuration', 'lazytasks-project-task-management' )} sub={__( 'Outgoing email delivery', 'lazytasks-project-task-management' )}
                    enabled={smtpEnabled} onToggle={setSmtpEnabled}
                    onSave={saveSmtp} saving={smtpSaving} status={smtpStatus}
                    extraFooter={smtpEnabled && (
                        <Btn variant="outline" style={{ height: 28, fontSize: 11, padding: '0 12px' }} onClick={handleTestConnection} disabled={smtpTesting || smtpSaving}>
                            {smtpTesting ? __( 'Testing…', 'lazytasks-project-task-management' ) : __( 'Test Connection', 'lazytasks-project-task-management' )}
                        </Btn>
                    )}
                >
                    {smtpEnabled && (
                        <>
                            <NotifField label={__( 'SMTP Mode', 'lazytasks-project-task-management' )}>
                                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                                    {[{ val: 'wordpress', label: __( 'Use WordPress default', 'lazytasks-project-task-management' ) }, { val: 'lazytasks', label: __( 'Use custom SMTP', 'lazytasks-project-task-management' ) }].map(opt => (
                                        <label key={opt.val} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: S.text, cursor: 'pointer' }}>
                                            <input type="radio" name="smtp_mode" value={opt.val} checked={activeMailer === opt.val} onChange={() => setActiveMailer(opt.val)} style={{ accentColor: S.orange }} />
                                            {opt.label}
                                        </label>
                                    ))}
                                </div>
                            </NotifField>
                            {activeMailer === 'lazytasks' && (
                                <>
                                    <NotifField label={__( 'SMTP Host', 'lazytasks-project-task-management' )}>
                                        <input style={notifInputStyle} value={smtpHost} onChange={e => setSmtpHost(e.target.value)} placeholder="smtp.gmail.com" />
                                    </NotifField>
                                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                                        <NotifField label={__( 'Port', 'lazytasks-project-task-management' )}>
                                            <input style={notifInputStyle} type="number" value={smtpPort} onChange={e => setSmtpPort(e.target.value)} min={1} max={65535} />
                                        </NotifField>
                                        <NotifField label={__( 'Encryption', 'lazytasks-project-task-management' )}>
                                            <select style={{ ...notifInputStyle, appearance: 'auto' }} value={smtpEncryption} onChange={e => setSmtpEncryption(e.target.value)}>
                                                <option value="tls">TLS</option>
                                                <option value="ssl">SSL</option>
                                                <option value="none">{__( 'None', 'lazytasks-project-task-management' )}</option>
                                            </select>
                                        </NotifField>
                                        <NotifField label={__( 'Sender Name', 'lazytasks-project-task-management' )}>
                                            <input style={notifInputStyle} value={smtpSenderName} onChange={e => setSmtpSenderName(e.target.value)} placeholder="LazyTasks" />
                                        </NotifField>
                                    </div>
                                    <NotifField label={__( 'Username / Email', 'lazytasks-project-task-management' )}>
                                        <input style={notifInputStyle} type="email" value={smtpUser} onChange={e => setSmtpUser(e.target.value)} placeholder="noreply@yourdomain.com" />
                                    </NotifField>
                                    <NotifField label={__( 'Password', 'lazytasks-project-task-management' )}>
                                        <input style={notifInputStyle} type="password" value={smtpPass} onChange={e => setSmtpPass(e.target.value)} />
                                    </NotifField>
                                    <NotifField label={__( 'From Email', 'lazytasks-project-task-management' )}>
                                        <input style={notifInputStyle} type="email" value={smtpSenderEmail} onChange={e => setSmtpSenderEmail(e.target.value)} placeholder="noreply@yourdomain.com" />
                                    </NotifField>
                                </>
                            )}
                            {activeMailer === 'wordpress' && (
                                <div style={{ fontSize: 12, color: S.muted }}>{__( 'WordPress default mailer will be used for notifications.', 'lazytasks-project-task-management' )}</div>
                            )}
                        </>
                    )}
                    {!smtpEnabled && (
                        <div style={{ fontSize: 12, color: S.light, fontStyle: 'italic' }}>{__( 'Enable SMTP to configure email notifications.', 'lazytasks-project-task-management' )}</div>
                    )}
                </NotifCard>

                {/* SMS */}
                <NotifCard
                    iconBg="#F0FDF4" iconColor="#16A34A"
                    iconPath={<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />}
                    title={__( 'SMS Configuration', 'lazytasks-project-task-management' )} sub={__( 'Text message alerts', 'lazytasks-project-task-management' )}
                    enabled={smsEnabled} onToggle={is_wpsms_active ? setSmsEnabled : () => {}}
                    onSave={saveSms} saving={smsSaving} status={smsStatus}
                >
                    {is_wpsms_active ? (
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                            <Icon d={<><polyline points="20 6 9 17 4 12"/></>} stroke={S.success} size={16} />
                            <span style={{ fontSize: 12, color: S.success, fontWeight: 600 }}>{__( 'WP SMS plugin is active', 'lazytasks-project-task-management' )}</span>
                        </div>
                    ) : (
                        <>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                <Icon d={<><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>} stroke={S.danger} size={16} />
                                <span style={{ fontSize: 12, color: S.danger, fontWeight: 600 }}>{__( 'WP SMS plugin not installed', 'lazytasks-project-task-management' )}</span>
                            </div>
                            <div style={{ fontSize: 11, color: S.muted, lineHeight: 1.5 }}>
                                {__( 'Install and activate the WP SMS plugin from the WordPress plugin repository, then configure your SMS gateway there.', 'lazytasks-project-task-management' )}
                            </div>
                        </>
                    )}
                </NotifCard>

                {/* Firebase */}
                <div style={{ position: 'relative' }}>
                    {is_lazytasks_premium_active === false && (
                        <>
                            <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.75)', backdropFilter: 'blur(2px)', zIndex: 10, borderRadius: S.radius }} />
                            <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', zIndex: 20 }}>
                                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: S.orange, color: '#fff', fontWeight: 700, fontSize: 12, padding: '6px 14px', borderRadius: 20 }}>
                                    <Icon d={<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />} stroke="#fff" size={14} sw={2} />
                                    {__( 'Pro Feature', 'lazytasks-project-task-management' )}
                                </span>
                            </div>
                        </>
                    )}
                    <NotifCard
                        iconBg="#FFF7ED" iconColor="#EA580C"
                        iconPath={<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />}
                        title={__( 'Firebase (FCM)', 'lazytasks-project-task-management' )} sub={__( 'Push notifications', 'lazytasks-project-task-management' )}
                        enabled={firebaseEnabled} onToggle={setFirebaseEnabled}
                        onSave={saveFirebase} saving={firebaseSaving} status={firebaseStatus}
                    >
                        {firebaseEnabled ? (
                            <>
                                <NotifField label={__( 'Client Email', 'lazytasks-project-task-management' )}>
                                    <input ref={firebaseClientEmailRef} style={notifInputStyle} value={firebaseClientEmail} onChange={e => setFirebaseClientEmail(e.target.value)} placeholder={__( 'Enter Client Email', 'lazytasks-project-task-management' )} />
                                </NotifField>
                                <NotifField label={__( 'Private Key', 'lazytasks-project-task-management' )}>
                                    <textarea
                                        ref={firebasePrivateKeyRef}
                                        value={firebasePrivateKey}
                                        onChange={e => setFirebasePrivateKey(e.target.value)}
                                        placeholder={__( 'Enter Private Key', 'lazytasks-project-task-management' )}
                                        rows={4}
                                        style={{ ...notifInputStyle, height: 'auto', padding: '6px 8px', resize: 'vertical' }}
                                    />
                                </NotifField>
                            </>
                        ) : (
                            <div style={{ fontSize: 12, color: S.light, fontStyle: 'italic' }}>{__( 'Enable to configure Firebase push notifications.', 'lazytasks-project-task-management' )}</div>
                        )}
                    </NotifCard>
                </div>
            </SimpleGrid>
        </>
    );
};

/* ──────────────────────────────────────────────────────────
   PANEL 4: Addons
──────────────────────────────────────────────────────────── */
const AddonsPanel = () => {
    const dispatch = useDispatch();
    const { loggedInUser } = useSelector(s => s.auth.session);
    const { whiteboardAddonState, socialLoginConfiguration, timeTrackerAddonState, performanceAddonState } = useSelector(s => s.settings.setting);

    const [addonModalOpen, setAddonModalOpen] = useState(false);
    const [activeAddonSlug, setActiveAddonSlug] = useState('lazytasks-whiteboard');
    const [deactivateOpen, setDeactivateOpen] = useState(false);
    const [loading, setLoading] = useState(false);
    const [timeTrackerDeactivateOpen, setTimeTrackerDeactivateOpen] = useState(false);
    const [timeTrackerLoading, setTimeTrackerLoading] = useState(false);
    const [performanceDeactivateOpen, setPerformanceDeactivateOpen] = useState(false);
    const [performanceLoading, setPerformanceLoading] = useState(false);
    const [socialActivateOpen, setSocialActivateOpen] = useState(false);
    const [socialDeactivateOpen, setSocialDeactivateOpen] = useState(false);
    const [socialLoading, setSocialLoading] = useState(false);

    const socialEnabled = socialLoginConfiguration?.social_login_enabled;

    const handleDeactivateWhiteboard = async () => {
        setLoading(true);
        const res = await dispatch(deactivateAddonPlugin({ addon: 'lazytasks-whiteboard' }));
        setLoading(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __( 'Whiteboard Addon', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 3000 });
        if (ok) { setDeactivateOpen(false); window.location.reload(); }
    };

    const handleDeactivateTimeTracker = async () => {
        setTimeTrackerLoading(true);
        const res = await dispatch(deactivateAddonPlugin({ addon: 'lazytasks-timetracker' }));
        setTimeTrackerLoading(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __( 'Time Tracker Addon', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 3000 });
        if (ok) { setTimeTrackerDeactivateOpen(false); window.location.reload(); }
    };

    const handleDeactivatePerformance = async () => {
        setPerformanceLoading(true);
        const res = await dispatch(deactivateAddonPlugin({ addon: 'lazytasks-performance' }));
        setPerformanceLoading(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __( 'Performance Addon', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 3000 });
        if (ok) { setPerformanceDeactivateOpen(false); window.location.reload(); }
    };

    const handleActivateSocialLogin = async () => {
        setSocialLoading(true);
        const res = await dispatch(activateSocialLogin({ social_login_settings: { social_login_enabled: true } }));
        setSocialLoading(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __( 'Social Login', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 3000 });
        if (ok) setSocialActivateOpen(false);
    };

    const handleDeactivateSocialLogin = async () => {
        setSocialLoading(true);
        const res = await dispatch(activateSocialLogin({ social_login_settings: { social_login_enabled: false } }));
        setSocialLoading(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __( 'Social Login', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 3000 });
        if (ok) setSocialDeactivateOpen(false);
    };

    const addonCardStyle = (active) => ({
        background: active ? '#F8FFF9' : S.white,
        border: `1px solid ${active ? '#C7E5CB' : S.border}`,
        borderRadius: S.radius, padding: 20, boxShadow: S.shadow,
        display: 'flex', flexDirection: 'column',
    });

    return (
        <>
            <SectionHeader title={__( 'Addons', 'lazytasks-project-task-management' )} desc={__( 'Manage plugin extensions.', 'lazytasks-project-task-management' )} />
            <SimpleGrid cols={3} spacing={16}>

                {/* Whiteboard Addon */}
                {ADDON_REGISTRY.whiteboard.status === 'released' ? (
                    <div style={addonCardStyle(whiteboardAddonState === 'installed_active')}>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                            <div style={{ width: 40, height: 40, borderRadius: S.radiusSm, background: ADDON_REGISTRY.whiteboard.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></>} stroke={ADDON_REGISTRY.whiteboard.iconColor} size={20} />
                            </div>
                            <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 20, background: whiteboardAddonState === 'installed_active' ? '#DCFCE7' : '#F1F5F9', color: whiteboardAddonState === 'installed_active' ? '#15803D' : S.light }}>
                                {whiteboardAddonState === 'installed_active' ? __( 'Active', 'lazytasks-project-task-management' ) : whiteboardAddonState === 'installed_inactive' ? __( 'Inactive', 'lazytasks-project-task-management' ) : __( 'Not Installed', 'lazytasks-project-task-management' )}
                            </span>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{ADDON_REGISTRY.whiteboard.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.whiteboard.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            {whiteboardAddonState === 'not_installed' && (
                                <Btn variant="secondary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => { setActiveAddonSlug(ADDON_REGISTRY.whiteboard.slug); setAddonModalOpen(true); }}>{__( 'Install Whiteboard', 'lazytasks-project-task-management' )}</Btn>
                            )}
                            {whiteboardAddonState === 'installed_inactive' && (
                                <Btn variant="primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => { setActiveAddonSlug(ADDON_REGISTRY.whiteboard.slug); setAddonModalOpen(true); }}>{__( 'Activate Whiteboard', 'lazytasks-project-task-management' )}</Btn>
                            )}
                            {whiteboardAddonState === 'installed_active' && (
                                <Btn variant="danger" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setDeactivateOpen(true)}>{__( 'Deactivate Whiteboard', 'lazytasks-project-task-management' )}</Btn>
                            )}
                        </div>
                    </div>
                ) : (
                    <div style={{ ...addonCardStyle(false), position: 'relative', overflow: 'hidden' }}>
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(0.5px)', zIndex: 2, borderRadius: S.radius }} />
                        <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: S.muted, border: `1px solid ${S.border}` }}>{__( "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: S.radiusSm, background: ADDON_REGISTRY.whiteboard.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></>} stroke={ADDON_REGISTRY.whiteboard.iconColor} size={20} />
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{ADDON_REGISTRY.whiteboard.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.whiteboard.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            <Btn variant="ghost" style={{ width: '100%', justifyContent: 'center', opacity: 0.5, cursor: 'not-allowed' }} disabled>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</Btn>
                        </div>
                    </div>
                )}

                {/* Time Tracker Addon */}
                {ADDON_REGISTRY.timeTracker.status === 'released' ? (
                    <div style={addonCardStyle(timeTrackerAddonState === 'installed_active')}>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                            <div style={{ width: 40, height: 40, borderRadius: S.radiusSm, background: ADDON_REGISTRY.timeTracker.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>} stroke={ADDON_REGISTRY.timeTracker.iconColor} size={20} />
                            </div>
                            <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 20, background: timeTrackerAddonState === 'installed_active' ? '#DCFCE7' : '#F1F5F9', color: timeTrackerAddonState === 'installed_active' ? '#15803D' : S.light }}>
                                {timeTrackerAddonState === 'installed_active' ? __( 'Active', 'lazytasks-project-task-management' ) : timeTrackerAddonState === 'installed_inactive' ? __( 'Inactive', 'lazytasks-project-task-management' ) : __( 'Not Installed', 'lazytasks-project-task-management' )}
                            </span>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{ADDON_REGISTRY.timeTracker.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.timeTracker.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            {timeTrackerAddonState === 'not_installed' && (
                                <Btn variant="secondary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => { setActiveAddonSlug(ADDON_REGISTRY.timeTracker.slug); setAddonModalOpen(true); }}>{__( 'Install Time Tracker', 'lazytasks-project-task-management' )}</Btn>
                            )}
                            {timeTrackerAddonState === 'installed_inactive' && (
                                <Btn variant="primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => { setActiveAddonSlug(ADDON_REGISTRY.timeTracker.slug); setAddonModalOpen(true); }}>{__( 'Activate Time Tracker', 'lazytasks-project-task-management' )}</Btn>
                            )}
                            {timeTrackerAddonState === 'installed_active' && (
                                <Btn variant="danger" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setTimeTrackerDeactivateOpen(true)}>{__( 'Deactivate Time Tracker', 'lazytasks-project-task-management' )}</Btn>
                            )}
                        </div>
                    </div>
                ) : (
                    <div style={{ ...addonCardStyle(false), position: 'relative', overflow: 'hidden' }}>
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(0.5px)', zIndex: 2, borderRadius: S.radius }} />
                        <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: S.muted, border: `1px solid ${S.border}` }}>{__( "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: S.radiusSm, background: ADDON_REGISTRY.timeTracker.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>} stroke={ADDON_REGISTRY.timeTracker.iconColor} size={20} />
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{ADDON_REGISTRY.timeTracker.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.timeTracker.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            <Btn variant="ghost" style={{ width: '100%', justifyContent: 'center', opacity: 0.5, cursor: 'not-allowed' }} disabled>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</Btn>
                        </div>
                    </div>
                )}

                {/* Social Login Addon */}
                {ADDON_REGISTRY.socialLogin.status === 'released' ? (
                    <div style={addonCardStyle(socialEnabled)}>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                            <div style={{ width: 40, height: 40, borderRadius: S.radiusSm, background: ADDON_REGISTRY.socialLogin.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />} stroke={ADDON_REGISTRY.socialLogin.iconColor} size={20} />
                            </div>
                            <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 20, background: socialEnabled ? '#DCFCE7' : '#F1F5F9', color: socialEnabled ? '#15803D' : S.light }}>
                                {socialEnabled ? __( 'Active', 'lazytasks-project-task-management' ) : __( 'Inactive', 'lazytasks-project-task-management' )}
                            </span>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{ADDON_REGISTRY.socialLogin.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.socialLogin.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            {socialEnabled ? (
                                <Btn variant="danger" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setSocialDeactivateOpen(true)}>{__( 'Deactivate Social Login', 'lazytasks-project-task-management' )}</Btn>
                            ) : (
                                <Btn variant="primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setSocialActivateOpen(true)}>{__( 'Activate Social Login', 'lazytasks-project-task-management' )}</Btn>
                            )}
                        </div>
                    </div>
                ) : (
                    <div style={{ ...addonCardStyle(false), position: 'relative', overflow: 'hidden' }}>
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(0.5px)', zIndex: 2, borderRadius: S.radius }} />
                        <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: S.muted, border: `1px solid ${S.border}` }}>{__( "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: S.radiusSm, background: ADDON_REGISTRY.socialLogin.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />} stroke={ADDON_REGISTRY.socialLogin.iconColor} size={20} />
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{ADDON_REGISTRY.socialLogin.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.socialLogin.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            <Btn variant="ghost" style={{ width: '100%', justifyContent: 'center', opacity: 0.5, cursor: 'not-allowed' }} disabled>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</Btn>
                        </div>
                    </div>
                )}

                {/* Performance Addon */}
                {ADDON_REGISTRY.performance.status === 'released' ? (
                    <div style={addonCardStyle(performanceAddonState === 'installed_active')}>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 10 }}>
                            <div style={{ width: 40, height: 40, borderRadius: S.radiusSm, background: ADDON_REGISTRY.performance.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></>} stroke={ADDON_REGISTRY.performance.iconColor} size={20} />
                            </div>
                            <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 20, background: performanceAddonState === 'installed_active' ? '#DCFCE7' : '#F1F5F9', color: performanceAddonState === 'installed_active' ? '#15803D' : S.light }}>
                                {performanceAddonState === 'installed_active' ? __( 'Active', 'lazytasks-project-task-management' ) : performanceAddonState === 'installed_inactive' ? __( 'Inactive', 'lazytasks-project-task-management' ) : __( 'Not Installed', 'lazytasks-project-task-management' )}
                            </span>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{ADDON_REGISTRY.performance.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.performance.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            {performanceAddonState === 'not_installed' && (
                                <Btn variant="secondary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => { setActiveAddonSlug(ADDON_REGISTRY.performance.slug); setAddonModalOpen(true); }}>{__( 'Install Performance Scorer', 'lazytasks-project-task-management' )}</Btn>
                            )}
                            {performanceAddonState === 'installed_inactive' && (
                                <Btn variant="primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => { setActiveAddonSlug(ADDON_REGISTRY.performance.slug); setAddonModalOpen(true); }}>{__( 'Activate Performance Scorer', 'lazytasks-project-task-management' )}</Btn>
                            )}
                            {performanceAddonState === 'installed_active' && (
                                <Btn variant="danger" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setPerformanceDeactivateOpen(true)}>{__( 'Deactivate Performance Scorer', 'lazytasks-project-task-management' )}</Btn>
                            )}
                        </div>
                    </div>
                ) : (
                    <div style={{ ...addonCardStyle(false), position: 'relative', overflow: 'hidden' }}>
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(0.5px)', zIndex: 2, borderRadius: S.radius }} />
                        <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: S.muted, border: `1px solid ${S.border}` }}>{__( "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: S.radiusSm, background: ADDON_REGISTRY.performance.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></>} stroke={ADDON_REGISTRY.performance.iconColor} size={20} />
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{ADDON_REGISTRY.performance.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.performance.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            <Btn variant="ghost" style={{ width: '100%', justifyContent: 'center', opacity: 0.5, cursor: 'not-allowed' }} disabled>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</Btn>
                        </div>
                    </div>
                )}

                {/* Upcoming Addons */}
                {[
                    { label: __('AI Project Manager', 'lazytasks-project-task-management'), desc: __('Intelligent project planning powered by AI. Auto-assign tasks, predict deadlines, and get smart suggestions.', 'lazytasks-project-task-management'), iconPath: <><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></>, iconBg: '#F0FDF4', iconStroke: '#22C55E' },
{ label: __('Zen Mode', 'lazytasks-project-task-management'), desc: __('A distraction-free focus view for individual tasks. Block noise, set timers, and get into deep work mode.', 'lazytasks-project-task-management'), iconPath: <><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></>, iconBg: '#FAF5FF', iconStroke: '#A855F7' },
                    { label: __('Invoicing', 'lazytasks-project-task-management'), desc: __('Generate professional invoices from tracked time and project milestones. Send and collect payments in-app.', 'lazytasks-project-task-management'), iconPath: <><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/><line x1="6" y1="8" x2="6" y2="13"/><line x1="10" y1="10" x2="10" y2="13"/><line x1="14" y1="7" x2="14" y2="13"/><line x1="18" y1="9" x2="18" y2="13"/></>, iconBg: '#FFFBEB', iconStroke: '#F59E0B' },
                    { label: __('Advanced Reports', 'lazytasks-project-task-management'), desc: __('Deep analytics on team performance, project velocity, and task completion trends with exportable charts.', 'lazytasks-project-task-management'), iconPath: <><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></>, iconBg: '#FFF1F2', iconStroke: '#EF4444' },
                ].map(addon => (
                    <div key={addon.label} style={{ ...addonCardStyle(false), position: 'relative', overflow: 'hidden' }}>
                        {/* Coming Soon overlay */}
                        <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(0.5px)', zIndex: 2, borderRadius: S.radius }} />
                        <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: S.muted, border: `1px solid ${S.border}` }}>{__( "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: S.radiusSm, background: addon.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={addon.iconPath} stroke={addon.iconStroke} size={20} />
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{addon.label}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{addon.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            <Btn variant="ghost" style={{ width: '100%', justifyContent: 'center', opacity: 0.5, cursor: 'not-allowed' }} disabled>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</Btn>
                        </div>
                    </div>
                ))}
            </SimpleGrid>

            {/* Deactivate confirm modal */}
            {deactivateOpen && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <div style={{ background: S.white, borderRadius: S.radius, padding: 28, width: 400, boxShadow: '0 20px 60px rgba(0,0,0,.2)' }}>
                        <div style={{ fontSize: 15, fontWeight: 700, color: S.text, marginBottom: 10 }}>{__( 'Deactivate Whiteboard', 'lazytasks-project-task-management' )}</div>
                        <div style={{ fontSize: 13, color: S.muted, marginBottom: 20 }}>{__( 'Are you sure you want to deactivate the Whiteboard addon?', 'lazytasks-project-task-management' )}</div>
                        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                            <Btn variant="ghost" onClick={() => setDeactivateOpen(false)}>{__( 'Cancel', 'lazytasks-project-task-management' )}</Btn>
                            <Btn variant="danger" onClick={handleDeactivateWhiteboard} disabled={loading}>{loading ? __( 'Deactivating…', 'lazytasks-project-task-management' ) : __( 'Deactivate', 'lazytasks-project-task-management' )}</Btn>
                        </div>
                    </div>
                </div>
            )}

            {timeTrackerDeactivateOpen && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <div style={{ background: S.white, borderRadius: S.radius, padding: 28, width: 400, boxShadow: '0 20px 60px rgba(0,0,0,.2)' }}>
                        <div style={{ fontSize: 15, fontWeight: 700, color: S.text, marginBottom: 10 }}>{__( 'Deactivate Time Tracker', 'lazytasks-project-task-management' )}</div>
                        <div style={{ fontSize: 13, color: S.muted, marginBottom: 20 }}>{__( 'Are you sure you want to deactivate the Time Tracker addon?', 'lazytasks-project-task-management' )}</div>
                        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                            <Btn variant="ghost" onClick={() => setTimeTrackerDeactivateOpen(false)}>{__( 'Cancel', 'lazytasks-project-task-management' )}</Btn>
                            <Btn variant="danger" onClick={handleDeactivateTimeTracker} disabled={timeTrackerLoading}>{timeTrackerLoading ? __( 'Deactivating…', 'lazytasks-project-task-management' ) : __( 'Deactivate', 'lazytasks-project-task-management' )}</Btn>
                        </div>
                    </div>
                </div>
            )}

            {performanceDeactivateOpen && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <div style={{ background: S.white, borderRadius: S.radius, padding: 28, width: 400, boxShadow: '0 20px 60px rgba(0,0,0,.2)' }}>
                        <div style={{ fontSize: 15, fontWeight: 700, color: S.text, marginBottom: 10 }}>{__( 'Deactivate Performance Scorer', 'lazytasks-project-task-management' )}</div>
                        <div style={{ fontSize: 13, color: S.muted, marginBottom: 20 }}>{__( 'Are you sure you want to deactivate the Performance Scorer addon?', 'lazytasks-project-task-management' )}</div>
                        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                            <Btn variant="ghost" onClick={() => setPerformanceDeactivateOpen(false)}>{__( 'Cancel', 'lazytasks-project-task-management' )}</Btn>
                            <Btn variant="danger" onClick={handleDeactivatePerformance} disabled={performanceLoading}>{performanceLoading ? __( 'Deactivating…', 'lazytasks-project-task-management' ) : __( 'Deactivate', 'lazytasks-project-task-management' )}</Btn>
                        </div>
                    </div>
                </div>
            )}

            <Modal
                opened={socialActivateOpen}
                onClose={() => setSocialActivateOpen(false)}
                title={
                    <Group spacing="xs">
                        <ThemeIcon color="orange" radius="xl" size="lg" variant="filled">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" 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>
                        </ThemeIcon>
                        <Text size="md" weight={500}>{__( 'Activate Social Login', 'lazytasks-project-task-management' )}</Text>
                    </Group>
                }
                size="md"
                centered
            >
                <Divider size="xs" my={0} className='!-ml-4 w-[calc(100%+2rem)]' />
                <Stack spacing="md" pt="md">
                    <Text size="sm" ta="center" pt={10} c="#4D4D4D">
                        {__( 'Enable users to log in using their social media accounts.', 'lazytasks-project-task-management' )}
                    </Text>
                    <Group justify="center" pt={10}>
                        <Button
                            size="sm"
                            color="#39758D"
                            styles={{ label: { color: '#fff' } }}
                            onClick={handleActivateSocialLogin}
                            disabled={socialLoading}
                            leftSection={socialLoading ? <Loader size={16} color="white" /> : null}
                            fullWidth
                        >
                            {socialLoading ? __( 'Activating Social Login', 'lazytasks-project-task-management' ) : __( 'Activate Social Login', 'lazytasks-project-task-management' )}
                        </Button>
                    </Group>
                </Stack>
            </Modal>

            <Modal
                opened={socialDeactivateOpen}
                onClose={() => setSocialDeactivateOpen(false)}
                title={
                    <Group spacing="xs">
                        <ThemeIcon color="red" radius="xl" size="lg" variant="filled">
                            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" 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>
                        </ThemeIcon>
                        <Text size="md" weight={500}>{__( 'Deactivate Social Login', 'lazytasks-project-task-management' )}</Text>
                    </Group>
                }
                size="md"
                centered
            >
                <Divider size="xs" my={0} className='!-ml-4 w-[calc(100%+2rem)]' />
                <Stack spacing="md" pt="md">
                    <Text size="sm" ta="center" pt={10} c="#4D4D4D">
                        {__( 'Are you sure you want to deactivate Social Login? Users will no longer be able to sign in with social accounts.', 'lazytasks-project-task-management' )}
                    </Text>
                    <Group justify="center" pt={10}>
                        <Button
                            size="sm"
                            color="red"
                            styles={{ label: { color: '#fff' } }}
                            onClick={handleDeactivateSocialLogin}
                            disabled={socialLoading}
                            leftSection={socialLoading ? <Loader size={16} color="white" /> : null}
                            fullWidth
                        >
                            {socialLoading ? __( 'Deactivating Social Login', 'lazytasks-project-task-management' ) : __( 'Deactivate Social Login', 'lazytasks-project-task-management' )}
                        </Button>
                    </Group>
                </Stack>
            </Modal>

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

/* ──────────────────────────────────────────────────────────
   PANEL 5: Social Login
──────────────────────────────────────────────────────────── */
const StepItem = ({ num, title, children, last }) => (
    <Group gap={10} wrap="nowrap" align="flex-start" style={{ position: 'relative' }}>
        <div style={{ position: 'relative', flexShrink: 0 }}>
            <div style={{
                width: 22, height: 22, borderRadius: '50%',
                background: S.orange, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700,
            }}>
                {num}
            </div>
            {!last && (
                <div style={{
                    position: 'absolute', left: 10, top: 24, bottom: -12,
                    width: 2, background: '#E2E8F0',
                }} />
            )}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
            <Text size="xs" fw={700} c={S.text} mb={2}>{title}</Text>
            {children}
        </div>
    </Group>
);

const SocialLoginPanel = () => {
    const dispatch = useDispatch();
    const { socialLoginConfiguration = {} } = useSelector(s => s.settings.setting);

    const [googleEnabled, setGoogleEnabled] = useState(false);
    const [clientId, setClientId] = useState('');
    const [clientSecret, setClientSecret] = useState('');
    const [googleSaving, setGoogleSaving] = useState(false);
    const [redirectCopied, setRedirectCopied] = useState(false);

    const [fbEnabled, setFbEnabled] = useState(false);
    const [fbAppId, setFbAppId] = useState('');
    const [fbAppSecret, setFbAppSecret] = useState('');
    const [fbSaving, setFbSaving] = useState(false);

    const [liEnabled, setLiEnabled] = useState(false);
    const [liClientId, setLiClientId] = useState('');
    const [liClientSecret, setLiClientSecret] = useState('');
    const [liSaving, setLiSaving] = useState(false);

    const homeUrl = typeof appLocalizer !== 'undefined' ? appLocalizer?.homeUrl : 'https://yourdomain.com';
    const apiBase = typeof appLocalizer !== 'undefined' ? `${appLocalizer?.apiUrl}/lazytasks/api/v3` : 'https://yourdomain.com/wp-json/lazytasks/api/v3';
    const redirectUri = `${apiBase}/linkedin/callback`;

    const handleCopyRedirect = async () => {
        try {
            await navigator.clipboard.writeText(redirectUri);
            setRedirectCopied(true);
            setTimeout(() => setRedirectCopied(false), 1500);
        } catch (e) {
            const ta = document.createElement('textarea');
            ta.value = redirectUri;
            document.body.appendChild(ta);
            ta.select();
            try { document.execCommand('copy'); } catch (_) {}
            document.body.removeChild(ta);
            setRedirectCopied(true);
            setTimeout(() => setRedirectCopied(false), 1500);
        }
    };

    useEffect(() => {
        if (socialLoginConfiguration?.google) {
            const g = socialLoginConfiguration.google;
            if (g.is_enabled) setGoogleEnabled(g.is_enabled);
            if (g.client_id) setClientId(g.client_id);
            if (g.client_secret) setClientSecret(g.client_secret);
        }
        if (socialLoginConfiguration?.facebook) {
            const f = socialLoginConfiguration.facebook;
            if (f.is_enabled) setFbEnabled(f.is_enabled);
            if (f.app_id) setFbAppId(f.app_id);
            if (f.app_secret) setFbAppSecret(f.app_secret);
        }
        if (socialLoginConfiguration?.linkedin) {
            const l = socialLoginConfiguration.linkedin;
            if (l.is_enabled) setLiEnabled(l.is_enabled);
            if (l.client_id) setLiClientId(l.client_id);
            if (l.client_secret) setLiClientSecret(l.client_secret);
        }
    }, [socialLoginConfiguration]);

    const handleGoogleToggle = async (checked) => {
        setGoogleEnabled(checked);
        const res = await dispatch(activateSocialLogin({ social_login_settings: { google: { is_enabled: checked, client_id: clientId, client_secret: clientSecret } } }));
        showNotification({ title: __( 'Social Login', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: res.payload?.status === 200 ? 'green' : 'red', autoClose: 2000 });
    };

    const handleGoogleSave = async () => {
        if (!clientId || !clientSecret) {
            showNotification({ title: __( 'Validation Error', 'lazytasks-project-task-management' ), message: __( 'Please fill in all required fields.', 'lazytasks-project-task-management' ), color: 'red' });
            return;
        }
        setGoogleSaving(true);
        const res = await dispatch(activateSocialLogin({ social_login_settings: { google: { is_enabled: googleEnabled, client_id: clientId, client_secret: clientSecret } } }));
        setGoogleSaving(false);
        showNotification({ title: __( 'Social Login', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: res.payload?.status === 200 ? 'green' : 'red', autoClose: 2000 });
    };

    const handleFacebookToggle = async (checked) => {
        setFbEnabled(checked);
        const res = await dispatch(activateSocialLogin({ social_login_settings: { facebook: { is_enabled: checked, app_id: fbAppId, app_secret: fbAppSecret } } }));
        showNotification({ title: __('Social Login', 'lazytasks-project-task-management'), message: res.payload?.message || '', color: res.payload?.status === 200 ? 'green' : 'red', autoClose: 2000 });
    };

    const handleFacebookSave = async () => {
        if (!fbAppId || !fbAppSecret) {
            showNotification({ title: __('Validation Error', 'lazytasks-project-task-management'), message: __('Please fill in all required fields.', 'lazytasks-project-task-management'), color: 'red' });
            return;
        }
        setFbSaving(true);
        const res = await dispatch(activateSocialLogin({ social_login_settings: { facebook: { is_enabled: fbEnabled, app_id: fbAppId, app_secret: fbAppSecret } } }));
        setFbSaving(false);
        showNotification({ title: __('Social Login', 'lazytasks-project-task-management'), message: res.payload?.message || '', color: res.payload?.status === 200 ? 'green' : 'red', autoClose: 2000 });
    };

    const handleLinkedinToggle = async (checked) => {
        setLiEnabled(checked);
        const res = await dispatch(activateSocialLogin({ social_login_settings: { linkedin: { is_enabled: checked, client_id: liClientId, client_secret: liClientSecret } } }));
        showNotification({ title: __('Social Login', 'lazytasks-project-task-management'), message: res.payload?.message || '', color: res.payload?.status === 200 ? 'green' : 'red', autoClose: 2000 });
    };

    const handleLinkedinSave = async () => {
        if (!liClientId || !liClientSecret) {
            showNotification({ title: __('Validation Error', 'lazytasks-project-task-management'), message: __('Please fill in all required fields.', 'lazytasks-project-task-management'), color: 'red' });
            return;
        }
        setLiSaving(true);
        const res = await dispatch(activateSocialLogin({ social_login_settings: { linkedin: { is_enabled: liEnabled, client_id: liClientId, client_secret: liClientSecret } } }));
        setLiSaving(false);
        showNotification({ title: __('Social Login', 'lazytasks-project-task-management'), message: res.payload?.message || '', color: res.payload?.status === 200 ? 'green' : 'red', autoClose: 2000 });
    };

    return (
        <>
            <SectionHeader title={__( 'Social Login', 'lazytasks-project-task-management' )} desc={__( 'Configure OAuth providers to allow single sign-on for portal users.', 'lazytasks-project-task-management' )} />
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '12px 14px', background: S.tealLt, border: `1px solid #C8DDE5`, borderRadius: S.radiusSm, marginBottom: 16, maxWidth: 700 }}>
                <Icon d={<><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></>} stroke={S.teal} size={16} />
                <p style={{ fontSize: 12, color: S.tealDk, lineHeight: 1.5, margin: 0 }}>
                    {__( 'Ensure the redirect URI for each provider is set to:', 'lazytasks-project-task-management' )} <strong>{redirectUri}</strong>
                </p>
            </div>
            <SimpleGrid cols={3} spacing={16}>

                {/* Google */}
                <div style={{ background: S.white, border: `1px solid ${S.border}`, borderRadius: S.radius, overflow: 'hidden', boxShadow: S.shadow, position: 'relative' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 20px', borderBottom: `1px solid ${S.border}` }}>
                        <div style={{ width: 36, height: 36, borderRadius: S.radiusSm, background: '#FFF3F3', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <svg viewBox="0 0 24 24" width="20" height="20">
                                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                            </svg>
                        </div>
                        <div style={{ flex: 1 }}>
                            <div style={{ fontSize: 14, fontWeight: 700, color: S.text }}>{__( 'Google OAuth', 'lazytasks-project-task-management' )}</div>
                            <div style={{ fontSize: 12, color: S.muted }}>{__( 'Sign in with Google account', 'lazytasks-project-task-management' )}</div>
                        </div>
                        <Toggle checked={googleEnabled} onChange={handleGoogleToggle} />
                    </div>
                    {googleEnabled && (
                        <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
                            <FormGroup label={__( "Client ID", "lazytasks-project-task-management" )} required>
                                <TextInput size="xs" value={clientId} onChange={e => setClientId(e.target.value)} placeholder={__( 'Enter Client ID', 'lazytasks-project-task-management' )} />
                            </FormGroup>
                            <FormGroup label={__( "Client Secret", "lazytasks-project-task-management" )} required>
                                <PasswordInput size="xs" value={clientSecret} onChange={e => setClientSecret(e.target.value)} placeholder={__( 'Enter Client Secret', 'lazytasks-project-task-management' )} />
                            </FormGroup>
                            <div style={{ paddingTop: 12, borderTop: `1px solid ${S.border}` }}>
                                <Btn variant="primary" style={{ height: 30, fontSize: 12 }} onClick={handleGoogleSave} disabled={googleSaving}>
                                    {googleSaving ? __( 'Saving…', 'lazytasks-project-task-management' ) : __( 'Save Changes', 'lazytasks-project-task-management' )}
                                </Btn>
                            </div>
                        </div>
                    )}
                    {!googleEnabled && (
                        <div style={{ padding: '16px 20px', fontSize: 12, color: S.light, fontStyle: 'italic' }}>
                            {__( 'Enable to configure Google OAuth credentials.', 'lazytasks-project-task-management' )}
                        </div>
                    )}
                    <HoverCard width={400} shadow="md" position="top-end" withArrow openDelay={100} closeDelay={200} closeOnClickOutside>
                        <HoverCard.Target>
                            <div
                                style={{
                                    position: 'absolute',
                                    bottom: 10,
                                    right: 10,
                                    width: 26,
                                    height: 26,
                                    borderRadius: '50%',
                                    background: S.tealLt,
                                    color: S.teal,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    cursor: 'pointer',
                                    border: `1px solid #C8DDE5`,
                                }}
                                aria-label={__( 'How to get Google OAuth credentials', 'lazytasks-project-task-management' )}
                            >
                                <IconInfoCircle size={16} stroke={2} />
                            </div>
                        </HoverCard.Target>
                        <HoverCard.Dropdown p={0} style={{ overflow: 'hidden' }}>
                            {/* Header */}
                            <Group gap={8} align="center" px={14} py={10} style={{ background: S.tealLt, borderBottom: `1px solid #C8DDE5` }}>
                                <ThemeIcon size={22} radius="xl" color="teal" variant="filled">
                                    <IconInfoCircle size={14} />
                                </ThemeIcon>
                                <Text size="sm" fw={700} c={S.tealDk}>
                                    {__( 'How to get Google OAuth credentials', 'lazytasks-project-task-management' )}
                                </Text>
                            </Group>

                            {/* Steps */}
                            <Stack gap={12} p={14}>
                                <StepItem
                                    num={1}
                                    title={__( 'Open Google Cloud Console', 'lazytasks-project-task-management' )}
                                >
                                    <Text size="xs" c={S.muted}>
                                        {__( 'Sign in at', 'lazytasks-project-task-management' )}{' '}
                                        <Text component="a" href="https://console.cloud.google.com/" target="_blank" rel="noopener noreferrer" c="teal" fw={600} size="xs" td="underline">
                                            console.cloud.google.com
                                        </Text>
                                    </Text>
                                </StepItem>

                                <StepItem
                                    num={2}
                                    title={__( 'Create or select a project', 'lazytasks-project-task-management' )}
                                >
                                    <Text size="xs" c={S.muted}>
                                        {__( 'Use the project picker at the top of the page.', 'lazytasks-project-task-management' )}
                                    </Text>
                                </StepItem>

                                <StepItem
                                    num={3}
                                    title={__( 'Configure OAuth consent screen', 'lazytasks-project-task-management' )}
                                >
                                    <Text size="xs" c={S.muted}>
                                        {__( 'Go to', 'lazytasks-project-task-management' )} <Text span fw={600} c={S.text} size="xs">{__( "APIs & Services → OAuth consent screen", "lazytasks-project-task-management" )}</Text>, {__( 'choose', 'lazytasks-project-task-management' )} <Text span fw={600} c={S.text} size="xs">{__( "External", "lazytasks-project-task-management" )}</Text>, {__( 'and fill in the required fields.', 'lazytasks-project-task-management' )}
                                    </Text>
                                </StepItem>

                                <StepItem
                                    num={4}
                                    title={__( 'Create OAuth client ID', 'lazytasks-project-task-management' )}
                                >
                                    <Text size="xs" c={S.muted}>
                                        {__( 'Go to', 'lazytasks-project-task-management' )} <Text span fw={600} c={S.text} size="xs">{__( "Credentials → Create Credentials → OAuth client ID", "lazytasks-project-task-management" )}</Text>, {__( 'and select', 'lazytasks-project-task-management' )} <Text span fw={600} c={S.text} size="xs">{__( "Web application", "lazytasks-project-task-management" )}</Text>.
                                    </Text>
                                </StepItem>

                                <StepItem
                                    num={5}
                                    title={__( 'Add authorized redirect URI', 'lazytasks-project-task-management' )}
                                >
                                    <Text size="xs" c={S.muted} mb={6}>
                                        {__( 'Paste this URL into the', 'lazytasks-project-task-management' )} <Text span fw={600} c={S.text} size="xs">{__( "Authorized redirect URIs", "lazytasks-project-task-management" )}</Text> {__( 'field:', 'lazytasks-project-task-management' )}
                                    </Text>
                                    <Group gap={6} wrap="nowrap" align="center" p={8} style={{ background: S.tealLt, border: `1px solid #C8DDE5`, borderRadius: 4 }}>
                                        <Text size="xs" style={{ flex: 1, fontFamily: 'monospace', wordBreak: 'break-all', color: S.tealDk }}>
                                            {redirectUri}
                                        </Text>
                                        <Tooltip label={redirectCopied ? __( 'Copied!', 'lazytasks-project-task-management' ) : __( 'Copy to clipboard', 'lazytasks-project-task-management' )} withArrow position="top">
                                            <ActionIcon size="sm" variant="subtle" color="teal" onClick={handleCopyRedirect} aria-label={__( 'Copy redirect URI', 'lazytasks-project-task-management' )}>
                                                {redirectCopied ? <IconCheck size={14} /> : <IconCopy size={14} />}
                                            </ActionIcon>
                                        </Tooltip>
                                    </Group>
                                </StepItem>

                                <StepItem
                                    num={6}
                                    title={__( 'Copy credentials to fields above', 'lazytasks-project-task-management' )}
                                    last
                                >
                                    <Text size="xs" c={S.muted}>
                                        {__( 'Click', 'lazytasks-project-task-management' )} <Text span fw={600} c={S.text} size="xs">{__( "Create", "lazytasks-project-task-management" )}</Text>, {__( 'then copy the', 'lazytasks-project-task-management' )} <Text span fw={600} c={S.text} size="xs">{__( "Client ID", "lazytasks-project-task-management" )}</Text> {__( 'and', 'lazytasks-project-task-management' )} <Text span fw={600} c={S.text} size="xs">{__( "Client Secret", "lazytasks-project-task-management" )}</Text> {__( 'into the fields above.', 'lazytasks-project-task-management' )}
                                    </Text>
                                </StepItem>
                            </Stack>
                        </HoverCard.Dropdown>
                    </HoverCard>
                </div>

                {/* Facebook */}
                <div style={{ background: S.white, border: `1px solid ${S.border}`, borderRadius: S.radius, overflow: 'hidden', boxShadow: S.shadow, position: 'relative' }}>
                    <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: S.muted, border: `1px solid ${S.border}` }}>{__( 'Coming Soon', 'lazytasks-project-task-management' )}</div>
                    <div style={{ opacity: 0.55, pointerEvents: 'none', userSelect: 'none' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 20px', borderBottom: `1px solid ${S.border}` }}>
                        <div style={{ width: 36, height: 36, borderRadius: S.radiusSm, background: '#EEF2FF', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <svg viewBox="0 0 24 24" width="20" height="20">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" fill="#1877F2"/>
                            </svg>
                        </div>
                        <div style={{ flex: 1 }}>
                            <div style={{ fontSize: 14, fontWeight: 700, color: S.text }}>{__( 'Facebook OAuth', 'lazytasks-project-task-management' )}</div>
                            <div style={{ fontSize: 12, color: S.muted }}>{__( 'Sign in with Facebook account', 'lazytasks-project-task-management' )}</div>
                        </div>
                    </div>
                    {fbEnabled && (
                        <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
                            <FormGroup label={__("App ID", 'lazytasks-project-task-management')} required>
                                <TextInput size="xs" value={fbAppId} onChange={e => setFbAppId(e.target.value)} placeholder={__('Enter App ID', 'lazytasks-project-task-management')} />
                            </FormGroup>
                            <FormGroup label={__("App Secret", 'lazytasks-project-task-management')} required>
                                <PasswordInput size="xs" value={fbAppSecret} onChange={e => setFbAppSecret(e.target.value)} placeholder={__('Enter App Secret', 'lazytasks-project-task-management')} />
                            </FormGroup>
                            <div style={{ paddingTop: 12, borderTop: `1px solid ${S.border}` }}>
                                <Btn variant="primary" style={{ height: 30, fontSize: 12 }} onClick={handleFacebookSave} disabled={fbSaving}>
                                    {fbSaving ? __('Saving…', 'lazytasks-project-task-management') : __('Save Changes', 'lazytasks-project-task-management')}
                                </Btn>
                            </div>
                        </div>
                    )}
                    {!fbEnabled && (
                        <div style={{ padding: '16px 20px', fontSize: 12, color: S.light, fontStyle: 'italic' }}>
                            {__('Enable to configure Facebook OAuth credentials.', 'lazytasks-project-task-management')}
                        </div>
                    )}
                    <HoverCard width={400} shadow="md" position="top-end" withArrow openDelay={100} closeDelay={200} closeOnClickOutside>
                        <HoverCard.Target>
                            <div
                                style={{
                                    position: 'absolute',
                                    bottom: 10,
                                    right: 10,
                                    width: 26,
                                    height: 26,
                                    borderRadius: '50%',
                                    background: S.tealLt,
                                    color: S.teal,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    cursor: 'pointer',
                                    border: `1px solid #C8DDE5`,
                                }}
                                aria-label={__('How to get Facebook App credentials', 'lazytasks-project-task-management')}
                            >
                                <IconInfoCircle size={16} stroke={2} />
                            </div>
                        </HoverCard.Target>
                        <HoverCard.Dropdown p={0} style={{ overflow: 'hidden' }}>
                            <Group gap={8} align="center" px={14} py={10} style={{ background: S.tealLt, borderBottom: `1px solid #C8DDE5` }}>
                                <ThemeIcon size={22} radius="xl" color="teal" variant="filled">
                                    <IconInfoCircle size={14} />
                                </ThemeIcon>
                                <Text size="sm" fw={700} c={S.tealDk}>
                                    {__('How to get Facebook App credentials', 'lazytasks-project-task-management')}
                                </Text>
                            </Group>

                            <Stack gap={12} p={14}>
                                <StepItem num={1} title={__('Open Meta for Developers', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted}>
                                        {__('Sign in at', 'lazytasks-project-task-management')}{' '}
                                        <Text component="a" href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer" c="teal" fw={600} size="xs" td="underline">
                                            developers.facebook.com
                                        </Text>
                                    </Text>
                                </StepItem>

                                <StepItem num={2} title={__('Create an app', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted}>
                                        {__('Go to', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("My Apps → Create App", 'lazytasks-project-task-management')}</Text>{__(', choose', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Consumer", 'lazytasks-project-task-management')}</Text>{__(', and fill in the required fields.', 'lazytasks-project-task-management')}
                                    </Text>
                                </StepItem>

                                <StepItem num={3} title={__('Add Facebook Login product', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted}>
                                        {__('In the app dashboard, click', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Add Product → Facebook Login → Set Up", 'lazytasks-project-task-management')}</Text>{__(' and choose', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Web", 'lazytasks-project-task-management')}</Text>.
                                    </Text>
                                </StepItem>

                                <StepItem num={4} title={__('Configure App Domain & Site URL', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted} mb={6}>
                                        {__('Under', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Settings → Basic", 'lazytasks-project-task-management')}</Text>{__(', add your site domain to', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("App Domains", 'lazytasks-project-task-management')}</Text>{__('. Then under', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Facebook Login → Settings", 'lazytasks-project-task-management')}</Text>{__(', set Site URL to:', 'lazytasks-project-task-management')}
                                    </Text>
                                    <Group gap={6} wrap="nowrap" align="center" p={8} style={{ background: S.tealLt, border: `1px solid #C8DDE5`, borderRadius: 4 }}>
                                        <Text size="xs" style={{ flex: 1, fontFamily: 'monospace', wordBreak: 'break-all', color: S.tealDk }}>
                                            {homeUrl}
                                        </Text>
                                    </Group>
                                </StepItem>

                                <StepItem num={5} title={__('Switch the app to Live mode', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted}>
                                        {__('Toggle the', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("App Mode", 'lazytasks-project-task-management')}</Text> {__('switch at the top to', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Live", 'lazytasks-project-task-management')}</Text>{__('. You may need to provide a Privacy Policy URL and a Data Deletion callback first.', 'lazytasks-project-task-management')}
                                    </Text>
                                </StepItem>

                                <StepItem num={6} title={__('Copy credentials to fields above', 'lazytasks-project-task-management')} last>
                                    <Text size="xs" c={S.muted}>
                                        {__('In', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Settings → Basic", 'lazytasks-project-task-management')}</Text>{__(', copy the', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("App ID", 'lazytasks-project-task-management')}</Text>{__(' and click', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Show", 'lazytasks-project-task-management')}</Text> {__('to reveal the', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("App Secret", 'lazytasks-project-task-management')}</Text>{__(', then paste them above.', 'lazytasks-project-task-management')}
                                    </Text>
                                </StepItem>
                            </Stack>
                        </HoverCard.Dropdown>
                    </HoverCard>
                    </div>
                </div>

                {/* LinkedIn */}
                <div style={{ background: S.white, border: `1px solid ${S.border}`, borderRadius: S.radius, overflow: 'hidden', boxShadow: S.shadow, position: 'relative' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 20px', borderBottom: `1px solid ${S.border}` }}>
                        <div style={{ width: 36, height: 36, borderRadius: S.radiusSm, background: '#E7F0F9', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <svg viewBox="0 0 24 24" width="20" height="20" fill="#0A66C2">
                                <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.34V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.27ZM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13Zm1.78 13.02H3.55V9h3.57v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0Z" />
                            </svg>
                        </div>
                        <div style={{ flex: 1 }}>
                            <div style={{ fontSize: 14, fontWeight: 700, color: S.text }}>{__('LinkedIn OAuth', 'lazytasks-project-task-management')}</div>
                            <div style={{ fontSize: 12, color: S.muted }}>{__('Sign in with LinkedIn account', 'lazytasks-project-task-management')}</div>
                        </div>
                        <Toggle checked={liEnabled} onChange={handleLinkedinToggle} />
                    </div>
                    {liEnabled && (
                        <div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
                            <FormGroup label={__("Client ID", 'lazytasks-project-task-management')} required>
                                <TextInput size="xs" value={liClientId} onChange={e => setLiClientId(e.target.value)} placeholder={__('Enter Client ID', 'lazytasks-project-task-management')} />
                            </FormGroup>
                            <FormGroup label={__("Client Secret", 'lazytasks-project-task-management')} required>
                                <PasswordInput size="xs" value={liClientSecret} onChange={e => setLiClientSecret(e.target.value)} placeholder={__('Enter Client Secret', 'lazytasks-project-task-management')} />
                            </FormGroup>
                            <div style={{ paddingTop: 12, borderTop: `1px solid ${S.border}` }}>
                                <Btn variant="primary" style={{ height: 30, fontSize: 12 }} onClick={handleLinkedinSave} disabled={liSaving}>
                                    {liSaving ? __('Saving…', 'lazytasks-project-task-management') : __('Save Changes', 'lazytasks-project-task-management')}
                                </Btn>
                            </div>
                        </div>
                    )}
                    {!liEnabled && (
                        <div style={{ padding: '16px 20px', fontSize: 12, color: S.light, fontStyle: 'italic' }}>
                            {__('Enable to configure LinkedIn OAuth credentials.', 'lazytasks-project-task-management')}
                        </div>
                    )}
                    <HoverCard width={400} shadow="md" position="top-end" withArrow openDelay={100} closeDelay={200} closeOnClickOutside>
                        <HoverCard.Target>
                            <div
                                style={{
                                    position: 'absolute',
                                    bottom: 10,
                                    right: 10,
                                    width: 26,
                                    height: 26,
                                    borderRadius: '50%',
                                    background: S.tealLt,
                                    color: S.teal,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    cursor: 'pointer',
                                    border: `1px solid #C8DDE5`,
                                }}
                                aria-label={__('How to get LinkedIn OAuth credentials', 'lazytasks-project-task-management')}
                            >
                                <IconInfoCircle size={16} stroke={2} />
                            </div>
                        </HoverCard.Target>
                        <HoverCard.Dropdown p={0} style={{ overflow: 'hidden' }}>
                            <Group gap={8} align="center" px={14} py={10} style={{ background: S.tealLt, borderBottom: `1px solid #C8DDE5` }}>
                                <ThemeIcon size={22} radius="xl" color="teal" variant="filled">
                                    <IconInfoCircle size={14} />
                                </ThemeIcon>
                                <Text size="sm" fw={700} c={S.tealDk}>
                                    {__('How to get LinkedIn OAuth credentials', 'lazytasks-project-task-management')}
                                </Text>
                            </Group>

                            <Stack gap={12} p={14}>
                                <StepItem num={1} title={__('Open LinkedIn Developers', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted}>
                                        {__('Sign in at', 'lazytasks-project-task-management')}{' '}
                                        <Text component="a" href="https://www.linkedin.com/developers/apps" target="_blank" rel="noopener noreferrer" c="teal" fw={600} size="xs" td="underline">
                                            linkedin.com/developers/apps
                                        </Text>
                                    </Text>
                                </StepItem>

                                <StepItem num={2} title={__('Create an app', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted}>
                                        {__('Click', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Create app", 'lazytasks-project-task-management')}</Text>{__(', then provide an App name, the LinkedIn Page representing your company, and a logo.', 'lazytasks-project-task-management')}
                                    </Text>
                                </StepItem>

                                <StepItem num={3} title={__('Request the Sign In with LinkedIn product', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted}>
                                        {__('Open the', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Products", 'lazytasks-project-task-management')}</Text> {__('tab and request', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Sign In with LinkedIn using OpenID Connect", 'lazytasks-project-task-management')}</Text>{__('. Approval is usually instant.', 'lazytasks-project-task-management')}
                                    </Text>
                                </StepItem>

                                <StepItem num={4} title={__('Add authorized redirect URL', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted} mb={6}>
                                        {__('In the', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Auth", 'lazytasks-project-task-management')}</Text> {__('tab, paste this URL into', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Authorized redirect URLs for your app", 'lazytasks-project-task-management')}</Text>:
                                    </Text>
                                    <Group gap={6} wrap="nowrap" align="center" p={8} style={{ background: S.tealLt, border: `1px solid #C8DDE5`, borderRadius: 4 }}>
                                        <Text size="xs" style={{ flex: 1, fontFamily: 'monospace', wordBreak: 'break-all', color: S.tealDk }}>
                                            {redirectUri}
                                        </Text>
                                        <Tooltip label={redirectCopied ? __('Copied!', 'lazytasks-project-task-management') : __('Copy to clipboard', 'lazytasks-project-task-management')} withArrow position="top">
                                            <ActionIcon size="sm" variant="subtle" color="teal" onClick={handleCopyRedirect} aria-label={__('Copy redirect URI', 'lazytasks-project-task-management')}>
                                                {redirectCopied ? <IconCheck size={14} /> : <IconCopy size={14} />}
                                            </ActionIcon>
                                        </Tooltip>
                                    </Group>
                                </StepItem>

                                <StepItem num={5} title={__('Confirm OpenID scopes', 'lazytasks-project-task-management')}>
                                    <Text size="xs" c={S.muted}>
                                        {__('In the', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Auth", 'lazytasks-project-task-management')}</Text> {__('tab, ensure these scopes are listed under OAuth 2.0 scopes:', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">openid profile email</Text>.
                                    </Text>
                                </StepItem>

                                <StepItem num={6} title={__('Copy credentials to fields above', 'lazytasks-project-task-management')} last>
                                    <Text size="xs" c={S.muted}>
                                        {__('From the', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Auth", 'lazytasks-project-task-management')}</Text> {__('tab, copy the', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Client ID", 'lazytasks-project-task-management')}</Text> {__('and', 'lazytasks-project-task-management')} <Text span fw={600} c={S.text} size="xs">{__("Client Secret", 'lazytasks-project-task-management')}</Text> {__('into the fields above.', 'lazytasks-project-task-management')}
                                    </Text>
                                </StepItem>
                            </Stack>
                        </HoverCard.Dropdown>
                    </HoverCard>
                </div>
            </SimpleGrid>
        </>
    );
};

/* ──────────────────────────────────────────────────────────
   PANEL 6: Manage Tags
──────────────────────────────────────────────────────────── */
const ManageTagsPanel = () => {
    const dispatch = useDispatch();
    const { loggedInUser } = useSelector(s => s.auth.session);
    const { loggedUserId } = useSelector(s => s.auth.user);
    const { tags = [] } = useSelector(s => s.settings.tag);

    const [newTag, setNewTag] = useState('');
    const [tagError, setTagError] = useState('');
    const [confirmTag, setConfirmTag] = useState(null); // tag object to delete
    const [search, setSearch] = useState('');

    const canCreateTag = hasPermission(loggedInUser, ['manage-tags'], null, 'global');
    const canDeleteTag = hasPermission(loggedInUser, ['manage-tags'], null, 'global');

    useEffect(() => { dispatch(fetchAllTags()); }, [dispatch]);

    const handleAdd = () => {
        const name = newTag.trim();
        if (!name) { setTagError(__('Tag name cannot be empty', 'lazytasks-project-task-management')); return; }
        const userId = loggedInUser?.loggedUserId || loggedUserId;
        dispatch(createTag({ name, user_id: userId })).then(res => {
            if (res.payload?.status === 200) {
                showNotification({ title: __('Tags', 'lazytasks-project-task-management'), message: __('Tag added successfully', 'lazytasks-project-task-management'), color: 'green', autoClose: 2000 });
                setNewTag(''); setTagError('');
            } else {
                showNotification({ title: __('Tags', 'lazytasks-project-task-management'), message: res.payload?.message || __('Failed to add tag', 'lazytasks-project-task-management'), color: 'red', autoClose: 2000 });
            }
        });
    };

    const handleRemove = (tag) => {
        if (tag.task_count > 0) { setConfirmTag(tag); return; }
        confirmDelete(tag.id);
    };

    const confirmDelete = (id) => {
        dispatch(deleteTag(id)).unwrap()
            .then(() => {
                showNotification({ title: __('Tags', 'lazytasks-project-task-management'), message: __('Tag deleted successfully', 'lazytasks-project-task-management'), color: 'green', autoClose: 2000 });
                setConfirmTag(null);
            })
            .catch(err => {
                showNotification({ title: __('Tags', 'lazytasks-project-task-management'), message: err?.message || __('Failed to delete tag', 'lazytasks-project-task-management'), color: 'red', autoClose: 2000 });
                setConfirmTag(null);
            });
    };

    const filtered = tags.filter(t => t.name.toLowerCase().includes(search.toLowerCase()));

    return (
        <>
            <SectionHeader title={__('Manage Tags', 'lazytasks-project-task-management')} desc={__('Create and manage tags to categorize tasks across all projects.', 'lazytasks-project-task-management')} />
            <Card>
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, marginBottom: 20, paddingBottom: 20, borderBottom: `1px solid ${S.border}` }}>
                    <FormGroup label={__('Tag Name', 'lazytasks-project-task-management')} style={{ flex: 1, maxWidth: 240 }}>
                        <input
                            style={{ ...inputStyle, borderColor: tagError ? S.danger : S.border }}
                            value={newTag}
                            onChange={e => { setNewTag(e.target.value); setTagError(''); }}
                            placeholder={__('e.g. Urgent', 'lazytasks-project-task-management')}
                            disabled={!canCreateTag}
                            onKeyDown={e => e.key === 'Enter' && canCreateTag && handleAdd()}
                        />
                        <FieldError msg={tagError} />
                    </FormGroup>
                    <Btn variant="primary" disabled={!canCreateTag} onClick={canCreateTag ? handleAdd : undefined} style={{ alignSelf: 'flex-end', marginBottom: tagError ? 20 : 1, ...(canCreateTag ? {} : { opacity: 0.5, cursor: 'not-allowed' }) }}>
                        <Icon d={<><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>} size={14} sw={2.5} />
                        {__('Add Tag', 'lazytasks-project-task-management')}
                    </Btn>
                </div>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                    <div style={{ fontSize: 13, color: S.muted }}>
                        <strong style={{ color: S.text }}>{tags.length} {__('tags', 'lazytasks-project-task-management')}</strong> {__('across all workspaces', 'lazytasks-project-task-management')}
                    </div>
                    <div style={{ display: 'flex', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, overflow: 'hidden', width: 200 }}>
                        <span style={{ display: 'flex', alignItems: 'center', padding: '0 8px' }}>
                            <Icon d={<><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></>} size={14} stroke={S.muted} />
                        </span>
                        <input style={{ ...inputStyle, border: 'none', flex: 1 }} placeholder={__('Search tags…', 'lazytasks-project-task-management')} value={search} onChange={e => setSearch(e.target.value)} />
                    </div>
                </div>

                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, minHeight: 40 }}>
                    {filtered.map(tag => (
                        <span key={tag.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px 4px 8px', borderRadius: 20, fontSize: 12, fontWeight: 600, background: S.tealLt, color: S.teal }}>
                            {tag.name}
                            {tag.task_count > 0 && (
                                <span style={{ fontSize: 10, color: S.light, marginLeft: 2 }}>({tag.task_count})</span>
                            )}
                            <button
                                onClick={canDeleteTag ? () => handleRemove(tag) : undefined}
                                style={{ background: 'none', border: 'none', cursor: canDeleteTag ? 'pointer' : 'not-allowed', display: 'flex', alignItems: 'center', opacity: canDeleteTag ? 0.5 : 0.2, padding: 0, marginLeft: 2, color: 'inherit' }}
                            >
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" style={{ width: 10, height: 10 }}>
                                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                                </svg>
                            </button>
                        </span>
                    ))}
                    {filtered.length === 0 && <div style={{ fontSize: 12, color: S.light, fontStyle: 'italic' }}>{__('No tags found.', 'lazytasks-project-task-management')}</div>}
                </div>
            </Card>

            {/* Delete confirm modal */}
            {confirmTag && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <div style={{ background: S.white, borderRadius: S.radius, padding: 28, width: 400, boxShadow: '0 20px 60px rgba(0,0,0,.2)' }}>
                        <div style={{ fontSize: 15, fontWeight: 700, color: S.text, marginBottom: 10 }}>{__('Delete Tag', 'lazytasks-project-task-management')}</div>
                        <div style={{ fontSize: 13, color: S.muted, marginBottom: 20 }}>
                            {__('This tag is used in tasks. Deleting it will remove the tag from all associated tasks. Are you sure you want to delete this tag?', 'lazytasks-project-task-management')}
                        </div>
                        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                            <Btn variant="ghost" onClick={() => setConfirmTag(null)}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="danger" style={{ background: S.danger, color: '#fff' }} onClick={() => confirmDelete(confirmTag.id)}>{__('Delete', 'lazytasks-project-task-management')}</Btn>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

// Raw Trello JSON field paths that the importer drops. Used by the Tasks step
// reference panel and the final report on the Done step. Derived from a one-time
// audit of TrelloJsonParser + executeImport vs. the Trello export shape — any
// time we add support for one of these we should drop it from the list.
const buildTrelloNotImportedFields = () => [
    // ── Board level ──
    { path: 'board.nodeId',                         note: __('Trello internal node ID', 'lazytasks-project-task-management') },
    { path: 'board.descData',                       note: __('Rich-text mention metadata for description', 'lazytasks-project-task-management') },
    { path: 'board.creationMethod',                 note: __('How the board was created (Butler / template / manual)', 'lazytasks-project-task-management') },
    { path: 'board.creationMethodError',            note: __('Creation-method error message', 'lazytasks-project-task-management') },
    { path: 'board.creationMethodLoadingStartedAt', note: __('Creation-method load timestamp', 'lazytasks-project-task-management') },
    { path: 'board.creationMethodLoadingPhase',     note: __('Creation-method load phase', 'lazytasks-project-task-management') },
    { path: 'board.idOrganization',                 note: __('Trello workspace ID (LazyTasks workspace is picked separately)', 'lazytasks-project-task-management') },
    { path: 'board.idEnterprise',                   note: __('Trello Enterprise ID', 'lazytasks-project-task-management') },
    { path: 'board.limits',                         note: __('Trello usage limits (cards / lists per board)', 'lazytasks-project-task-management') },
    { path: 'board.pinned',                         note: __('Pinned-to-sidebar flag', 'lazytasks-project-task-management') },
    { path: 'board.starred',                        note: __('Starred-by-user flag', 'lazytasks-project-task-management') },
    { path: 'board.url',                            note: __('Long board URL', 'lazytasks-project-task-management') },
    { path: 'board.premiumFeatures',                note: __('Premium Trello features enabled on the board', 'lazytasks-project-task-management') },
    { path: 'board.prefs.background',               note: __('Board background image', 'lazytasks-project-task-management') },
    { path: 'board.prefs.backgroundColor',          note: __('Board background color', 'lazytasks-project-task-management') },
    { path: 'board.prefs.voting',                   note: __('Voting configuration', 'lazytasks-project-task-management') },
    { path: 'board.prefs.permissionLevel',          note: __('Board permission settings', 'lazytasks-project-task-management') },
    // ── Card level ──
    { path: 'card.cover',                           note: __('Cover banner / colored cover', 'lazytasks-project-task-management') },
    { path: 'card.idAttachmentCover',               note: __('Attachment-as-cover reference', 'lazytasks-project-task-management') },
    { path: 'card.customFieldItems',                note: __('Per-card custom field values', 'lazytasks-project-task-management') },
    { path: 'card.subscribed',                      note: __('Watch / subscribe flag', 'lazytasks-project-task-management') },
    { path: 'card.pos',                             note: __('Position within list (sort order is regenerated)', 'lazytasks-project-task-management') },
    { path: 'card.descData',                        note: __('Rich-text mention metadata for description', 'lazytasks-project-task-management') },
    { path: 'card.limits',                          note: __('Trello card-level limits (attachments / labels / etc.)', 'lazytasks-project-task-management') },
    { path: 'card.url',                             note: __('Long card URL', 'lazytasks-project-task-management') },
    { path: 'card.nodeId',                          note: __('Trello internal node ID', 'lazytasks-project-task-management') },
    // ── List level ──
    { path: 'list.subscribed',                      note: __('List-level watch flag', 'lazytasks-project-task-management') },
    { path: 'list.limits',                          note: __('Trello list-level limits', 'lazytasks-project-task-management') },
    // ── Top-level arrays ──
    { path: 'customFields[]',                       note: __('Custom field definitions', 'lazytasks-project-task-management') },
    { path: 'pluginData[]',                         note: __('Power-Up data', 'lazytasks-project-task-management') },
    { path: 'actions[].type != \'commentCard\'',    note: __('Non-comment activity actions', 'lazytasks-project-task-management') },
];

/* ──────────────────────────────────────────────────────────
   PANEL 7: Trello Import
──────────────────────────────────────────────────────────── */
const TrelloImportPanel = () => {
    const dispatch = useDispatch();
    const { step, visitedSteps, isLoading, error, preview, trelloDataKey, memberMapping, wpUsers, members, notices, results, linkState, takingOver, cancelling, selectedWorkspaceId, workspaceDraft, creatingWorkspace, projectDraft, memberRoles, extraMembers, notifyMembers, sectionPlan, designatedCompleteTrelloListId, statusPlan, priorityPlan, tagPlan, customFieldsSummary, taskOptions, navbarSettings, activityLogLevel, cardsWithIssues, taskAcknowledged, taskOverrides } = useSelector(s => s.settings.trelloImport);
    const [issuesFilter, setIssuesFilter] = useState('unacknowledged'); // 'unacknowledged' | 'all'
    const { companies = [] } = useSelector(s => s.settings.company);
    const { roles = [] } = useSelector(s => s.auth.role);
    const { loggedInUser } = useSelector(s => s.auth.session);
    const fileRef = useRef(null);
    const [dragOver, setDragOver] = useState(false);
    const [showCreateWorkspace, setShowCreateWorkspace] = useState(false);
    const [inviteEmail, setInviteEmail] = useState('');
    const [inviteFirstName, setInviteFirstName] = useState('');
    const [inviteLastName, setInviteLastName] = useState('');
    const [inviteRoleId, setInviteRoleId] = useState('');
    const [invitingUser, setInvitingUser] = useState(false);
    const [existingPickUserId, setExistingPickUserId] = useState('');
    const [existingPickRoleId, setExistingPickRoleId] = useState('');

    // Make sure workspaces are loaded — wizard panel may be the first place the user lands.
    useEffect(() => {
        if (!companies || companies.length === 0) {
            dispatch(fetchAllCompanies());
        }
        if (!roles || roles.length === 0) {
            dispatch(fetchAllRoles());
        }
    }, [dispatch]); // intentional: fetch once on mount; lists populate after

    // Workspace id used for the import. Backed by slice; falls back to first company
    // until the user explicitly picks one (covers the case where Step 2 was skipped
    // because there's only one workspace).
    const companyId = selectedWorkspaceId || companies?.[0]?.id || loggedInUser?.companyId || 1;

    const handleFileSelect = (file) => {
        if (!file) return;
        if (!file.name.endsWith('.json')) {
            showNotification({ title: __('Import', 'lazytasks-project-task-management'), message: __('Please select a .json file', 'lazytasks-project-task-management'), color: 'red', autoClose: 3000 });
            return;
        }
        const formData = new FormData();
        formData.append('trello_json', file);
        dispatch(parseTrelloFile(formData));
    };

    const handleDrop = (e) => {
        e.preventDefault();
        setDragOver(false);
        const file = e.dataTransfer?.files?.[0];
        handleFileSelect(file);
    };

    const handleExecute = () => {
        // Section plan: serialize sort_order from current array position so the
        // backend honors the drag-reorder result.
        const sectionPlanPayload = (sectionPlan || []).map((row, idx) => ({
            trello_id:  row.trello_id,
            name:       row.name,
            skip:       !!row.skip,
            sort_order: idx + 1,
        }));
        const statusPlanPayload = (statusPlan || []).map(s => ({
            name: s.name,
            color_code: s.color_code,
            is_complete: !!s.is_complete,
        }));
        const priorityPlanPayload = (priorityPlan || []).map(p => ({
            key: p.key,
            name: p.name,
            color_code: p.color_code,
        }));
        const tagPlanPayload = (tagPlan || []).map(t => ({
            trello_id: t.trello_id,
            name: t.name,
            skip: !!t.skip,
        }));
        dispatch(runTrelloImport({
            trello_data_key: trelloDataKey,
            company_id: companyId,
            member_mapping: memberMapping,
            member_roles: memberRoles,
            extra_members: extraMembers,
            notify_members: notifyMembers,
            section_plan: sectionPlanPayload,
            designated_complete_trello_list_id: designatedCompleteTrelloListId,
            status_plan: statusPlanPayload,
            priority_plan: priorityPlanPayload,
            tag_plan: tagPlanPayload,
            task_options: {
                skip_all_comments:    !!(taskOptions && taskOptions.skipAllComments),
                skip_all_attachments: !!(taskOptions && taskOptions.skipAllAttachments),
            },
            navbar_settings: {
                list:       true, // always-on; mirrors existing ProjectSettingsModal "Default"
                board:      !!(navbarSettings && navbarSettings.board),
                calendar:   !!(navbarSettings && navbarSettings.calendar),
                gantt:      !!(navbarSettings && navbarSettings.gantt),
                report:     !!(navbarSettings && navbarSettings.report),
                whiteboard: !!(navbarSettings && navbarSettings.whiteboard),
                swimlane:   !!(navbarSettings && navbarSettings.swimlane),
            },
            activity_log_level: activityLogLevel || 'off',
            task_overrides: taskOverrides || {},
            link_id: linkState?.link_id || null,
            project_name: projectDraft.name,
            project_description: projectDraft.description,
        }));
    };

    // Cancel via the backend so the link row gets flipped to cancelled (preserves audit).
    // Falls back to local reset when there's no link row yet (e.g. upload failed before parse).
    const handleReset = () => {
        if (linkState?.link_id) {
            dispatch(cancelWizard(linkState.link_id));
        } else {
            dispatch(resetImport());
        }
        if (fileRef.current) fileRef.current.value = '';
    };

    const handleTakeOver = () => {
        if (linkState?.link_id) {
            dispatch(takeOverWizard(linkState.link_id));
        }
    };

    // Renders the wizard step navbar above whatever body the current step
    // provides. Conflict-banner returns below this helper bypass the stepper
    // intentionally (no usable wizard yet); every other step returns through
    // here so the user always sees their progress.
    const renderWithStepper = (body) => (
        <>
            <TrelloImportStepper
                currentStep={step}
                visitedSteps={visitedSteps}
                activityLogLevel={activityLogLevel}
                linkState={linkState}
                onStepClick={(id) => dispatch(setStep(id))}
            />
            {body}
        </>
    );

    // ── Step 1a: Banner for already-imported boards (block re-import) ──
    if (step === 'upload' && linkState?.status === 'conflict_completed') {
        const importedAt = linkState.imported_at ? linkState.imported_at.split(' ')[0] : '';
        return (
            <>
                <SectionHeader
                    title={__('Already imported', 'lazytasks-project-task-management')}
                    desc={__('This Trello board was previously imported. To import again, delete the existing project first.', 'lazytasks-project-task-management')}
                />
                <Card>
                    <div style={{ padding: '14px 16px', background: '#FFFBEB', border: `1px solid #FDE68A`, borderRadius: S.radiusSm, color: '#92400E', fontSize: 13, lineHeight: 1.6 }}>
                        {importedAt
                            ? sprintf(
                                /* translators: 1: ISO date, 2: project name */
                                __('This board was imported on %1$s into project "%2$s".', 'lazytasks-project-task-management'),
                                importedAt,
                                linkState.entity_name || __('(deleted)', 'lazytasks-project-task-management')
                            )
                            : sprintf(
                                /* translators: %s: project name */
                                __('This board is already linked to project "%s".', 'lazytasks-project-task-management'),
                                linkState.entity_name || __('(deleted)', 'lazytasks-project-task-management')
                            )
                        }
                        <div style={{ marginTop: 8, fontSize: 12, color: S.muted }}>
                            {__('Delete that project first if you want to re-import this board. Per-task tracking is not enabled in this version, so we cannot safely merge new changes into an existing import.', 'lazytasks-project-task-management')}
                        </div>
                    </div>
                    <div style={{ marginTop: 16, display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                        <Btn variant="ghost" onClick={handleReset} disabled={cancelling}>
                            {__('Upload different file', 'lazytasks-project-task-management')}
                        </Btn>
                        {linkState.entity_id && (
                            <a
                                href={`#/project/task/list/${linkState.entity_id}`}
                                style={{ textDecoration: 'none' }}
                            >
                                <Btn variant="primary">
                                    {__('Open project', 'lazytasks-project-task-management')} →
                                </Btn>
                            </a>
                        )}
                    </div>
                </Card>
            </>
        );
    }

    // ── Step 1a: Banner for boards currently being imported by someone else ──
    if (step === 'upload' && linkState?.status === 'conflict_other_user') {
        return (
            <>
                <SectionHeader
                    title={__('Another user is importing this board', 'lazytasks-project-task-management')}
                    desc={__('Only one wizard can run for a given Trello board at a time.', 'lazytasks-project-task-management')}
                />
                <Card>
                    <div style={{ padding: '14px 16px', background: '#EFF6FF', border: `1px solid #BFDBFE`, borderRadius: S.radiusSm, color: '#1E40AF', fontSize: 13, lineHeight: 1.6 }}>
                        {sprintf(
                            /* translators: %s: display name of the other user */
                            __('%s is currently importing this board.', 'lazytasks-project-task-management'),
                            linkState.imported_by_display_name || __('Another user', 'lazytasks-project-task-management')
                        )}
                        <div style={{ marginTop: 8, fontSize: 12, color: S.muted }}>
                            {__('You can wait for them to finish, or take over the wizard — their unsaved progress will be discarded.', 'lazytasks-project-task-management')}
                        </div>
                    </div>
                    <div style={{ marginTop: 16, display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                        <Btn variant="ghost" onClick={handleReset} disabled={cancelling || takingOver}>
                            {__('Wait', 'lazytasks-project-task-management')}
                        </Btn>
                        <Btn variant="primary" onClick={handleTakeOver} disabled={takingOver}>
                            {takingOver ? __('Taking over…', 'lazytasks-project-task-management') : __('Take over', 'lazytasks-project-task-management')}
                        </Btn>
                    </div>
                </Card>
            </>
        );
    }

    // ── Step 1: Upload ──
    if (step === 'upload') {
        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Import from Trello', 'lazytasks-project-task-management')}
                    desc={__('Upload a Trello board JSON export to import it as a new project.', 'lazytasks-project-task-management')}
                />
                <Card>
                    <CardTitle icon={<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></>}>
                        {__('Upload Trello Export', 'lazytasks-project-task-management')}
                    </CardTitle>
                    <div
                        onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
                        onDragLeave={() => setDragOver(false)}
                        onDrop={handleDrop}
                        onClick={() => fileRef.current?.click()}
                        style={{
                            border: `2px dashed ${dragOver ? S.orange : S.border}`,
                            borderRadius: S.radius,
                            padding: '48px 24px',
                            textAlign: 'center',
                            cursor: 'pointer',
                            background: dragOver ? S.orangeLt : '#FAFBFC',
                            transition: 'all .2s',
                        }}
                    >
                        <div style={{ marginBottom: 12, display: 'flex', justifyContent: 'center' }}>
                            <svg viewBox="0 0 24 24" fill="none" stroke={S.muted} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 40, height: 40 }}>
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                <polyline points="17 8 12 3 7 8"/>
                                <line x1="12" y1="3" x2="12" y2="15"/>
                            </svg>
                        </div>
                        <div style={{ fontSize: 14, fontWeight: 600, color: S.text, marginBottom: 4 }}>
                            {__('Drop your Trello JSON file here', 'lazytasks-project-task-management')}
                        </div>
                        <div style={{ fontSize: 12, color: S.muted }}>
                            {__('or click to browse. Maximum file size: 20MB', 'lazytasks-project-task-management')}
                        </div>
                        <input
                            ref={fileRef}
                            type="file"
                            accept=".json"
                            style={{ display: 'none' }}
                            onChange={(e) => handleFileSelect(e.target.files?.[0])}
                        />
                    </div>
                    {isLoading && (
                        <div style={{ textAlign: 'center', padding: '20px 0', color: S.muted, fontSize: 13 }}>
                            {__('Parsing Trello export…', 'lazytasks-project-task-management')}
                        </div>
                    )}
                    {error && (
                        <div style={{ marginTop: 12, padding: '10px 14px', background: '#FEF2F2', border: `1px solid #FECACA`, borderRadius: S.radiusSm, color: S.danger, fontSize: 12 }}>
                            {error}
                        </div>
                    )}
                    <div style={{ marginTop: 20, padding: '16px 0 0', borderTop: `1px solid ${S.border}` }}>
                        <div style={{ fontSize: 12, color: S.muted }}>
                            <strong>{__('How to export from Trello:', 'lazytasks-project-task-management')}</strong>
                            <ol style={{ margin: '8px 0 0', paddingLeft: 20, lineHeight: 1.8 }}>
                                <li>{__('Open your Trello board', 'lazytasks-project-task-management')}</li>
                                <li>{__('Click the board menu (…) → More → Print and export', 'lazytasks-project-task-management')}</li>
                                <li>{__('Select "Export as JSON"', 'lazytasks-project-task-management')}</li>
                                <li>{__('Upload the downloaded .json file here', 'lazytasks-project-task-management')}</li>
                            </ol>
                        </div>
                    </div>
                </Card>
            </>
        );
    }

    // ── Step 1 continued: Preview after parse ──
    if (step === 'preview') {
        const stats = [
            { label: __('Lists → Sections', 'lazytasks-project-task-management'), value: preview?.lists_count || 0, icon: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></> },
            { label: __('Cards → Tasks', 'lazytasks-project-task-management'), value: preview?.cards_count || 0, icon: <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></> },
            { label: __('Checklists → Subtasks', 'lazytasks-project-task-management'), value: preview?.checklist_items_count || 0, icon: <><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></> },
            { label: __('Comments', 'lazytasks-project-task-management'), value: preview?.comments_count || 0, icon: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></> },
            { label: __('Labels → Tags', 'lazytasks-project-task-management'), value: preview?.labels_count || 0, icon: <><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></> },
            { label: __('Members', 'lazytasks-project-task-management'), value: preview?.members_count || 0, icon: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></> },
        ];

        return renderWithStepper(
            <>
                <SectionHeader
                    title={preview?.board_name || __('Board Preview', 'lazytasks-project-task-management')}
                    desc={__('Review what will be imported before proceeding.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={handleReset}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setStep('workspace'))}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />

                {preview?.board_desc && (
                    <Card style={{ marginBottom: 16 }}>
                        <div style={{ fontSize: 12, color: S.muted }}>{preview.board_desc}</div>
                    </Card>
                )}

                <Card style={{ marginBottom: 16 }}>
                    <CardTitle icon={<><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></>}>
                        {__('Import Summary', 'lazytasks-project-task-management')}
                    </CardTitle>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                        {stats.map((s, i) => (
                            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', background: '#FAFBFC', borderRadius: S.radiusSm, border: `1px solid ${S.border}` }}>
                                <div style={{ flexShrink: 0 }}>
                                    <svg viewBox="0 0 24 24" fill="none" stroke={S.teal} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 18, height: 18 }}>{s.icon}</svg>
                                </div>
                                <div>
                                    <div style={{ fontSize: 18, fontWeight: 700, color: S.text }}>{s.value}</div>
                                    <div style={{ fontSize: 11, color: S.muted }}>{s.label}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </Card>

                {/* Import Notices */}
                {notices.length > 0 && (
                    <Card>
                        <CardTitle icon={<><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>}>
                            {__('Import Notes', 'lazytasks-project-task-management')}
                        </CardTitle>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                            {notices.map((notice, i) => (
                                <div key={i} style={{
                                    padding: '10px 14px', borderRadius: S.radiusSm, fontSize: 12, lineHeight: 1.5,
                                    background: notice.type === 'warning' ? '#FFFBEB' : '#EFF6FF',
                                    border: `1px solid ${notice.type === 'warning' ? '#FDE68A' : '#BFDBFE'}`,
                                    color: notice.type === 'warning' ? '#92400E' : '#1E40AF',
                                }}>
                                    {notice.message}
                                </div>
                            ))}
                        </div>
                    </Card>
                )}
            </>
        );
    }

    // ── Step 2: Select / Create Workspace ──
    if (step === 'workspace') {
        const canContinue = !!selectedWorkspaceId;

        const handleCreateWorkspace = async () => {
            if (!workspaceDraft.name?.trim()) {
                showNotification({ title: __('Workspace', 'lazytasks-project-task-management'), message: __('Workspace name is required.', 'lazytasks-project-task-management'), color: 'red', autoClose: 3000 });
                return;
            }
            dispatch(setCreatingWorkspace(true));
            try {
                const result = await dispatch(createCompany({
                    name: workspaceDraft.name.trim(),
                    code: workspaceDraft.code?.trim() || workspaceDraft.name.trim().substring(0, 5).toUpperCase(),
                })).unwrap();
                const newCompany = result?.data;
                if (newCompany?.id) {
                    dispatch(setSelectedWorkspaceId(newCompany.id));
                    dispatch(updateWorkspaceDraft({ field: 'name', value: '' }));
                    dispatch(updateWorkspaceDraft({ field: 'code', value: '' }));
                    setShowCreateWorkspace(false);
                }
            } catch (e) {
                showNotification({ title: __('Workspace', 'lazytasks-project-task-management'), message: e?.message || __('Failed to create workspace.', 'lazytasks-project-task-management'), color: 'red', autoClose: 3000 });
            } finally {
                dispatch(setCreatingWorkspace(false));
            }
        };

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Select Workspace', 'lazytasks-project-task-management')}
                    desc={__('Choose the workspace that will own the imported project, or create a new one.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setStep('preview'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setStep('project-entry'))} disabled={!canContinue}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />

                <Card>
                    <CardTitle icon={<><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/></>}>
                        {__('Existing workspaces', 'lazytasks-project-task-management')}
                    </CardTitle>
                    {companies.length === 0 ? (
                        <div style={{ padding: '20px 0', textAlign: 'center', color: S.muted, fontSize: 13 }}>
                            {__('No workspaces yet — create one below to continue.', 'lazytasks-project-task-management')}
                        </div>
                    ) : (
                        <select
                            value={selectedWorkspaceId || ''}
                            onChange={(e) => dispatch(setSelectedWorkspaceId(e.target.value ? parseInt(e.target.value) : null))}
                            style={{ ...inputStyle, cursor: 'pointer', width: '100%' }}
                        >
                            <option value="">{__('— Select a workspace —', 'lazytasks-project-task-management')}</option>
                            {companies.map(c => (
                                <option key={c.id} value={c.id}>{c.name}</option>
                            ))}
                        </select>
                    )}
                </Card>

                <Card style={{ marginTop: 16 }}>
                    <CardTitle icon={<><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>}>
                        {__('Create new workspace', 'lazytasks-project-task-management')}
                    </CardTitle>
                    {showCreateWorkspace ? (
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                            <div>
                                <label style={{ fontSize: 12, fontWeight: 600, color: S.text, display: 'block', marginBottom: 6 }}>
                                    {__('Name', 'lazytasks-project-task-management')} <span style={{ color: S.danger }}>*</span>
                                </label>
                                <input
                                    type="text"
                                    value={workspaceDraft.name}
                                    onChange={(e) => dispatch(updateWorkspaceDraft({ field: 'name', value: e.target.value }))}
                                    placeholder={__('My Team Workspace', 'lazytasks-project-task-management')}
                                    style={{ ...inputStyle, width: '100%' }}
                                />
                            </div>
                            <div>
                                <label style={{ fontSize: 12, fontWeight: 600, color: S.text, display: 'block', marginBottom: 6 }}>
                                    {__('Short code', 'lazytasks-project-task-management')}
                                </label>
                                <input
                                    type="text"
                                    value={workspaceDraft.code}
                                    onChange={(e) => dispatch(updateWorkspaceDraft({ field: 'code', value: e.target.value }))}
                                    placeholder={__('Optional — defaults to first 5 chars of name', 'lazytasks-project-task-management')}
                                    style={{ ...inputStyle, width: '100%' }}
                                />
                            </div>
                            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                <Btn variant="ghost" onClick={() => setShowCreateWorkspace(false)} disabled={creatingWorkspace}>
                                    {__('Cancel', 'lazytasks-project-task-management')}
                                </Btn>
                                <Btn variant="primary" onClick={handleCreateWorkspace} disabled={creatingWorkspace || !workspaceDraft.name?.trim()}>
                                    {creatingWorkspace ? __('Creating…', 'lazytasks-project-task-management') : __('Create and select', 'lazytasks-project-task-management')}
                                </Btn>
                            </div>
                        </div>
                    ) : (
                        <Btn variant="ghost" onClick={() => setShowCreateWorkspace(true)}>
                            + {__('Add new workspace', 'lazytasks-project-task-management')}
                        </Btn>
                    )}
                </Card>
            </>
        );
    }

    // ── Step 3: Project Entry ──
    if (step === 'project-entry') {
        const canContinue = !!projectDraft.name?.trim();
        const ownerName = loggedInUser?.display_name || loggedInUser?.user_email || __('You', 'lazytasks-project-task-management');

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Project Details', 'lazytasks-project-task-management')}
                    desc={__('Review the project name and description before continuing. Name and description are pre-filled from the Trello board.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setStep('workspace'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setStep('member-mapping'))} disabled={!canContinue}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />

                <Card>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                        <div>
                            <label style={{ fontSize: 12, fontWeight: 600, color: S.text, display: 'block', marginBottom: 6 }}>
                                {__('Project name', 'lazytasks-project-task-management')} <span style={{ color: S.danger }}>*</span>
                            </label>
                            <input
                                type="text"
                                value={projectDraft.name}
                                onChange={(e) => dispatch(updateProjectDraft({ field: 'name', value: e.target.value }))}
                                placeholder={__('Project name', 'lazytasks-project-task-management')}
                                style={{ ...inputStyle, width: '100%' }}
                                maxLength={255}
                            />
                        </div>

                        <div>
                            <label style={{ fontSize: 12, fontWeight: 600, color: S.text, display: 'block', marginBottom: 6 }}>
                                {__('Description', 'lazytasks-project-task-management')}
                            </label>
                            <textarea
                                value={projectDraft.description}
                                onChange={(e) => dispatch(updateProjectDraft({ field: 'description', value: e.target.value }))}
                                placeholder={__('Pre-filled from the Trello board description. Edit if needed.', 'lazytasks-project-task-management')}
                                rows={4}
                                style={{ ...inputStyle, width: '100%', resize: 'vertical', fontFamily: 'inherit' }}
                            />
                        </div>

                        <div style={{ padding: '12px 14px', background: '#FAFBFC', border: `1px solid ${S.border}`, borderRadius: S.radiusSm }}>
                            <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, marginBottom: 4 }}>
                                {__('Owner', 'lazytasks-project-task-management')}
                            </div>
                            <div style={{ fontSize: 13, color: S.text }}>{ownerName}</div>
                            <div style={{ fontSize: 11, color: S.muted, marginTop: 2 }}>
                                {__('The current user is automatically set as the project owner.', 'lazytasks-project-task-management')}
                            </div>
                        </div>
                    </div>
                </Card>
            </>
        );
    }

    // ── Step 5: Sections (rename / reorder Trello lists — all are imported) ──
    if (step === 'sections') {
        const plan = sectionPlan || [];
        const archivedCount = plan.filter(r => r.closed).length;

        const handleDragEnd = (result) => {
            if (!result.destination) return;
            const srcIdx = result.source.index;
            const dstIdx = result.destination.index;
            if (srcIdx === dstIdx) return;
            dispatch(reorderSectionPlan({ sourceIndex: srcIdx, destinationIndex: dstIdx }));
        };

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Project Sections', 'lazytasks-project-task-management')}
                    desc={__('Each Trello list becomes a section in the new project. Rename or reorder lists as needed — all lists will be imported.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setStep('member-mapping'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setStep('settings'))} disabled={plan.length === 0}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />

                {plan.length === 0 ? (
                    <Card>
                        <div style={{ textAlign: 'center', padding: '32px 0', color: S.muted, fontSize: 13 }}>
                            {__('No lists found in the Trello export. The project will be created without sections.', 'lazytasks-project-task-management')}
                        </div>
                    </Card>
                ) : (
                    <Card>
                        {/* Header */}
                        <div style={{ display: 'grid', gridTemplateColumns: '32px 1fr 70px 110px', gap: 12, padding: '0 0 8px', borderBottom: `1px solid ${S.border}` }}>
                            <div></div>
                            <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Section Name', 'lazytasks-project-task-management')}</div>
                            <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, textAlign: 'right' }}>{__('Cards', 'lazytasks-project-task-management')}</div>
                            <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, textAlign: 'center' }} title={__('Mark which section\'s cards should be imported as Completed', 'lazytasks-project-task-management')}>{__('Complete?', 'lazytasks-project-task-management')}</div>
                        </div>

                        <DragDropContext onDragEnd={handleDragEnd}>
                            <Droppable droppableId="section-plan">
                                {(provided) => (
                                    <div ref={provided.innerRef} {...provided.droppableProps}>
                                        {plan.map((row, idx) => (
                                            <Draggable key={row.trello_id} draggableId={String(row.trello_id)} index={idx}>
                                                {(prov, snap) => (
                                                    <div
                                                        ref={prov.innerRef}
                                                        {...prov.draggableProps}
                                                        style={{
                                                            ...prov.draggableProps.style,
                                                            display: 'grid',
                                                            gridTemplateColumns: '32px 1fr 70px 110px',
                                                            gap: 12,
                                                            padding: '10px 0',
                                                            borderBottom: `1px solid ${S.border}`,
                                                            alignItems: 'center',
                                                            background: snap.isDragging ? '#F8FAFC' : 'transparent',
                                                        }}
                                                    >
                                                        <div
                                                            {...prov.dragHandleProps}
                                                            style={{ display: 'flex', justifyContent: 'center', cursor: 'grab', color: S.muted }}
                                                            title={__('Drag to reorder', 'lazytasks-project-task-management')}
                                                        >
                                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
                                                                <circle cx="9" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="18" r="1"/>
                                                                <circle cx="15" cy="6" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="18" r="1"/>
                                                            </svg>
                                                        </div>
                                                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                                            <input
                                                                type="text"
                                                                value={row.name}
                                                                onChange={(e) => dispatch(setSectionName({ trelloId: row.trello_id, name: e.target.value }))}
                                                                style={{ ...inputStyle, flex: 1 }}
                                                                maxLength={255}
                                                            />
                                                            {row.closed && (
                                                                <span title={__('Archived in Trello', 'lazytasks-project-task-management')} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 12, fontSize: 10, fontWeight: 600, background: '#FEE2E2', color: '#991B1B', whiteSpace: 'nowrap' }}>
                                                                    {__('Archived', 'lazytasks-project-task-management')}
                                                                </span>
                                                            )}
                                                        </div>
                                                        <div style={{ fontSize: 12, color: S.muted, textAlign: 'right' }}>{row.card_count || 0}</div>
                                                        <div style={{ display: 'flex', justifyContent: 'center' }}>
                                                            {(() => {
                                                                const isDesignated = designatedCompleteTrelloListId === row.trello_id;
                                                                return (
                                                                    <button
                                                                        type="button"
                                                                        onClick={() => dispatch(setDesignatedCompleteTrelloListId(isDesignated ? null : row.trello_id))}
                                                                        title={isDesignated
                                                                            ? __('Cards in this section will be imported as Completed. Click to clear.', 'lazytasks-project-task-management')
                                                                            : __('Mark this section as the "Done" list — its cards will be imported with the project\'s complete status.', 'lazytasks-project-task-management')}
                                                                        style={{
                                                                            background: isDesignated ? '#DCFCE7' : 'transparent',
                                                                            border: `1.5px solid ${isDesignated ? S.success : S.border}`,
                                                                            color: isDesignated ? '#166534' : S.muted,
                                                                            padding: '3px 10px',
                                                                            borderRadius: 12,
                                                                            fontSize: 11,
                                                                            fontWeight: 600,
                                                                            cursor: 'pointer',
                                                                            whiteSpace: 'nowrap',
                                                                        }}
                                                                    >
                                                                        {isDesignated ? __('✓ Complete', 'lazytasks-project-task-management') : __('Mark', 'lazytasks-project-task-management')}
                                                                    </button>
                                                                );
                                                            })()}
                                                        </div>
                                                    </div>
                                                )}
                                            </Draggable>
                                        ))}
                                        {provided.placeholder}
                                    </div>
                                )}
                            </Droppable>
                        </DragDropContext>

                        {/* Footer summary */}
                        <div style={{ marginTop: 12, padding: '10px 14px', background: '#FAFBFC', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, fontSize: 12, color: S.muted }}>
                            {sprintf(
                                /* translators: 1: total list count, 2: archived count */
                                __('%1$d section(s) will be created · %2$d archived list(s) included.', 'lazytasks-project-task-management'),
                                plan.length,
                                archivedCount
                            )}
                        </div>
                    </Card>
                )}
            </>
        );
    }

    // ── Step 6: Project Settings (statuses, designated complete status) ──
    if (step === 'settings') {
        const plan = statusPlan || [];
        const hasName = plan.length > 0 && plan.every(s => (s.name || '').trim() !== '');
        const hasComplete = plan.some(s => s.is_complete);
        const canContinue = plan.length > 0 && hasName && hasComplete;

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Project Settings', 'lazytasks-project-task-management')}
                    desc={__('Set up the task statuses for this project. Mark one status as the "complete" state — tasks moved into it count as done.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setStep('sections'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setStep('tags'))} disabled={!canContinue}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />

                <Card>
                    <CardTitle icon={<><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>}>
                        {__('Task statuses', 'lazytasks-project-task-management')}
                    </CardTitle>

                    {/* Header */}
                    <div style={{ display: 'grid', gridTemplateColumns: '36px 1fr 110px', gap: 12, padding: '0 0 8px', borderBottom: `1px solid ${S.border}` }}>
                        <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, textAlign: 'center' }}>{__('Color', 'lazytasks-project-task-management')}</div>
                        <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Name', 'lazytasks-project-task-management')}</div>
                        <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, textAlign: 'center' }} title={__('Mark which status counts as "task done"', 'lazytasks-project-task-management')}>{__('Complete?', 'lazytasks-project-task-management')}</div>
                    </div>

                    {plan.map((row) => (
                        <div key={row.key} style={{ display: 'grid', gridTemplateColumns: '36px 1fr 110px', gap: 12, padding: '10px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'center' }}>
                            <div style={{ display: 'flex', justifyContent: 'center' }}>
                                <input
                                    type="color"
                                    value={row.color_code}
                                    onChange={(e) => dispatch(updateStatus({ key: row.key, field: 'color_code', value: e.target.value }))}
                                    style={{ width: 28, height: 28, border: 'none', padding: 0, cursor: 'pointer', background: 'transparent' }}
                                    title={__('Pick a color', 'lazytasks-project-task-management')}
                                />
                            </div>
                            <input
                                type="text"
                                value={row.name}
                                onChange={(e) => dispatch(updateStatus({ key: row.key, field: 'name', value: e.target.value }))}
                                placeholder={__('Status name', 'lazytasks-project-task-management')}
                                style={{ ...inputStyle, width: '100%' }}
                                maxLength={64}
                            />
                            <div style={{ display: 'flex', justifyContent: 'center' }}>
                                {(() => {
                                    const isDesignated = !!row.is_complete;
                                    return (
                                        <button
                                            type="button"
                                            onClick={() => dispatch(setDesignatedCompleteStatus(row.key))}
                                            title={isDesignated
                                                ? __('Tasks in this status count as done.', 'lazytasks-project-task-management')
                                                : __('Mark this status as the "task done" state.', 'lazytasks-project-task-management')}
                                            style={{
                                                background: isDesignated ? '#DCFCE7' : 'transparent',
                                                border: `1.5px solid ${isDesignated ? S.success : S.border}`,
                                                color: isDesignated ? '#166534' : S.muted,
                                                padding: '3px 10px',
                                                borderRadius: 12,
                                                fontSize: 11,
                                                fontWeight: 600,
                                                cursor: 'pointer',
                                                whiteSpace: 'nowrap',
                                            }}
                                        >
                                            {isDesignated ? __('✓ Complete', 'lazytasks-project-task-management') : __('Mark', 'lazytasks-project-task-management')}
                                        </button>
                                    );
                                })()}
                            </div>
                        </div>
                    ))}

                    {!hasComplete && (
                        <div style={{ marginTop: 12, fontSize: 12, color: S.danger }}>
                            {__('Pick one status as Complete to continue.', 'lazytasks-project-task-management')}
                        </div>
                    )}
                </Card>

                {/* Step 6d — Priorities */}
                <Card style={{ marginTop: 16 }}>
                    <CardTitle icon={<><path d="M3 3v18h18"/><polyline points="7 15 12 10 16 14 21 9"/></>}>
                        {__('Task priorities', 'lazytasks-project-task-management')}
                    </CardTitle>

                    {/* Header */}
                    <div style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 12, padding: '0 0 8px', borderBottom: `1px solid ${S.border}` }}>
                        <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, textAlign: 'center' }}>{__('Color', 'lazytasks-project-task-management')}</div>
                        <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Name', 'lazytasks-project-task-management')}</div>
                    </div>

                    {(priorityPlan || []).map((row) => (
                        <div key={row.key} style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 12, padding: '10px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'center' }}>
                            <div style={{ display: 'flex', justifyContent: 'center' }}>
                                <input
                                    type="color"
                                    value={row.color_code}
                                    onChange={(e) => dispatch(updatePriority({ key: row.key, field: 'color_code', value: e.target.value }))}
                                    style={{ width: 28, height: 28, border: 'none', padding: 0, cursor: 'pointer', background: 'transparent' }}
                                    title={__('Pick a color', 'lazytasks-project-task-management')}
                                />
                            </div>
                            <input
                                type="text"
                                value={row.name}
                                onChange={(e) => dispatch(updatePriority({ key: row.key, field: 'name', value: e.target.value }))}
                                placeholder={__('Priority name', 'lazytasks-project-task-management')}
                                style={{ ...inputStyle, width: '100%' }}
                                maxLength={64}
                            />
                        </div>
                    ))}

                </Card>

                {/* Step 6e — project navbar view toggles. Mirrors the
                    "Views" panel in ProjectSettingsModal so the wizard
                    feels consistent with post-import editing. */}
                <Card style={{ marginTop: 16 }}>
                    <div style={{ marginBottom: 14 }}>
                        <div style={{ fontSize: 14, fontWeight: 700, color: S.text }}>
                            {__('Project views', 'lazytasks-project-task-management')}
                        </div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 2 }}>
                            {__('Choose which views appear in the project navbar. You can change this any time from Project Settings → Views.', 'lazytasks-project-task-management')}
                        </div>
                    </div>

                    {[
                        { key: 'list',       label: __('List',      'lazytasks-project-task-management'), desc: __('Detailed list view of every task.',                  'lazytasks-project-task-management'), locked: true  },
                        { key: 'board',      label: __('Board',     'lazytasks-project-task-management'), desc: __('Kanban-style status board.',                          'lazytasks-project-task-management'), locked: false },
                        { key: 'calendar',   label: __('Calendar',  'lazytasks-project-task-management'), desc: __('Calendar view of task dates.',                        'lazytasks-project-task-management'), locked: false },
                        { key: 'gantt',      label: __('Gantt',     'lazytasks-project-task-management'), desc: __('Gantt chart for scheduling.',                         'lazytasks-project-task-management'), locked: false },
                        { key: 'report',     label: __('Report',    'lazytasks-project-task-management'), desc: __('Project health snapshot with charts and workload.',   'lazytasks-project-task-management'), locked: false },
                        { key: 'whiteboard', label: __('Whiteboard','lazytasks-project-task-management'), desc: __('Whiteboard view (requires the Whiteboard addon).',    'lazytasks-project-task-management'), locked: false },
                        { key: 'swimlane',   label: __('Swimlane',  'lazytasks-project-task-management'), desc: __('Swimlane view to group tasks by attribute.',          'lazytasks-project-task-management'), locked: false },
                    ].map(row => {
                        const checked = !!(navbarSettings && navbarSettings[row.key]);
                        return (
                            <label
                                key={row.key}
                                style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    padding: '10px 14px',
                                    border: `1px solid ${S.border}`,
                                    borderRadius: S.radiusSm,
                                    marginBottom: 8,
                                    background: '#fff',
                                    cursor: row.locked ? 'default' : 'pointer',
                                }}
                            >
                                <div style={{ paddingRight: 12 }}>
                                    <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>{row.label}</div>
                                    <div style={{ fontSize: 12, color: S.muted, marginTop: 2 }}>{row.desc}</div>
                                </div>
                                {row.locked ? (
                                    <span style={{ fontSize: 11, color: S.muted, textTransform: 'uppercase', letterSpacing: '0.5px', fontWeight: 600 }}>
                                        {__('Default', 'lazytasks-project-task-management')}
                                    </span>
                                ) : (
                                    <input
                                        type="checkbox"
                                        checked={checked}
                                        onChange={(e) => dispatch(setNavbarToggle({ key: row.key, value: e.target.checked }))}
                                        style={{ width: 18, height: 18, cursor: 'pointer', flexShrink: 0 }}
                                    />
                                )}
                            </label>
                        );
                    })}
                </Card>

                {/* Step 10 — replay Trello action stream into wp_pms_activity_log.
                    Comments are NOT logged here (they already become real
                    comments). The three radio options match the plan. */}
                <Card style={{ marginTop: 16 }}>
                    <div style={{ marginBottom: 14 }}>
                        <div style={{ fontSize: 14, fontWeight: 700, color: S.text }}>
                            {__('Trello activity history', 'lazytasks-project-task-management')}
                        </div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 2 }}>
                            {__('Replay Trello\'s action stream into the LazyTasks activity log so the new tasks have a history. Comments are not duplicated here — they\'re already imported as comments.', 'lazytasks-project-task-management')}
                        </div>
                    </div>

                    {[
                        { value: 'off',        label: __('Off',                   'lazytasks-project-task-management'), desc: __('Don\'t write any historical activity. Activity starts from this import forward.',           'lazytasks-project-task-management') },
                        { value: 'important',  label: __('Important events only', 'lazytasks-project-task-management'), desc: __('Card creations, moves between sections, and member adds / removes.',                       'lazytasks-project-task-management') },
                        { value: 'everything', label: __('Everything',            'lazytasks-project-task-management'), desc: __('Every Trello action on imported cards, including attachments and checklist updates.',      'lazytasks-project-task-management') },
                    ].map(opt => {
                        const checked = (activityLogLevel || 'off') === opt.value;
                        return (
                            <label
                                key={opt.value}
                                style={{
                                    display: 'flex',
                                    alignItems: 'flex-start',
                                    gap: 12,
                                    padding: '10px 14px',
                                    border: `1px solid ${checked ? S.orange : S.border}`,
                                    borderRadius: S.radiusSm,
                                    marginBottom: 8,
                                    background: checked ? S.orangeLt : '#fff',
                                    cursor: 'pointer',
                                }}
                            >
                                <input
                                    type="radio"
                                    name="trello-activity-level"
                                    checked={checked}
                                    onChange={() => dispatch(setActivityLogLevel(opt.value))}
                                    style={{ width: 18, height: 18, marginTop: 2, cursor: 'pointer', flexShrink: 0 }}
                                />
                                <div>
                                    <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>{opt.label}</div>
                                    <div style={{ fontSize: 12, color: S.muted, marginTop: 2 }}>{opt.desc}</div>
                                </div>
                            </label>
                        );
                    })}
                </Card>

            </>
        );
    }

    // ── Step 7: Labels → Tags ──
    if (step === 'tags') {
        const plan = tagPlan || [];
        const willCreate = plan.filter(t => (t.name || '').trim() !== '').length;
        const allRowsNamed = plan.every(t => (t.name || '').trim() !== '');

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Labels → Tags', 'lazytasks-project-task-management')}
                    desc={__('Each Trello label becomes a LazyTasks tag on cards that carry it. Rename labels here — all labels are imported. Labels with the same name are NOT merged automatically.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setStep('settings'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setStep('tasks'))} disabled={!allRowsNamed}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />

                <Card>
                    {plan.length === 0 ? (
                        <div style={{ textAlign: 'center', padding: '32px 0', color: S.muted, fontSize: 13 }}>
                            {__('No labels found in the Trello export. No tags will be created.', 'lazytasks-project-task-management')}
                        </div>
                    ) : (
                        <>
                            {/* Header */}
                            <div style={{ padding: '0 0 8px', borderBottom: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Tag name', 'lazytasks-project-task-management')}</div>
                            </div>

                            {plan.map((row) => (
                                <div key={row.trello_id} style={{ padding: '10px 0', borderBottom: `1px solid ${S.border}` }}>
                                    <input
                                        type="text"
                                        value={row.name}
                                        onChange={(e) => dispatch(setTagName({ trelloLabelId: row.trello_id, name: e.target.value }))}
                                        placeholder={__('Tag name', 'lazytasks-project-task-management')}
                                        style={{ ...inputStyle, width: '100%' }}
                                        maxLength={255}
                                    />
                                    {row.original_name && row.original_name !== row.name && (
                                        <div style={{ fontSize: 11, color: S.muted, marginTop: 4 }}>
                                            {sprintf(/* translators: %s = original Trello label name */ __('Trello label: %s', 'lazytasks-project-task-management'), row.original_name)}
                                        </div>
                                    )}
                                </div>
                            ))}

                            {/* Footer summary */}
                            <div style={{ marginTop: 12, padding: '10px 14px', background: '#FAFBFC', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, fontSize: 12, color: S.muted }}>
                                {sprintf(
                                    /* translators: 1: total labels, 2: number of tags that will be created */
                                    __('%1$d Trello label(s) · %2$d tag(s) will be created.', 'lazytasks-project-task-management'),
                                    plan.length,
                                    willCreate
                                )}
                            </div>
                        </>
                    )}
                </Card>
            </>
        );
    }

    // ── Step 8: Custom Fields (acknowledge-only — LT doesn't support them) ──
    // ── Step 9: Tasks (summary + global toggles) ──
    // v1 scope: header summary + 3 global toggles (skip comments / skip
    // attachments / prefix comments). Per-task inline editor + the
    // incomplete-data filter panel are deferred to a follow-up commit.
    if (step === 'tasks') {
        const activeSections = (sectionPlan || []).filter(r => !r.skip);
        const skippedSections = (sectionPlan || []).filter(r => r.skip);
        const tasksToImport = activeSections.reduce((sum, r) => sum + (r.card_count || 0), 0);
        const tasksSkipped = skippedSections.reduce((sum, r) => sum + (r.card_count || 0), 0);
        const subtasksCount  = preview?.checklist_items_count || 0;
        const commentsCount  = preview?.comments_count || 0;
        const attachmentsCount = preview?.attachments_count || 0;
        const opts = taskOptions || { skipAllComments: false, skipAllAttachments: false };
        const statCellStyle = { padding: '12px 14px', background: '#F9FAFB', border: `1px solid ${S.border}`, borderRadius: S.radiusSm };
        const statNumStyle = { fontSize: 22, fontWeight: 700, color: S.text, lineHeight: 1.1 };
        const statLabelStyle = { fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, marginTop: 4 };

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Tasks', 'lazytasks-project-task-management')}
                    desc={__('Review what will be imported from each Trello card. Use the toggles below to skip noisy data; per-task editing comes in a follow-up update.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setStep('tags'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setStep('review'))}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />

                {/* Summary stats */}
                <Card>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
                        <div style={statCellStyle}>
                            <div style={statNumStyle}>{tasksToImport}</div>
                            <div style={statLabelStyle}>{__('Tasks to import', 'lazytasks-project-task-management')}</div>
                            {tasksSkipped > 0 && (
                                <div style={{ fontSize: 11, color: S.muted, marginTop: 4 }}>
                                    {sprintf(
                                        /* translators: %d: number of tasks in skipped sections */
                                        __('%d in skipped sections', 'lazytasks-project-task-management'),
                                        tasksSkipped
                                    )}
                                </div>
                            )}
                        </div>
                        <div style={statCellStyle}>
                            <div style={statNumStyle}>{subtasksCount}</div>
                            <div style={statLabelStyle}>{__('Subtasks', 'lazytasks-project-task-management')}</div>
                            <div style={{ fontSize: 11, color: S.muted, marginTop: 4 }}>{__('from checklists', 'lazytasks-project-task-management')}</div>
                        </div>
                        <div style={statCellStyle}>
                            <div style={statNumStyle}>{commentsCount}</div>
                            <div style={statLabelStyle}>{__('Comments', 'lazytasks-project-task-management')}</div>
                            {opts.skipAllComments && (
                                <div style={{ fontSize: 11, color: S.danger, marginTop: 4 }}>{__('will be skipped', 'lazytasks-project-task-management')}</div>
                            )}
                        </div>
                        <div style={statCellStyle}>
                            <div style={statNumStyle}>{attachmentsCount}</div>
                            <div style={statLabelStyle}>{__('Attachments', 'lazytasks-project-task-management')}</div>
                            {opts.skipAllAttachments && (
                                <div style={{ fontSize: 11, color: S.danger, marginTop: 4 }}>{__('will be skipped', 'lazytasks-project-task-management')}</div>
                            )}
                        </div>
                    </div>

                    {activeSections.length > 0 && (
                        <div style={{ marginTop: 18 }}>
                            <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, marginBottom: 8 }}>
                                {__('Per-section breakdown', 'lazytasks-project-task-management')}
                            </div>
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 80px', rowGap: 6, columnGap: 12 }}>
                                {activeSections.map(r => (
                                    <React.Fragment key={r.trello_id}>
                                        <div style={{ fontSize: 13, color: S.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                            {r.name || __('(unnamed)', 'lazytasks-project-task-management')}
                                        </div>
                                        <div style={{ fontSize: 13, color: S.muted, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>
                                            {r.card_count || 0}
                                        </div>
                                    </React.Fragment>
                                ))}
                            </div>
                        </div>
                    )}
                </Card>

                {/* Global toggles */}
                <Card style={{ marginTop: 16 }}>
                    <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, marginBottom: 12 }}>
                        {__('Import options', 'lazytasks-project-task-management')}
                    </div>

                    <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer', padding: '6px 0' }}>
                        <input
                            type="checkbox"
                            checked={!!opts.skipAllComments}
                            onChange={(e) => dispatch(setTaskOption({ field: 'skipAllComments', value: e.target.checked }))}
                            style={{ width: 18, height: 18, marginTop: 2, cursor: 'pointer', flexShrink: 0 }}
                        />
                        <div>
                            <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>
                                {__('Skip all comments', 'lazytasks-project-task-management')}
                            </div>
                            <div style={{ fontSize: 12, color: S.muted, marginTop: 2 }}>
                                {__('Don\'t import any card comments. Useful when comments are noisy or have unmapped authors.', 'lazytasks-project-task-management')}
                            </div>
                        </div>
                    </label>

                    <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer', padding: '6px 0' }}>
                        <input
                            type="checkbox"
                            checked={!!opts.skipAllAttachments}
                            onChange={(e) => dispatch(setTaskOption({ field: 'skipAllAttachments', value: e.target.checked }))}
                            style={{ width: 18, height: 18, marginTop: 2, cursor: 'pointer', flexShrink: 0 }}
                        />
                        <div>
                            <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>
                                {__('Skip all attachments', 'lazytasks-project-task-management')}
                            </div>
                            <div style={{ fontSize: 12, color: S.muted, marginTop: 2 }}>
                                {__('Don\'t import attachment URLs. LazyTasks only stores Trello attachment links (not the files), so dropping them is safe if you don\'t plan to reference them.', 'lazytasks-project-task-management')}
                            </div>
                        </div>
                    </label>
                </Card>

                {/* Step 9f — incomplete-data filterable list. Read-only for v2;
                    per-row inline editor lands in a follow-up. Acknowledge
                    state is wizard-time only (not sent to the backend). */}
                {(cardsWithIssues || []).length > 0 && (() => {
                    const issueLabels = {
                        missing_name:        __('No name',         'lazytasks-project-task-management'),
                        name_too_long:       __('Name too long',   'lazytasks-project-task-management'),
                        missing_due_date:    __('No due date',     'lazytasks-project-task-management'),
                        missing_assignee:    __('No assignee',     'lazytasks-project-task-management'),
                    };
                    const totalIssues = cardsWithIssues.length;
                    const acknowledgedCount = cardsWithIssues.filter(c => taskAcknowledged && taskAcknowledged[c.trello_id]).length;
                    const unacknowledgedCount = totalIssues - acknowledgedCount;
                    const visible = issuesFilter === 'all'
                        ? cardsWithIssues
                        : cardsWithIssues.filter(c => !(taskAcknowledged && taskAcknowledged[c.trello_id]));

                    return (
                        <Card style={{ marginTop: 16 }}>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                                <div>
                                    <div style={{ fontSize: 14, fontWeight: 700, color: S.text }}>
                                        {__('Cards needing attention', 'lazytasks-project-task-management')}
                                    </div>
                                    <div style={{ fontSize: 12, color: S.muted, marginTop: 2 }}>
                                        {sprintf(
                                            /* translators: 1: unacknowledged count, 2: total flagged cards */
                                            __('%1$d of %2$d card(s) still need a look. Tick "Confirm as-is" to acknowledge — they\'ll import with whatever data Trello had.', 'lazytasks-project-task-management'),
                                            unacknowledgedCount,
                                            totalIssues
                                        )}
                                    </div>
                                </div>
                                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                                    <select
                                        value={issuesFilter}
                                        onChange={(e) => setIssuesFilter(e.target.value)}
                                        style={{ padding: '6px 10px', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, fontSize: 12, color: S.text, background: '#fff', cursor: 'pointer' }}
                                    >
                                        <option value="unacknowledged">{__('Unacknowledged only', 'lazytasks-project-task-management')}</option>
                                        <option value="all">{__('All flagged cards', 'lazytasks-project-task-management')}</option>
                                    </select>
                                    {acknowledgedCount < totalIssues ? (
                                        <Btn variant="ghost" onClick={() => dispatch(acknowledgeAllCards())}>
                                            {__('Acknowledge all', 'lazytasks-project-task-management')}
                                        </Btn>
                                    ) : (
                                        <Btn variant="ghost" onClick={() => dispatch(clearAllAcknowledgements())}>
                                            {__('Clear', 'lazytasks-project-task-management')}
                                        </Btn>
                                    )}
                                </div>
                            </div>

                            {visible.length === 0 ? (
                                <div style={{ textAlign: 'center', padding: '24px 0', color: S.muted, fontSize: 13 }}>
                                    {issuesFilter === 'unacknowledged'
                                        ? __('All flagged cards acknowledged — you\'re good to continue.', 'lazytasks-project-task-management')
                                        : __('Nothing to show.', 'lazytasks-project-task-management')}
                                </div>
                            ) : (
                                visible.map(c => {
                                    const isAck = !!(taskAcknowledged && taskAcknowledged[c.trello_id]);
                                    const ov = (taskOverrides && taskOverrides[c.trello_id]) || {};
                                    const nameVal = ov.name !== undefined ? ov.name : c.name;
                                    const dueVal = ov.end_date !== undefined ? ov.end_date : '';
                                    const assigneeVal = ov.assigned_to !== undefined ? ov.assigned_to : '';
                                    const hasEdits = Object.keys(ov).length > 0;
                                    const cellStyle = { padding: '6px 8px', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, fontSize: 12, color: S.text, background: '#fff', width: '100%' };
                                    // Eligible assignee options = WP users that are mapped from a Trello member (memberMapping).
                                    const mappedUserIds = Object.values(memberMapping || {}).filter(Boolean);
                                    const assignableUsers = (wpUsers || []).filter(u => mappedUserIds.includes(u.id) || mappedUserIds.includes(parseInt(u.id)));

                                    return (
                                        <div key={c.trello_id} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, padding: '10px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'flex-start' }}>
                                            <input
                                                type="checkbox"
                                                checked={isAck}
                                                onChange={(e) => dispatch(setCardAcknowledged({ trelloId: c.trello_id, value: e.target.checked }))}
                                                title={__('Confirm as-is', 'lazytasks-project-task-management')}
                                                style={{ width: 18, height: 18, marginTop: 2, cursor: 'pointer' }}
                                            />
                                            <div>
                                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                                                    <div style={{ fontSize: 12, color: S.muted }}>
                                                        {c.list_name
                                                            ? sprintf(
                                                                /* translators: %s: section name */
                                                                __('in %s', 'lazytasks-project-task-management'),
                                                                c.list_name
                                                            )
                                                            : ''}
                                                    </div>
                                                    {hasEdits && (
                                                        <button
                                                            type="button"
                                                            onClick={() => dispatch(clearTaskOverrides(c.trello_id))}
                                                            style={{ background: 'transparent', border: 'none', color: S.orange, fontSize: 11, fontWeight: 600, cursor: 'pointer', padding: 0 }}
                                                        >
                                                            {__('Clear edits', 'lazytasks-project-task-management')}
                                                        </button>
                                                    )}
                                                </div>

                                                <div style={{ marginTop: 6, display: 'grid', gridTemplateColumns: '2fr 1fr 1.4fr', gap: 8 }}>
                                                    <input
                                                        type="text"
                                                        value={nameVal || ''}
                                                        onChange={(e) => dispatch(setTaskOverride({ trelloId: c.trello_id, field: 'name', value: e.target.value }))}
                                                        placeholder={__('Card name', 'lazytasks-project-task-management')}
                                                        disabled={isAck}
                                                        style={{ ...cellStyle, opacity: isAck ? 0.5 : 1 }}
                                                    />
                                                    <input
                                                        type="date"
                                                        value={dueVal || ''}
                                                        onChange={(e) => dispatch(setTaskOverride({ trelloId: c.trello_id, field: 'end_date', value: e.target.value }))}
                                                        disabled={isAck}
                                                        style={{ ...cellStyle, opacity: isAck ? 0.5 : 1 }}
                                                    />
                                                    <select
                                                        value={assigneeVal === null ? '' : (assigneeVal || '')}
                                                        onChange={(e) => {
                                                            const raw = e.target.value;
                                                            const v = raw === '' ? null : parseInt(raw);
                                                            dispatch(setTaskOverride({ trelloId: c.trello_id, field: 'assigned_to', value: v }));
                                                        }}
                                                        disabled={isAck}
                                                        style={{ ...cellStyle, cursor: isAck ? 'not-allowed' : 'pointer', opacity: isAck ? 0.5 : 1 }}
                                                    >
                                                        <option value="">{__('— Assignee —', 'lazytasks-project-task-management')}</option>
                                                        {assignableUsers.map(u => (
                                                            <option key={u.id} value={u.id}>{u.display_name || u.user_login || u.user_email}</option>
                                                        ))}
                                                    </select>
                                                </div>

                                                <div style={{ marginTop: 6, display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                                                    {(c.issues || []).map(slug => (
                                                        <span key={slug} style={{ fontSize: 11, padding: '2px 8px', borderRadius: 10, background: '#FEF3C7', color: '#92400E', fontWeight: 500 }}>
                                                            {issueLabels[slug] || slug}
                                                        </span>
                                                    ))}
                                                </div>
                                            </div>
                                        </div>
                                    );
                                })
                            )}
                        </Card>
                    );
                })()}

                {/* Reference list of Trello JSON fields the importer drops. Static —
                    derived from a one-time audit of TrelloJsonParser + executeImport. */}
                <Card style={{ marginTop: 16 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: S.text, marginBottom: 4 }}>
                        {__('Trello JSON fields not imported', 'lazytasks-project-task-management')}
                    </div>
                    <div style={{ fontSize: 12, color: S.muted, marginBottom: 12 }}>
                        {__('Field paths reference Trello\'s JSON export format. Anything in this list is silently dropped during import.', 'lazytasks-project-task-management')}
                    </div>

                    {buildTrelloNotImportedFields().map(row => (
                        <div key={row.path}
                             style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 12, padding: '6px 0', borderBottom: `1px solid ${S.border}`, fontSize: 12, alignItems: 'baseline' }}>
                            <code style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', color: S.text, fontSize: 12 }}>
                                {row.path}
                            </code>
                            <div style={{ color: S.muted }}>{row.note}</div>
                        </div>
                    ))}
                </Card>
            </>
        );
    }

    // ── Step 4: Member Mapping ──
    if (step === 'member-mapping') {
        // Get auto-match info from the parse response stored in members
        const memberInfo = members.map(m => {
            const wpId = memberMapping[m.trello_id];
            const wpUser = wpId ? wpUsers.find(u => u.id === wpId || u.id === parseInt(wpId)) : null;
            return { ...m, wpId, wpUser, isMatched: !!wpId };
        });

        // Filter out the superadmin role from the picker — it's not a project-level role.
        const assignableRoles = (roles || []).filter(r => r.slug !== 'superadmin');
        const matchedCount = memberInfo.filter(m => m.isMatched).length;
        const mappedCount = memberInfo.filter(m => m.wpId).length;
        const extraCount = (extraMembers || []).length;
        const totalAdded = mappedCount + extraCount;

        // Resolve display info for a wp_user_id from the locally-fetched users list.
        const wpUserById = (id) => (wpUsers || []).find(u => u.id === id || u.id === parseInt(id));

        const handleInviteUser = async () => {
            const emailValue = (inviteEmail || '').trim().toLowerCase();
            if (!emailValue) return;
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) {
                showNotification({ title: __('Invite', 'lazytasks-project-task-management'), message: __('Enter a valid email address.', 'lazytasks-project-task-management'), color: 'red', autoClose: 3000 });
                return;
            }
            // If the email already belongs to an existing WP user, surface that —
            // they should be added via the table above instead of being re-invited.
            const existingWp = (wpUsers || []).find(u => (u.email || '').toLowerCase() === emailValue);
            if (existingWp) {
                showNotification({ title: __('Invite', 'lazytasks-project-task-management'), message: __('That email already belongs to a workspace user — map them through the table above instead.', 'lazytasks-project-task-management'), color: 'yellow', autoClose: 4000 });
                return;
            }

            setInvitingUser(true);
            try {
                // Reuses the same /sign-up endpoint that the Manage Users tab uses
                // (Lazytask_UserController::signUp). Returns the new WP user id.
                const res = await dispatch(createUser({
                    email: emailValue,
                    firstName: inviteFirstName.trim(),
                    lastName: inviteLastName.trim(),
                    loggedInUserId: loggedInUser?.id,
                    roles: [],
                }));
                const newUserId = res?.payload?.data?.id || res?.payload?.id;
                const responseStatus = res?.payload?.status;
                if (!newUserId || (responseStatus && responseStatus !== 200)) {
                    const msg = res?.payload?.message || __('Failed to invite user.', 'lazytasks-project-task-management');
                    showNotification({ title: __('Invite', 'lazytasks-project-task-management'), message: msg, color: 'red', autoClose: 4000 });
                    return;
                }
                // Surface the new user locally so the table dropdowns + role picker
                // pick them up without a wpUsers refetch.
                dispatch(appendWpUser({
                    id: parseInt(newUserId),
                    display_name: (inviteFirstName + ' ' + inviteLastName).trim() || emailValue,
                    email: emailValue,
                }));
                dispatch(addExtraMember({
                    wpUserId: parseInt(newUserId),
                    roleId: inviteRoleId ? parseInt(inviteRoleId) : null,
                }));
                showNotification({
                    title: __('Invite', 'lazytasks-project-task-management'),
                    message: sprintf(/* translators: %s = invited email */ __('Invitation sent to %s', 'lazytasks-project-task-management'), emailValue),
                    color: 'green',
                    autoClose: 3000,
                });
                setInviteEmail('');
                setInviteFirstName('');
                setInviteLastName('');
                setInviteRoleId('');
            } catch (e) {
                showNotification({ title: __('Invite', 'lazytasks-project-task-management'), message: e?.message || __('Failed to invite user.', 'lazytasks-project-task-management'), color: 'red', autoClose: 4000 });
            } finally {
                setInvitingUser(false);
            }
        };

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Add Members', 'lazytasks-project-task-management')}
                    desc={__('Trello members matched by email are pre-mapped to WordPress users. Pick a project role for each mapped user, or skip rows you don\'t want to add.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setStep('project-entry'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setStep('sections'))}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />

                {error && (
                    <div style={{ marginBottom: 16, padding: '10px 14px', background: '#FEF2F2', border: `1px solid #FECACA`, borderRadius: S.radiusSm, color: S.danger, fontSize: 12 }}>
                        {error}
                    </div>
                )}

                <Card>
                    {memberInfo.length === 0 ? (
                        <div style={{ textAlign: 'center', padding: '32px 0', color: S.muted, fontSize: 13 }}>
                            {__('No members found in the Trello export. Tasks will be imported without assignees.', 'lazytasks-project-task-management')}
                        </div>
                    ) : (
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            {/* Header */}
                            <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1.4fr 1fr 40px', gap: 12, padding: '0 0 12px', borderBottom: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Trello Member', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('WordPress User', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Project Role', 'lazytasks-project-task-management')}</div>
                                <div></div>
                            </div>
                            {/* Rows */}
                            {memberInfo.map((m) => {
                                const currentRoleId = m.wpId ? memberRoles[m.wpId] || '' : '';
                                return (
                                    <div key={m.trello_id} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1.4fr 1fr 40px', gap: 12, padding: '12px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'center' }}>
                                        <div>
                                            <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>{m.fullName || m.username}</div>
                                            {m.username && <div style={{ fontSize: 11, color: S.muted }}>@{m.username}</div>}
                                            {m.trello_email && <div style={{ fontSize: 11, color: S.muted }}>{m.trello_email}</div>}
                                        </div>
                                        <select
                                            value={memberMapping[m.trello_id] || ''}
                                            onChange={(e) => {
                                                const newWpId = e.target.value ? parseInt(e.target.value) : null;
                                                // If switching mapping, drop the role for the previously selected user.
                                                if (m.wpId && m.wpId !== newWpId) {
                                                    dispatch(setMemberRole({ wpUserId: m.wpId, roleId: null }));
                                                }
                                                dispatch(updateMemberMapping({ trelloId: m.trello_id, wpUserId: newWpId }));
                                            }}
                                            style={{ ...inputStyle, cursor: 'pointer' }}
                                        >
                                            <option value="">{__('— Skip (no mapping) —', 'lazytasks-project-task-management')}</option>
                                            {wpUsers.map(u => (
                                                <option key={u.id} value={u.id}>{u.display_name} ({u.email})</option>
                                            ))}
                                        </select>
                                        <select
                                            value={currentRoleId}
                                            onChange={(e) => dispatch(setMemberRole({ wpUserId: m.wpId, roleId: e.target.value ? parseInt(e.target.value) : null }))}
                                            disabled={!m.wpId || assignableRoles.length === 0}
                                            style={{ ...inputStyle, cursor: m.wpId ? 'pointer' : 'not-allowed', opacity: m.wpId ? 1 : 0.5 }}
                                        >
                                            <option value="">{__('Default (Employee)', 'lazytasks-project-task-management')}</option>
                                            {assignableRoles.map(r => (
                                                <option key={r.id} value={r.id}>{r.name}</option>
                                            ))}
                                        </select>
                                        <div style={{ display: 'flex', justifyContent: 'center' }}>
                                            {m.isMatched ? (
                                                <svg viewBox="0 0 24 24" fill="none" stroke={S.success} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
                                                    <polyline points="20 6 9 17 4 12"/>
                                                </svg>
                                            ) : (
                                                <svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
                                                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                                                </svg>
                                            )}
                                        </div>
                                    </div>
                                );
                            })}
                            {/* Footer summary */}
                            <div style={{ marginTop: 12, padding: '10px 14px', background: '#FAFBFC', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, fontSize: 12, color: S.muted }}>
                                {sprintf(
                                    /* translators: 1: total members, 2: auto-matched count, 3: members that will be added (mapped + invited) */
                                    __('%1$d Trello member(s) · %2$d auto-matched by email · %3$d will be added to the project.', 'lazytasks-project-task-management'),
                                    memberInfo.length,
                                    matchedCount,
                                    totalAdded
                                )}
                            </div>
                        </div>
                    )}
                </Card>

                {/* Step 4b — Invite a new user (uses the same /sign-up endpoint as the Manage Users tab) */}
                <Card style={{ marginTop: 16 }}>
                    <CardTitle icon={<><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>}>
                        {__('Invite a new user', 'lazytasks-project-task-management')}
                    </CardTitle>
                    <div style={{ fontSize: 12, color: S.muted, marginBottom: 12 }}>
                        {__('Add team members who aren\'t on the Trello board. The user account is created via the existing invitation flow; the role is applied to this project when the import runs.', 'lazytasks-project-task-management')}
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 8 }}>
                        <input
                            type="text"
                            value={inviteFirstName}
                            onChange={(e) => setInviteFirstName(e.target.value)}
                            placeholder={__('First name (optional)', 'lazytasks-project-task-management')}
                            style={{ ...inputStyle, width: '100%' }}
                        />
                        <input
                            type="text"
                            value={inviteLastName}
                            onChange={(e) => setInviteLastName(e.target.value)}
                            placeholder={__('Last name (optional)', 'lazytasks-project-task-management')}
                            style={{ ...inputStyle, width: '100%' }}
                        />
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr auto', gap: 8, alignItems: 'center' }}>
                        <input
                            type="email"
                            value={inviteEmail}
                            onChange={(e) => setInviteEmail(e.target.value)}
                            placeholder={__('person@example.com', 'lazytasks-project-task-management')}
                            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleInviteUser(); } }}
                            style={{ ...inputStyle, width: '100%' }}
                        />
                        <select
                            value={inviteRoleId}
                            onChange={(e) => setInviteRoleId(e.target.value)}
                            style={{ ...inputStyle, cursor: 'pointer' }}
                        >
                            <option value="">{__('Default (Employee)', 'lazytasks-project-task-management')}</option>
                            {assignableRoles.map(r => (
                                <option key={r.id} value={r.id}>{r.name}</option>
                            ))}
                        </select>
                        <Btn variant="primary" onClick={handleInviteUser} disabled={invitingUser || !inviteEmail.trim()}>
                            {invitingUser ? __('Inviting…', 'lazytasks-project-task-management') : __('+ Invite', 'lazytasks-project-task-management')}
                        </Btn>
                    </div>

                    {extraMembers && extraMembers.length > 0 && (
                        <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column' }}>
                            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 40px', gap: 12, padding: '0 0 8px', borderBottom: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Invited User', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Project Role', 'lazytasks-project-task-management')}</div>
                                <div></div>
                            </div>
                            {extraMembers.map((m) => {
                                const u = wpUserById(m.wp_user_id) || {};
                                return (
                                    <div key={m.wp_user_id} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 40px', gap: 12, padding: '10px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'center' }}>
                                        <div>
                                            <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>{u.display_name || u.email || `#${m.wp_user_id}`}</div>
                                            {u.email && u.email !== u.display_name && <div style={{ fontSize: 11, color: S.muted }}>{u.email}</div>}
                                        </div>
                                        <select
                                            value={m.role_id || ''}
                                            onChange={(e) => dispatch(updateExtraMemberRole({ wpUserId: m.wp_user_id, roleId: e.target.value ? parseInt(e.target.value) : null }))}
                                            style={{ ...inputStyle, cursor: 'pointer' }}
                                        >
                                            <option value="">{__('Default (Employee)', 'lazytasks-project-task-management')}</option>
                                            {assignableRoles.map(r => (
                                                <option key={r.id} value={r.id}>{r.name}</option>
                                            ))}
                                        </select>
                                        <button
                                            type="button"
                                            onClick={() => dispatch(removeExtraMember(m.wp_user_id))}
                                            title={__('Remove from this import', 'lazytasks-project-task-management')}
                                            style={{ background: 'transparent', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: S.muted, padding: 4 }}
                                        >
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
                                                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                                            </svg>
                                        </button>
                                    </div>
                                );
                            })}
                            <div style={{ marginTop: 8, fontSize: 11, color: S.muted, fontStyle: 'italic' }}>
                                {__('Removing a row here only excludes them from THIS import. The user account already exists in your workspace.', 'lazytasks-project-task-management')}
                            </div>
                        </div>
                    )}
                </Card>

                {/* Step 4c — Add existing user not on the Trello board */}
                {(() => {
                    const mappedWpIds = new Set(
                        Object.values(memberMapping || {})
                            .filter(Boolean)
                            .map((v) => parseInt(v))
                    );
                    const extraWpIds = new Set((extraMembers || []).map((m) => parseInt(m.wp_user_id)));
                    const ownerId = parseInt(loggedInUser?.id || 0);
                    const availableUsers = (wpUsers || []).filter(
                        (u) => u.id !== ownerId && !mappedWpIds.has(u.id) && !extraWpIds.has(u.id)
                    );

                    const handleAddExisting = () => {
                        const wpUserId = existingPickUserId ? parseInt(existingPickUserId) : null;
                        if (!wpUserId) return;
                        dispatch(addExtraMember({
                            wpUserId,
                            roleId: existingPickRoleId ? parseInt(existingPickRoleId) : null,
                        }));
                        setExistingPickUserId('');
                        setExistingPickRoleId('');
                    };

                    return (
                        <Card style={{ marginTop: 16 }}>
                            <CardTitle icon={<><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></>}>
                                {__('Add existing user', 'lazytasks-project-task-management')}
                            </CardTitle>
                            <div style={{ fontSize: 12, color: S.muted, marginBottom: 12 }}>
                                {__('Add a teammate who isn\'t on the Trello board but already has a LazyTasks account.', 'lazytasks-project-task-management')}
                            </div>
                            {availableUsers.length === 0 ? (
                                <div style={{ fontSize: 12, color: S.muted, fontStyle: 'italic', padding: '8px 0' }}>
                                    {__('No additional users available — everyone in this workspace is either you, already mapped above, or already invited.', 'lazytasks-project-task-management')}
                                </div>
                            ) : (
                                <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr auto', gap: 8, alignItems: 'center' }}>
                                    <select
                                        value={existingPickUserId}
                                        onChange={(e) => setExistingPickUserId(e.target.value)}
                                        style={{ ...inputStyle, cursor: 'pointer' }}
                                    >
                                        <option value="">{__('— Pick a user —', 'lazytasks-project-task-management')}</option>
                                        {availableUsers.map((u) => (
                                            <option key={u.id} value={u.id}>
                                                {u.display_name}{u.email ? ` (${u.email})` : ''}
                                            </option>
                                        ))}
                                    </select>
                                    <select
                                        value={existingPickRoleId}
                                        onChange={(e) => setExistingPickRoleId(e.target.value)}
                                        style={{ ...inputStyle, cursor: 'pointer' }}
                                    >
                                        <option value="">{__('Default (Employee)', 'lazytasks-project-task-management')}</option>
                                        {assignableRoles.map((r) => (
                                            <option key={r.id} value={r.id}>{r.name}</option>
                                        ))}
                                    </select>
                                    <Btn variant="primary" onClick={handleAddExisting} disabled={!existingPickUserId}>
                                        + {__('Add', 'lazytasks-project-task-management')}
                                    </Btn>
                                </div>
                            )}
                        </Card>
                    );
                })()}

                {/* Step 4d — Notify added members toggle */}
                <Card style={{ marginTop: 16 }}>
                    <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer' }}>
                        <input
                            type="checkbox"
                            checked={notifyMembers !== false}
                            onChange={(e) => dispatch(setNotifyMembers(e.target.checked))}
                            style={{ width: 18, height: 18, marginTop: 2, cursor: 'pointer', flexShrink: 0 }}
                        />
                        <div>
                            <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>
                                {__('Notify added members', 'lazytasks-project-task-management')}
                            </div>
                            <div style={{ fontSize: 12, color: S.muted, marginTop: 2 }}>
                                {__('Send each added member a "You\'ve been added to project X" notification (in-app, email, and SMS where configured). New invitees still receive their account invitation regardless of this toggle.', 'lazytasks-project-task-management')}
                            </div>
                        </div>
                    </label>
                </Card>
            </>
        );
    }

    // ── Step 11: Review & Confirm ──
    // Read-only recap of every wizard choice with "Edit" links that jump back.
    // The Start Import button lives here — member-mapping now ends with
    // "Review & Confirm". Dry-run mode is deferred to a follow-up commit.
    if (step === 'review') {
        const designatedCompleteSection = (sectionPlan || []).find(r => r.trello_id === designatedCompleteTrelloListId);
        const completeStatus = (statusPlan || []).find(s => s.is_complete);
        const activeSections = (sectionPlan || []).filter(r => !r.skip);
        const tasksToImport = activeSections.reduce((sum, r) => sum + (r.card_count || 0), 0);
        const matchedMembers = (members || []).filter(m => !!memberMapping[m.trello_id]);
        const customFieldsCount = (customFieldsSummary || []).length;
        const totalCardsWithCF = (customFieldsSummary || []).reduce((sum, f) => sum + (f.cards_using_count || 0), 0);
        // Tolerant id compare — companies[].id can arrive from the API as a
        // string while companyId is an int from parseInt(e.target.value).
        const workspaceName = (companies || []).find(c => String(c.id) === String(companyId))?.name
            || workspaceDraft?.name
            || '—';
        const skippedTags = (tagPlan || []).filter(t => t.skip).length;
        const importedTags = (tagPlan || []).filter(t => !t.skip && (t.name || '').trim() !== '').length;
        const opts = taskOptions || { skipAllComments: false, skipAllAttachments: false };
        const activityLabel = {
            off:        __('Off — no historical activity written',       'lazytasks-project-task-management'),
            important:  __('Important events only',                       'lazytasks-project-task-management'),
            everything: __('Everything (incl. attachments + checklists)', 'lazytasks-project-task-management'),
        }[activityLogLevel || 'off'];

        const Row = ({ label, value }) => (
            <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 12, padding: '6px 0', fontSize: 13 }}>
                <div style={{ color: S.muted }}>{label}</div>
                <div style={{ color: S.text }}>{value}</div>
            </div>
        );
        const Section = ({ title, editStep, children }) => (
            <details open style={{ border: `1px solid ${S.border}`, borderRadius: S.radiusSm, marginBottom: 12, background: '#fff' }}>
                <summary style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', cursor: 'pointer', listStyle: 'none' }}>
                    <span style={{ fontSize: 13, fontWeight: 700, color: S.text }}>{title}</span>
                    {editStep && (
                        <button
                            type="button"
                            onClick={(e) => { e.preventDefault(); e.stopPropagation(); dispatch(setStep(editStep)); }}
                            style={{ background: 'transparent', border: 'none', color: S.orange, fontSize: 12, fontWeight: 600, cursor: 'pointer', padding: 0 }}
                        >
                            {__('Edit', 'lazytasks-project-task-management')}
                        </button>
                    )}
                </summary>
                <div style={{ padding: '0 14px 12px' }}>{children}</div>
            </details>
        );

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Review & Confirm', 'lazytasks-project-task-management')}
                    desc={__('Last look before the import runs. Use Edit on any section to jump back. Nothing is written until you press Start Import.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setStep('tasks'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => handleExecute()} disabled={isLoading}>
                                <Icon d={<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>} size={14} />
                                {isLoading ? __('Importing…', 'lazytasks-project-task-management') : __('Start Import', 'lazytasks-project-task-management')}
                            </Btn>
                        </div>
                    }
                />

                {error && (
                    <div style={{ marginBottom: 16, padding: '10px 14px', background: '#FEF2F2', border: `1px solid #FECACA`, borderRadius: S.radiusSm, color: S.danger, fontSize: 12 }}>
                        {error}
                    </div>
                )}

                {/* Headline counts */}
                <Card style={{ marginBottom: 12 }}>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
                        {[
                            { num: activeSections.length, label: __('Sections',  'lazytasks-project-task-management') },
                            { num: tasksToImport,         label: __('Tasks',     'lazytasks-project-task-management') },
                            { num: matchedMembers.length + (extraMembers?.length || 0), label: __('Members',   'lazytasks-project-task-management') },
                            { num: importedTags,          label: __('Tags',      'lazytasks-project-task-management') },
                            { num: (statusPlan || []).length, label: __('Statuses',  'lazytasks-project-task-management') },
                        ].map(c => (
                            <div key={c.label} style={{ padding: '10px 12px', background: '#F9FAFB', border: `1px solid ${S.border}`, borderRadius: S.radiusSm }}>
                                <div style={{ fontSize: 20, fontWeight: 700, color: S.text, lineHeight: 1.1 }}>{c.num}</div>
                                <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light, marginTop: 4 }}>{c.label}</div>
                            </div>
                        ))}
                    </div>
                </Card>

                <Section title={__('Workspace', 'lazytasks-project-task-management')} editStep="workspace">
                    <Row label={__('Destination', 'lazytasks-project-task-management')} value={workspaceName} />
                </Section>

                <Section title={__('Project', 'lazytasks-project-task-management')} editStep="project-entry">
                    <Row label={__('Name', 'lazytasks-project-task-management')} value={projectDraft?.name || '—'} />
                    <Row label={__('Code', 'lazytasks-project-task-management')} value={projectDraft?.code || '—'} />
                    {(projectDraft?.description || '').trim() !== '' && (
                        <Row
                            label={__('Description', 'lazytasks-project-task-management')}
                            value={
                                <div style={{ maxHeight: 80, overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                    {(projectDraft.description || '').replace(/<[^>]+>/g, '').slice(0, 280)}
                                </div>
                            }
                        />
                    )}
                </Section>

                <Section title={__('Sections', 'lazytasks-project-task-management')} editStep="sections">
                    <Row
                        label={__('To import', 'lazytasks-project-task-management')}
                        value={sprintf(
                            /* translators: 1: sections kept, 2: total Trello lists */
                            __('%1$d of %2$d Trello lists', 'lazytasks-project-task-management'),
                            activeSections.length,
                            (sectionPlan || []).length
                        )}
                    />
                    {activeSections.length > 0 && (
                        <Row
                            label={__('Order', 'lazytasks-project-task-management')}
                            value={activeSections.map(s => s.name || __('(unnamed)', 'lazytasks-project-task-management')).join(' → ')}
                        />
                    )}
                    {designatedCompleteSection && (
                        <Row
                            label={__('Complete section', 'lazytasks-project-task-management')}
                            value={designatedCompleteSection.name || __('(unnamed)', 'lazytasks-project-task-management')}
                        />
                    )}
                </Section>

                <Section title={__('Statuses', 'lazytasks-project-task-management')} editStep="settings">
                    <Row
                        label={__('Created', 'lazytasks-project-task-management')}
                        value={(statusPlan || []).map(s => s.name).filter(Boolean).join(', ') || '—'}
                    />
                    {completeStatus && (
                        <Row
                            label={__('Designated complete', 'lazytasks-project-task-management')}
                            value={completeStatus.name}
                        />
                    )}
                </Section>

                <Section title={__('Priorities', 'lazytasks-project-task-management')} editStep="settings">
                    <Row
                        label={__('Created', 'lazytasks-project-task-management')}
                        value={(priorityPlan || []).map(p => p.name).filter(Boolean).join(', ') || '—'}
                    />
                </Section>

                <Section title={__('Project views', 'lazytasks-project-task-management')} editStep="settings">
                    <Row
                        label={__('Enabled tabs', 'lazytasks-project-task-management')}
                        value={Object.entries(navbarSettings || {}).filter(([, v]) => !!v).map(([k]) => k).join(', ') || '—'}
                    />
                </Section>

                <Section title={__('Trello activity history', 'lazytasks-project-task-management')} editStep="settings">
                    <Row label={__('Mode', 'lazytasks-project-task-management')} value={activityLabel} />
                </Section>

                <Section title={__('Tags', 'lazytasks-project-task-management')} editStep="tags">
                    <Row
                        label={__('Created', 'lazytasks-project-task-management')}
                        value={sprintf(
                            /* translators: 1: tags to create, 2: tags skipped */
                            __('%1$d created, %2$d skipped', 'lazytasks-project-task-management'),
                            importedTags,
                            skippedTags
                        )}
                    />
                </Section>

                {customFieldsCount > 0 && (
                    <Section title={__('Custom Fields (not imported)', 'lazytasks-project-task-management')} editStep="custom-fields">
                        <Row
                            label={__('Acknowledged loss', 'lazytasks-project-task-management')}
                            value={sprintf(
                                /* translators: 1: number of custom fields, 2: total cards using them */
                                __('%1$d field(s) on %2$d card(s)', 'lazytasks-project-task-management'),
                                customFieldsCount,
                                totalCardsWithCF
                            )}
                        />
                    </Section>
                )}

                <Section title={__('Tasks', 'lazytasks-project-task-management')} editStep="tasks">
                    <Row label={__('Total', 'lazytasks-project-task-management')} value={tasksToImport} />
                    <Row
                        label={__('Comments', 'lazytasks-project-task-management')}
                        value={opts.skipAllComments
                            ? __('Skipped', 'lazytasks-project-task-management')
                            : __('Imported as-is', 'lazytasks-project-task-management')}
                    />
                    <Row
                        label={__('Attachments', 'lazytasks-project-task-management')}
                        value={opts.skipAllAttachments
                            ? __('Skipped', 'lazytasks-project-task-management')
                            : __('Imported (URL references)', 'lazytasks-project-task-management')}
                    />
                    {(cardsWithIssues || []).length > 0 && (() => {
                        const totalIssues = cardsWithIssues.length;
                        const ack = cardsWithIssues.filter(c => taskAcknowledged && taskAcknowledged[c.trello_id]).length;
                        return (
                            <Row
                                label={__('Flagged for review', 'lazytasks-project-task-management')}
                                value={sprintf(
                                    /* translators: 1: acknowledged count, 2: total flagged cards */
                                    __('%1$d of %2$d acknowledged', 'lazytasks-project-task-management'),
                                    ack,
                                    totalIssues
                                )}
                            />
                        );
                    })()}
                </Section>

                <Section title={__('Members', 'lazytasks-project-task-management')} editStep="member-mapping">
                    <Row
                        label={__('From Trello', 'lazytasks-project-task-management')}
                        value={sprintf(
                            /* translators: 1: mapped count, 2: total Trello members */
                            __('%1$d of %2$d mapped to WP users', 'lazytasks-project-task-management'),
                            matchedMembers.length,
                            (members || []).length
                        )}
                    />
                    {(extraMembers?.length || 0) > 0 && (
                        <Row
                            label={__('Added from LazyTasks', 'lazytasks-project-task-management')}
                            value={extraMembers.length}
                        />
                    )}
                    <Row
                        label={__('Notify on add', 'lazytasks-project-task-management')}
                        value={notifyMembers ? __('Yes', 'lazytasks-project-task-management') : __('No', 'lazytasks-project-task-management')}
                    />
                </Section>
            </>
        );
    }

    // ── Step 5: Importing ──
    if (step === 'importing') {
        return renderWithStepper(
            <>
                <SectionHeader title={__('Importing…', 'lazytasks-project-task-management')} desc={__('Please wait while your Trello board is being imported.', 'lazytasks-project-task-management')} />
                <Card style={{ textAlign: 'center', padding: '60px 24px' }}>
                    <div style={{ marginBottom: 16 }}>
                        <div style={{
                            width: 48, height: 48, border: `3px solid ${S.border}`, borderTopColor: S.orange,
                            borderRadius: '50%', margin: '0 auto',
                            animation: 'spin 1s linear infinite',
                        }} />
                        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
                    </div>
                    <div style={{ fontSize: 14, fontWeight: 600, color: S.text }}>{__('Creating your project…', 'lazytasks-project-task-management')}</div>
                    <div style={{ fontSize: 12, color: S.muted, marginTop: 4 }}>{__('This may take a moment for large boards.', 'lazytasks-project-task-management')}</div>
                </Card>
            </>
        );
    }

    // ── Step 13: Final Report ──
    // Four panels per the spec: counts / missed-skipped / acknowledged-loss /
    // user-applied fixes. v1 ships counts + missed-skipped + acknowledged-loss.
    // User-applied fixes panel is deferred to Step 9 follow-up (per-task editor).
    if (step === 'results' && results) {
        const resultItems = [
            { label: __('Sections',    'lazytasks-project-task-management'), value: results.sections_created     || 0 },
            { label: __('Tasks',       'lazytasks-project-task-management'), value: results.tasks_created        || 0 },
            { label: __('Subtasks',    'lazytasks-project-task-management'), value: results.subtasks_created     || 0 },
            { label: __('Comments',    'lazytasks-project-task-management'), value: results.comments_imported    || 0 },
            { label: __('Tags',        'lazytasks-project-task-management'), value: results.tags_created         || 0 },
            { label: __('Members',     'lazytasks-project-task-management'), value: results.members_assigned     || 0 },
            { label: __('Attachments', 'lazytasks-project-task-management'), value: results.attachments_imported || 0 },
            { label: __('Activity',    'lazytasks-project-task-management'), value: results.activity_logged      || 0 },
        ];

        // Step 13 — categorised skip reasons returned by executeImport.
        const skipReasonLabels = {
            card_in_skipped_section: __('Cards in skipped sections',     'lazytasks-project-task-management'),
            task_insert_failed:      __('Tasks that failed to insert',   'lazytasks-project-task-management'),
            comment_unmapped_author: __('Comments from unmapped Trello members', 'lazytasks-project-task-management'),
            card_processing_failed:  __('Cards that errored mid-import (skipped to keep going)', 'lazytasks-project-task-management'),
            activity_log_failed:     __('Activity-log actions that errored',  'lazytasks-project-task-management'),
        };
        const breakdown = results.skipped_by_reason || {};
        const breakdownRows = Object.entries(breakdown).filter(([, n]) => (n || 0) > 0);

        const cfAcknowledged = (customFieldsSummary || []).length;
        const cfCards = (customFieldsSummary || []).reduce((sum, f) => sum + (f.cards_using_count || 0), 0);
        const skippedTagsCount = (tagPlan || []).filter(t => t.skip).length;
        const skippedSectionsCount = (sectionPlan || []).filter(r => r.skip).length;
        const skippedSectionsCards = (sectionPlan || []).filter(r => r.skip).reduce((sum, r) => sum + (r.card_count || 0), 0);

        const projectUrl = results.project_id ? `#/project/task/list/${results.project_id}` : null;

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Import Complete', 'lazytasks-project-task-management')}
                    desc={__('Your Trello board has been imported as a new project. Print or screenshot this page if you need a copy — the report is not saved.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            {projectUrl && (
                                <Btn variant="primary" onClick={() => { window.location.hash = projectUrl; }}>
                                    {__('Open Project', 'lazytasks-project-task-management')} →
                                </Btn>
                            )}
                            <Btn variant="ghost" onClick={handleReset}>
                                {__('Import Another Board', 'lazytasks-project-task-management')}
                            </Btn>
                        </div>
                    }
                />

                {/* Non-persistence banner */}
                <div style={{
                    marginBottom: 16, padding: '10px 14px',
                    background: '#FFFBEB',
                    border: `1px solid #FDE68A`,
                    borderRadius: S.radiusSm,
                    color: '#92400E',
                    fontSize: 12, lineHeight: 1.6
                }}>
                    {__('⚠ This report is not saved anywhere. If you need a record of what was imported, screenshot or print this page now — refreshing or navigating away will discard it.', 'lazytasks-project-task-management')}
                </div>

                {/* Panel 1 — Successfully imported */}
                <Card style={{ marginBottom: 12 }}>
                    <div style={{ textAlign: 'center', marginBottom: 20 }}>
                        <svg viewBox="0 0 24 24" fill="none" stroke={S.success} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 48, height: 48, margin: '0 auto 12px' }}>
                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                            <polyline points="22 4 12 14.01 9 11.01"/>
                        </svg>
                        <div style={{ fontSize: 18, fontWeight: 700, color: S.text }}>{results.project_name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4 }}>
                            {__('Project created successfully', 'lazytasks-project-task-management')}
                        </div>
                    </div>

                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
                        {resultItems.filter(r => r.value > 0).map((r, i) => (
                            <div key={i} style={{ textAlign: 'center', padding: '14px 8px', background: '#FAFBFC', borderRadius: S.radiusSm, border: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 20, fontWeight: 700, color: S.teal }}>{r.value}</div>
                                <div style={{ fontSize: 11, color: S.muted, marginTop: 2 }}>{r.label}</div>
                            </div>
                        ))}
                    </div>
                </Card>

                {/* Panel 2 — Missed / skipped by category */}
                {breakdownRows.length > 0 && (
                    <Card style={{ marginBottom: 12 }}>
                        <div style={{ fontSize: 14, fontWeight: 700, color: S.text, marginBottom: 4 }}>
                            {__('Missed / skipped', 'lazytasks-project-task-management')}
                        </div>
                        <div style={{ fontSize: 12, color: S.muted, marginBottom: 12 }}>
                            {sprintf(
                                /* translators: %d: total skipped items */
                                __('%d items couldn\'t be imported. Common reasons below.', 'lazytasks-project-task-management'),
                                results.skipped_items || 0
                            )}
                        </div>
                        {breakdownRows.map(([slug, count]) => (
                            <div key={slug} style={{ display: 'grid', gridTemplateColumns: '1fr 60px', gap: 12, padding: '8px 0', borderBottom: `1px solid ${S.border}`, fontSize: 13 }}>
                                <div style={{ color: S.text }}>{skipReasonLabels[slug] || slug}</div>
                                <div style={{ color: S.danger, fontWeight: 600, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{count}</div>
                            </div>
                        ))}
                    </Card>
                )}

                {/* Panel 3 — Acknowledged loss (skipped by user choice or by spec) */}
                {(cfAcknowledged > 0 || skippedTagsCount > 0 || skippedSectionsCount > 0) && (
                    <Card style={{ marginBottom: 12 }}>
                        <div style={{ fontSize: 14, fontWeight: 700, color: S.text, marginBottom: 4 }}>
                            {__('Skipped by your choices', 'lazytasks-project-task-management')}
                        </div>
                        <div style={{ fontSize: 12, color: S.muted, marginBottom: 12 }}>
                            {__('Data left behind on purpose during the wizard.', 'lazytasks-project-task-management')}
                        </div>
                        {cfAcknowledged > 0 && (
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '8px 0', borderBottom: `1px solid ${S.border}`, fontSize: 13 }}>
                                <div style={{ color: S.text }}>{__('Custom fields acknowledged (not imported)', 'lazytasks-project-task-management')}</div>
                                <div style={{ color: S.muted, fontVariantNumeric: 'tabular-nums' }}>
                                    {sprintf(
                                        /* translators: 1: number of custom fields, 2: cards using them */
                                        __('%1$d field(s) on %2$d card(s)', 'lazytasks-project-task-management'),
                                        cfAcknowledged, cfCards
                                    )}
                                </div>
                            </div>
                        )}
                        {skippedSectionsCount > 0 && (
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '8px 0', borderBottom: `1px solid ${S.border}`, fontSize: 13 }}>
                                <div style={{ color: S.text }}>{__('Sections skipped in the wizard', 'lazytasks-project-task-management')}</div>
                                <div style={{ color: S.muted, fontVariantNumeric: 'tabular-nums' }}>
                                    {sprintf(
                                        /* translators: 1: section count, 2: cards in those sections */
                                        __('%1$d section(s), ~%2$d cards', 'lazytasks-project-task-management'),
                                        skippedSectionsCount, skippedSectionsCards
                                    )}
                                </div>
                            </div>
                        )}
                        {skippedTagsCount > 0 && (
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '8px 0', borderBottom: `1px solid ${S.border}`, fontSize: 13 }}>
                                <div style={{ color: S.text }}>{__('Tags skipped in the wizard', 'lazytasks-project-task-management')}</div>
                                <div style={{ color: S.muted, fontVariantNumeric: 'tabular-nums' }}>{skippedTagsCount}</div>
                            </div>
                        )}
                    </Card>
                )}

                {/* Panel 4 — User-applied fixes / acknowledgements from Step 9. */}
                {(cardsWithIssues || []).length > 0 && (() => {
                    const totalIssues = cardsWithIssues.length;
                    const ackCount = cardsWithIssues.filter(c => taskAcknowledged && taskAcknowledged[c.trello_id]).length;
                    const editedCount = results.user_applied_fixes || 0;
                    return (
                        <Card style={{ marginBottom: 12 }}>
                            <div style={{ fontSize: 14, fontWeight: 700, color: S.text, marginBottom: 4 }}>
                                {__('Cards needing attention — outcome', 'lazytasks-project-task-management')}
                            </div>
                            <div style={{ fontSize: 12, color: S.muted, marginBottom: 12 }}>
                                {__('What happened to cards the wizard flagged as having incomplete data.', 'lazytasks-project-task-management')}
                            </div>
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '8px 0', borderBottom: `1px solid ${S.border}`, fontSize: 13 }}>
                                <div style={{ color: S.text }}>{__('Flagged with missing data', 'lazytasks-project-task-management')}</div>
                                <div style={{ color: S.muted, fontVariantNumeric: 'tabular-nums' }}>{totalIssues}</div>
                            </div>
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '8px 0', borderBottom: `1px solid ${S.border}`, fontSize: 13 }}>
                                <div style={{ color: S.text }}>{__('Edited before import (user fixes)', 'lazytasks-project-task-management')}</div>
                                <div style={{ color: S.teal, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{editedCount}</div>
                            </div>
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '8px 0', fontSize: 13 }}>
                                <div style={{ color: S.text }}>{__('Acknowledged as-is', 'lazytasks-project-task-management')}</div>
                                <div style={{ color: S.muted, fontVariantNumeric: 'tabular-nums' }}>{ackCount}</div>
                            </div>
                        </Card>
                    );
                })()}

                {/* Reference list of Trello JSON fields the importer drops — same
                    panel that appears on the Tasks step, repeated here so the
                    final report carries the full "what got left behind" picture. */}
                <Card style={{ marginBottom: 12 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: S.text, marginBottom: 4 }}>
                        {__('Trello JSON fields not imported', 'lazytasks-project-task-management')}
                    </div>
                    <div style={{ fontSize: 12, color: S.muted, marginBottom: 12 }}>
                        {__('Field paths reference Trello\'s JSON export format. Anything in this list was silently dropped during import.', 'lazytasks-project-task-management')}
                    </div>

                    {buildTrelloNotImportedFields().map(row => (
                        <div key={row.path}
                             style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 12, padding: '6px 0', borderBottom: `1px solid ${S.border}`, fontSize: 12, alignItems: 'baseline' }}>
                            <code style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', color: S.text, fontSize: 12 }}>
                                {row.path}
                            </code>
                            <div style={{ color: S.muted }}>{row.note}</div>
                        </div>
                    ))}
                </Card>
            </>
        );
    }

    return null;
};

/* ──────────────────────────────────────────────────────────
   PANEL: Todoist Import
──────────────────────────────────────────────────────────── */
const TodoistImportPanel = () => {
    const dispatch = useDispatch();
    const { step, isLoading, error, preview, todoistDataKey, memberMapping, priorityMapping, wpUsers, members, todoistPriorities, notices, results } = useSelector(s => s.settings.todoistImport);
    const { companies = [] } = useSelector(s => s.settings.company);
    const { loggedInUser } = useSelector(s => s.auth.session);
    const fileRef = useRef(null);
    const [dragOver, setDragOver] = useState(false);

    const companyId = companies?.[0]?.id || loggedInUser?.companyId || 1;

    const handleFileSelect = (file) => {
        if (!file) return;
        if (!file.name.endsWith('.csv')) {
            showNotification({ title: __('Import', 'lazytasks-project-task-management'), message: __('Please select a .csv file', 'lazytasks-project-task-management'), color: 'red', autoClose: 3000 });
            return;
        }
        const formData = new FormData();
        formData.append('todoist_csv', file);
        dispatch(parseTodoistFile(formData));
    };

    const handleDrop = (e) => {
        e.preventDefault();
        setDragOver(false);
        const file = e.dataTransfer?.files?.[0];
        handleFileSelect(file);
    };

    const handleExecute = () => {
        dispatch(runTodoistImport({
            todoist_data_key: todoistDataKey,
            company_id: companyId,
            member_mapping: memberMapping,
            priority_mapping: priorityMapping,
        }));
    };

    const handleReset = () => {
        dispatch(resetTodoistImport());
        if (fileRef.current) fileRef.current.value = '';
    };

    // Todoist priority display info
    const priorityInfo = {
        1: { label: __('Priority 1 (Highest)', 'lazytasks-project-task-management'), color: '#d1453b' },
        2: { label: __('Priority 2 (High)', 'lazytasks-project-task-management'), color: '#eb8909' },
        3: { label: __('Priority 3 (Medium)', 'lazytasks-project-task-management'), color: '#246fe0' },
        4: { label: __('Priority 4 (Normal)', 'lazytasks-project-task-management'), color: '#808080' },
    };

    // ── Step 1: Upload ──
    if (step === 1) {
        return (
            <>
                <SectionHeader
                    title={__('Import from Todoist', 'lazytasks-project-task-management')}
                    desc={__('Upload a Todoist project CSV export to import it as a new project.', 'lazytasks-project-task-management')}
                />
                <Card>
                    <CardTitle icon={<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></>}>
                        {__('Upload Todoist Export', 'lazytasks-project-task-management')}
                    </CardTitle>
                    <div
                        onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
                        onDragLeave={() => setDragOver(false)}
                        onDrop={handleDrop}
                        onClick={() => fileRef.current?.click()}
                        style={{
                            border: `2px dashed ${dragOver ? S.orange : S.border}`,
                            borderRadius: S.radius,
                            padding: '48px 24px',
                            textAlign: 'center',
                            cursor: 'pointer',
                            background: dragOver ? S.orangeLt : '#FAFBFC',
                            transition: 'all .2s',
                        }}
                    >
                        <div style={{ marginBottom: 12, display: 'flex', justifyContent: 'center' }}>
                            <svg viewBox="0 0 24 24" fill="none" stroke={S.muted} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 40, height: 40 }}>
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                <polyline points="17 8 12 3 7 8"/>
                                <line x1="12" y1="3" x2="12" y2="15"/>
                            </svg>
                        </div>
                        <div style={{ fontSize: 14, fontWeight: 600, color: S.text, marginBottom: 4 }}>
                            {__('Drop your Todoist CSV file here', 'lazytasks-project-task-management')}
                        </div>
                        <div style={{ fontSize: 12, color: S.muted }}>
                            {__('or click to browse. Maximum file size: 20MB', 'lazytasks-project-task-management')}
                        </div>
                        <input
                            ref={fileRef}
                            type="file"
                            accept=".csv"
                            style={{ display: 'none' }}
                            onChange={(e) => handleFileSelect(e.target.files?.[0])}
                        />
                    </div>
                    {isLoading && (
                        <div style={{ textAlign: 'center', padding: '20px 0', color: S.muted, fontSize: 13 }}>
                            {__('Parsing Todoist export…', 'lazytasks-project-task-management')}
                        </div>
                    )}
                    {error && (
                        <div style={{ marginTop: 12, padding: '10px 14px', background: '#FEF2F2', border: `1px solid #FECACA`, borderRadius: S.radiusSm, color: S.danger, fontSize: 12 }}>
                            {error}
                        </div>
                    )}
                    <div style={{ marginTop: 20, padding: '16px 0 0', borderTop: `1px solid ${S.border}` }}>
                        <div style={{ fontSize: 12, color: S.muted }}>
                            <strong>{__('How to export from Todoist:', 'lazytasks-project-task-management')}</strong>
                            <ol style={{ margin: '8px 0 0', paddingLeft: 20, lineHeight: 1.8 }}>
                                <li>{__('Open your Todoist project', 'lazytasks-project-task-management')}</li>
                                <li>{__('Click the three-dot menu (…) at the top right', 'lazytasks-project-task-management')}</li>
                                <li>{__('Select "Export as a template"', 'lazytasks-project-task-management')}</li>
                                <li>{__('Choose CSV format and download', 'lazytasks-project-task-management')}</li>
                                <li>{__('Upload the downloaded .csv file here', 'lazytasks-project-task-management')}</li>
                            </ol>
                        </div>
                    </div>
                </Card>
            </>
        );
    }

    // ── Step 2: Preview ──
    if (step === 2) {
        const stats = [
            { label: __('Sections', 'lazytasks-project-task-management'), value: preview?.sections_count || 0, icon: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></> },
            { label: __('Tasks', 'lazytasks-project-task-management'), value: preview?.tasks_count || 0, icon: <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></> },
            { label: __('Subtasks', 'lazytasks-project-task-management'), value: preview?.subtasks_count || 0, icon: <><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></> },
            { label: __('Labels → Tags', 'lazytasks-project-task-management'), value: preview?.labels_count || 0, icon: <><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></> },
            { label: __('Notes → Comments', 'lazytasks-project-task-management'), value: preview?.notes_count || 0, icon: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></> },
        ];

        return (
            <>
                <SectionHeader
                    title={preview?.project_name || __('Project Preview', 'lazytasks-project-task-management')}
                    desc={__('Review what will be imported before proceeding.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={handleReset}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setTodoistStep(3))}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />

                <Card style={{ marginBottom: 16 }}>
                    <CardTitle icon={<><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></>}>
                        {__('Import Summary', 'lazytasks-project-task-management')}
                    </CardTitle>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                        {stats.map((s, i) => (
                            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', background: '#FAFBFC', borderRadius: S.radiusSm, border: `1px solid ${S.border}` }}>
                                <div style={{ flexShrink: 0 }}>
                                    <svg viewBox="0 0 24 24" fill="none" stroke={S.teal} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 18, height: 18 }}>{s.icon}</svg>
                                </div>
                                <div>
                                    <div style={{ fontSize: 18, fontWeight: 700, color: S.text }}>{s.value}</div>
                                    <div style={{ fontSize: 11, color: S.muted }}>{s.label}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </Card>

                {notices.length > 0 && (
                    <Card>
                        <CardTitle icon={<><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>}>
                            {__('Import Notes', 'lazytasks-project-task-management')}
                        </CardTitle>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                            {notices.map((notice, i) => (
                                <div key={i} style={{
                                    padding: '10px 14px', borderRadius: S.radiusSm, fontSize: 12, lineHeight: 1.5,
                                    background: notice.type === 'warning' ? '#FFFBEB' : '#EFF6FF',
                                    border: `1px solid ${notice.type === 'warning' ? '#FDE68A' : '#BFDBFE'}`,
                                    color: notice.type === 'warning' ? '#92400E' : '#1E40AF',
                                }}>
                                    {notice.message}
                                </div>
                            ))}
                        </div>
                    </Card>
                )}
            </>
        );
    }

    // ── Step 3: Mapping (Members + Priorities) ──
    if (step === 3) {
        const memberInfo = members.map(m => {
            const wpId = memberMapping[m.todoist_name];
            const wpUser = wpId ? wpUsers.find(u => u.id === wpId || u.id === parseInt(wpId)) : null;
            return { ...m, wpId, wpUser, isMatched: !!wpId };
        });

        return (
            <>
                <SectionHeader
                    title={__('Map Members & Priorities', 'lazytasks-project-task-management')}
                    desc={__('Match Todoist members and priorities to your LazyTasks project.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setTodoistStep(2))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={handleExecute} disabled={isLoading}>
                                <Icon d={<><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>} size={14} />
                                {isLoading ? __('Importing…', 'lazytasks-project-task-management') : __('Start Import', 'lazytasks-project-task-management')}
                            </Btn>
                        </div>
                    }
                />

                {error && (
                    <div style={{ marginBottom: 16, padding: '10px 14px', background: '#FEF2F2', border: `1px solid #FECACA`, borderRadius: S.radiusSm, color: S.danger, fontSize: 12 }}>
                        {error}
                    </div>
                )}

                {/* Priority Mapping */}
                {todoistPriorities.length > 0 && (
                    <Card style={{ marginBottom: 16 }}>
                        <CardTitle icon={<><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></>}>
                            {__('Priority Mapping', 'lazytasks-project-task-management')}
                        </CardTitle>
                        <div style={{ fontSize: 12, color: S.muted, marginBottom: 14 }}>
                            {__('Map each Todoist priority to a LazyTasks priority name. Leave empty for no priority.', 'lazytasks-project-task-management')}
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 40px', gap: 12, padding: '0 0 12px', borderBottom: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Todoist Priority', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('LazyTasks Priority Name', 'lazytasks-project-task-management')}</div>
                                <div></div>
                            </div>
                            {todoistPriorities.map((p) => (
                                <div key={p.todoist_priority} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 40px', gap: 12, padding: '12px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'center' }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                        <div style={{ width: 12, height: 12, borderRadius: '50%', background: priorityInfo[p.todoist_priority]?.color || '#808080', flexShrink: 0 }} />
                                        <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>
                                            {priorityInfo[p.todoist_priority]?.label || `Priority ${p.todoist_priority}`}
                                        </div>
                                    </div>
                                    <input
                                        type="text"
                                        value={priorityMapping[p.todoist_priority] || ''}
                                        onChange={(e) => dispatch(updatePriorityMapping({ todoistPriority: p.todoist_priority, lazytaskPriorityName: e.target.value }))}
                                        placeholder={__('e.g. High, Medium, Low — or leave empty', 'lazytasks-project-task-management')}
                                        style={{ ...inputStyle }}
                                    />
                                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                                        {priorityMapping[p.todoist_priority] ? (
                                            <svg viewBox="0 0 24 24" fill="none" stroke={S.success} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
                                                <polyline points="20 6 9 17 4 12"/>
                                            </svg>
                                        ) : (
                                            <div style={{ fontSize: 10, color: S.light }}>{__('Skip', 'lazytasks-project-task-management')}</div>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </Card>
                )}

                {/* Member Mapping */}
                <Card>
                    <CardTitle icon={<><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>}>
                        {__('Member Mapping', 'lazytasks-project-task-management')}
                    </CardTitle>
                    {memberInfo.length === 0 ? (
                        <div style={{ textAlign: 'center', padding: '32px 0', color: S.muted, fontSize: 13 }}>
                            {__('No assigned members found in the Todoist export. Tasks will be imported without assignees.', 'lazytasks-project-task-management')}
                        </div>
                    ) : (
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 40px', gap: 12, padding: '0 0 12px', borderBottom: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('Todoist Member', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', color: S.light }}>{__('WordPress User', 'lazytasks-project-task-management')}</div>
                                <div></div>
                            </div>
                            {memberInfo.map((m) => (
                                <div key={m.todoist_name} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 40px', gap: 12, padding: '12px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'center' }}>
                                    <div>
                                        <div style={{ fontSize: 13, fontWeight: 600, color: S.text }}>{m.todoist_name}</div>
                                    </div>
                                    <select
                                        value={memberMapping[m.todoist_name] || ''}
                                        onChange={(e) => dispatch(updateTodoistMemberMapping({ todoistName: m.todoist_name, wpUserId: e.target.value ? parseInt(e.target.value) : null }))}
                                        style={{ ...inputStyle, cursor: 'pointer' }}
                                    >
                                        <option value="">{__('— Skip (no mapping) —', 'lazytasks-project-task-management')}</option>
                                        {wpUsers.map(u => (
                                            <option key={u.id} value={u.id}>{u.display_name} ({u.email})</option>
                                        ))}
                                    </select>
                                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                                        {m.isMatched ? (
                                            <svg viewBox="0 0 24 24" fill="none" stroke={S.success} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
                                                <polyline points="20 6 9 17 4 12"/>
                                            </svg>
                                        ) : (
                                            <svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
                                                <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                                            </svg>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </Card>
            </>
        );
    }

    // ── Step 4: Importing ──
    if (step === 4) {
        return (
            <>
                <SectionHeader title={__('Importing…', 'lazytasks-project-task-management')} desc={__('Please wait while your Todoist project is being imported.', 'lazytasks-project-task-management')} />
                <Card style={{ textAlign: 'center', padding: '60px 24px' }}>
                    <div style={{ marginBottom: 16 }}>
                        <div style={{
                            width: 48, height: 48, border: `3px solid ${S.border}`, borderTopColor: S.orange,
                            borderRadius: '50%', margin: '0 auto',
                            animation: 'spin 1s linear infinite',
                        }} />
                        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
                    </div>
                    <div style={{ fontSize: 14, fontWeight: 600, color: S.text }}>{__('Creating your project…', 'lazytasks-project-task-management')}</div>
                    <div style={{ fontSize: 12, color: S.muted, marginTop: 4 }}>{__('This may take a moment for large projects.', 'lazytasks-project-task-management')}</div>
                </Card>
            </>
        );
    }

    // ── Step 5: Results ──
    if (step === 5 && results) {
        const resultItems = [
            { label: __('Sections', 'lazytasks-project-task-management'), value: results.sections_created },
            { label: __('Tasks', 'lazytasks-project-task-management'), value: results.tasks_created },
            { label: __('Subtasks', 'lazytasks-project-task-management'), value: results.subtasks_created },
            { label: __('Comments', 'lazytasks-project-task-management'), value: results.comments_imported },
            { label: __('Tags', 'lazytasks-project-task-management'), value: results.tags_created },
            { label: __('Members', 'lazytasks-project-task-management'), value: results.members_assigned },
        ];

        return (
            <>
                <SectionHeader
                    title={__('Import Complete', 'lazytasks-project-task-management')}
                    desc={__('Your Todoist project has been imported successfully.', 'lazytasks-project-task-management')}
                    actions={
                        <Btn variant="primary" onClick={handleReset}>
                            {__('Import Another Project', 'lazytasks-project-task-management')}
                        </Btn>
                    }
                />

                <Card style={{ marginBottom: 16 }}>
                    <div style={{ textAlign: 'center', marginBottom: 20 }}>
                        <svg viewBox="0 0 24 24" fill="none" stroke={S.success} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 48, height: 48, margin: '0 auto 12px' }}>
                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                            <polyline points="22 4 12 14.01 9 11.01"/>
                        </svg>
                        <div style={{ fontSize: 18, fontWeight: 700, color: S.text }}>{results.project_name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4 }}>{__('Project created successfully', 'lazytasks-project-task-management')}</div>
                    </div>

                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
                        {resultItems.filter(r => r.value > 0).map((r, i) => (
                            <div key={i} style={{ textAlign: 'center', padding: '14px 8px', background: '#FAFBFC', borderRadius: S.radiusSm, border: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 20, fontWeight: 700, color: S.teal }}>{r.value}</div>
                                <div style={{ fontSize: 11, color: S.muted, marginTop: 2 }}>{r.label}</div>
                            </div>
                        ))}
                    </div>

                    {results.skipped_items > 0 && (
                        <div style={{ marginTop: 14, padding: '10px 14px', background: '#FFFBEB', border: '1px solid #FDE68A', borderRadius: S.radiusSm, fontSize: 12, color: '#92400E' }}>
                            {results.skipped_items} {__('item(s) were skipped (recurring tasks, orphaned subtasks, etc.)', 'lazytasks-project-task-management')}
                        </div>
                    )}
                </Card>
            </>
        );
    }

    return null;
};

/* ──────────────────────────────────────────────────────────
   PANEL: Time Tracker Settings (addon)
──────────────────────────────────────────────────────────── */
const TimeTrackerSettingsPanel = () => {
    if (window.lazytasksTimeTracker?.settingsPage) {
        return React.createElement(window.lazytasksTimeTracker.settingsPage);
    }
    return <div style={{ padding: '32px 0', color: '#64748B', fontSize: 14 }}>Loading Time Tracker…</div>;
};

/* ──────────────────────────────────────────────────────────
   PANEL: Performance Settings (addon)
──────────────────────────────────────────────────────────── */
const PerformanceSettingsPanel = () => {
    if (window.lazytasksPerformance?.PerformanceSettings) {
        return React.createElement(window.lazytasksPerformance.PerformanceSettings);
    }
    return <div style={{ padding: '32px 0', color: '#64748B', fontSize: 14 }}>Loading Performance settings…</div>;
};

/* ──────────────────────────────────────────────────────────
   PANEL: Whiteboard Settings (addon)
──────────────────────────────────────────────────────────── */
const WhiteboardSettingsPanel = () => {
    if (window.lazytasksWhiteboard?.WhiteboardSettings) {
        return React.createElement(window.lazytasksWhiteboard.WhiteboardSettings);
    }
    return <div style={{ padding: '32px 0', color: '#64748B', fontSize: 14 }}>Loading Whiteboard settings…</div>;
};

/* ──────────────────────────────────────────────────────────
   MAIN: GeneralTabV3
──────────────────────────────────────────────────────────── */
const GeneralTabV3 = () => {
    const dispatch = useDispatch();
    const { whiteboardAddonState, socialLoginConfiguration, timeTrackerAddonState, performanceAddonState } = useSelector(s => s.settings.setting);
    const VALID_PANELS = ['general-setting', 'portal-settings', 'notification-settings', 'addons', 'social-login', 'managed-tags', 'privacy-analytics', 'trello-import', 'todoist-import', 'timetracker-settings', 'performance-settings', 'whiteboard-settings'];
    const [searchParams, setSearchParams] = useSearchParams();
    const sectionParam = searchParams.get('section');
    const [activePanel, setActivePanel] = useState(VALID_PANELS.includes(sectionParam) ? sectionParam : 'general-setting');
    const generalScrollRef = useRef(null);
    const generalMaxH = useAvailableHeight(generalScrollRef, []);

    const handlePanelChange = (key) => {
        setActivePanel(key);
        setSearchParams(prev => {
            prev.set('section', key);
            return prev;
        });
    };

    useEffect(() => { dispatch(fetchSettings()); }, [dispatch]);

    const socialEnabled = socialLoginConfiguration?.social_login_enabled;

    const { loggedInUser } = useSelector(s => s.auth.session);
    const canSeeGeneral       = hasPermission(loggedInUser, ['general-settings'],    null, 'global');
    const canSeePortal        = hasPermission(loggedInUser, ['portal-management'],   null, 'global');
    const canSeeNotifications = hasPermission(loggedInUser, ['manage-notification'], null, 'global');
    const canSeeAddons        = hasPermission(loggedInUser, ['manage-addon'],        null, 'global');
    const canSeeTags          = hasPermission(loggedInUser, ['manage-tags'],          null, 'global');
    const canSeeTimeTrackerSettings = hasPermission(loggedInUser, ['timetracker-admin-settings'], null, 'global');
    // Privacy & Analytics is a site-level decision — restrict to WP admins (matches the upgrade-path notice gate).
    const isWpAdmin           = !!loggedInUser?.roles?.includes('administrator');

    const SIDEBAR_NAV = [
        {
            section: __( 'Configuration', 'lazytasks-project-task-management' ),
            items: [
                { key: 'general-setting', label: __( 'General Settings', 'lazytasks-project-task-management' ), icon: <><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></>, disabled: !canSeeGeneral },
                { key: 'portal-settings', label: __( 'Portal Settings', 'lazytasks-project-task-management' ), icon: <><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8m-4-4v4"/></>, disabled: !canSeePortal },
                { key: 'notification-settings', label: __( 'Notifications', 'lazytasks-project-task-management' ), icon: <><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></>, disabled: !canSeeNotifications },
            ],
        },
        {
            section: __( 'Extensions', 'lazytasks-project-task-management' ),
            items: [
                {
                    key: 'addons', label: __( 'Addons', 'lazytasks-project-task-management' ),
                    icon: <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />,
                    badge: String([
                        whiteboardAddonState === 'installed_active',
                        timeTrackerAddonState === 'installed_active',
                        socialEnabled,
                        performanceAddonState === 'installed_active',
                    ].filter(Boolean).length) || undefined,
                    disabled: !canSeeAddons,
                },
                ...(ADDON_REGISTRY.socialLogin.status === 'released' && socialEnabled ? [{
                    key: 'social-login', label: __( 'Social Login', 'lazytasks-project-task-management' ),
                    icon: <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />,
                    badge: __( 'ON', 'lazytasks-project-task-management' ), badgeVariant: 'on',
                    disabled: !canSeeAddons,
                }] : []),
                ...(ADDON_REGISTRY.timeTracker.status === 'released' && timeTrackerAddonState === 'installed_active' ? [{
                    key: 'timetracker-settings', label: __( 'Time Tracker', 'lazytasks-project-task-management' ),
                    icon: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
                    badge: __( 'ON', 'lazytasks-project-task-management' ), badgeVariant: 'on',
                    disabled: !canSeeTimeTrackerSettings,
                }] : []),
                ...(ADDON_REGISTRY.performance.status === 'released' && performanceAddonState === 'installed_active' ? [{
                    key: 'performance-settings', label: __( 'Performance', 'lazytasks-project-task-management' ),
                    icon: <><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></>,
                    badge: __( 'ON', 'lazytasks-project-task-management' ), badgeVariant: 'on',
                }] : []),
                ...(ADDON_REGISTRY.whiteboard.status === 'released' && whiteboardAddonState === 'installed_active' ? [{
                    key: 'whiteboard-settings', label: __( 'Whiteboard', 'lazytasks-project-task-management' ),
                    icon: <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v18"/></>,
                    badge: __( 'ON', 'lazytasks-project-task-management' ), badgeVariant: 'on',
                }] : []),
            ],
        },
        {
            section: __( 'Organization', 'lazytasks-project-task-management' ),
            items: [
                { key: 'managed-tags', label: __( 'Manage Tags', 'lazytasks-project-task-management' ), icon: <><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></>, disabled: !canSeeTags },
                ...(isWpAdmin ? [{
                    key: 'privacy-analytics',
                    label: __('Privacy & Analytics', 'lazytasks-project-task-management'),
                    icon: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></>,
                }] : []),
            ],
        },
        {
            section: __( 'Import', 'lazytasks-project-task-management' ),
            items: [
                { key: 'trello-import', label: __( 'Import from Trello', 'lazytasks-project-task-management' ), icon: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></> },
                { key: 'todoist-import', label: __( 'Import from Todoist', 'lazytasks-project-task-management' ), icon: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>, badge: __( 'Upcoming', 'lazytasks-project-task-management' ), disabled: true },
            ],
        },
        /* Export section hidden — XLSX export now lives on the per-project Settings sidebar
           (commit f9c6890). Kept commented for future CSV/PDF placeholders.
        {
            section: __( 'Export', 'lazytasks-project-task-management' ),
            badge: __( 'Upcoming', 'lazytasks-project-task-management' ),
            items: [
                { key: 'export-csv', label: __( 'Export as CSV', 'lazytasks-project-task-management' ), icon: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>, disabled: true },
                { key: 'export-pdf', label: __( 'Export as PDF', 'lazytasks-project-task-management' ), icon: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>, disabled: true },
                { key: 'export-excel', label: __( 'Export as Excel', 'lazytasks-project-task-management' ), icon: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>, disabled: true },
            ],
        },
        */
    ];

    const allItems = SIDEBAR_NAV.flatMap(g => g.items);
    useEffect(() => {
        const current = allItems.find(i => i.key === activePanel);
        if (current?.disabled) {
            const first = allItems.find(i => !i.disabled);
            if (first) handlePanelChange(first.key);
        }
    }, [canSeeGeneral, canSeePortal, canSeeNotifications, canSeeAddons, canSeeTags, socialEnabled]);

    const PANEL_MAP = {
        'general-setting': <GeneralSettingsPanel />,
        'portal-settings': <PortalSettingsPanel />,
        'notification-settings': <NotificationSettingsPanel />,
        'addons': <AddonsPanel />,
        'social-login': <SocialLoginPanel />,
        'managed-tags': <ManageTagsPanel />,
        'privacy-analytics': isWpAdmin ? <PrivacyAnalyticsSettings /> : null,
        'trello-import': <TrelloImportPanel />,
        'todoist-import': <TodoistImportPanel />,
        'timetracker-settings': <TimeTrackerSettingsPanel />,
        'performance-settings': <PerformanceSettingsPanel />,
        'whiteboard-settings': <WhiteboardSettingsPanel />,
    };

    return (
        <div style={{ display: 'flex', gap: 20, height: '100%' }}>
            {/* Sidebar */}
            <div style={{ width: 220, flexShrink: 0, maxHeight: generalMaxH }}>
                <div style={{ background: S.white, border: `1px solid ${S.border}`, borderRadius: S.radius, overflow: 'hidden', boxShadow: S.shadow, height: '100%' }}>
                    {SIDEBAR_NAV.map((group, gi) => (
                        <div key={group.section}>
                            {gi > 0 && <div style={{ height: 1, background: S.border, margin: '4px 0' }} />}
                            <SectionLabel label={group.section} badge={group.badge} />
                            {group.items.map(item => (
                                <NavItem
                                    key={item.key}
                                    icon={
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
                                            {item.icon}
                                        </svg>
                                    }
                                    label={item.label}
                                    isActive={activePanel === item.key}
                                    onClick={() => handlePanelChange(item.key)}
                                    badge={item.badge}
                                    badgeVariant={item.badgeVariant}
                                    disabled={item.disabled}
                                />
                            ))}
                        </div>
                    ))}
                </div>
            </div>

            {/* Content */}
            <div ref={generalScrollRef} style={{ flex: 1, minWidth: 0, overflowY: 'auto', maxHeight: generalMaxH, paddingBottom: 24 }}>
                {(() => {
                    const current = allItems.find(i => i.key === activePanel);
                    if (current?.disabled) return null;
                    return PANEL_MAP[activePanel];
                })()}
            </div>
        </div>
    );
};

export default GeneralTabV3;