import React, { useEffect, useState, useMemo, useRef } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { useDispatch, useSelector } from 'react-redux';
import { useSearchParams } from 'react-router-dom';
import useAvailableHeight from '../../../utils/useAvailableHeight';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { showNotification } from '@mantine/notifications';
import { Paper, Text, Group, TextInput, Button, ActionIcon, Modal, Tooltip, Badge, ThemeIcon } from '@mantine/core';
import { IconSearch, IconPlus, IconX } from '@tabler/icons-react';
import {
    fetchAllCompanies,
    createCompany,
    editCompany,
    deleteCompany,
    reorderCompanies,
    setCompaniesOrder,
} from '../store/companySlice';
import {
    fetchAllProjects,
    createProject,
    deleteProject,
    reorderProjects,
    setProjectsOrder,
} from '../store/projectSlice';
import { archiveProject, unarchiveProject } from '../store/taskSlice';
import ProjectSettingsModal from '../../Elements/Project/ProjectSettingsModal';
import { fetchUserPermissions } from '../../../store/auth/permissionsSlice';
import { hasPermission } from '../../ui/permissions';
import UsersAvatarGroup from '../../ui/UsersAvatarGroup';

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', dangerLt: '#FEE2E2', success: '#10B981', successLt: '#D1FAE5',
    warning: '#F59E0B', warningLt: '#FEF3C7', warningDk: '#92400E',
    shadow: '0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05)',
    radius: 12, radiusSm: 6,
};

const WS_COLORS = ['#39758D', '#ED7D31', '#8B5CF6', '#10B981', '#3B82F6', '#F59E0B', '#EF4444', '#06B6D4'];
const wsColor = (id) => WS_COLORS[(parseInt(id) || 0) % WS_COLORS.length];
const getInitials = (name) => (name?.[0] || '?').toUpperCase();
const AVATAR_COLORS = WS_COLORS;
const getAvatarColor = (id) => AVATAR_COLORS[(parseInt(id) - 1) % AVATAR_COLORS.length];
const getMemberInitials = (m) => {
    const f = m.first_name || m.firstName || m.name?.split(' ')[0] || '';
    const l = m.last_name || m.lastName || m.name?.split(' ')[1] || '';
    return ((f[0] || '') + (l[0] || '')).toUpperCase() || '?';
};

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

/* ─── Small icon-only button ──────────────────────────── */
const IconBtn = ({ children, variant = 'ghost', onClick, title, disabled }) => {
    const colorMap = { ghost: 'gray', danger: 'red', teal: 'teal' };
    return (
        <Tooltip label={title} withArrow disabled={!title}>
            <ActionIcon variant="subtle" color={colorMap[variant] || 'gray'} size="sm"
                onClick={onClick} disabled={disabled}>
                {children}
            </ActionIcon>
        </Tooltip>
    );
};


const inputStyle = { height: 36, padding: '0 12px', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, fontSize: 14, fontFamily: 'inherit', outline: 'none', color: S.text, width: '100%', boxSizing: 'border-box' };
const thStyle = { textAlign: 'left', padding: '8px 12px', fontWeight: 600, color: S.muted, fontSize: 11, textTransform: 'uppercase', letterSpacing: '.5px' };

/* ─── Warning banner ──────────────────────────────────── */
const WarningBanner = ({ children, variant = 'warning' }) => {
    const colors = {
        warning: { bg: S.warningLt, border: S.warning, text: S.warningDk },
        danger: { bg: S.dangerLt, border: S.danger, text: S.danger },
        info: { bg: S.tealLt, border: S.teal, text: S.tealDk },
    };
    const c = colors[variant] || colors.warning;
    return (
        <div style={{ background: c.bg, border: `1px solid ${c.border}`, borderRadius: S.radiusSm, padding: '10px 12px', marginBottom: 14 }}>
            <div style={{ fontSize: 13, color: c.text, fontWeight: 500 }}>{children}</div>
        </div>
    );
};

/* ─── SVG Icons ───────────────────────────────────────── */
const PencilIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
    </svg>
);
const TrashIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
        <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/>
    </svg>
);
const TrashIconLg = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 22, height: 22 }}>
        <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/>
    </svg>
);
const PlusIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
    </svg>
);
const SettingsIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 13, height: 13 }}>
        <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
    </svg>
);
const DragHandleIcon = () => (
    <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: 14, height: 14 }}>
        <circle cx="9" cy="5" r="1.5"/><circle cx="15" cy="5" r="1.5"/>
        <circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/>
        <circle cx="9" cy="19" r="1.5"/><circle cx="15" cy="19" r="1.5"/>
    </svg>
);
const SearchIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
    </svg>
);
const ChevronDownIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
        <polyline points="6 9 12 15 18 9"/>
    </svg>
);
const ChevronUpIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
        <polyline points="18 15 12 9 6 15"/>
    </svg>
);
const FilterXIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 12, height: 12 }}>
        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
    </svg>
);
const UsersIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
        <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"/>
    </svg>
);

const StatusBadge = ({ status, onClick, clickable }) => {
    const isActive = String(status) === '1';
    const [hov, setHov] = useState(false);
    return (
        <span
            onClick={clickable ? onClick : undefined}
            onMouseEnter={() => setHov(true)}
            onMouseLeave={() => setHov(false)}
            style={{
                background: isActive ? '#D1FAE5' : '#F1F5F9',
                color: isActive ? '#065F46' : '#64748B',
                fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 20,
                cursor: clickable ? 'pointer' : 'default',
                outline: clickable && hov ? `2px solid ${isActive ? S.success : S.muted}` : 'none',
                outlineOffset: 1,
                transition: 'outline .15s',
            }}
        >
            {isActive ? __('Active', 'lazytasks-project-task-management') : __('Archived', 'lazytasks-project-task-management')}
        </span>
    );
};

/* ─── Stat card ───────────────────────────────────────── */
const StatCard = ({ label, value, color }) => (
    <Paper withBorder radius="sm" px={12} py={6} miw={70} style={{ textAlign: 'center' }}>
        <Text fw={700} fz={14} c={color || S.text}>{value}</Text>
        <Text fz={10} fw={600} c="dimmed" tt="uppercase" style={{ letterSpacing: '0.04em', marginTop: 2 }}>{label}</Text>
    </Paper>
);

/* ─── Select dropdown (simple) ────────────────────────── */
const SimpleSelect = ({ value, onChange, options, placeholder, style: extra }) => (
    <select
        value={value || ''}
        onChange={e => onChange(e.target.value || null)}
        style={{ height: 30, padding: '0 8px', border: `1px solid ${S.border}`, borderRadius: S.radiusSm, fontSize: 12, fontFamily: 'inherit', color: value ? S.text : S.light, background: S.white, outline: 'none', cursor: 'pointer', ...extra }}
    >
        <option value="">{placeholder}</option>
        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
);

