import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import {
    UserPlus, UserMinus, Shield, ChevronDown, Search, Mail,
    X as XIcon, Users, Briefcase, DollarSign, MoreVertical,
    Check, Clock, Crown, ChevronUp, ToggleLeft, ToggleRight
} from 'lucide-react';

const JOB_ROLES = [
    'Project Manager',
    'Sales Rep',
    'Lead Installer',
    'Estimator',
    'Inspector',
    'Canvasser',
    'Subcontractor',
    'Supplier',
];

const COMMISSION_TYPES = {
    percent_gross: '% of Gross',
    percent_net: '% of Net',
    flat: 'Flat Amount',
    custom: 'Custom / Manual',
};

const COMMISSION_SOURCE_CFG = {
    org: { label: 'Org Default', color: 'text-cyan-400', bg: 'bg-cyan-500/10 border-cyan-500/30', dot: 'bg-cyan-400' },
    role: { label: 'Role', color: 'text-emerald-400', bg: 'bg-emerald-500/10 border-emerald-500/30', dot: 'bg-emerald-400' },
    user: { label: 'User', color: 'text-violet-400', bg: 'bg-violet-500/10 border-violet-500/30', dot: 'bg-violet-400' },
    job: { label: 'Job', color: 'text-amber-400', bg: 'bg-amber-500/10 border-amber-500/30', dot: 'bg-amber-400' },
};

const ROLE_COLORS = {
    'Project Manager': 'text-cyan-400 bg-cyan-500/10 border-cyan-500/20',
    'Sales Rep': 'text-green-400 bg-green-500/10 border-green-500/20',
    'Lead Installer': 'text-orange-400 bg-orange-500/10 border-orange-500/20',
    'Estimator': 'text-blue-400 bg-blue-500/10 border-blue-500/20',
    'Inspector': 'text-purple-400 bg-purple-500/10 border-purple-500/20',
    'Canvasser': 'text-teal-400 bg-teal-500/10 border-teal-500/20',
    'Subcontractor': 'text-rose-400 bg-rose-500/10 border-rose-500/20',
    'Supplier': 'text-yellow-400 bg-yellow-500/10 border-yellow-500/20',
};

function resolveCommissionForMember(member, userCommissionOverrides, roleCommissionOverrides, orgMembers, orgCommissionDefaults) {
    if (member.jobCommission) {
        return { type: member.jobCommission.type, rate: Number(member.jobCommission.rate) || 0, source: 'job' };
    }
    const userOvr = (userCommissionOverrides || []).find(o => o.enabled && o.userId === member.userId);
    if (userOvr) {
        return { type: userOvr.type, rate: Number(userOvr.rate) || 0, source: 'user' };
    }
    const orgMember = (orgMembers || []).find(m => m.userId === member.userId);
    if (orgMember) {
        const roleOvr = (roleCommissionOverrides || []).find(o => o.enabled && o.roleKey === orgMember.roleKey);
        if (roleOvr) {
            return { type: roleOvr.type, rate: Number(roleOvr.rate) || 0, source: 'role' };
        }
    }
    return { type: orgCommissionDefaults.type, rate: Number(orgCommissionDefaults.rate) || 0, source: 'org' };
}

function calcCommissionValue(comm, totalReceived, grossProfit) {
    const r = Number(comm.rate) || 0;
    switch (comm.type) {
        case 'percent_gross': return totalReceived * (r / 100);
        case 'percent_net': return grossProfit * (r / 100);
        case 'flat': return r;
        case 'custom': return r;
        default: return 0;
    }
}

const formatCurrency = (amt) =>
    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(Number(amt) || 0);

