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, takeOverWizard as takeOverTodoistWizard, cancelWizard as cancelTodoistWizard, setStep as setTodoistStep, updateMemberMapping as updateTodoistMemberMapping, updatePriorityMapping, resetImport as resetTodoistImport, setSelectedWorkspaceId as setTodoistWorkspaceId, updateWorkspaceDraft as updateTodoistWorkspaceDraft, setCreatingWorkspace as setTodoistCreatingWorkspace, updateProjectDraft as updateTodoistProjectDraft, setMemberRole as setTodoistMemberRole, addExtraMember as addTodoistExtraMember, removeExtraMember as removeTodoistExtraMember, updateExtraMemberRole as updateTodoistExtraMemberRole, appendWpUser as appendTodoistWpUser, setNotifyMembers as setTodoistNotifyMembers, setSectionName as setTodoistSectionName, setSectionSkip as setTodoistSectionSkip, reorderSectionPlan as reorderTodoistSectionPlan, setTagName as setTodoistTagName, setTagSkip as setTodoistTagSkip, setNavbarToggle as setTodoistNavbarToggle, setTaskAssignment as setTodoistTaskAssignment } from '../store/todoistImportSlice';
import TodoistImportStepper from './TodoistImportStepper';
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, notificationAddonState } = 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 [notificationDeactivateOpen, setNotificationDeactivateOpen] = useState(false);
    const [notificationLoading, setNotificationLoading] = 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 handleDeactivateNotification = async () => {
        setNotificationLoading(true);
        const res = await dispatch(deactivateAddonPlugin({ addon: 'lazytasks-notification' }));
        setNotificationLoading(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __( 'Notification Addon', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 3000 });
        if (ok) { setNotificationDeactivateOpen(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>
                )}

                {/* Notification Addon */}
                {ADDON_REGISTRY.notification.status === 'released' ? (
                    <div style={addonCardStyle(notificationAddonState === '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.notification.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>} stroke={ADDON_REGISTRY.notification.iconColor} size={20} />
                            </div>
                            <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', borderRadius: 20, background: notificationAddonState === 'installed_active' ? '#DCFCE7' : '#F1F5F9', color: notificationAddonState === 'installed_active' ? '#15803D' : S.light }}>
                                {notificationAddonState === 'installed_active' ? __( 'Active', 'lazytasks-project-task-management' ) : notificationAddonState === '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.notification.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.notification.desc}</div>
                        <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            {notificationAddonState === 'not_installed' && (
                                <Btn variant="secondary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => { setActiveAddonSlug(ADDON_REGISTRY.notification.slug); setAddonModalOpen(true); }}>{__( 'Install Notification', 'lazytasks-project-task-management' )}</Btn>
                            )}
                            {notificationAddonState === 'installed_inactive' && (
                                <Btn variant="primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => { setActiveAddonSlug(ADDON_REGISTRY.notification.slug); setAddonModalOpen(true); }}>{__( 'Activate Notification', 'lazytasks-project-task-management' )}</Btn>
                            )}
                            {notificationAddonState === 'installed_active' && (
                                <Btn variant="danger" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setNotificationDeactivateOpen(true)}>{__( 'Deactivate Notification', '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.notification.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Icon d={<><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>} stroke={ADDON_REGISTRY.notification.iconColor} size={20} />
                            </div>
                        </div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: S.text, marginTop: 10 }}>{ADDON_REGISTRY.notification.name}</div>
                        <div style={{ fontSize: 12, color: S.muted, marginTop: 4, lineHeight: 1.5 }}>{ADDON_REGISTRY.notification.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>
            )}

            {notificationDeactivateOpen && (
                <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 Notification', 'lazytasks-project-task-management' )}</div>
                        <div style={{ fontSize: 13, color: S.muted, marginBottom: 20 }}>{__( 'Are you sure you want to deactivate the Notification addon? The built-in notification system will take over again.', 'lazytasks-project-task-management' )}</div>
                        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                            <Btn variant="ghost" onClick={() => setNotificationDeactivateOpen(false)}>{__( 'Cancel', 'lazytasks-project-task-management' )}</Btn>
                            <Btn variant="danger" onClick={handleDeactivateNotification} disabled={notificationLoading}>{notificationLoading ? __( '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 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, letterSpacing: '0.5px', color: S.light }}>{__('Section name', 'lazytasks-project-task-management')}</div>
                            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light, textAlign: 'right' }}>{__('Cards', 'lazytasks-project-task-management')}</div>
                            <div style={{ fontSize: 11, fontWeight: 700, 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, letterSpacing: '0.5px', color: S.light, textAlign: 'center' }}>{__('Color', 'lazytasks-project-task-management')}</div>
                        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light }}>{__('Name', 'lazytasks-project-task-management')}</div>
                        <div style={{ fontSize: 11, fontWeight: 700, 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, letterSpacing: '0.5px', color: S.light, textAlign: 'center' }}>{__('Color', 'lazytasks-project-task-management')}</div>
                        <div style={{ fontSize: 11, fontWeight: 700, 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, 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, letterSpacing: '0.5px', color: S.light }}>{__('Trello member', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light }}>{__('WordPress user', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, 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, letterSpacing: '0.5px', color: S.light }}>{__('Invited user', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, 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, visitedSteps, isLoading, error, preview, todoistDataKey, memberMapping, priorityMapping, wpUsers, members, todoistPriorities, notices, results, linkState, takingOver, cancelling, selectedWorkspaceId, workspaceDraft, creatingWorkspace, projectDraft, memberRoles, extraMembers, notifyMembers, sectionPlan, tagPlan, navbarSettings, tasks, taskAssignments } = useSelector(s => s.settings.todoistImport);
    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 [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('');
    const [showCreateWorkspace, setShowCreateWorkspace] = useState(false);

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

    // Destination workspace — slice-backed; falls back to first company until the user picks one.
    const companyId = selectedWorkspaceId || companies?.[0]?.id || loggedInUser?.companyId || 1;

    // superadmin isn't a project-level role.
    const assignableRoles = (roles || []).filter(r => r.slug !== 'superadmin');

    const handleFileSelect = (file) => {
        if (!file) return;
        if (!/\.csv$/i.test(file.name)) {
            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 = () => {
        const sectionPlanPayload = (sectionPlan || []).map((row, idx) => ({
            original_name: row.original_name,
            name: row.name,
            skip: !!row.skip,
            sort_order: idx + 1,
        }));
        const tagPlanPayload = (tagPlan || []).map(t => ({
            original_name: t.original_name,
            name: t.name,
            skip: !!t.skip,
        }));
        dispatch(runTodoistImport({
            todoist_data_key: todoistDataKey,
            link_id: linkState?.link_id || null,
            company_id: companyId,
            project_name: projectDraft.name,
            project_description: projectDraft.description,
            member_mapping: memberMapping,
            member_roles: memberRoles,
            extra_members: extraMembers,
            notify_members: notifyMembers,
            priority_mapping: priorityMapping,
            section_plan: sectionPlanPayload,
            tag_plan: tagPlanPayload,
            task_assignments: taskAssignments || {},
            navbar_settings: {
                list:       true, // always-on; mirrors 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),
            },
        }));
    };

    // 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(cancelTodoistWizard(linkState.link_id));
        } else {
            dispatch(resetTodoistImport());
        }
        if (fileRef.current) fileRef.current.value = '';
    };

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

    // Renders the step navbar above the current step's body.
    const renderWithStepper = (body) => (
        <>
            <TodoistImportStepper
                currentStep={step}
                visitedSteps={visitedSteps}
                linkState={linkState}
                onStepClick={(id) => dispatch(setTodoistStep(id))}
            />
            {body}
        </>
    );

    // ── Step 1a: Banner for already-imported projects (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 Todoist project 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 project 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 project 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 Todoist project. 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 projects currently being imported by someone else ──
    if (step === 'upload' && linkState?.status === 'conflict_other_user') {
        return (
            <>
                <SectionHeader
                    title={__('Another user is importing this project', 'lazytasks-project-task-management')}
                    desc={__('Only one wizard can run for a given Todoist project 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 project.', '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>
            </>
        );
    }

    // 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 === 'upload') {
        return renderWithStepper(
            <>
                <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>
            </>
        );
    }

    // ── 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(setTodoistCreatingWorkspace(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(setTodoistWorkspaceId(newCompany.id));
                    dispatch(updateTodoistWorkspaceDraft({ field: 'name', value: '' }));
                    dispatch(updateTodoistWorkspaceDraft({ 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(setTodoistCreatingWorkspace(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(setTodoistStep('preview'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setTodoistStep('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(setTodoistWorkspaceId(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(updateTodoistWorkspaceDraft({ field: 'name', value: e.target.value }))}
                                    placeholder={__('My Team Workspace', '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>
            </>
        );
    }

    // ── Project ──
    if (step === 'project-entry') {
        const canContinue = !!projectDraft.name?.trim();
        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Project Details', 'lazytasks-project-task-management')}
                    desc={__('Name the project that will be created from this Todoist export.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setTodoistStep('workspace'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setTodoistStep('member-mapping'))} disabled={!canContinue}>
                                {__('Continue', 'lazytasks-project-task-management')} →
                            </Btn>
                        </div>
                    }
                />
                <Card>
                    <div style={{ marginBottom: 14 }}>
                        <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: S.text, marginBottom: 6 }}>{__('Project name', 'lazytasks-project-task-management')}</label>
                        <input type="text" value={projectDraft.name} onChange={(e) => dispatch(updateTodoistProjectDraft({ field: 'name', value: e.target.value }))} placeholder={__('Project name', 'lazytasks-project-task-management')} style={{ ...inputStyle, width: '100%' }} />
                    </div>
                    <div>
                        <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: S.text, marginBottom: 6 }}>{__('Description (optional)', 'lazytasks-project-task-management')}</label>
                        <textarea value={projectDraft.description} onChange={(e) => dispatch(updateTodoistProjectDraft({ field: 'description', value: e.target.value }))} placeholder={__('Add a short description…', 'lazytasks-project-task-management')} rows={4} style={{ ...inputStyle, width: '100%', resize: 'vertical' }} />
                    </div>
                </Card>
            </>
        );
    }

    // ── Members ──
    if (step === 'member-mapping') {
        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 };
        });
        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;
            }
            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 {
                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;
                }
                dispatch(appendTodoistWpUser({ id: parseInt(newUserId), display_name: (inviteFirstName + ' ' + inviteLastName).trim() || emailValue, email: emailValue }));
                dispatch(addTodoistExtraMember({ 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);
            }
        };
        const ownerId = parseInt(loggedInUser?.id || 0);
        // Add-existing picker lists every member — no "already matched/added"
        // filtering (re-adds are de-duped in the addExtraMember reducer). Only the
        // importer themselves is excluded, since adding yourself is a no-op.
        const availableUsers = (wpUsers || []).filter((u) => u.id !== ownerId);
        const handleAddExisting = () => {
            const wpUserId = existingPickUserId ? parseInt(existingPickUserId) : null;
            if (!wpUserId) return;
            dispatch(addTodoistExtraMember({ wpUserId, roleId: existingPickRoleId ? parseInt(existingPickRoleId) : null }));
            setExistingPickUserId(''); setExistingPickRoleId('');
        };
        // A project role is required for every user in the import. Block Continue
        // until each mapped Todoist member and each added/invited user has one.
        // Skipped when no assignable roles exist (the dropdowns can't be satisfied).
        const matchedMissingRole = memberInfo.filter((m) => m.isMatched && !memberRoles[m.wpId]);
        const extraMissingRole = (extraMembers || []).filter((m) => !m.role_id);
        const rolesComplete = assignableRoles.length === 0 || (matchedMissingRole.length === 0 && extraMissingRole.length === 0);
        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Add Members', 'lazytasks-project-task-management')}
                    desc={__('Todoist members matched by name are pre-mapped to WordPress users. Pick a project role for each, invite new people, 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(setTodoistStep('project-entry'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setTodoistStep('sections'))} disabled={!rolesComplete}>
                                {__('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>
                )}
                {!rolesComplete && (
                    <div style={{ marginBottom: 16, padding: '10px 14px', background: '#FFFBEB', border: `1px solid #FDE68A`, borderRadius: S.radiusSm, color: '#92400E', fontSize: 12 }}>
                        {__('Pick a project role for every mapped and added user before continuing.', 'lazytasks-project-task-management')}
                    </div>
                )}
                <Card>
                    {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: '1.4fr 1.4fr 1fr 40px', gap: 12, padding: '0 0 12px', borderBottom: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light }}>{__('Todoist member', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light }}>{__('WordPress user', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light }}>{__('Project role', 'lazytasks-project-task-management')}</div>
                                <div></div>
                            </div>
                            {memberInfo.map((m) => {
                                const currentRoleId = m.wpId ? memberRoles[m.wpId] || '' : '';
                                return (
                                    <div key={m.todoist_name} 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.todoist_name}</div>
                                        </div>
                                        <select
                                            value={memberMapping[m.todoist_name] || ''}
                                            onChange={(e) => {
                                                const newWpId = e.target.value ? parseInt(e.target.value) : null;
                                                if (m.wpId && m.wpId !== newWpId) {
                                                    dispatch(setTodoistMemberRole({ wpUserId: m.wpId, roleId: null }));
                                                }
                                                dispatch(updateTodoistMemberMapping({ todoistName: m.todoist_name, 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(setTodoistMemberRole({ 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, ...(m.wpId && !currentRoleId ? { borderColor: S.danger } : {}) }}
                                        >
                                            <option value="">{__('— Select role —', '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>
                                );
                            })}
                        </div>
                    )}
                </Card>

                <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={{ 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', ...(inviteEmail.trim() && !inviteRoleId ? { borderColor: S.danger } : {}) }}>
                            <option value="">{__('— Select role —', '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() || !inviteRoleId}>
                            {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, letterSpacing: '0.5px', color: S.light }}>{__('Added user', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, 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(updateTodoistExtraMemberRole({ wpUserId: m.wp_user_id, roleId: e.target.value ? parseInt(e.target.value) : null }))} style={{ ...inputStyle, cursor: 'pointer', ...(!m.role_id ? { borderColor: S.danger } : {}) }}>
                                            <option value="">{__('— Select role —', 'lazytasks-project-task-management')}</option>
                                            {assignableRoles.map(r => (<option key={r.id} value={r.id}>{r.name}</option>))}
                                        </select>
                                        <button type="button" onClick={() => dispatch(removeTodoistExtraMember(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>
                    )}
                </Card>

                <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>
                    {availableUsers.length === 0 ? (
                        <div style={{ fontSize: 12, color: S.muted, fontStyle: 'italic', padding: '8px 0' }}>
                            {__('No additional users available to add.', '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})</option>))}
                            </select>
                            <select value={existingPickRoleId} onChange={(e) => setExistingPickRoleId(e.target.value)} style={{ ...inputStyle, cursor: 'pointer', ...(existingPickUserId && !existingPickRoleId ? { borderColor: S.danger } : {}) }}>
                                <option value="">{__('— Select role —', '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 || !existingPickRoleId}>{__('+ Add', 'lazytasks-project-task-management')}</Btn>
                        </div>
                    )}
                </Card>

                <Card style={{ marginTop: 16 }}>
                    <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
                        <input type="checkbox" checked={!!notifyMembers} onChange={(e) => dispatch(setTodoistNotifyMembers(e.target.checked))} />
                        <span style={{ fontSize: 13, color: S.text }}>{__('Notify added members that they were added to this project', 'lazytasks-project-task-management')}</span>
                    </label>
                </Card>
            </>
        );
    }

    // ── Sections ──
    if (step === 'sections') {
        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Sections', 'lazytasks-project-task-management')}
                    desc={__('Rename, reorder, or skip sections. Skipped sections — and their tasks — won\'t be imported.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setTodoistStep('member-mapping'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setTodoistStep('settings'))}>{__('Continue', 'lazytasks-project-task-management')} →</Btn>
                        </div>
                    }
                />
                <Card>
                    {(!sectionPlan || sectionPlan.length === 0) ? (
                        <div style={{ textAlign: 'center', padding: '32px 0', color: S.muted, fontSize: 13 }}>
                            {__('No sections in this export — a default "Tasks" section will be created.', 'lazytasks-project-task-management')}
                        </div>
                    ) : (
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            <div style={{ display: 'grid', gridTemplateColumns: '2fr 64px 64px', gap: 12, padding: '0 0 12px', borderBottom: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light }}>{__('Section name', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light, textAlign: 'center' }}>{__('Move', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light, textAlign: 'center' }}>{__('Skip', 'lazytasks-project-task-management')}</div>
                            </div>
                            {sectionPlan.map((row, idx) => (
                                <div key={row.key} style={{ display: 'grid', gridTemplateColumns: '2fr 64px 64px', gap: 12, padding: '12px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'center' }}>
                                    <input type="text" value={row.name} onChange={(e) => dispatch(setTodoistSectionName({ key: row.key, name: e.target.value }))} disabled={row.skip} style={{ ...inputStyle, opacity: row.skip ? 0.5 : 1, textDecoration: row.skip ? 'line-through' : 'none' }} />
                                    <div style={{ display: 'flex', justifyContent: 'center', gap: 4 }}>
                                        <button type="button" disabled={idx === 0} onClick={() => dispatch(reorderTodoistSectionPlan({ sourceIndex: idx, destinationIndex: idx - 1 }))} style={{ background: 'transparent', border: `1px solid ${S.border}`, borderRadius: 4, cursor: idx === 0 ? 'not-allowed' : 'pointer', opacity: idx === 0 ? 0.4 : 1, padding: '2px 6px', color: S.muted }}>↑</button>
                                        <button type="button" disabled={idx === sectionPlan.length - 1} onClick={() => dispatch(reorderTodoistSectionPlan({ sourceIndex: idx, destinationIndex: idx + 1 }))} style={{ background: 'transparent', border: `1px solid ${S.border}`, borderRadius: 4, cursor: idx === sectionPlan.length - 1 ? 'not-allowed' : 'pointer', opacity: idx === sectionPlan.length - 1 ? 0.4 : 1, padding: '2px 6px', color: S.muted }}>↓</button>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                                        <input type="checkbox" checked={!!row.skip} onChange={(e) => dispatch(setTodoistSectionSkip({ key: row.key, skip: e.target.checked }))} />
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </Card>
            </>
        );
    }

    // ── Step 2: Preview ──
    if (step === 'preview') {
        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 renderWithStepper(
            <>
                <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('workspace'))}>
                                {__('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>
                )}
            </>
        );
    }

    // ── Tags ──
    if (step === 'tags') {
        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Tags', 'lazytasks-project-task-management')}
                    desc={__('Todoist @labels become tags. Rename or skip any before import.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setTodoistStep('settings'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setTodoistStep('tasks'))}>{__('Continue', 'lazytasks-project-task-management')} →</Btn>
                        </div>
                    }
                />
                <Card>
                    {(!tagPlan || tagPlan.length === 0) ? (
                        <div style={{ textAlign: 'center', padding: '32px 0', color: S.muted, fontSize: 13 }}>
                            {__('No @labels found in this export.', 'lazytasks-project-task-management')}
                        </div>
                    ) : (
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            <div style={{ display: 'grid', gridTemplateColumns: '2fr 80px', gap: 12, padding: '0 0 12px', borderBottom: `1px solid ${S.border}` }}>
                                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light }}>{__('Tag name', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.5px', color: S.light, textAlign: 'center' }}>{__('Skip', 'lazytasks-project-task-management')}</div>
                            </div>
                            {tagPlan.map((row) => (
                                <div key={row.key} style={{ display: 'grid', gridTemplateColumns: '2fr 80px', gap: 12, padding: '12px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'center' }}>
                                    <input type="text" value={row.name} onChange={(e) => dispatch(setTodoistTagName({ key: row.key, name: e.target.value }))} disabled={row.skip} style={{ ...inputStyle, opacity: row.skip ? 0.5 : 1, textDecoration: row.skip ? 'line-through' : 'none' }} />
                                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                                        <input type="checkbox" checked={!!row.skip} onChange={(e) => dispatch(setTodoistTagSkip({ key: row.key, skip: e.target.checked }))} />
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </Card>
            </>
        );
    }

    // ── Settings (Views) ──
    if (step === 'settings') {
        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Project Settings', 'lazytasks-project-task-management')}
                    desc={__('Map Todoist priorities and choose which views the imported project shows.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setTodoistStep('sections'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setTodoistStep('tags'))}>{__('Continue', 'lazytasks-project-task-management')} →</Btn>
                        </div>
                    }
                />

                {/* Priority mapping (Todoist P1–P4 → LazyTasks priority names) */}
                {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={{ textAlign: 'center', padding: '24px 0', color: S.muted, fontSize: 13 }}>
                            {__('No priorities used in this export.', 'lazytasks-project-task-management')}
                        </div>
                    </Card>
                ) : (
                    <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, letterSpacing: '0.5px', color: S.light }}>{__('Todoist priority', 'lazytasks-project-task-management')}</div>
                                <div style={{ fontSize: 11, fontWeight: 700, 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>
                )}

                {/* Project views */}
                <Card>
                    {[
                        { 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(setTodoistNavbarToggle({ key: row.key, value: e.target.checked }))}
                                        style={{ width: 18, height: 18, cursor: 'pointer', flexShrink: 0 }}
                                    />
                                )}
                            </label>
                        );
                    })}
                </Card>
            </>
        );
    }

    // ── Tasks (section-wise list + assign unsectioned tasks) ──
    if (step === 'tasks') {
        const tasksList = tasks || [];
        const unsectioned = tasksList.filter(t => !t.section);
        const availableSections = (sectionPlan || []).filter(s => !s.skip);
        // Group top-level tasks under their (original) section name.
        const tasksBySection = {};
        tasksList.forEach(t => {
            if (!t.section) return;
            (tasksBySection[t.section] = tasksBySection[t.section] || []).push(t);
        });
        const subtasksCount = preview?.subtasks_count || 0;
        const notesCount = preview?.notes_count || 0;
        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 };
        const selectStyle = { padding: '6px 10px', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, fontSize: 12, color: S.text, background: '#fff', cursor: 'pointer', minWidth: 180 };
        // Top-level tasks that will actually import (unsectioned always do).
        const includedCount = tasksList.filter(t => {
            if (!t.section) return true;
            const plan = (sectionPlan || []).find(s => s.original_name === t.section);
            return !plan || !plan.skip;
        }).length;

        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Tasks', 'lazytasks-project-task-management')}
                    desc={__('Tasks grouped by section. Tasks with no section are listed separately — assign each to a section below.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setTodoistStep('tags'))}>← {__('Back', 'lazytasks-project-task-management')}</Btn>
                            <Btn variant="primary" onClick={() => dispatch(setTodoistStep('review'))}>{__('Continue', 'lazytasks-project-task-management')} →</Btn>
                        </div>
                    }
                />

                {/* Summary stats */}
                <Card>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                        <div style={statCellStyle}>
                            <div style={statNumStyle}>{includedCount}</div>
                            <div style={statLabelStyle}>{__('Tasks to import', 'lazytasks-project-task-management')}</div>
                        </div>
                        <div style={statCellStyle}>
                            <div style={statNumStyle}>{subtasksCount}</div>
                            <div style={statLabelStyle}>{__('Subtasks', 'lazytasks-project-task-management')}</div>
                        </div>
                        <div style={statCellStyle}>
                            <div style={statNumStyle}>{notesCount}</div>
                            <div style={statLabelStyle}>{__('Notes', 'lazytasks-project-task-management')}</div>
                        </div>
                    </div>
                </Card>

                {/* Unsectioned tasks — assign each to an available section */}
                {unsectioned.length > 0 && (
                    <Card style={{ marginTop: 16, borderColor: S.orange }}>
                        <CardTitle icon={<><path d="M10.29 3.86 1.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"/></>}>
                            {sprintf(
                                /* translators: %d: number of tasks with no section */
                                __('Unsectioned tasks (%d)', 'lazytasks-project-task-management'),
                                unsectioned.length
                            )}
                        </CardTitle>
                        <div style={{ fontSize: 12, color: S.muted, marginBottom: 14 }}>
                            {availableSections.length > 0
                                ? __('These tasks had no section in the CSV. Assign each to a section — anything left unassigned imports into the first section.', 'lazytasks-project-task-management')
                                : __('These tasks had no section in the CSV. With no sections to assign to, they import into a default section.', 'lazytasks-project-task-management')}
                        </div>
                        {unsectioned.map(t => (
                            <div key={t.index} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '10px 0', borderBottom: `1px solid ${S.border}`, alignItems: 'center' }}>
                                <div style={{ fontSize: 13, color: S.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                    {t.name || __('(untitled task)', 'lazytasks-project-task-management')}
                                </div>
                                {availableSections.length > 0 && (
                                    <select
                                        value={(taskAssignments && taskAssignments[t.index]) || ''}
                                        onChange={(e) => dispatch(setTodoistTaskAssignment({ index: t.index, section: e.target.value }))}
                                        style={selectStyle}
                                    >
                                        <option value="">{__('— Assign to section —', 'lazytasks-project-task-management')}</option>
                                        {availableSections.map(s => (
                                            <option key={s.key} value={s.original_name}>{s.name}</option>
                                        ))}
                                    </select>
                                )}
                            </div>
                        ))}
                    </Card>
                )}

                {/* Section-wise task list */}
                <Card style={{ marginTop: 16 }}>
                    <CardTitle icon={<><path d="M3 3v18h18"/><path d="M7 16h8M7 11h12M7 6h5"/></>}>
                        {__('Tasks by section', 'lazytasks-project-task-management')}
                    </CardTitle>
                    {(!sectionPlan || sectionPlan.length === 0) ? (
                        <div style={{ textAlign: 'center', padding: '24px 0', color: S.muted, fontSize: 13 }}>
                            {__('No sections found — all tasks import into the default section.', 'lazytasks-project-task-management')}
                        </div>
                    ) : (
                        sectionPlan.map(s => {
                            const sTasks = tasksBySection[s.original_name] || [];
                            const skipped = !!s.skip;
                            return (
                                <div key={s.key} style={{ marginBottom: 14 }}>
                                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 0', borderBottom: `1px solid ${S.border}` }}>
                                        <div style={{ fontSize: 13, fontWeight: 700, color: skipped ? S.muted : S.text, textDecoration: skipped ? 'line-through' : 'none' }}>
                                            {s.name || __('(unnamed)', 'lazytasks-project-task-management')}
                                            {skipped && <span style={{ marginLeft: 8, fontSize: 11, fontWeight: 600, color: S.orange, textDecoration: 'none' }}>{__('excluded', 'lazytasks-project-task-management')}</span>}
                                        </div>
                                        <div style={{ fontSize: 12, color: S.muted, fontVariantNumeric: 'tabular-nums' }}>
                                            {sTasks.length}
                                        </div>
                                    </div>
                                    {sTasks.length === 0 ? (
                                        <div style={{ fontSize: 12, color: S.light, padding: '8px 0 4px' }}>{__('No tasks.', 'lazytasks-project-task-management')}</div>
                                    ) : (
                                        sTasks.map(t => (
                                            <div key={t.index} style={{ fontSize: 13, color: skipped ? S.light : S.text, padding: '6px 0 6px 4px', borderBottom: `1px solid ${S.border}`, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textDecoration: skipped ? 'line-through' : 'none' }}>
                                                {t.name || __('(untitled task)', 'lazytasks-project-task-management')}
                                            </div>
                                        ))
                                    )}
                                </div>
                            );
                        })
                    )}
                </Card>
            </>
        );
    }

    // ── Review ──
    if (step === 'review') {
        const selectedCompany = companies.find(c => c.id === companyId || c.id === parseInt(companyId));
        const mappedCount = Object.values(memberMapping || {}).filter(Boolean).length;
        const extraCount = (extraMembers || []).length;
        const skippedSections = (sectionPlan || []).filter(s => s.skip).length;
        const skippedTags = (tagPlan || []).filter(t => t.skip).length;
        const enabledViews = ['list', ...Object.keys(navbarSettings || {}).filter(k => k !== 'list' && navbarSettings[k])];
        const reviewRows = [
            { label: __('Workspace', 'lazytasks-project-task-management'), value: selectedCompany?.name || `#${companyId}` },
            { label: __('Project name', 'lazytasks-project-task-management'), value: projectDraft.name || preview?.project_name },
            { label: __('Sections', 'lazytasks-project-task-management'), value: `${(sectionPlan || []).length - skippedSections} ${__('included', 'lazytasks-project-task-management')}${skippedSections ? `, ${skippedSections} ${__('skipped', 'lazytasks-project-task-management')}` : ''}` },
            { label: __('Tags', 'lazytasks-project-task-management'), value: `${(tagPlan || []).length - skippedTags} ${__('included', 'lazytasks-project-task-management')}${skippedTags ? `, ${skippedTags} ${__('skipped', 'lazytasks-project-task-management')}` : ''}` },
            { label: __('Members', 'lazytasks-project-task-management'), value: `${mappedCount + extraCount} ${__('to add', 'lazytasks-project-task-management')}` },
            { label: __('Views', 'lazytasks-project-task-management'), value: enabledViews.join(', ') },
            { label: __('Notify members', 'lazytasks-project-task-management'), value: notifyMembers ? __('Yes', 'lazytasks-project-task-management') : __('No', 'lazytasks-project-task-management') },
        ];
        return renderWithStepper(
            <>
                <SectionHeader
                    title={__('Review & Import', 'lazytasks-project-task-management')}
                    desc={__('Confirm your choices, then start the import.', 'lazytasks-project-task-management')}
                    actions={
                        <div style={{ display: 'flex', gap: 8 }}>
                            <Btn variant="ghost" onClick={() => dispatch(setTodoistStep('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>
                )}
                <Card>
                    {reviewRows.map((r, i) => (
                        <div key={i} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 12, padding: '10px 0', borderBottom: i < reviewRows.length - 1 ? `1px solid ${S.border}` : 'none' }}>
                            <div style={{ fontSize: 12, color: S.muted, fontWeight: 600 }}>{r.label}</div>
                            <div style={{ fontSize: 13, color: S.text }}>{r.value}</div>
                        </div>
                    ))}
                </Card>
            </>
        );
    }

    // ── Step 4: Importing ──
    if (step === 'importing') {
        return renderWithStepper(
            <>
                <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 === 'results' && 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 renderWithStepper(
            <>
                <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"/></> },
            ],
        },
        /* 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;