/* ─── Spinner ─────────────────────────────────────────── */
const Spinner = () => (
    <div style={{ display: 'flex', justifyContent: 'center', padding: 60 }}>
        <div style={{ width: 32, height: 32, border: `3px solid ${S.border}`, borderTopColor: S.teal, borderRadius: '50%', animation: 'wp-spin 0.6s linear infinite' }} />
        <style>{`@keyframes wp-spin { to { transform: rotate(360deg); } }`}</style>
    </div>
);

const WorkspaceProjectsTabV3 = () => {
    const dispatch = useDispatch();
    const [, setSearchParams] = useSearchParams();
    const { companies, isLoading: wsLoading } = useSelector(s => s.settings.company);
    const { projects } = useSelector(s => s.settings.project);
    const { loggedInUser } = useSelector(s => s.auth.session);
    const { projects: memberProjects, isLoaded: permissionsLoaded } = useSelector(s => s.auth.permissions);

    const isSuperadmin = loggedInUser?.is_superadmin ?? false;
    const isWpAdmin = loggedInUser?.roles?.includes('administrator');
    const isAdmin = isSuperadmin || isWpAdmin;

    const canManageWorkspace = hasPermission(loggedInUser, ['manage-workspace'], null, 'global');
    const canDeleteWorkspace = hasPermission(loggedInUser, ['delete-workspace'], null, 'global');
    const canManageProjectGlobal = hasPermission(loggedInUser, ['manage-project'], null, 'global');
    const canDeleteProject   = hasPermission(loggedInUser, ['delete-project'], null, 'global');
    const canArchiveProject  = hasPermission(loggedInUser, ['manage-project'], null, 'global');
    const canManageUsers     = hasPermission(loggedInUser, ['manage-users'], null, 'global');

    const canManageProject = (projectId) => {
        const projectPerms = memberProjects[String(projectId)]?.permissions ?? [];
        return hasPermission(loggedInUser, ['config-project', 'manage-project-members', 'remove-project-member'], projectPerms, 'project');
    };

    const visibleCompanies = (isAdmin || !permissionsLoaded)
        ? companies
        : companies?.filter(ws => {
            const hasProject = Object.values(memberProjects).some(
                p => String(p.company_id) === String(ws.id)
            );
            const isDirectMember = ws.members?.some(
                m => String(m.id) === String(loggedInUser?.loggedUserId)
            );
            return hasProject || isDirectMember;
        });

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

    // ─── Search & Filter state ───
    const [search, setSearch] = useState('');
    const [statusFilter, setStatusFilter] = useState(null);

    // ─── Scroll container height ───
    const wsScrollRef = useRef(null);
    const wsMaxH = useAvailableHeight(wsScrollRef, []);

    // ─── Expandable workspace state (all expanded by default) ───
    const [expandedWsIds, setExpandedWsIds] = useState(new Set());
    const initialExpandDone = useRef(false);

    // Expand all workspaces once they load
    useEffect(() => {
        if (!initialExpandDone.current && visibleCompanies && visibleCompanies.length > 0) {
            setExpandedWsIds(new Set(visibleCompanies.map(ws => ws.id)));
            initialExpandDone.current = true;
        }
    }, [visibleCompanies]);

    const toggleExpand = (wsId) => {
        setExpandedWsIds(prev => {
            const next = new Set(prev);
            if (next.has(wsId)) next.delete(wsId);
            else next.add(wsId);
            return next;
        });
    };

    // ─── New workspace ───
    const [newWsModal, setNewWsModal] = useState(false);
    const [newWsName, setNewWsName] = useState('');
    const [newWsLoading, setNewWsLoading] = useState(false);
    const [newWsError, setNewWsError] = useState('');

    // ─── Edit workspace ───
    const [editWs, setEditWs] = useState(null);
    const [editWsLoading, setEditWsLoading] = useState(false);
    const [editWsError, setEditWsError] = useState('');

    // ─── Delete workspace ───
    const [deleteWs, setDeleteWs] = useState(null);
    const [deleteWsLoading, setDeleteWsLoading] = useState(false);
    const [deleteWsConfirm, setDeleteWsConfirm] = useState('');
    // Backend response data for cascade confirmation
    const [deleteWsInfo, setDeleteWsInfo] = useState(null); // { project_count, member_count, task_count, projects }

    // ─── Add project ───
    const [addProjectWs, setAddProjectWs] = useState(null);
    const [addProjectName, setAddProjectName] = useState('');
    const [addProjectLoading, setAddProjectLoading] = useState(false);
    const [addProjectError, setAddProjectError] = useState('');

    // ─── Delete project ───
    const [deletePrj, setDeletePrj] = useState(null);
    const [deletePrjLoading, setDeletePrjLoading] = useState(false);
    const [deletePrjConfirm, setDeletePrjConfirm] = useState('');
    // Backend response data for cascade confirmation
    const [deletePrjInfo, setDeletePrjInfo] = useState(null); // { member_count, task_count }

    // ─── Archive toggle ───
    const [archiveTogglePrj, setArchiveTogglePrj] = useState(null);
    const [archiveLoading, setArchiveLoading] = useState(false);

    // ─── Manage project (ProjectSettingsModal) ───
    const [managePrjId, setManagePrjId] = useState(null);

    // ─── Filtering logic ───
    const filteredData = useMemo(() => {
        if (!visibleCompanies) return [];
        const q = search.toLowerCase().trim();
        return visibleCompanies.map(ws => {
            let wsProjects = projects?.filter(p => parseInt(p.company_id) === parseInt(ws.id)) || [];
            // Status filter
            if (statusFilter === 'active') wsProjects = wsProjects.filter(p => String(p.status) === '1');
            if (statusFilter === 'archived') wsProjects = wsProjects.filter(p => String(p.status) !== '1');
            // Search filter
            if (q) wsProjects = wsProjects.filter(p => p.name?.toLowerCase().includes(q));
            const wsNameMatch = q ? ws.name?.toLowerCase().includes(q) : true;
            // Show workspace if its name matches OR it has matching projects
            if (!wsNameMatch && wsProjects.length === 0 && q) return null;
            return { ws, wsProjects };
        }).filter(Boolean);
    }, [visibleCompanies, projects, search, statusFilter]);

    const hasActiveFilters = search || statusFilter;
    const clearFilters = () => { setSearch(''); setStatusFilter(null); };

    // ─── Stats ───
    const stats = useMemo(() => {
        const allProjects = projects || [];
        const activeP = allProjects.filter(p => String(p.status) === '1').length;
        const archivedP = allProjects.length - activeP;
        // Compute unique members from project members (same source as workspace member preview)
        const uniqueMembers = new Set();
        allProjects.forEach(p => (p.members || []).forEach(m => { if (m.id) uniqueMembers.add(String(m.id)); }));
        return {
            workspaces: visibleCompanies?.length || 0,
            projects: allProjects.length,
            active: activeP,
            archived: archivedP,
            members: uniqueMembers.size,
        };
    }, [visibleCompanies, projects]);

    // ─── Duplicate name checkers ───
    const isDuplicateWsName = (name, excludeId = null) => {
        const n = name?.trim().toLowerCase();
        return (companies || []).some(c => c.name?.toLowerCase() === n && (!excludeId || parseInt(c.id) !== parseInt(excludeId)));
    };
    const isDuplicateProjectName = (name, companyId) => {
        const n = name?.trim().toLowerCase();
        return (projects || []).some(p => p.name?.toLowerCase() === n && parseInt(p.company_id) === parseInt(companyId));
    };

    // ─── Handlers ───

    const handleCreateWs = async () => {
        const trimmed = newWsName.trim();
        if (!trimmed) { setNewWsError('Workspace name is required.'); return; }
        if (isDuplicateWsName(trimmed)) { setNewWsError('A workspace with this name already exists.'); return; }
        setNewWsLoading(true);
        const res = await dispatch(createCompany({ name: trimmed, created_by: loggedInUser?.loggedUserId }));
        setNewWsLoading(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __('Workspace', 'lazytasks-project-task-management'), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 2000 });
        if (ok) { setNewWsName(''); setNewWsError(''); setNewWsModal(false); dispatch(fetchAllCompanies()); }
    };

    const handleEditWs = async () => {
        const trimmed = editWs?.name?.trim();
        if (!trimmed) { setEditWsError('Workspace name is required.'); return; }
        if (isDuplicateWsName(trimmed, editWs.id)) { setEditWsError('A workspace with this name already exists.'); return; }
        setEditWsLoading(true);
        const res = await dispatch(editCompany({ id: editWs.id, data: { name: trimmed, updated_by: loggedInUser } }));
        setEditWsLoading(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __('Workspace', 'lazytasks-project-task-management'), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 2000 });
        if (ok) { setEditWs(null); setEditWsError(''); }
    };

    const handleDeleteWs = async (force = false) => {
        setDeleteWsLoading(true);
        const res = await dispatch(deleteCompany({ id: deleteWs.id, data: { deleted_by: loggedInUser, force } }));
        setDeleteWsLoading(false);
        const payload = res.payload;

        if (payload?.status === 'confirm') {
            // Admin needs to confirm cascade
            setDeleteWsInfo(payload);
            return;
        }
        if (payload?.status === 403) {
            // Non-admin blocked
            setDeleteWsInfo(payload);
            return;
        }
        if (payload?.status === 200) {
            showNotification({ title: __('Workspace', 'lazytasks-project-task-management'), message: payload.message, color: 'green', autoClose: 2000 });
            setDeleteWs(null); setDeleteWsInfo(null); setDeleteWsConfirm('');
            dispatch(fetchAllCompanies()); dispatch(fetchAllProjects());
            return;
        }
        showNotification({ title: __('Workspace', 'lazytasks-project-task-management'), message: payload?.message || __('Failed to delete', 'lazytasks-project-task-management'), color: 'red', autoClose: 3000 });
    };

    const handleDeleteProject = async (force = false) => {
        setDeletePrjLoading(true);
        const res = await dispatch(deleteProject({ id: deletePrj.project.id, data: { deleted_by: loggedInUser, force } }));
        setDeletePrjLoading(false);
        const payload = res.payload;

        if (payload?.status === 'confirm') {
            setDeletePrjInfo(payload);
            return;
        }
        if (payload?.status === 403) {
            setDeletePrjInfo(payload);
            return;
        }
        if (payload?.status === 200) {
            showNotification({ title: __('Project', 'lazytasks-project-task-management'), message: payload.message, color: 'green', autoClose: 2000 });
            setDeletePrj(null); setDeletePrjInfo(null); setDeletePrjConfirm('');
            return;
        }
        showNotification({ title: __('Project', 'lazytasks-project-task-management'), message: payload?.message || __('Failed to delete', 'lazytasks-project-task-management'), color: 'red', autoClose: 3000 });
    };

    const handleAddProject = async () => {
        const trimmed = addProjectName.trim();
        if (!trimmed) { setAddProjectError('Project name is required.'); return; }
        if (isDuplicateProjectName(trimmed, addProjectWs)) { setAddProjectError('A project with this name already exists in this workspace.'); return; }
        setAddProjectLoading(true);
        const res = await dispatch(createProject({ name: trimmed, company_id: addProjectWs, created_by: loggedInUser?.loggedUserId, members: [] }));
        setAddProjectLoading(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: __('Project', 'lazytasks-project-task-management'), message: res.payload?.message || '', color: ok ? 'green' : 'red', autoClose: 2000 });
        if (ok) { setAddProjectName(''); setAddProjectError(''); setAddProjectWs(null); dispatch(fetchAllProjects()); dispatch(fetchUserPermissions()); }
    };

    const handleArchiveToggle = async () => {
        if (!archiveTogglePrj) return;
        const isActive = String(archiveTogglePrj.status) === '1';
        setArchiveLoading(true);
        const thunk = isActive ? archiveProject : unarchiveProject;
        await dispatch(thunk({ id: archiveTogglePrj.id, data: { updated_by: loggedInUser?.loggedUserId } }));
        setArchiveLoading(false);
        showNotification({ title: __('Project', 'lazytasks-project-task-management'), message: isActive ? __('Project archived successfully.', 'lazytasks-project-task-management') : __('Project activated successfully.', 'lazytasks-project-task-management'), color: 'green', autoClose: 2000 });
        setArchiveTogglePrj(null);
        dispatch(fetchAllProjects());
    };

    // ─── Workspace drag-and-drop ───
    const handleWorkspaceDragEnd = (result) => {
        if (!result.destination || result.destination.index === result.source.index) return;
        const reordered = Array.from(companies);
        const [moved] = reordered.splice(result.source.index, 1);
        reordered.splice(result.destination.index, 0, moved);
        dispatch(setCompaniesOrder(reordered));
        const sortOrderPayload = reordered.map((ws, idx) => ({ id: ws.id, sort_order: idx + 1 }));
        dispatch(reorderCompanies(sortOrderPayload));
    };

    // ─── Project drag-and-drop (within same workspace only) ───
    const handleProjectDragEnd = (companyId, wsProjects) => (result) => {
        if (!result.destination || result.destination.index === result.source.index) return;
        const reordered = Array.from(wsProjects);
        const [moved] = reordered.splice(result.source.index, 1);
        reordered.splice(result.destination.index, 0, moved);
        dispatch(setProjectsOrder({ companyId, orderedProjects: reordered }));
        const sortOrderPayload = reordered.map((p, idx) => ({ id: p.id, sort_order: idx + 1 }));
        dispatch(reorderProjects({ company_id: companyId, sortOrderArray: sortOrderPayload }));
    };

    // ─── Navigate to Users tab with workspace filter ───
    const goToUsersTab = (wsId) => {
        setSearchParams({ tab: 'users', workspace: String(wsId) });
    };

    // ─── Loading state ───
    if (wsLoading && (!companies || companies.length === 0)) {
        return <Spinner />;
    }

    return (
        <>
            {/* ── Sticky Header ── */}
            <Group justify="space-between" align="flex-start" mb={12}
                style={{ position: 'sticky', top: 0, zIndex: 10, background: '#F4F6F8', paddingTop: 4, paddingBottom: 4 }}>
                {/* Left: title + desc + compact tiles */}
                <Group gap={16} align="center">
                    <div>
                        <Text fz={16} fw={700} c={S.text}>Workspace &amp; Projects</Text>
                        <Text fz={13} c="dimmed" mt={2}>{__( "Manage workspaces and projects.", "lazytasks-project-task-management" )}</Text>
                    </div>
                    <Group gap={6}>
                        <StatCard label={__( "Workspaces", "lazytasks-project-task-management" )} value={stats.workspaces} color={S.teal} />
                        <StatCard label={__( "Projects", "lazytasks-project-task-management" )} value={stats.projects} color={S.text} />
                        <StatCard label={__( "Active", "lazytasks-project-task-management" )} value={stats.active} color={S.success} />
                        <StatCard label={__( "Archived", "lazytasks-project-task-management" )} value={stats.archived} color={S.muted} />
                        <StatCard label={__( "Members", "lazytasks-project-task-management" )} value={stats.members} color={S.orange} />
                    </Group>
                </Group>
                {/* Right: search + filter + buttons */}
                <Group gap={8} align="center" style={{ flexShrink: 0 }}>
                    <TextInput size="xs" placeholder={__( "Search...", "lazytasks-project-task-management" )} leftSection={<IconSearch size={14} />}
                        value={search} onChange={e => setSearch(e.target.value)} style={{ width: 200 }} />
                    <SimpleSelect value={statusFilter} onChange={setStatusFilter} placeholder={__( "All Status", "lazytasks-project-task-management" )}
                        options={[{ value: 'active', label: __('Active', 'lazytasks-project-task-management') }, { value: 'archived', label: __('Archived', 'lazytasks-project-task-management') }]} />
                    {hasActiveFilters && (
                        <Button size="xs" variant="outline" color="gray" onClick={clearFilters} leftSection={<IconX size={12} />}>
                            {__( "Clear", "lazytasks-project-task-management" )}
                        </Button>
                    )}
                    {canManageWorkspace && (
                        <Button size="xs" color="orange" onClick={() => { setNewWsName(''); setNewWsError(''); setNewWsModal(true); }}
                            leftSection={<IconPlus size={13} />}>
                            {__( "New Workspace", "lazytasks-project-task-management" )}
                        </Button>
                    )}
                </Group>
            </Group>

            <div ref={wsScrollRef} style={{ overflow: 'auto', maxHeight: wsMaxH, borderRadius: S.radius }}>
            {/* ── Empty state ── */}
            {!wsLoading && filteredData.length === 0 && (
                <div style={{ textAlign: 'center', padding: '40px 0', fontSize: 13, color: S.light }}>
                    {hasActiveFilters
                        ? __('No workspaces or projects match your filters.', 'lazytasks-project-task-management')
                        : __('No workspaces yet. Create one to get started.', 'lazytasks-project-task-management')}
                </div>
            )}

            {/* ── Workspace Cards (DnD) ── */}
            <DragDropContext onDragEnd={handleWorkspaceDragEnd}>
                <Droppable droppableId="workspaces" type="WORKSPACE">
                    {(provided) => (
                        <div ref={provided.innerRef} {...provided.droppableProps}>
                            {filteredData.map(({ ws, wsProjects }, wsIndex) => {
                                // Compute unique members across all projects in this workspace
                                const uniqueMembersMap = new Map();
                                wsProjects.forEach(p => {
                                    (p.members || []).forEach(m => {
                                        if (m.id && !uniqueMembersMap.has(String(m.id))) {
                                            uniqueMembersMap.set(String(m.id), m);
                                        }
                                    });
                                });
                                const wsUniqueMembers = Array.from(uniqueMembersMap.values());
                                const memberCount = wsUniqueMembers.length;
                                const color = wsColor(ws.id);
                                const expanded = expandedWsIds.has(ws.id);
                                return (
                                    <Draggable key={String(ws.id)} draggableId={String(ws.id)} index={wsIndex}>
                                        {(dragProvided, dragSnapshot) => (
                                            <div
                                                ref={dragProvided.innerRef}
                                                {...dragProvided.draggableProps}
                                                style={{
                                                    background: S.white,
                                                    border: `1px solid ${dragSnapshot.isDragging ? S.teal : S.border}`,
                                                    borderRadius: S.radius,
                                                    padding: 0,
                                                    boxShadow: dragSnapshot.isDragging ? '0 8px 24px rgba(0,0,0,.15)' : S.shadow,
                                                    marginBottom: 16,
                                                    ...dragProvided.draggableProps.style,
                                                }}
                                            >
                                                {/* ── Workspace header (always visible, clickable to expand) ── */}
                                                <div
                                                    onClick={() => toggleExpand(ws.id)}
                                                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px', cursor: 'pointer', userSelect: 'none', position: 'sticky', top: 0, zIndex: 5, background: S.white, borderRadius: `${S.radius}px ${S.radius}px 0 0` }}
                                                >
                                                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                                                        {canManageWorkspace ? (
                                                        <div
                                                            {...dragProvided.dragHandleProps}
                                                            title={__( "Drag to reorder workspace", "lazytasks-project-task-management" )}
                                                            onClick={e => e.stopPropagation()}
                                                            style={{ color: S.light, cursor: 'grab', display: 'flex', alignItems: 'center', flexShrink: 0 }}
                                                        >
                                                            <DragHandleIcon />
                                                        </div>
                                                        ) : <div {...dragProvided.dragHandleProps} style={{ display: 'none' }} />}
                                                        <div style={{ width: 36, height: 36, background: `linear-gradient(135deg, ${color}, ${color}AA)`, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 14, flexShrink: 0 }}>
                                                            {getInitials(ws.name)}
                                                        </div>
                                                        <div>
                                                            <div style={{ fontWeight: 700, fontSize: 14, color: S.text }}>{ws.name}</div>
                                                            <div style={{ fontSize: 12, color: S.muted }}>
                                                                {wsProjects.length} project{wsProjects.length !== 1 ? 's' : ''} · {memberCount} member{memberCount !== 1 ? 's' : ''}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
                                                        {canManageProjectGlobal && (
                                                            <Btn variant="secondary" onClick={e => { e.stopPropagation(); setAddProjectWs(ws.id); setAddProjectName(''); setAddProjectError(''); }} style={{ height: 26, fontSize: 11, padding: '0 10px' }}>
                                                                <PlusIcon /> {__( "Add Project", "lazytasks-project-task-management" )}
                                                            </Btn>
                                                        )}
                                                        {canManageWorkspace && (
                                                            <IconBtn variant="ghost" title={__( "Edit workspace", "lazytasks-project-task-management" )} onClick={e => { e.stopPropagation(); setEditWs({ id: ws.id, name: ws.name }); setEditWsError(''); }}>
                                                                <PencilIcon />
                                                            </IconBtn>
                                                        )}
                                                        {canDeleteWorkspace && (
                                                            <IconBtn variant="danger" title={__( "Delete workspace", "lazytasks-project-task-management" )} onClick={e => { e.stopPropagation(); setDeleteWs(ws); setDeleteWsInfo(null); setDeleteWsConfirm(''); }}>
                                                                <TrashIcon />
                                                            </IconBtn>
                                                        )}
                                                        <div style={{ color: expanded ? S.teal : S.light, display: 'flex', alignItems: 'center', marginLeft: 4 }}>
                                                            {expanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
                                                        </div>
                                                    </div>
                                                </div>

                                                {/* ── Expanded content ── */}
                                                {expanded && (
                                                    <div style={{ borderTop: `1px solid ${S.border}`, padding: '0 20px 20px' }}>
                                                        {/* Project table */}
                                                        {wsProjects.length > 0 ? (
                                                            <DragDropContext onDragEnd={handleProjectDragEnd(ws.id, wsProjects)}>
                                                                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, marginTop: 12 }}>
                                                                    <thead style={{ position: 'sticky', top: 68, zIndex: 3 }}>
                                                                        <tr style={{ borderBottom: `1px solid ${S.border}`, background: S.white }}>
                                                                            <th style={{ width: 20, padding: '8px 4px 8px 0' }}></th>
                                                                            <th style={thStyle}>{__('Project', 'lazytasks-project-task-management')}</th>
                                                                            <th style={{ ...thStyle, width: 100 }}>{__('Members', 'lazytasks-project-task-management')}</th>
                                                                            <th style={{ ...thStyle, width: 100 }}>{__('Tasks', 'lazytasks-project-task-management')}</th>
                                                                            <th style={{ ...thStyle, width: 100 }}>{__('Status', 'lazytasks-project-task-management')}</th>
                                                                            <th style={{ padding: '8px 0', width: 140 }}></th>
                                                                        </tr>
                                                                    </thead>
                                                                    <Droppable droppableId={`projects-${ws.id}`} type={`PROJECTS_${ws.id}`}>
                                                                        {(pProvided) => (
                                                                            <tbody ref={pProvided.innerRef} {...pProvided.droppableProps}>
                                                                                {wsProjects.map((p, pi) => (
                                                                                    <Draggable key={String(p.id)} draggableId={`project-${p.id}`} index={pi}>
                                                                                        {(pDrag, pSnap) => (
                                                                                            <tr
                                                                                                ref={pDrag.innerRef}
                                                                                                {...pDrag.draggableProps}
                                                                                                style={{
                                                                                                    borderBottom: pi < wsProjects.length - 1 ? `1px solid ${S.border}` : 'none',
                                                                                                    background: pSnap.isDragging ? '#F8FAFC' : (String(p.status) !== '1' ? '#FAFAFA' : 'transparent'),
                                                                                                    display: 'table-row',
                                                                                                    opacity: String(p.status) !== '1' ? 0.7 : 1,
                                                                                                    ...pDrag.draggableProps.style,
                                                                                                }}
                                                                                            >
                                                                                                <td style={{ padding: '10px 4px 10px 0' }}>
                                                                                                    {canManageWorkspace ? (
                                                                                                    <div {...pDrag.dragHandleProps} title={__( "Drag to reorder", "lazytasks-project-task-management" )} style={{ color: S.light, cursor: 'grab', display: 'flex', alignItems: 'center' }}>
                                                                                                        <DragHandleIcon />
                                                                                                    </div>
                                                                                                    ) : <div {...pDrag.dragHandleProps} style={{ display: 'none' }} />}
                                                                                                </td>
                                                                                                <td style={{ padding: '10px 12px', fontWeight: 500, color: S.text }}>{p.name}</td>
                                                                                                <td style={{ padding: '10px 12px' }}>
                                                                                                    {p.members && p.members.length > 0 ? (
                                                                                                        <UsersAvatarGroup users={p.members} size={26} maxCount={3} />
                                                                                                    ) : (
                                                                                                        <span style={{ color: S.light, fontSize: 12 }}>0</span>
                                                                                                    )}
                                                                                                </td>
                                                                                                <td style={{ padding: '10px 12px', color: S.muted }}>{p.total_tasks ?? '—'}</td>
                                                                                                <td style={{ padding: '10px 12px' }}>
                                                                                                    <StatusBadge
                                                                                                        status={p.status}
                                                                                                        clickable={canArchiveProject}
                                                                                                        onClick={() => setArchiveTogglePrj(p)}
                                                                                                    />
                                                                                                </td>
                                                                                                <td style={{ padding: '10px 0' }}>
                                                                                                    <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end', alignItems: 'center' }}>
                                                                                                        {canManageProject(p.id) && (
                                                                                                            <Btn variant="ghost" onClick={() => setManagePrjId(p.id)} style={{ height: 26, fontSize: 11, padding: '0 10px' }}>
                                                                                                                <SettingsIcon /> {__( "Manage", "lazytasks-project-task-management" )}
                                                                                                            </Btn>
                                                                                                        )}
                                                                                                        {canDeleteProject && (
                                                                                                            <IconBtn variant="danger" title={__( "Delete project", "lazytasks-project-task-management" )} onClick={() => { setDeletePrj({ project: p }); setDeletePrjInfo(null); setDeletePrjConfirm(''); }}>
                                                                                                                <TrashIcon />
                                                                                                            </IconBtn>
                                                                                                        )}
                                                                                                    </div>
                                                                                                </td>
                                                                                            </tr>
                                                                                        )}
                                                                                    </Draggable>
                                                                                ))}
                                                                                {pProvided.placeholder}
                                                                            </tbody>
                                                                        )}
                                                                    </Droppable>
                                                                </table>
                                                            </DragDropContext>
                                                        ) : (
                                                            <div style={{ textAlign: 'center', padding: '16px 0', fontSize: 13, color: S.light }}>
                                                                {hasActiveFilters
                                                                    ? __('No projects match your filters.', 'lazytasks-project-task-management')
                                                                    : __('No projects yet.', 'lazytasks-project-task-management')}
                                                            </div>
                                                        )}

                                                        {/* Member preview — computed from project members */}
                                                        {wsUniqueMembers.length > 0 && (
                                                            <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                                                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                                                                    <div style={{ fontSize: 12, fontWeight: 600, color: S.muted, display: 'flex', alignItems: 'center', gap: 6 }}>
                                                                        <UsersAvatarGroup users={wsUniqueMembers} size={30} maxCount={6} />
                                                                        <UsersIcon /> {__( "Members", "lazytasks-project-task-management" )}
                                                                        <span style={{ background: S.tealLt, color: S.teal, padding: '1px 6px', borderRadius: 10, fontSize: 11 }}>{wsUniqueMembers.length}</span>
                                                                    </div>
                                                                    {canManageUsers && (
                                                                        <Btn variant="ghost" onClick={() => goToUsersTab(ws.id)} style={{ height: 24, fontSize: 11, padding: '0 8px' }}>
                                                                            {__( "View All Members", "lazytasks-project-task-management" )}
                                                                        </Btn>
                                                                    )}
                                                                </div>
                                                            </div>
                                                        )}
                                                    </div>
                                                )}
                                            </div>
                                        )}
                                    </Draggable>
                                );
                            })}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
            </div>

            {/* ── ProjectSettingsModal for "Manage" ── */}
            {managePrjId && (
                <ProjectSettingsModal
                    project_id={managePrjId}
                    opened={!!managePrjId}
                    onClose={() => setManagePrjId(null)}
                    isSettings={true}
                />
            )}

            {/* ── New Workspace Modal ── */}
            <Modal opened={newWsModal} onClose={() => setNewWsModal(false)} title={__( "New Workspace", "lazytasks-project-task-management" )} centered size="md">
                <Text fz={13} c={S.muted} mb={16}>{__( "Create a new workspace to organize your projects.", "lazytasks-project-task-management" )}</Text>
                <label style={{ fontSize: 12, fontWeight: 600, color: S.text, display: 'block', marginBottom: 4 }}>{__('Workspace Name', 'lazytasks-project-task-management')}</label>
                <input style={{ ...inputStyle, borderColor: newWsError ? S.danger : S.border }} placeholder={__('e.g. Acme Corp', 'lazytasks-project-task-management')} value={newWsName} onChange={e => { setNewWsName(e.target.value); setNewWsError(''); }} onKeyDown={e => e.key === 'Enter' && !newWsLoading && handleCreateWs()} autoFocus />
                {newWsError && <div style={{ fontSize: 12, color: S.danger, marginTop: 4 }}>{newWsError}</div>}
                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }}>
                    <Btn variant="ghost" onClick={() => setNewWsModal(false)}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                    <Btn variant="primary" onClick={handleCreateWs} disabled={newWsLoading}>{newWsLoading ? __('Creating…', 'lazytasks-project-task-management') : __('Create Workspace', 'lazytasks-project-task-management')}</Btn>
                </div>
            </Modal>

            {/* ── Edit Workspace Modal ── */}
            <Modal opened={!!editWs} onClose={() => setEditWs(null)} title={__( "Edit Workspace", "lazytasks-project-task-management" )} centered size="md">
                <Text fz={13} c={S.muted} mb={16}>{__( "Rename this workspace.", "lazytasks-project-task-management" )}</Text>
                <label style={{ fontSize: 12, fontWeight: 600, color: S.text, display: 'block', marginBottom: 4 }}>{__('Workspace Name', 'lazytasks-project-task-management')}</label>
                <input style={{ ...inputStyle, borderColor: editWsError ? S.danger : S.border }} value={editWs?.name || ''} onChange={e => { setEditWs(prev => ({ ...prev, name: e.target.value })); setEditWsError(''); }} onKeyDown={e => e.key === 'Enter' && !editWsLoading && handleEditWs()} autoFocus />
                {editWsError && <div style={{ fontSize: 12, color: S.danger, marginTop: 4 }}>{editWsError}</div>}
                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }}>
                    <Btn variant="ghost" onClick={() => setEditWs(null)}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                    <Btn variant="primary" onClick={handleEditWs} disabled={editWsLoading}>{editWsLoading ? __('Saving…', 'lazytasks-project-task-management') : __('Save Changes', 'lazytasks-project-task-management')}</Btn>
                </div>
            </Modal>

            {/* ── Delete Workspace Modal (Tiered) ── */}
            <Modal
                opened={!!deleteWs} onClose={() => { setDeleteWs(null); setDeleteWsInfo(null); setDeleteWsConfirm(''); }}
                title={sprintf(/* translators: %s: workspace name */ __('Delete "%s"?', 'lazytasks-project-task-management'), deleteWs?.name || '')}
                centered size="md"
            >
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: '#FEE2E2', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}><TrashIconLg /></div>
                {(() => {
                    const info = deleteWsInfo;
                    const wsProjects = projects?.filter(p => parseInt(p.company_id) === parseInt(deleteWs?.id)) || [];
                    const hasCascade = wsProjects.length > 0;

                    // Non-admin blocked
                    if (info?.status === 403) {
                        return (
                            <div>
                                <WarningBanner variant="warning">
                                    {__('This workspace has', 'lazytasks-project-task-management')} <strong>{info.project_count} {info.project_count !== 1 ? __('projects', 'lazytasks-project-task-management') : __('project', 'lazytasks-project-task-management')}</strong>, <strong>{info.member_count} {info.member_count !== 1 ? __('members', 'lazytasks-project-task-management') : __('member', 'lazytasks-project-task-management')}</strong>, {__('and', 'lazytasks-project-task-management')} <strong>{info.task_count} {info.task_count !== 1 ? __('tasks', 'lazytasks-project-task-management') : __('task', 'lazytasks-project-task-management')}</strong>.
                                    {__('Remove them first, or ask a Superadmin/Admin to force-delete.', 'lazytasks-project-task-management')}
                                </WarningBanner>
                                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                    <Btn variant="ghost" onClick={() => { setDeleteWs(null); setDeleteWsInfo(null); }}>{__('Close', 'lazytasks-project-task-management')}</Btn>
                                </div>
                            </div>
                        );
                    }

                    // Admin cascade confirmation (step 2)
                    if (info?.status === 'confirm') {
                        return (
                            <div>
                                <WarningBanner variant="danger">
                                    {__('This will permanently cascade-delete', 'lazytasks-project-task-management')} <strong>{info.project_count} {info.project_count !== 1 ? __('projects', 'lazytasks-project-task-management') : __('project', 'lazytasks-project-task-management')}</strong>, {__('remove', 'lazytasks-project-task-management')} <strong>{info.member_count} {info.member_count !== 1 ? __('members', 'lazytasks-project-task-management') : __('member', 'lazytasks-project-task-management')}</strong>, {__('and unassign', 'lazytasks-project-task-management')} <strong>{info.task_count} {info.task_count !== 1 ? __('tasks', 'lazytasks-project-task-management') : __('task', 'lazytasks-project-task-management')}</strong>.
                                </WarningBanner>
                                {info.projects && info.projects.length > 0 && (
                                    <div style={{ marginBottom: 12 }}>
                                        <div style={{ fontSize: 12, fontWeight: 600, color: S.text, marginBottom: 4 }}>{__('Projects that will be deleted:', 'lazytasks-project-task-management')}</div>
                                        {info.projects.map(cp => (
                                            <div key={cp.id} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '3px 0' }}>
                                                <div style={{ width: 6, height: 6, borderRadius: '50%', background: S.teal }} />
                                                <span style={{ fontSize: 13 }}>{cp.name}</span>
                                                <span style={{ fontSize: 11, color: S.muted, marginLeft: 'auto' }}>{cp.member_count} {__('members', 'lazytasks-project-task-management')} · {cp.task_count} {__('tasks', 'lazytasks-project-task-management')}</span>
                                            </div>
                                        ))}
                                    </div>
                                )}
                                <div style={{ marginBottom: 12 }}>
                                    <div style={{ fontSize: 12, color: S.muted, marginBottom: 4 }}>{__('Type', 'lazytasks-project-task-management')} <strong>"{deleteWs?.name}"</strong> {__('to confirm:', 'lazytasks-project-task-management')}</div>
                                    <input style={inputStyle} placeholder={deleteWs?.name} value={deleteWsConfirm} onChange={e => setDeleteWsConfirm(e.target.value)} />
                                </div>
                                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                    <Btn variant="ghost" onClick={() => { setDeleteWs(null); setDeleteWsInfo(null); setDeleteWsConfirm(''); }}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                                    <Btn
                                        variant="primary" style={{ background: S.danger }}
                                        disabled={deleteWsConfirm.trim() !== deleteWs?.name?.trim() || deleteWsLoading}
                                        onClick={() => handleDeleteWs(true)}
                                    >
                                        {deleteWsLoading ? __('Deleting…', 'lazytasks-project-task-management') : __('Delete Workspace & All Projects', 'lazytasks-project-task-management')}
                                    </Btn>
                                </div>
                            </div>
                        );
                    }

                    // Initial step — first click (no info yet)
                    if (!hasCascade) {
                        // Empty workspace — simple confirmation
                        return (
                            <div>
                                <div style={{ fontSize: 13, color: S.muted, marginBottom: 14 }}>{__('This action cannot be undone.', 'lazytasks-project-task-management')}</div>
                                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                    <Btn variant="ghost" onClick={() => { setDeleteWs(null); setDeleteWsInfo(null); }}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                                    <Btn variant="primary" style={{ background: S.danger }} onClick={() => handleDeleteWs(false)} disabled={deleteWsLoading}>{deleteWsLoading ? __('Deleting…', 'lazytasks-project-task-management') : __('Delete Workspace', 'lazytasks-project-task-management')}</Btn>
                                </div>
                            </div>
                        );
                    }

                    // Has projects — send first request to get backend info
                    return (
                        <div>
                            <WarningBanner variant="warning">
                                {__('This workspace has', 'lazytasks-project-task-management')} <strong>{wsProjects.length} {wsProjects.length !== 1 ? __('projects', 'lazytasks-project-task-management') : __('project', 'lazytasks-project-task-management')}</strong>. {__('Click delete to check if cascade deletion is needed.', 'lazytasks-project-task-management')}
                            </WarningBanner>
                            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                <Btn variant="ghost" onClick={() => { setDeleteWs(null); setDeleteWsInfo(null); }}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                                <Btn variant="primary" style={{ background: S.danger }} onClick={() => handleDeleteWs(false)} disabled={deleteWsLoading}>{deleteWsLoading ? __('Checking…', 'lazytasks-project-task-management') : __('Delete Workspace', 'lazytasks-project-task-management')}</Btn>
                            </div>
                        </div>
                    );
                })()}
            </Modal>

            {/* ── Add Project Modal ── */}
            <Modal opened={!!addProjectWs} onClose={() => setAddProjectWs(null)} title={__( "Add Project", "lazytasks-project-task-management" )} centered size="md">
                <Text fz={13} c={S.muted} mb={16}>{__( "Add a new project to this workspace.", "lazytasks-project-task-management" )}</Text>
                <label style={{ fontSize: 12, fontWeight: 600, color: S.text, display: 'block', marginBottom: 4 }}>{__('Project Name', 'lazytasks-project-task-management')}</label>
                <input style={{ ...inputStyle, borderColor: addProjectError ? S.danger : S.border }} placeholder={__('e.g. Website Redesign', 'lazytasks-project-task-management')} value={addProjectName} onChange={e => { setAddProjectName(e.target.value); setAddProjectError(''); }} onKeyDown={e => e.key === 'Enter' && !addProjectLoading && handleAddProject()} autoFocus />
                {addProjectError && <div style={{ fontSize: 12, color: S.danger, marginTop: 4 }}>{addProjectError}</div>}
                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 20 }}>
                    <Btn variant="ghost" onClick={() => setAddProjectWs(null)}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                    <Btn variant="primary" onClick={handleAddProject} disabled={addProjectLoading}>{addProjectLoading ? __('Adding…', 'lazytasks-project-task-management') : __('Add Project', 'lazytasks-project-task-management')}</Btn>
                </div>
            </Modal>

            {/* ── Delete Project Modal (Tiered) ── */}
            <Modal
                opened={!!deletePrj} onClose={() => { setDeletePrj(null); setDeletePrjInfo(null); setDeletePrjConfirm(''); }}
                title={sprintf(/* translators: %s: project name */ __('Delete "%s"?', 'lazytasks-project-task-management'), deletePrj?.project?.name || '')}
                centered size="md"
            >
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: '#FEE2E2', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}><TrashIconLg /></div>
                {(() => {
                    const info = deletePrjInfo;
                    const p = deletePrj?.project;
                    const pMemberCount = p?.members?.length || 0;
                    const pTaskCount = parseInt(p?.total_tasks) || 0;
                    const hasCascade = pMemberCount > 0 || pTaskCount > 0;

                    // Non-admin blocked
                    if (info?.status === 403) {
                        return (
                            <div>
                                <WarningBanner variant="warning">
                                    {__('This project has', 'lazytasks-project-task-management')} <strong>{info.member_count} {info.member_count !== 1 ? __('members', 'lazytasks-project-task-management') : __('member', 'lazytasks-project-task-management')}</strong> {__('and', 'lazytasks-project-task-management')} <strong>{info.task_count} {info.task_count !== 1 ? __('tasks', 'lazytasks-project-task-management') : __('task', 'lazytasks-project-task-management')}</strong>.
                                    {__('Remove them first, or ask a Superadmin/Admin to force-delete.', 'lazytasks-project-task-management')}
                                </WarningBanner>
                                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                    <Btn variant="ghost" onClick={() => { setDeletePrj(null); setDeletePrjInfo(null); }}>{__('Close', 'lazytasks-project-task-management')}</Btn>
                                </div>
                            </div>
                        );
                    }

                    // Admin cascade confirmation (step 2)
                    if (info?.status === 'confirm') {
                        return (
                            <div>
                                <WarningBanner variant="danger">
                                    {__('This will remove', 'lazytasks-project-task-management')} <strong>{info.member_count} {info.member_count !== 1 ? __('members', 'lazytasks-project-task-management') : __('member', 'lazytasks-project-task-management')}</strong> {__('and unassign', 'lazytasks-project-task-management')} <strong>{info.task_count} {info.task_count !== 1 ? __('tasks', 'lazytasks-project-task-management') : __('task', 'lazytasks-project-task-management')}</strong> {__('from this project. This cannot be undone.', 'lazytasks-project-task-management')}
                                </WarningBanner>
                                <div style={{ marginBottom: 12 }}>
                                    <div style={{ fontSize: 12, color: S.muted, marginBottom: 4 }}>{__('Type', 'lazytasks-project-task-management')} <strong>"{info.project_name}"</strong> {__('to confirm:', 'lazytasks-project-task-management')}</div>
                                    <input style={inputStyle} placeholder={info.project_name} value={deletePrjConfirm} onChange={e => setDeletePrjConfirm(e.target.value)} />
                                </div>
                                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                    <Btn variant="ghost" onClick={() => { setDeletePrj(null); setDeletePrjInfo(null); setDeletePrjConfirm(''); }}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                                    <Btn
                                        variant="primary" style={{ background: S.danger }}
                                        disabled={deletePrjConfirm.trim() !== info.project_name?.trim() || deletePrjLoading}
                                        onClick={() => handleDeleteProject(true)}
                                    >
                                        {deletePrjLoading ? __('Deleting…', 'lazytasks-project-task-management') : __('Delete Project', 'lazytasks-project-task-management')}
                                    </Btn>
                                </div>
                            </div>
                        );
                    }

                    // Empty project — simple confirmation
                    if (!hasCascade) {
                        return (
                            <div>
                                <div style={{ fontSize: 13, color: S.muted, marginBottom: 14 }}>{__('This will permanently delete the project. This cannot be undone.', 'lazytasks-project-task-management')}</div>
                                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                    <Btn variant="ghost" onClick={() => { setDeletePrj(null); setDeletePrjInfo(null); }}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                                    <Btn variant="primary" style={{ background: S.danger }} onClick={() => handleDeleteProject(false)} disabled={deletePrjLoading}>{deletePrjLoading ? __('Deleting…', 'lazytasks-project-task-management') : __('Delete Project', 'lazytasks-project-task-management')}</Btn>
                                </div>
                            </div>
                        );
                    }

                    // Has members/tasks — send first request to get backend info
                    return (
                        <div>
                            <WarningBanner variant="warning">
                                {__('This project has', 'lazytasks-project-task-management')} <strong>{pMemberCount} {pMemberCount !== 1 ? __('members', 'lazytasks-project-task-management') : __('member', 'lazytasks-project-task-management')}</strong> {__('and', 'lazytasks-project-task-management')} <strong>{pTaskCount} {pTaskCount !== 1 ? __('tasks', 'lazytasks-project-task-management') : __('task', 'lazytasks-project-task-management')}</strong>.
                            </WarningBanner>
                            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                <Btn variant="ghost" onClick={() => { setDeletePrj(null); setDeletePrjInfo(null); }}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                                <Btn variant="primary" style={{ background: S.danger }} onClick={() => handleDeleteProject(false)} disabled={deletePrjLoading}>{deletePrjLoading ? __('Checking…', 'lazytasks-project-task-management') : __('Delete Project', 'lazytasks-project-task-management')}</Btn>
                            </div>
                        </div>
                    );
                })()}
            </Modal>

            {/* ── Archive/Unarchive Confirmation Modal ── */}
            <Modal
                opened={!!archiveTogglePrj}
                onClose={() => setArchiveTogglePrj(null)}
                title={String(archiveTogglePrj?.status) === '1' ? sprintf(/* translators: %s: project name */ __('Archive "%s"?', 'lazytasks-project-task-management'), archiveTogglePrj?.name || '') : sprintf(/* translators: %s: project name */ __('Activate "%s"?', 'lazytasks-project-task-management'), archiveTogglePrj?.name || '')}
                centered size="md"
            >
                <div style={{ fontSize: 13, color: S.muted, marginBottom: 14 }}>
                    {String(archiveTogglePrj?.status) === '1'
                        ? __('Archived projects remain visible but are marked as inactive. You can reactivate it later.', 'lazytasks-project-task-management')
                        : __('This will reactivate the project and make it fully accessible again.', 'lazytasks-project-task-management')
                    }
                </div>
                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                    <Btn variant="ghost" onClick={() => setArchiveTogglePrj(null)}>{__('Cancel', 'lazytasks-project-task-management')}</Btn>
                    <Btn variant="primary" onClick={handleArchiveToggle} disabled={archiveLoading}>
                        {archiveLoading ? __('Saving…', 'lazytasks-project-task-management') : (String(archiveTogglePrj?.status) === '1' ? __('Archive Project', 'lazytasks-project-task-management') : __('Activate Project', 'lazytasks-project-task-management'))}
                    </Btn>
                </div>
            </Modal>
        </>
    );
};

export default WorkspaceProjectsTabV3;