const TeamManagementPanel = ({
    project,
    teamMembers = [],
    allUsers = [],
    personnel = [],
    userRole,
    orgCommissionDefaults,
    userCommissionOverrides,
    roleCommissionOverrides = [],
    orgMembers = [],
    totalReceived = 0,
    grossProfit = 0,
    onAddMember,
    onRemoveMember,
    onUpdateMember,
}) => {
    const [inviteOpen, setInviteOpen] = useState(false);
    const [removeConfirm, setRemoveConfirm] = useState(null);
    const [actionMenu, setActionMenu] = useState(null);
    const [editingRole, setEditingRole] = useState(null);
    const [commissionOpen, setCommissionOpen] = useState(false);
    const [editingCommission, setEditingCommission] = useState(null);

    const menuRef = useRef(null);

    // ── Commission toggle default ─────────────────────────────────────────
    // Reads commissionEnabled directly from the member data in mockStore.
    // Falls back to true if a jobCommission override is explicitly set.
    const getMemberCommissionDefault = useCallback((member) => {
        if (typeof member.commissionEnabled === 'boolean') return member.commissionEnabled;
        return !!member.jobCommission; // fallback for legacy data without the field
    }, []);

    // Per-member commission toggle: { [memberId]: boolean }
    const [commissionToggle, setCommissionToggle] = useState(() => {
        const init = {};
        teamMembers.forEach(m => { init[m.id] = getMemberCommissionDefault(m); });
        return init;
    });

    // Keep new members initialized when teamMembers changes
    useEffect(() => {
        setCommissionToggle(prev => {
            const next = { ...prev };
            let changed = false;
            teamMembers.forEach(m => {
                if (!(m.id in next)) {
                    next[m.id] = getMemberCommissionDefault(m);
                    changed = true;
                }
            });
            return changed ? next : prev;
        });
    }, [teamMembers, getMemberCommissionDefault]);

    // Toggle and persist back to store so the change survives re-renders
    const toggleMemberCommission = useCallback((memberId) => {
        setCommissionToggle(prev => {
            const next = { ...prev, [memberId]: !prev[memberId] };
            onUpdateMember(project.id, memberId, { commissionEnabled: next[memberId] });
            return next;
        });
    }, [project.id, onUpdateMember]);

    const canManageTeam = ['OWNER', 'ADMIN'].includes(userRole);
    const canManageCommissions = ['OWNER', 'ADMIN'].includes(userRole);
    const canViewCommissions = ['OWNER', 'ADMIN', 'CONTRACTOR'].includes(userRole);
    const isSubcontractor = userRole === 'SUBCONTRACTOR';

    useEffect(() => {
        if (!actionMenu) return;
        const handleClick = (e) => {
            if (menuRef.current && !menuRef.current.contains(e.target)) setActionMenu(null);
        };
        document.addEventListener('mousedown', handleClick);
        return () => document.removeEventListener('mousedown', handleClick);
    }, [actionMenu]);

    const visibleMembers = useMemo(() => {
        if (isSubcontractor) {
            const currentUserId = allUsers?.find(u => u.role === 'SUBCONTRACTOR')?.id;
            return teamMembers.filter(m => m.userId === currentUserId);
        }
        return teamMembers;
    }, [teamMembers, isSubcontractor, allUsers]);

    const memberCommissions = useMemo(() => {
        return visibleMembers.map(m => {
            const resolved = resolveCommissionForMember(m, userCommissionOverrides, roleCommissionOverrides, orgMembers, orgCommissionDefaults);
            const value = calcCommissionValue(resolved, totalReceived, grossProfit);
            return { ...m, resolved, value };
        });
    }, [visibleMembers, userCommissionOverrides, roleCommissionOverrides, orgMembers, orgCommissionDefaults, totalReceived, grossProfit]);

    const activeMembers = visibleMembers.filter(m => m.status === 'active');
    const pendingMembers = visibleMembers.filter(m => m.status === 'pending');

    return (
        <>
            <div className="flex flex-col gap-4">
                {/* Header */}
                <div className="flex items-center justify-between flex-wrap gap-3">
                    <div className="flex items-center gap-3">
                        <Users className="text-violet-500 dark:text-violet-400 drop-shadow-[0_0_8px_rgba(139,92,246,0.4)]" size={20} />
                        <h3 className="text-sm font-mono font-bold text-zinc-900 dark:text-white tracking-widest uppercase">
                            Team Management
                        </h3>
                        <span className="text-[10px] font-mono text-zinc-500 bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 rounded-full px-2.5 py-0.5">
                            {activeMembers.length} active{pendingMembers.length > 0 && ` · ${pendingMembers.length} pending`}
                        </span>
                    </div>
                    {canManageTeam && (
                        <motion.button
                            whileHover={{ scale: 1.03 }}
                            whileTap={{ scale: 0.97 }}
                            onClick={() => setInviteOpen(true)}
                            className="flex items-center gap-2 px-4 py-2 bg-violet-500/10 hover:bg-violet-500/20 text-violet-600 dark:text-violet-400 border border-violet-500/30 rounded-xl text-xs font-bold transition-colors"
                        >
                            <UserPlus size={14} /> Invite Member
                        </motion.button>
                    )}
                </div>

                {/* Member Grid */}
                {visibleMembers.length === 0 ? (
                    <div className="py-12 text-center">
                        <Users size={32} className="mx-auto mb-3 text-zinc-400" />
                        <p className="text-sm text-zinc-500">No team members assigned to this job yet.</p>
                        {canManageTeam && (
                            <button onClick={() => setInviteOpen(true)} className="mt-3 text-xs font-bold text-violet-500 hover:text-violet-400 transition-colors">
                                + Add your first member
                            </button>
                        )}
                    </div>
                ) : (
                    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
                        <AnimatePresence mode="popLayout">
                            {visibleMembers.map((member) => (
                                <motion.div
                                    key={member.id}
                                    layout
                                    initial={{ opacity: 0, scale: 0.95 }}
                                    animate={{ opacity: 1, scale: 1 }}
                                    exit={{ opacity: 0, scale: 0.9 }}
                                    transition={{ duration: 0.2 }}
                                    className={`relative p-4 rounded-2xl border transition-colors
                                        ${member.status === 'pending'
                                            ? 'bg-zinc-50 dark:bg-white/[0.02] border-dashed border-zinc-300 dark:border-white/10'
                                            : 'bg-white dark:bg-white/[0.03] border-zinc-200 dark:border-white/5 hover:border-zinc-300 dark:hover:border-white/10'
                                        }`}
                                >
                                    <div className="flex items-start gap-3">
                                        {/* Avatar */}
                                        <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 text-sm font-black
                                            ${member.status === 'pending'
                                                ? 'bg-zinc-200 dark:bg-zinc-800 text-zinc-500'
                                                : 'bg-violet-500/15 text-violet-600 dark:text-violet-400'
                                            }`}>
                                            {member.name?.[0] || '?'}
                                        </div>

                                        <div className="flex-1 min-w-0">
                                            <div className="flex items-center gap-2">
                                                <span className="text-sm font-bold text-zinc-900 dark:text-white truncate">{member.name}</span>
                                                {member.status === 'pending' && (
                                                    <span className="flex items-center gap-1 text-[10px] font-mono text-amber-500 bg-amber-500/10 border border-amber-500/20 rounded-full px-1.5 py-0.5">
                                                        <Clock size={8} /> Pending
                                                    </span>
                                                )}
                                            </div>
                                            <p className="text-[11px] text-zinc-500 truncate">{member.email}</p>

                                            {/* Job Role Badge */}
                                            <div className="mt-2 flex items-center gap-2 flex-wrap">
                                                {editingRole === member.id ? (
                                                    <select
                                                        value={member.jobRole}
                                                        onChange={(e) => {
                                                            onUpdateMember(project.id, member.id, { jobRole: e.target.value });
                                                            setEditingRole(null);
                                                        }}
                                                        onBlur={() => setEditingRole(null)}
                                                        autoFocus
                                                        className="text-[11px] font-bold rounded-lg px-2 py-1 bg-zinc-100 dark:bg-zinc-800 border border-zinc-300 dark:border-white/10 text-zinc-900 dark:text-white outline-none"
                                                    >
                                                        {JOB_ROLES.map(r => (
                                                            <option key={r} value={r}>{r}</option>
                                                        ))}
                                                    </select>
                                                ) : (
                                                    <button
                                                        onClick={() => canManageTeam && setEditingRole(member.id)}
                                                        className={`text-[11px] font-bold rounded-lg px-2 py-0.5 border transition-colors
                                                            ${ROLE_COLORS[member.jobRole] || 'text-zinc-400 bg-zinc-500/10 border-zinc-500/20'}
                                                            ${canManageTeam ? 'cursor-pointer hover:opacity-80' : 'cursor-default'}`}
                                                    >
                                                        <Briefcase size={10} className="inline mr-1 -mt-px" />
                                                        {member.jobRole}
                                                    </button>
                                                )}
                                                <span className="text-[10px] text-zinc-400 font-mono">
                                                    org: {member.orgRole?.replace(/_/g, ' ')}
                                                </span>
                                            </div>
                                        </div>

                                        {/* Actions Menu */}
                                        {canManageTeam && (
                                            <div className="relative" ref={actionMenu === member.id ? menuRef : null}>
                                                <button
                                                    onClick={() => setActionMenu(actionMenu === member.id ? null : member.id)}
                                                    className="p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/5 text-zinc-400 transition-colors"
                                                >
                                                    <MoreVertical size={14} />
                                                </button>
                                                <AnimatePresence>
                                                    {actionMenu === member.id && (
                                                        <motion.div
                                                            initial={{ opacity: 0, scale: 0.95, y: -4 }}
                                                            animate={{ opacity: 1, scale: 1, y: 0 }}
                                                            exit={{ opacity: 0, scale: 0.95, y: -4 }}
                                                            transition={{ duration: 0.15 }}
                                                            className="absolute right-0 top-8 z-30 w-52 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-xl shadow-2xl overflow-hidden"
                                                        >
                                                            {/* Change Job Role */}
                                                            <button
                                                                onClick={() => { setEditingRole(member.id); setActionMenu(null); }}
                                                                className="w-full px-3 py-2 text-left text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-white/5 flex items-center gap-2 transition-colors"
                                                            >
                                                                <Shield size={12} /> Change Job Role
                                                            </button>

                                                            {/* Commission Toggle */}
                                                            {canManageCommissions && (
                                                                <div className="px-3 py-2 flex items-center justify-between border-t border-zinc-100 dark:border-white/5">
                                                                    <div className="flex items-center gap-2">
                                                                        <DollarSign size={12} className={commissionToggle[member.id] ? 'text-amber-400' : 'text-zinc-400'} />
                                                                        <span className="text-xs font-semibold text-zinc-700 dark:text-zinc-300">Commission</span>
                                                                    </div>
                                                                    <button
                                                                        onClick={(e) => { e.stopPropagation(); toggleMemberCommission(member.id); }}
                                                                        className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-200 focus:outline-none
                                                                            ${commissionToggle[member.id]
                                                                                ? 'bg-amber-400'
                                                                                : 'bg-zinc-300 dark:bg-zinc-700'
                                                                            }`}
                                                                        title={commissionToggle[member.id] ? 'Commission ON' : 'Commission OFF'}
                                                                    >
                                                                        <motion.span
                                                                            layout
                                                                            transition={{ type: 'spring', stiffness: 500, damping: 35 }}
                                                                            className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transform transition-transform
                                                                                ${commissionToggle[member.id] ? 'translate-x-4' : 'translate-x-0.5'}`}
                                                                        />
                                                                    </button>
                                                                </div>
                                                            )}

                                                            {/* Edit Commission — visible only when toggle is ON */}
                                                            <AnimatePresence>
                                                                {canManageCommissions && commissionToggle[member.id] && (
                                                                    <motion.div
                                                                        key="edit-commission"
                                                                        initial={{ height: 0, opacity: 0 }}
                                                                        animate={{ height: 'auto', opacity: 1 }}
                                                                        exit={{ height: 0, opacity: 0 }}
                                                                        transition={{ duration: 0.18 }}
                                                                        className="overflow-hidden"
                                                                    >
                                                                        <button
                                                                            onClick={() => { setEditingCommission(member); setActionMenu(null); }}
                                                                            className="w-full px-3 py-2 text-left text-xs font-semibold text-amber-500 hover:bg-amber-50 dark:hover:bg-amber-500/10 flex items-center gap-2 transition-colors border-t border-zinc-100 dark:border-white/5"
                                                                        >
                                                                            <DollarSign size={12} /> Edit Commission
                                                                        </button>
                                                                    </motion.div>
                                                                )}
                                                            </AnimatePresence>

                                                            {/* Remove from Job */}
                                                            <button
                                                                onClick={() => { setRemoveConfirm(member); setActionMenu(null); }}
                                                                className="w-full px-3 py-2 text-left text-xs font-semibold text-red-500 hover:bg-red-50 dark:hover:bg-red-500/5 flex items-center gap-2 transition-colors border-t border-zinc-100 dark:border-white/5"
                                                            >
                                                                <UserMinus size={12} /> Remove from Job
                                                            </button>
                                                        </motion.div>
                                                    )}
                                                </AnimatePresence>
                                            </div>
                                        )}
                                    </div>
                                </motion.div>
                            ))}
                        </AnimatePresence>
                    </div>
                )}

                {/* Commission Distribution */}
                {canViewCommissions && visibleMembers.length > 0 && (
                    <div className="mt-2">
                        <button
                            onClick={() => setCommissionOpen(!commissionOpen)}
                            className="flex items-center gap-2 text-xs font-mono font-bold text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 uppercase tracking-widest transition-colors mb-3"
                        >
                            <DollarSign size={14} />
                            Commission Distribution
                            {commissionOpen ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
                        </button>
                        <AnimatePresence>
                            {commissionOpen && (
                                <motion.div
                                    initial={{ height: 0, opacity: 0 }}
                                    animate={{ height: 'auto', opacity: 1 }}
                                    exit={{ height: 0, opacity: 0 }}
                                    transition={{ duration: 0.25 }}
                                    className="overflow-hidden"
                                >
                                    <div className="overflow-x-auto rounded-xl border border-zinc-200 dark:border-white/5">
                                        <table className="w-full text-left">
                                            <thead>
                                                <tr className="border-b border-zinc-200 dark:border-white/5 bg-zinc-50 dark:bg-white/[0.02]">
                                                    <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Member</th>
                                                    <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Job Role</th>
                                                    <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Type</th>
                                                    <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest text-right">Rate</th>
                                                    <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest text-right">Value</th>
                                                    <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest text-center">Source</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {memberCommissions.filter(m => m.status === 'active').map((mc) => {
                                                    const srcCfg = COMMISSION_SOURCE_CFG[mc.resolved.source] || COMMISSION_SOURCE_CFG.org;
                                                    return (
                                                        <tr key={mc.id} className="border-b border-zinc-100 dark:border-white/[0.03] hover:bg-zinc-50 dark:hover:bg-white/[0.02] transition-colors">
                                                            <td className="px-4 py-3">
                                                                <div className="flex items-center gap-2">
                                                                    <div className="w-6 h-6 rounded-full bg-violet-500/15 flex items-center justify-center text-[10px] font-black text-violet-400 flex-shrink-0">
                                                                        {mc.name?.[0]}
                                                                    </div>
                                                                    <span className="text-xs font-semibold text-zinc-900 dark:text-white truncate">{mc.name}</span>
                                                                </div>
                                                            </td>
                                                            <td className="px-4 py-3">
                                                                <span className={`text-[11px] font-bold rounded-md px-1.5 py-0.5 border ${ROLE_COLORS[mc.jobRole] || 'text-zinc-400 bg-zinc-500/10 border-zinc-500/20'}`}>
                                                                    {mc.jobRole}
                                                                </span>
                                                            </td>
                                                            <td className="px-4 py-3 text-xs text-zinc-600 dark:text-zinc-400">{COMMISSION_TYPES[mc.resolved.type] || mc.resolved.type}</td>
                                                            <td className="px-4 py-3 text-right font-mono text-xs text-zinc-900 dark:text-white">
                                                                {mc.resolved.type === 'flat' || mc.resolved.type === 'custom'
                                                                    ? formatCurrency(mc.resolved.rate)
                                                                    : `${mc.resolved.rate}%`}
                                                            </td>
                                                            <td className="px-4 py-3 text-right font-mono text-xs font-bold text-green-600 dark:text-[#39ff14]">
                                                                {formatCurrency(mc.value)}
                                                            </td>
                                                            <td className="px-4 py-3 text-center">
                                                                <span className={`inline-flex items-center gap-1 text-[10px] font-bold rounded-full px-2 py-0.5 border ${srcCfg.bg}`}>
                                                                    <span className={`w-1.5 h-1.5 rounded-full ${srcCfg.dot}`} />
                                                                    <span className={srcCfg.color}>{srcCfg.label}</span>
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    );
                                                })}
                                            </tbody>
                                            <tfoot className="border-t-2 border-zinc-300 dark:border-white/10">
                                                <tr className="bg-zinc-50 dark:bg-white/[0.03]">
                                                    <td colSpan={4} className="px-4 py-3 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Total Distribution</td>
                                                    <td className="px-4 py-3 text-right font-mono text-xs font-bold text-green-600 dark:text-[#39ff14]">
                                                        {formatCurrency(memberCommissions.filter(m => m.status === 'active').reduce((s, mc) => s + mc.value, 0))}
                                                    </td>
                                                    <td />
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </motion.div>
                            )}
                        </AnimatePresence>
                    </div>
                )}
            </div>

            {/* ── Invite Modal ── */}
            {inviteOpen && createPortal(
                <InviteModal
                    allUsers={allUsers}
                    personnel={personnel}
                    existingIds={teamMembers.map(m => m.userId)}
                    onInvite={(member) => {
                        onAddMember(project.id, member);
                        setInviteOpen(false);
                    }}
                    onClose={() => setInviteOpen(false)}
                />,
                document.body
            )}

            {/* ── Remove Confirmation ── */}
            {removeConfirm && createPortal(
                <RemoveConfirmModal
                    member={removeConfirm}
                    projectName={project.projectType}
                    onConfirm={() => {
                        onRemoveMember(project.id, removeConfirm.id);
                        setRemoveConfirm(null);
                    }}
                    onClose={() => setRemoveConfirm(null)}
                />,
                document.body
            )}

            {/* ── Edit Commission Modal ── */}
            {editingCommission && createPortal(
                <EditCommissionModal
                    member={editingCommission}
                    orgDefaults={orgCommissionDefaults}
                    userOverrides={userCommissionOverrides}
                    roleOverrides={roleCommissionOverrides}
                    orgMembers={orgMembers}
                    onSave={(memberId, jobCommission) => {
                        onUpdateMember(project.id, memberId, { jobCommission });
                        setEditingCommission(null);
                    }}
                    onClear={(memberId) => {
                        onUpdateMember(project.id, memberId, { jobCommission: null });
                        setEditingCommission(null);
                    }}
                    onClose={() => setEditingCommission(null)}
                />,
                document.body
            )}
        </>
    );
};

// ─── Invite Modal ──────────────────────────────────────────────────────────────

const InviteModal = ({ allUsers, personnel, existingIds, onInvite, onClose }) => {
    const [tab, setTab] = useState('search');
    const [query, setQuery] = useState('');
    const [selectedRole, setSelectedRole] = useState('Sales Rep');
    const [emailForm, setEmailForm] = useState({ name: '', email: '' });

    const searchable = useMemo(() => {
        const fromUsers = allUsers
            .filter(u => !['customer'].includes(u.type))
            .map(u => ({ userId: u.id, name: u.name, email: u.email, orgRole: u.role || u.type?.toUpperCase() || 'EMPLOYEE' }));
        const fromPersonnel = personnel
            .map(p => ({ userId: p.id, name: p.name, email: p.email, orgRole: p.role }));
        const merged = new Map();
        [...fromUsers, ...fromPersonnel].forEach(s => merged.set(s.userId, s));
        return Array.from(merged.values()).filter(s => !existingIds.includes(s.userId));
    }, [allUsers, personnel, existingIds]);

    const filtered = useMemo(() => {
        if (!query.trim()) return searchable;
        const q = query.toLowerCase();
        return searchable.filter(s => s.name.toLowerCase().includes(q) || s.email.toLowerCase().includes(q));
    }, [searchable, query]);

    const handleSearchInvite = (person) => {
        onInvite({
            userId: person.userId,
            name: person.name,
            email: person.email,
            orgRole: person.orgRole,
            jobRole: selectedRole,
            status: 'active',
            jobCommission: null,
        });
    };

    const handleEmailInvite = () => {
        if (!emailForm.name.trim() || !emailForm.email.trim()) return;
        onInvite({
            userId: `inv_${Date.now()}`,
            name: emailForm.name.trim(),
            email: emailForm.email.trim(),
            orgRole: 'INVITED',
            jobRole: selectedRole,
            status: 'pending',
            jobCommission: null,
        });
    };

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm" onClick={onClose}>
            <motion.div
                initial={{ scale: 0.95, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                exit={{ scale: 0.95, opacity: 0 }}
                transition={{ type: 'spring', stiffness: 300, damping: 30 }}
                className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden"
                onClick={e => e.stopPropagation()}
            >
                {/* Header */}
                <div className="flex items-center justify-between p-5 border-b border-zinc-200 dark:border-white/5">
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-2xl bg-violet-500/15 flex items-center justify-center">
                            <UserPlus size={18} className="text-violet-500" />
                        </div>
                        <div>
                            <h3 className="text-base font-bold text-zinc-900 dark:text-white">Invite to Job</h3>
                            <p className="text-[11px] text-zinc-500">Add team members to this project</p>
                        </div>
                    </div>
                    <button onClick={onClose} className="p-2 rounded-xl hover:bg-zinc-100 dark:hover:bg-white/5 text-zinc-400 transition-colors">
                        <XIcon size={18} />
                    </button>
                </div>

                {/* Tabs */}
                <div className="flex border-b border-zinc-200 dark:border-white/5">
                    {[
                        { key: 'search', label: 'Search Users', icon: Search },
                        { key: 'email', label: 'Invite by Email', icon: Mail },
                    ].map(t => (
                        <button
                            key={t.key}
                            onClick={() => setTab(t.key)}
                            className={`flex-1 py-3 flex items-center justify-center gap-2 text-xs font-bold transition-colors border-b-2
                                ${tab === t.key
                                    ? 'text-violet-600 dark:text-violet-400 border-violet-500'
                                    : 'text-zinc-500 border-transparent hover:text-zinc-700 dark:hover:text-zinc-300'}`}
                        >
                            <t.icon size={14} /> {t.label}
                        </button>
                    ))}
                </div>

                {/* Role Selector */}
                <div className="px-5 pt-4 pb-2">
                    <label className="text-[10px] font-mono text-zinc-500 uppercase tracking-widest block mb-1.5">Assign Job Role</label>
                    <select
                        value={selectedRole}
                        onChange={e => setSelectedRole(e.target.value)}
                        className="w-full text-sm font-semibold rounded-xl px-3 py-2.5 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white outline-none focus:border-violet-500 transition-colors"
                    >
                        {JOB_ROLES.map(r => <option key={r} value={r}>{r}</option>)}
                    </select>
                </div>

                {/* Search Tab */}
                {tab === 'search' && (
                    <div className="p-5 pt-2">
                        <div className="relative mb-3">
                            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
                            <input
                                value={query}
                                onChange={e => setQuery(e.target.value)}
                                placeholder="Search by name or email..."
                                autoFocus
                                className="w-full pl-9 pr-3 py-2.5 text-sm rounded-xl bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white placeholder-zinc-400 outline-none focus:border-violet-500 transition-colors"
                            />
                        </div>
                        <div className="max-h-56 overflow-y-auto space-y-1">
                            {filtered.length === 0 ? (
                                <p className="text-xs text-zinc-500 text-center py-6">No matching users found</p>
                            ) : filtered.map(person => (
                                <button
                                    key={person.userId}
                                    onClick={() => handleSearchInvite(person)}
                                    className="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors text-left"
                                >
                                    <div className="w-8 h-8 rounded-full bg-violet-500/15 flex items-center justify-center text-xs font-black text-violet-400 flex-shrink-0">
                                        {person.name?.[0]}
                                    </div>
                                    <div className="flex-1 min-w-0">
                                        <p className="text-sm font-semibold text-zinc-900 dark:text-white truncate">{person.name}</p>
                                        <p className="text-[11px] text-zinc-500 truncate">{person.email} · {person.orgRole?.replace(/_/g, ' ')}</p>
                                    </div>
                                    <UserPlus size={14} className="text-violet-500 flex-shrink-0" />
                                </button>
                            ))}
                        </div>
                    </div>
                )}

                {/* Email Tab */}
                {tab === 'email' && (
                    <div className="p-5 pt-2 space-y-3">
                        <div>
                            <label className="text-[10px] font-mono text-zinc-500 uppercase tracking-widest block mb-1">Full Name</label>
                            <input
                                value={emailForm.name}
                                onChange={e => setEmailForm(prev => ({ ...prev, name: e.target.value }))}
                                placeholder="John Smith"
                                className="w-full px-3 py-2.5 text-sm rounded-xl bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white placeholder-zinc-400 outline-none focus:border-violet-500 transition-colors"
                            />
                        </div>
                        <div>
                            <label className="text-[10px] font-mono text-zinc-500 uppercase tracking-widest block mb-1">Email Address</label>
                            <input
                                value={emailForm.email}
                                onChange={e => setEmailForm(prev => ({ ...prev, email: e.target.value }))}
                                placeholder="john@example.com"
                                type="email"
                                className="w-full px-3 py-2.5 text-sm rounded-xl bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white placeholder-zinc-400 outline-none focus:border-violet-500 transition-colors"
                            />
                        </div>
                        <button
                            onClick={handleEmailInvite}
                            disabled={!emailForm.name.trim() || !emailForm.email.trim()}
                            className="w-full py-2.5 bg-violet-600 hover:bg-violet-700 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-bold rounded-xl transition-colors flex items-center justify-center gap-2"
                        >
                            <Mail size={14} /> Send Invitation
                        </button>
                        <p className="text-[10px] text-zinc-500 text-center">
                            Invitation will be sent with a <strong>pending</strong> status until accepted.
                        </p>
                    </div>
                )}
            </motion.div>
        </div>
    );
};

// ─── Remove Confirmation Modal ─────────────────────────────────────────────────

const RemoveConfirmModal = ({ member, projectName, onConfirm, onClose }) => (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm" onClick={onClose}>
        <motion.div
            initial={{ scale: 0.95, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-3xl shadow-2xl w-full max-w-sm p-6"
            onClick={e => e.stopPropagation()}
        >
            <div className="w-12 h-12 rounded-2xl bg-red-500/15 flex items-center justify-center mx-auto mb-4">
                <UserMinus size={22} className="text-red-400" />
            </div>
            <h3 className="font-bold text-zinc-900 dark:text-white text-base text-center">Remove from Job?</h3>
            <p className="text-sm text-zinc-500 text-center mt-2 mb-1">
                <strong className="text-zinc-700 dark:text-zinc-300">{member.name}</strong> will be removed from this {projectName} job.
            </p>
            <p className="text-xs text-zinc-400 text-center mb-5">
                This will not affect their organization role or other job assignments.
            </p>
            <div className="flex gap-3">
                <button onClick={onClose}
                    className="flex-1 px-4 py-2.5 rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 text-sm font-semibold hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors">
                    Cancel
                </button>
                <button onClick={onConfirm}
                    className="flex-1 px-4 py-2.5 rounded-xl bg-red-600 hover:bg-red-700 text-white text-sm font-bold transition-colors">
                    Remove
                </button>
            </div>
        </motion.div>
    </div>
);

// ─── Edit Commission Modal ─────────────────────────────────────────────────────

const EditCommissionModal = ({ member, orgDefaults, userOverrides, roleOverrides, orgMembers, onSave, onClear, onClose }) => {
    const resolved = resolveCommissionForMember(member, userOverrides, roleOverrides, orgMembers, orgDefaults);
    const hasJobOverride = !!member.jobCommission;

    const [type, setType] = useState(hasJobOverride ? member.jobCommission.type : resolved.type);
    const [rate, setRate] = useState(hasJobOverride ? member.jobCommission.rate : resolved.rate);

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm" onClick={onClose}>
            <motion.div
                initial={{ scale: 0.95, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-3xl shadow-2xl w-full max-w-sm overflow-hidden"
                onClick={e => e.stopPropagation()}
            >
                <div className="p-5 border-b border-zinc-200 dark:border-white/5">
                    <h3 className="text-base font-bold text-zinc-900 dark:text-white">Job Commission Override</h3>
                    <p className="text-[11px] text-zinc-500 mt-1">Override commission for <strong className="text-zinc-700 dark:text-zinc-300">{member.name}</strong> on this job only.</p>
                </div>

                {/* Current Resolution */}
                <div className="px-5 pt-4">
                    <div className="bg-zinc-50 dark:bg-white/[0.03] rounded-xl p-3 border border-zinc-200 dark:border-white/5 mb-4">
                        <p className="text-[10px] font-mono text-zinc-500 uppercase tracking-widest mb-1">Currently Resolved From</p>
                        <div className="flex items-center gap-2">
                            {(() => {
                                const cfg = COMMISSION_SOURCE_CFG[resolved.source] || COMMISSION_SOURCE_CFG.org;
                                return (
                                    <>
                                        <span className={`w-2 h-2 rounded-full ${cfg.dot}`} />
                                        <span className={`text-xs font-bold ${cfg.color}`}>{cfg.label}</span>
                                        <span className="text-xs text-zinc-500">— {COMMISSION_TYPES[resolved.type]} @ {resolved.type === 'flat' || resolved.type === 'custom' ? formatCurrency(resolved.rate) : `${resolved.rate}%`}</span>
                                    </>
                                );
                            })()}
                        </div>
                    </div>
                </div>

                <div className="px-5 pb-2 space-y-3">
                    <div>
                        <label className="text-[10px] font-mono text-zinc-500 uppercase tracking-widest block mb-1">Commission Type</label>
                        <select
                            value={type}
                            onChange={e => setType(e.target.value)}
                            className="w-full text-sm font-semibold rounded-xl px-3 py-2.5 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white outline-none focus:border-amber-500 transition-colors"
                        >
                            {Object.entries(COMMISSION_TYPES).map(([k, v]) => (
                                <option key={k} value={k}>{v}</option>
                            ))}
                        </select>
                    </div>
                    <div>
                        <label className="text-[10px] font-mono text-zinc-500 uppercase tracking-widest block mb-1">
                            {type === 'flat' || type === 'custom' ? 'Amount ($)' : 'Rate (%)'}
                        </label>
                        <input
                            type="number"
                            value={rate}
                            onChange={e => setRate(e.target.value)}
                            min="0"
                            step={type === 'flat' || type === 'custom' ? '100' : '0.5'}
                            className="w-full px-3 py-2.5 text-sm font-mono rounded-xl bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white outline-none focus:border-amber-500 transition-colors"
                        />
                    </div>
                </div>

                <div className="p-5 flex flex-col gap-2">
                    <button
                        onClick={() => onSave(member.id, { type, rate: Number(rate) || 0 })}
                        className="w-full py-2.5 bg-amber-500 hover:bg-amber-600 text-black text-sm font-bold rounded-xl transition-colors"
                    >
                        Save Job Override
                    </button>
                    {hasJobOverride && (
                        <button
                            onClick={() => onClear(member.id)}
                            className="w-full py-2 text-xs font-semibold text-zinc-500 hover:text-red-500 transition-colors"
                        >
                            Clear job override (revert to {COMMISSION_SOURCE_CFG[resolveCommissionForMember({ ...member, jobCommission: null }, userOverrides, roleOverrides, orgMembers, orgDefaults).source]?.label || 'default'})
                        </button>
                    )}
                </div>
            </motion.div>
        </div>
    );
};

export default TeamManagementPanel;
export { JOB_ROLES };