// Teams — shared queues + rep assistants. Migrated from the AdminPanel drawer.

const TeamsSection = ({ currentUser }) => {
    const [users, setUsers]               = React.useState([]);
    const [teams, setTeams]               = React.useState([]);
    const [assistants, setAssistants]     = React.useState([]);
    const [loading, setLoading]           = React.useState(true);
    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);

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

    React.useEffect(() => {
        Promise.all([api.getUsers(), api.getTeams(), api.getAssistants()])
            .then(([u, t, a]) => { setUsers(u); setTeams(t); setAssistants(a); })
            .catch(console.error)
            .finally(() => setLoading(false));
    }, []);

    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); }
    };

    if (loading) return <div className="loading-state"><i className="fas fa-spinner fa-spin"></i>Loading…</div>;

    return (
        <div className="settings-form">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                <div>
                    <h4 style={{ fontWeight: 600, color: 'var(--text)', marginBottom: '0.2rem' }}>Team Queues</h4>
                    <p style={{ fontSize: '0.8125rem', color: 'var(--text-3)' }}>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} className="admin-form-card">
                    <h5 style={{ marginBottom: '0.75rem' }}>{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">
                            <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 className="form-group full-width">
                            <label className="form-label">Color</label>
                            <ColorSwatchPicker value={teamForm.color} onChange={c => setTeamForm(p => ({ ...p, color: c }))} />
                        </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: 'var(--text-3)', 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>

                                <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: 'var(--warning)', 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>
            )}

            <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1.5rem' }}>
                <h4 style={{ fontWeight: 600, color: 'var(--text)', marginBottom: '0.2rem' }}>Rep Assistants</h4>
                <p style={{ fontSize: '0.8125rem', color: 'var(--text-3)', 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: 'var(--text-3)', 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>
    );
};