const AdminPanel = ({ currentUser, onClose, allTags = [], onTagsChange }) => {
    const [tab, setTab]             = React.useState('users');
    const [users, setUsers]         = React.useState([]);
    const [loading, setLoading]     = React.useState(true);
    const [showCreateForm, setShowCreateForm] = React.useState(false);
    const [savingId, setSavingId]   = React.useState(null);

    // ── Teams state ───────────────────────────────────────────────
    const [teams, setTeams]                     = React.useState([]);
    const [assistants, setAssistants]           = React.useState([]);
    const [teamsLoading, setTeamsLoading]       = React.useState(false);
    const [showTeamForm, setShowTeamForm]       = React.useState(false);
    const [editingTeam, setEditingTeam]         = React.useState(null); // team object or null
    const [teamForm, setTeamForm]               = React.useState({ name: '', description: '', color: '#6b7280' });
    const [teamSaving, setTeamSaving]           = React.useState(false);
    const [newAssistRep, setNewAssistRep]       = React.useState('');
    const [newAssistant, setNewAssistant]       = React.useState('');
    const [assistSaving, setAssistSaving]       = React.useState(false);

    // Bulk reassign state
    const [fromUser, setFromUser]   = React.useState('');
    const [toUser, setToUser]       = React.useState('');
    const [reassigning, setReassigning] = React.useState(false);
    const [reassignResult, setReassignResult] = React.useState('');

    React.useEffect(() => {
        api.getUsers().then(data => { setUsers(data); setLoading(false); }).catch(console.error);
    }, []);

    const loadTeams = () => {
        setTeamsLoading(true);
        Promise.all([api.getTeams(), api.getAssistants()])
            .then(([t, a]) => { setTeams(t); setAssistants(a); })
            .catch(console.error)
            .finally(() => setTeamsLoading(false));
    };

    React.useEffect(() => { if (tab === 'teams') loadTeams(); }, [tab]);

    const handleSaveTeam = async (e) => {
        e.preventDefault();
        setTeamSaving(true);
        try {
            if (editingTeam) {
                await api.updateTeam(editingTeam.id, teamForm);
            } else {
                await api.createTeam(teamForm);
            }
            setShowTeamForm(false); setEditingTeam(null);
            setTeamForm({ name: '', description: '', color: '#6b7280' });
            loadTeams();
        } catch (err) { alert(err.message); }
        finally { setTeamSaving(false); }
    };

    const handleDeleteTeam = async (team) => {
        if (!window.confirm(`Deactivate team "${team.name}"?`)) return;
        try { await api.deleteTeam(team.id); loadTeams(); }
        catch (err) { alert(err.message); }
    };

    const handleAddMember = async (teamId, userId) => {
        if (!userId) return;
        try { await api.addTeamMember(teamId, userId); loadTeams(); }
        catch (err) { alert(err.message); }
    };

    const handleRemoveMember = async (teamId, userId) => {
        try { await api.removeTeamMember(teamId, userId); loadTeams(); }
        catch (err) { alert(err.message); }
    };

    const handleAddAssistant = async (e) => {
        e.preventDefault();
        if (!newAssistRep || !newAssistant) return;
        setAssistSaving(true);
        try {
            await api.addAssistant(parseInt(newAssistRep), parseInt(newAssistant));
            setNewAssistRep(''); setNewAssistant('');
            loadTeams();
        } catch (err) { alert(err.message); }
        finally { setAssistSaving(false); }
    };

    const handleRemoveAssistant = async (repId, assistantId) => {
        try { await api.removeAssistant(repId, assistantId); loadTeams(); }
        catch (err) { alert(err.message); }
    };

    const refreshUsers = () => api.getUsers().then(setUsers).catch(console.error);

    const handleRoleChange = async (userId, newRole) => {
        setSavingId(userId);
        try { await api.updateUser(userId, { role: newRole }); await refreshUsers(); }
        catch (e) { alert('Error: ' + e.message); }
        finally { setSavingId(null); }
    };

    const handleToggleActive = async (user) => {
        setSavingId(user.id);
        try { await api.updateUser(user.id, { is_active: !user.is_active }); await refreshUsers(); }
        catch (e) { alert('Error: ' + e.message); }
        finally { setSavingId(null); }
    };

    const handleBulkReassign = async () => {
        if (!fromUser || !toUser) return;
        if (fromUser === toUser) { setReassignResult('Source and destination must be different.'); return; }
        if (!window.confirm(`Move all accounts from the selected rep to the new owner?`)) return;
        setReassigning(true); setReassignResult('');
        try {
            const r = await api.bulkReassign(parseInt(fromUser), parseInt(toUser));
            setReassignResult(`✅ ${r.message}`);
            await refreshUsers();
        } catch (e) { setReassignResult('❌ ' + e.message); }
        finally { setReassigning(false); }
    };

    const handleCreateUser = async (formData) => {
        const result = await api.createUser(formData);
        await refreshUsers();
        // Invite mode keeps the form open to display the one-time activation
        // link; password mode is done immediately.
        if (!result.invite_url) setShowCreateForm(false);
        return result;
    };

    const handleReinviteUser = async (user) => {
        try {
            const r = await api.reinviteUser(user.id);
            window.prompt(`Fresh activation link for ${user.first_name} (single-use, 7 days) — copy it:`, r.invite_url);
        } catch (err) { alert(err.message); }
    };

    // Tag management state
    const [newTagName, setNewTagName]   = React.useState('');
    const [newTagColor, setNewTagColor] = React.useState('#3b82f6');
    const [tagSaving, setTagSaving]     = React.useState(false);

    // ── Platform (operator-only): tenant onboarding & management ──
    const isPlatform = !!currentUser.is_platform;
    const [tenants, setTenants]             = React.useState([]);
    const [tenantsLoading, setTenantsLoading] = React.useState(false);
    const [showOnboardForm, setShowOnboardForm] = React.useState(false);
    // invite tokens are shown ONCE (server stores only hashes) — keep the
    // freshest one per tenant in memory so the packet/link stay grabbable
    // until this panel closes.
    const [freshInvites, setFreshInvites]   = React.useState({});   // tenantId → { url, token }

    const loadTenants = () => {
        setTenantsLoading(true);
        api.getTenants().then(setTenants).catch(console.error).finally(() => setTenantsLoading(false));
    };
    React.useEffect(() => { if (tab === 'platform') loadTenants(); }, [tab]);

    const handleOnboard = async (form) => {
        const r = await api.createTenant(form);
        setFreshInvites(p => ({ ...p, [r.tenant.id]: { url: r.invite_url, token: r.invite_token } }));
        setShowOnboardForm(false);
        loadTenants();
        return r;
    };

    const handleReinvite = async (tenant) => {
        try {
            const r = await api.reinviteTenant(tenant.id);
            setFreshInvites(p => ({ ...p, [tenant.id]: { url: r.invite_url, token: r.invite_token } }));
        } catch (err) { alert(err.message); }
    };

    const handleSuspend = async (tenant) => {
        const to = tenant.status === 'active' ? 'suspended' : 'active';
        if (to === 'suspended' && !window.confirm(`Suspend "${tenant.name}"? All their users will be locked out until reactivated.`)) return;
        try { await api.updateTenant(tenant.id, { status: to }); loadTenants(); }
        catch (err) { alert(err.message); }
    };

    // Authenticated PDF download → blob → save. (A bare <a href> would miss
    // the Authorization header.)
    const downloadPacket = async (tenant) => {
        const inviteTok = freshInvites[tenant.id]?.token;
        const res = await fetch(api.tenantPacketUrl(tenant.id, inviteTok), {
            headers: { Authorization: `Bearer ${getToken()}` },
        });
        if (!res.ok) { alert('Packet download failed.'); return; }
        const blob = await res.blob();
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = `${tenant.slug}-onboarding-packet.pdf`;
        a.click();
        URL.revokeObjectURL(a.href);
    };

    // Audit log
    const [auditEntries, setAuditEntries] = React.useState([]);
    const [auditLoading, setAuditLoading] = React.useState(false);
    React.useEffect(() => {
        if (tab !== 'audit') return;
        setAuditLoading(true);
        api.getAudit({ limit: 100 })
            .then(r => setAuditEntries(r.entries || []))
            .catch(console.error)
            .finally(() => setAuditLoading(false));
    }, [tab]);

    const handleCreateTag = async (e) => {
        e.preventDefault();
        if (!newTagName.trim()) return;
        setTagSaving(true);
        try {
            await api.createTag({ name: newTagName.trim(), color: newTagColor });
            setNewTagName(''); onTagsChange && onTagsChange();
        } catch(err) { alert(err.message); }
        finally { setTagSaving(false); }
    };

    const handleDeleteTag = async (tag) => {
        if (!window.confirm(`Delete tag "${tag.name}"? It will be removed from all accounts.`)) return;
        try { await api.deleteTag(tag.id); onTagsChange && onTagsChange(); }
        catch(err) { alert(err.message); }
    };

    const activeUsers = users.filter(u => u.is_active);

    return (
        <div className="admin-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
            <div className="admin-drawer">
                <div className="admin-header">
                    <h2><i className="fas fa-shield-alt" style={{ marginRight: '0.5rem' }}></i>Admin Panel</h2>
                    <button className="admin-close" onClick={onClose}><i className="fas fa-times"></i></button>
                </div>

                <div className="admin-tabs">
                    <button className={`admin-tab ${tab === 'users' ? 'active' : ''}`} onClick={() => setTab('users')}>
                        <i className="fas fa-users" style={{ marginRight: '0.375rem' }}></i>Users ({users.length})
                    </button>
                    <button className={`admin-tab ${tab === 'reassign' ? 'active' : ''}`} onClick={() => setTab('reassign')}>
                        <i className="fas fa-exchange-alt" style={{ marginRight: '0.375rem' }}></i>Reassign
                    </button>
                    <button className={`admin-tab ${tab === 'tags' ? 'active' : ''}`} onClick={() => setTab('tags')}>
                        <i className="fas fa-tags" style={{ marginRight: '0.375rem' }}></i>Tags ({allTags.length})
                    </button>
                    <button className={`admin-tab ${tab === 'teams' ? 'active' : ''}`} onClick={() => setTab('teams')}>
                        <i className="fas fa-layer-group" style={{ marginRight: '0.375rem' }}></i>Teams
                    </button>
                    <button className={`admin-tab ${tab === 'audit' ? 'active' : ''}`} onClick={() => setTab('audit')}>
                        <i className="fas fa-clipboard-list" style={{ marginRight: '0.375rem' }}></i>Audit Log
                    </button>
                    {isPlatform && (
                        <button className={`admin-tab ${tab === 'platform' ? 'active' : ''}`} onClick={() => setTab('platform')}>
                            <i className="fas fa-city" style={{ marginRight: '0.375rem' }}></i>Businesses
                        </button>
                    )}
                </div>

                <div className="admin-body">
                    {loading ? (
                        <div className="loading-state"><i className="fas fa-spinner fa-spin"></i>Loading…</div>
                    ) : tab === 'tags' ? (
                        <div>
                            <p style={{ fontSize: '0.875rem', color: '#6b7280', marginBottom: '1.25rem' }}>Tags can be applied to accounts for filtering and categorization.</p>
                            <form onSubmit={handleCreateTag} style={{ display: 'flex', gap: '0.75rem', alignItems: 'flex-end', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
                                <div className="form-group" style={{ flex: 1, minWidth: 180 }}>
                                    <label className="form-label">Tag Name</label>
                                    <input className="form-input" value={newTagName} onChange={e => setNewTagName(e.target.value)} placeholder="e.g. VIP, Wholesale, Prospect…" required />
                                </div>
                                <div className="form-group">
                                    <label className="form-label">Color</label>
                                    <input type="color" style={{ width: 48, height: 38, padding: '0.1rem', border: '1px solid #d1d5db', borderRadius: '0.375rem', cursor: 'pointer' }} value={newTagColor} onChange={e => setNewTagColor(e.target.value)} />
                                </div>
                                <button type="submit" className="btn btn-primary btn-small" disabled={tagSaving} style={{ marginBottom: '0.1rem' }}>
                                    {tagSaving ? <><i className="fas fa-spinner fa-spin"></i> Creating…</> : <><i className="fas fa-plus"></i> Create Tag</>}
                                </button>
                            </form>
                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem' }}>
                                {allTags.length === 0
                                    ? <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>No tags yet.</p>
                                    : allTags.map(t => (
                                        <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', background: t.color + '18', border: `1px solid ${t.color}44`, borderRadius: '999px', padding: '0.3rem 0.75rem 0.3rem 0.5rem' }}>
                                            <span style={{ width: 10, height: 10, borderRadius: '50%', background: t.color, flexShrink: 0 }}></span>
                                            <span style={{ fontWeight: 600, fontSize: '0.8125rem', color: t.color }}>{t.name}</span>
                                            <span style={{ fontSize: '0.75rem', color: '#9ca3af' }}>({t.usage_count})</span>
                                            {currentUser.role === 'admin' && (
                                                <button className="btn-icon-sm danger" onClick={() => handleDeleteTag(t)} title="Delete tag" style={{ padding: '0.1rem 0.3rem', fontSize: '0.7rem' }}><i className="fas fa-times"></i></button>
                                            )}
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                    ) : tab === 'users' ? (
                        <>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                                <p style={{ fontSize: '0.875rem', color: '#6b7280' }}>{users.length} users · {activeUsers.length} active</p>
                                <button className="btn btn-primary btn-small" onClick={() => setShowCreateForm(s => !s)}>
                                    <i className={`fas ${showCreateForm ? 'fa-times' : 'fa-plus'}`}></i>
                                    {showCreateForm ? 'Cancel' : 'New User'}
                                </button>
                            </div>

                            {showCreateForm && (
                                <div style={{ background: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: '0.5rem', padding: '1.25rem', marginBottom: '1.5rem' }}>
                                    <h4 style={{ marginBottom: '1rem', color: '#0369a1' }}><i className="fas fa-user-plus" style={{ marginRight: '0.375rem' }}></i>Create New User</h4>
                                    <CreateUserForm onSubmit={handleCreateUser} onCancel={() => setShowCreateForm(false)} />
                                </div>
                            )}

                            <table className="user-table">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Role</th>
                                        <th>Accounts</th>
                                        <th>Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {users.map(user => (
                                        <tr key={user.id} className={!user.is_active ? 'inactive' : ''}>
                                            <td style={{ fontWeight: 500 }}>{user.first_name} {user.last_name}</td>
                                            <td style={{ color: '#6b7280', fontSize: '0.8125rem' }}>{user.email}</td>
                                            <td>
                                                {currentUser.id === user.id ? (
                                                    <span className={`role-badge ${user.role}`}>{user.role}</span>
                                                ) : (
                                                    <select
                                                        className="inline-select"
                                                        value={user.role}
                                                        onChange={(e) => handleRoleChange(user.id, e.target.value)}
                                                        disabled={savingId === user.id}
                                                    >
                                                        <option value="rep">rep</option>
                                                        <option value="manager">manager</option>
                                                        <option value="admin">admin</option>
                                                    </select>
                                                )}
                                            </td>
                                            <td style={{ color: '#374151', fontWeight: 500 }}>{user.account_count || 0}</td>
                                            <td>
                                                <span style={{ fontSize: '0.75rem', color: user.invite_pending ? '#f59e0b' : user.is_active ? '#10b981' : '#9ca3af', fontWeight: 500 }}>
                                                    {user.invite_pending ? '◐ Invited' : user.is_active ? '● Active' : '○ Inactive'}
                                                </span>
                                            </td>
                                            <td>
                                                {user.invite_pending && (
                                                    <button
                                                        className="btn-icon-sm"
                                                        title="Generate a fresh activation link"
                                                        onClick={() => handleReinviteUser(user)}
                                                    >
                                                        <i className="fas fa-envelope-open-text"></i>
                                                    </button>
                                                )}
                                                {currentUser.id !== user.id && (
                                                    <button
                                                        className="btn-icon-sm danger"
                                                        title={user.is_active ? 'Deactivate user' : 'Reactivate user'}
                                                        onClick={() => handleToggleActive(user)}
                                                        disabled={savingId === user.id}
                                                    >
                                                        {savingId === user.id
                                                            ? <i className="fas fa-spinner fa-spin"></i>
                                                            : <i className={`fas ${user.is_active ? 'fa-user-slash' : 'fa-user-check'}`}></i>}
                                                    </button>
                                                )}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </>
                    ) : tab === 'reassign' ? (
                        /* ── Reassign Tab ── */
                        <div>
                            <p style={{ fontSize: '0.875rem', color: '#6b7280', marginBottom: '1.5rem' }}>
                                Move all accounts from one rep to another — useful when someone leaves the team or territories change.
                            </p>

                            <div className="reassign-box">
                                <h4><i className="fas fa-exchange-alt"></i>Bulk Reassign Accounts</h4>
                                <div className="reassign-row">
                                    <div className="form-group" style={{ flex: 1, minWidth: 180 }}>
                                        <label className="form-label">Move accounts FROM</label>
                                        <select className="form-input" value={fromUser} onChange={e => { setFromUser(e.target.value); setReassignResult(''); }}>
                                            <option value="">— Select rep —</option>
                                            {users.map(u => (
                                                <option key={u.id} value={u.id}>{u.first_name} {u.last_name} ({u.account_count || 0} accounts)</option>
                                            ))}
                                        </select>
                                    </div>
                                    <div style={{ paddingBottom: '0.25rem', color: '#6b7280' }}><i className="fas fa-arrow-right"></i></div>
                                    <div className="form-group" style={{ flex: 1, minWidth: 180 }}>
                                        <label className="form-label">Assign TO</label>
                                        <select className="form-input" value={toUser} onChange={e => { setToUser(e.target.value); setReassignResult(''); }}>
                                            <option value="">— Select rep —</option>
                                            {users.filter(u => u.is_active).map(u => (
                                                <option key={u.id} value={u.id}>{u.first_name} {u.last_name}</option>
                                            ))}
                                        </select>
                                    </div>
                                    <div style={{ paddingBottom: '0.25rem' }}>
                                        <button
                                            className="btn btn-primary"
                                            onClick={handleBulkReassign}
                                            disabled={!fromUser || !toUser || reassigning}
                                        >
                                            {reassigning ? <><i className="fas fa-spinner fa-spin"></i> Moving…</> : <><i className="fas fa-exchange-alt"></i> Reassign</>}
                                        </button>
                                    </div>
                                </div>
                                {reassignResult && (
                                    <div style={{ marginTop: '0.75rem', fontSize: '0.875rem', color: reassignResult.startsWith('✅') ? '#065f46' : '#dc2626', background: reassignResult.startsWith('✅') ? '#d1fae5' : '#fee2e2', padding: '0.5rem 0.75rem', borderRadius: '0.25rem' }}>
                                        {reassignResult}
                                    </div>
                                )}
                            </div>

                            <div style={{ marginTop: '2rem' }}>
                                <h4 style={{ fontSize: '0.9375rem', fontWeight: 600, color: '#374151', marginBottom: '1rem' }}>Account Distribution</h4>
                                <table className="user-table">
                                    <thead><tr><th>Rep</th><th>Role</th><th>Accounts</th><th>Status</th></tr></thead>
                                    <tbody>
                                        {users.map(u => (
                                            <tr key={u.id} className={!u.is_active ? 'inactive' : ''}>
                                                <td style={{ fontWeight: 500 }}>{u.first_name} {u.last_name}</td>
                                                <td><span className={`role-badge ${u.role}`}>{u.role}</span></td>
                                                <td style={{ fontWeight: 600 }}>{u.account_count || 0}</td>
                                                <td style={{ fontSize: '0.75rem', color: u.is_active ? '#10b981' : '#9ca3af' }}>{u.is_active ? '● Active' : '○ Inactive'}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    ) : tab === 'teams' ? (
                        <div>
                            {teamsLoading ? (
                                <div className="loading-state"><i className="fas fa-spinner fa-spin"></i>Loading…</div>
                            ) : (
                                <>
                                    {/* ── Team Queues ── */}
                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                                        <div>
                                            <h4 style={{ fontWeight: 600, color: '#0f172a', marginBottom: '0.2rem' }}>Team Queues</h4>
                                            <p style={{ fontSize: '0.8125rem', color: '#6b7280' }}>Shared inboxes anyone on the team can monitor and claim work from.</p>
                                        </div>
                                        <button className="btn btn-primary btn-small" onClick={() => {
                                            setEditingTeam(null);
                                            setTeamForm({ name: '', description: '', color: '#6b7280' });
                                            setShowTeamForm(s => !s);
                                        }}>
                                            <i className={`fas ${showTeamForm && !editingTeam ? 'fa-times' : 'fa-plus'}`}></i>
                                            {showTeamForm && !editingTeam ? ' Cancel' : ' New Team'}
                                        </button>
                                    </div>

                                    {(showTeamForm) && (
                                        <form onSubmit={handleSaveTeam} style={{ background: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: '0.5rem', padding: '1rem', marginBottom: '1.25rem' }}>
                                            <h5 style={{ marginBottom: '0.75rem', color: '#0369a1' }}>{editingTeam ? 'Edit Team' : 'New Team'}</h5>
                                            <div className="form-grid">
                                                <div className="form-group">
                                                    <label className="form-label">Team Name *</label>
                                                    <input className="form-input" value={teamForm.name} onChange={e => setTeamForm(p => ({ ...p, name: e.target.value }))} placeholder="e.g. Admin Support, Accounting…" required />
                                                </div>
                                                <div className="form-group" style={{ display: 'flex', alignItems: 'flex-end', gap: '0.5rem' }}>
                                                    <div style={{ flex: 1 }}>
                                                        <label className="form-label">Description</label>
                                                        <input className="form-input" value={teamForm.description} onChange={e => setTeamForm(p => ({ ...p, description: e.target.value }))} placeholder="Optional" />
                                                    </div>
                                                    <div>
                                                        <label className="form-label">Color</label>
                                                        <input type="color" style={{ width: 40, height: 38, padding: '0.1rem', border: '1px solid #d1d5db', borderRadius: '0.375rem', cursor: 'pointer' }} value={teamForm.color} onChange={e => setTeamForm(p => ({ ...p, color: e.target.value }))} />
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="btn-group" style={{ marginTop: 0 }}>
                                                <button type="button" className="btn btn-secondary btn-small" onClick={() => { setShowTeamForm(false); setEditingTeam(null); }} disabled={teamSaving}>Cancel</button>
                                                <button type="submit" className="btn btn-primary btn-small" disabled={teamSaving}>
                                                    {teamSaving ? <><i className="fas fa-spinner fa-spin"></i> Saving…</> : <><i className="fas fa-check"></i> {editingTeam ? 'Save Changes' : 'Create Team'}</>}
                                                </button>
                                            </div>
                                        </form>
                                    )}

                                    {teams.length === 0 ? (
                                        <p style={{ color: '#6b7280', fontSize: '0.875rem', marginBottom: '2rem' }}>No teams yet. Create one to start routing tasks to shared queues.</p>
                                    ) : (
                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginBottom: '2rem' }}>
                                            {teams.map(team => (
                                                <div key={team.id} className="team-card">
                                                    <div className="team-card-bar" style={{ background: team.color }}></div>
                                                    <div className="team-card-body">
                                                        <div className="team-card-header">
                                                            <div>
                                                                <span className="team-card-name">{team.name}</span>
                                                                {team.description && <span className="team-card-desc">{team.description}</span>}
                                                            </div>
                                                            <div style={{ display: 'flex', gap: '0.375rem' }}>
                                                                <button className="btn-icon-sm" title="Edit team" onClick={() => {
                                                                    setEditingTeam(team);
                                                                    setTeamForm({ name: team.name, description: team.description || '', color: team.color });
                                                                    setShowTeamForm(true);
                                                                }}><i className="fas fa-pencil-alt"></i></button>
                                                                {currentUser.role === 'admin' && (
                                                                    <button className="btn-icon-sm danger" title="Deactivate team" onClick={() => handleDeleteTeam(team)}><i className="fas fa-trash"></i></button>
                                                                )}
                                                            </div>
                                                        </div>

                                                        {/* Members */}
                                                        <div className="team-members-row">
                                                            {(team.members || []).map(m => (
                                                                <span key={m.id} className="team-member-chip">
                                                                    {m.first_name} {m.last_name}
                                                                    {m.is_lead && <span style={{ fontSize: '0.65rem', color: '#f59e0b', marginLeft: '0.2rem' }}>★</span>}
                                                                    <button className="team-member-remove" onClick={() => handleRemoveMember(team.id, m.id)} title="Remove">×</button>
                                                                </span>
                                                            ))}
                                                            <select
                                                                className="team-add-member-select"
                                                                defaultValue=""
                                                                onChange={e => { if (e.target.value) { handleAddMember(team.id, parseInt(e.target.value)); e.target.value = ''; } }}
                                                            >
                                                                <option value="">+ Add member…</option>
                                                                {users.filter(u => u.is_active && !(team.members || []).find(m => m.id === u.id)).map(u => (
                                                                    <option key={u.id} value={u.id}>{u.first_name} {u.last_name} ({u.role})</option>
                                                                ))}
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    )}

                                    {/* ── Rep → Assistant assignments ── */}
                                    <div style={{ borderTop: '1px solid #e2e8f0', paddingTop: '1.5rem' }}>
                                        <h4 style={{ fontWeight: 600, color: '#0f172a', marginBottom: '0.2rem' }}>Rep Assistants</h4>
                                        <p style={{ fontSize: '0.8125rem', color: '#6b7280', marginBottom: '1rem' }}>Assign an assistant to a sales rep — they'll see that rep's tasks alongside their own.</p>

                                        <form onSubmit={handleAddAssistant} style={{ display: 'flex', gap: '0.75rem', alignItems: 'flex-end', flexWrap: 'wrap', marginBottom: '1rem' }}>
                                            <div className="form-group" style={{ flex: 1, minWidth: 160 }}>
                                                <label className="form-label">Rep</label>
                                                <select className="form-input" value={newAssistRep} onChange={e => setNewAssistRep(e.target.value)} required>
                                                    <option value="">— Select rep —</option>
                                                    {users.filter(u => u.is_active).map(u => (
                                                        <option key={u.id} value={u.id}>{u.first_name} {u.last_name} ({u.role})</option>
                                                    ))}
                                                </select>
                                            </div>
                                            <div className="form-group" style={{ flex: 1, minWidth: 160 }}>
                                                <label className="form-label">Assistant</label>
                                                <select className="form-input" value={newAssistant} onChange={e => setNewAssistant(e.target.value)} required>
                                                    <option value="">— Select user —</option>
                                                    {users.filter(u => u.is_active && u.id !== parseInt(newAssistRep)).map(u => (
                                                        <option key={u.id} value={u.id}>{u.first_name} {u.last_name} ({u.role})</option>
                                                    ))}
                                                </select>
                                            </div>
                                            <button type="submit" className="btn btn-primary btn-small" disabled={assistSaving || !newAssistRep || !newAssistant} style={{ marginBottom: '0.1rem' }}>
                                                {assistSaving ? <><i className="fas fa-spinner fa-spin"></i></> : <><i className="fas fa-link"></i> Assign</>}
                                            </button>
                                        </form>

                                        {assistants.length === 0 ? (
                                            <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>No assistant assignments yet.</p>
                                        ) : (
                                            <table className="user-table">
                                                <thead><tr><th>Rep</th><th>Assistant</th><th></th></tr></thead>
                                                <tbody>
                                                    {assistants.map(a => (
                                                        <tr key={`${a.rep_id}-${a.assistant_id}`}>
                                                            <td style={{ fontWeight: 500 }}>{a.rep_name} <span className={`role-badge ${a.rep_role}`}>{a.rep_role}</span></td>
                                                            <td>{a.assistant_name} <span className={`role-badge ${a.assistant_role}`}>{a.assistant_role}</span></td>
                                                            <td>
                                                                <button className="btn-icon-sm danger" onClick={() => handleRemoveAssistant(a.rep_id, a.assistant_id)} title="Remove assignment"><i className="fas fa-unlink"></i></button>
                                                            </td>
                                                        </tr>
                                                    ))}
                                                </tbody>
                                            </table>
                                        )}
                                    </div>
                                </>
                            )}
                        </div>
                    ) : tab === 'platform' ? (
                        <div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                                <p style={{ fontSize: '0.875rem', color: '#6b7280' }}>
                                    Each business gets its own isolated workspace. Onboarding creates the workspace,
                                    its owner, an activation link, and the PDF welcome packet — one button.
                                </p>
                                <button className="btn btn-primary btn-small" onClick={() => setShowOnboardForm(s => !s)}>
                                    <i className={`fas ${showOnboardForm ? 'fa-times' : 'fa-plus'}`}></i>
                                    {showOnboardForm ? ' Cancel' : ' Onboard Business'}
                                </button>
                            </div>

                            {showOnboardForm && (
                                <div style={{ background: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: '0.5rem', padding: '1.25rem', marginBottom: '1.5rem' }}>
                                    <h4 style={{ marginBottom: '1rem', color: '#0369a1' }}>
                                        <i className="fas fa-city" style={{ marginRight: '0.375rem' }}></i>New Business
                                    </h4>
                                    <OnboardTenantForm onSubmit={handleOnboard} onCancel={() => setShowOnboardForm(false)} />
                                </div>
                            )}

                            {tenantsLoading ? (
                                <div className="loading-state"><i className="fas fa-spinner fa-spin"></i> Loading…</div>
                            ) : tenants.length === 0 ? (
                                <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>No businesses yet — onboard the first one above.</p>
                            ) : (
                                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                                    {tenants.map(t => (
                                        <div key={t.id} className="team-card">
                                            <div className="team-card-bar" style={{ background: t.status === 'active' ? '#10b981' : '#9ca3af' }}></div>
                                            <div className="team-card-body">
                                                <div className="team-card-header">
                                                    <div>
                                                        <span className="team-card-name">{t.name}</span>
                                                        <span className="team-card-desc">
                                                            {t.owner_email || 'no owner yet'} · {t.user_count} user{t.user_count === 1 ? '' : 's'} · {t.account_count} account{t.account_count === 1 ? '' : 's'}
                                                            {t.pending_invites > 0 && <span style={{ color: '#f59e0b' }}> · invite pending</span>}
                                                            {t.status !== 'active' && <span style={{ color: '#dc2626' }}> · SUSPENDED</span>}
                                                        </span>
                                                    </div>
                                                    <div style={{ display: 'flex', gap: '0.375rem' }}>
                                                        <button className="btn-icon-sm" title="Download onboarding packet (PDF)" onClick={() => downloadPacket(t)}>
                                                            <i className="fas fa-file-pdf"></i>
                                                        </button>
                                                        <button className="btn-icon-sm" title="Generate a fresh activation link" onClick={() => handleReinvite(t)}>
                                                            <i className="fas fa-envelope-open-text"></i>
                                                        </button>
                                                        <button className="btn-icon-sm danger" title={t.status === 'active' ? 'Suspend business' : 'Reactivate business'} onClick={() => handleSuspend(t)}>
                                                            <i className={`fas ${t.status === 'active' ? 'fa-ban' : 'fa-undo'}`}></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                {freshInvites[t.id] && (
                                                    <div style={{ marginTop: '0.6rem', fontSize: '0.8125rem', background: '#ecfdf5', border: '1px solid #a7f3d0', borderRadius: '0.375rem', padding: '0.5rem 0.75rem', wordBreak: 'break-all' }}>
                                                        <strong>Activation link</strong> (single-use, 7 days — copy it now, it won't be shown again):<br />
                                                        <code>{freshInvites[t.id].url}</code>
                                                        <button className="btn btn-secondary btn-small" style={{ marginLeft: '0.5rem' }}
                                                                onClick={() => navigator.clipboard.writeText(freshInvites[t.id].url)}>
                                                            <i className="fas fa-copy"></i> Copy
                                                        </button>
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    ) : tab === 'audit' ? (
                        <div>
                            <p style={{ fontSize: '0.875rem', color: '#6b7280', marginBottom: '1rem' }}>
                                Every change to a record is logged automatically — who, when, and what changed. Read-only and tamper-evident.
                            </p>
                            {auditLoading ? (
                                <div className="loading-state"><i className="fas fa-spinner fa-spin"></i> Loading…</div>
                            ) : auditEntries.length === 0 ? (
                                <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>No audit entries yet.</p>
                            ) : (
                                <table className="admin-table" style={{ fontSize: '0.8125rem' }}>
                                    <thead>
                                        <tr>
                                            <th>When</th><th>Who</th><th>Action</th><th>Record</th><th>Changed</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {auditEntries.map(e => (
                                            <tr key={e.id}>
                                                <td style={{ whiteSpace: 'nowrap' }}>{new Date(e.changed_at).toLocaleString()}</td>
                                                <td>{e.actor_name || <span style={{ color: '#9ca3af' }}>system</span>}</td>
                                                <td>
                                                    <span className="badge" style={{ fontSize: '0.65rem',
                                                        background: e.action === 'DELETE' ? '#fee2e2' : e.action === 'INSERT' ? '#dcfce7' : '#e0e7ff',
                                                        color: e.action === 'DELETE' ? '#991b1b' : e.action === 'INSERT' ? '#166534' : '#3730a3' }}>
                                                        {e.action}
                                                    </span>
                                                </td>
                                                <td>{e.table_name} #{e.row_id}</td>
                                                <td style={{ color: '#6b7280' }}>{(e.changed_fields || []).join(', ') || '—'}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            )}
                        </div>
                    ) : null}
                </div>
            </div>
        </div>
    );
};

const CreateUserForm = ({ onSubmit, onCancel }) => {
    const [form, setForm]   = React.useState({ email: '', first_name: '', last_name: '', role: 'rep', password: '' });
    // 'invite' (default): no password — the response carries an activation
    // link the new user opens to set their own. 'password': classic create.
    const [mode, setMode]   = React.useState('invite');
    const [inviteUrl, setInviteUrl] = React.useState('');
    const [error, setError] = React.useState('');
    const [saving, setSaving] = React.useState(false);
    const set = (k) => (e) => setForm(p => ({ ...p, [k]: e.target.value }));

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (mode === 'password' && form.password.length < 8) { setError('Password must be at least 8 characters.'); return; }
        setSaving(true); setError('');
        try {
            const payload = { ...form };
            if (mode === 'invite') delete payload.password;
            const result = await onSubmit(payload);
            if (result && result.invite_url) { setInviteUrl(result.invite_url); setSaving(false); }
        }
        catch (err) { setError(err.message); setSaving(false); }
    };

    if (inviteUrl) {
        return (
            <div>
                <p style={{ fontSize: '0.875rem', marginBottom: '0.5rem' }}>
                    <i className="fas fa-check-circle" style={{ color: '#10b981', marginRight: '0.375rem' }}></i>
                    User created. Send them this activation link — it works once and expires in 7 days:
                </p>
                <div style={{ fontSize: '0.8125rem', background: '#ecfdf5', border: '1px solid #a7f3d0', borderRadius: '0.375rem', padding: '0.5rem 0.75rem', wordBreak: 'break-all' }}>
                    <code>{inviteUrl}</code>
                    <button className="btn btn-secondary btn-small" style={{ marginLeft: '0.5rem' }}
                            onClick={() => navigator.clipboard.writeText(inviteUrl)}>
                        <i className="fas fa-copy"></i> Copy
                    </button>
                </div>
                <div className="btn-group" style={{ marginTop: '0.75rem' }}>
                    <button type="button" className="btn btn-primary btn-small" onClick={onCancel}>Done</button>
                </div>
            </div>
        );
    }

    return (
        <form onSubmit={handleSubmit}>
            {error && <div className="api-error" style={{ marginBottom: '0.75rem' }}>{error}</div>}
            <div className="form-grid">
                <div className="form-group">
                    <label className="form-label">First Name *</label>
                    <input type="text" className="form-input" value={form.first_name} onChange={set('first_name')} required />
                </div>
                <div className="form-group">
                    <label className="form-label">Last Name *</label>
                    <input type="text" className="form-input" value={form.last_name} onChange={set('last_name')} required />
                </div>
                <div className="form-group">
                    <label className="form-label">Email *</label>
                    <input type="email" className="form-input" value={form.email} onChange={set('email')} required />
                </div>
                <div className="form-group">
                    <label className="form-label">Role</label>
                    <select className="form-input" value={form.role} onChange={set('role')}>
                        <option value="rep">Rep</option>
                        <option value="manager">Manager</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <div className="form-group full-width">
                    <label className="form-label">How do they get in?</label>
                    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                        <button type="button" className={`btn btn-small ${mode === 'invite' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setMode('invite')}>
                            <i className="fas fa-envelope-open-text"></i> Activation link (they choose their password)
                        </button>
                        <button type="button" className={`btn btn-small ${mode === 'password' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setMode('password')}>
                            <i className="fas fa-key"></i> I'll set a password now
                        </button>
                    </div>
                </div>
                {mode === 'password' && (
                    <div className="form-group full-width">
                        <label className="form-label">Password *</label>
                        <input type="password" className="form-input" value={form.password} onChange={set('password')} placeholder="Min 8 characters" required />
                    </div>
                )}
            </div>
            <div className="btn-group" style={{ marginTop: 0 }}>
                <button type="button" className="btn btn-secondary btn-small" onClick={onCancel} disabled={saving}>Cancel</button>
                <button type="submit" className="btn btn-primary btn-small" disabled={saving}>
                    {saving ? <><i className="fas fa-spinner fa-spin"></i> Creating…</> : <><i className="fas fa-user-plus"></i> {mode === 'invite' ? 'Create & Get Link' : 'Create User'}</>}
                </button>
            </div>
        </form>
    );
};

// Platform-operator intake form — the whole onboarding is these four fields.
const OnboardTenantForm = ({ onSubmit, onCancel }) => {
    const [form, setForm]   = React.useState({ business_name: '', owner_first: '', owner_last: '', owner_email: '' });
    const [error, setError] = React.useState('');
    const [saving, setSaving] = React.useState(false);
    const set = (k) => (e) => setForm(p => ({ ...p, [k]: e.target.value }));

    const handleSubmit = async (e) => {
        e.preventDefault();
        setSaving(true); setError('');
        try { await onSubmit(form); }
        catch (err) { setError(err.message); setSaving(false); }
    };

    return (
        <form onSubmit={handleSubmit}>
            {error && <div className="api-error" style={{ marginBottom: '0.75rem' }}>{error}</div>}
            <div className="form-grid">
                <div className="form-group full-width">
                    <label className="form-label">Business Name *</label>
                    <input type="text" className="form-input" value={form.business_name} onChange={set('business_name')} placeholder="e.g. Sunrise Cleaning Co" required autoFocus />
                </div>
                <div className="form-group">
                    <label className="form-label">Owner First Name *</label>
                    <input type="text" className="form-input" value={form.owner_first} onChange={set('owner_first')} required />
                </div>
                <div className="form-group">
                    <label className="form-label">Owner Last Name *</label>
                    <input type="text" className="form-input" value={form.owner_last} onChange={set('owner_last')} required />
                </div>
                <div className="form-group full-width">
                    <label className="form-label">Owner Email *</label>
                    <input type="email" className="form-input" value={form.owner_email} onChange={set('owner_email')} required />
                </div>
            </div>
            <div className="btn-group" style={{ marginTop: 0 }}>
                <button type="button" className="btn btn-secondary btn-small" onClick={onCancel} disabled={saving}>Cancel</button>
                <button type="submit" className="btn btn-primary btn-small" disabled={saving}>
                    {saving ? <><i className="fas fa-spinner fa-spin"></i> Creating workspace…</> : <><i className="fas fa-rocket"></i> Create Workspace</>}
                </button>
            </div>
        </form>
    );
};