// members.jsx
function MembersPage({ user }) {
  const [members, setMembers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [adding, setAdding] = React.useState(false);
  const [error, setError] = React.useState('');

  const load = () => {
    setLoading(true);
    window.api.getMembers()
      .then(setMembers)
      .catch(console.error)
      .finally(() => setLoading(false));
  };

  React.useEffect(load, []);

  const handleAdd = async () => {
    if (!name.trim() || !email.trim()) return;
    setAdding(true);
    setError('');
    try {
      const m = await window.api.createMember({ name: name.trim(), email: email.trim() });
      setMembers(prev => [...prev, m]);
      setName(''); setEmail('');
    } catch (e) {
      setError(e.message || '添加失败');
    } finally {
      setAdding(false);
    }
  };

  const handleDelete = async (id) => {
    if (!confirm('确认删除该成员？')) return;
    try {
      await window.api.deleteMember(id);
      setMembers(prev => prev.filter(m => m.id !== id));
    } catch (e) {
      alert(e.message || '删除失败');
    }
  };

  return (
    <main className="main">
      <header className="main-header">
        <div className="crumbs">
          <span className="crumb-soft">设置</span>
          <span className="crumb-sep">/</span>
          <span className="crumb-cur">成员管理</span>
        </div>
      </header>

      <div className="page-body">
        <div className="page-title-row">
          <div>
            <h1 className="page-title">团队成员</h1>
            <div className="page-sub">管理可分配线索的团队成员</div>
          </div>
        </div>

        {user?.isAdmin && (
          <div className="member-add-card">
            <div className="member-add-title">添加成员</div>
            <div className="member-add-row">
              <input className="form-input" placeholder="姓名" value={name} onChange={e => setName(e.target.value)} />
              <input className="form-input" type="email" placeholder="邮箱" value={email} onChange={e => setEmail(e.target.value)}
                onKeyDown={e => e.key === 'Enter' && handleAdd()} />
              <button className="btn-primary" onClick={handleAdd} disabled={adding || !name.trim() || !email.trim()}>
                {adding ? '添加中…' : '添加'}
              </button>
            </div>
            {error && <div style={{ color: '#ef4444', fontSize: 12, marginTop: 6 }}>{error}</div>}
          </div>
        )}

        <div className="table-wrap" style={{ marginTop: 16 }}>
          {loading ? (
            <div className="empty">加载中…</div>
          ) : members.length === 0 ? (
            <div className="empty">还没有成员，添加第一个吧</div>
          ) : (
            <table className="leads-table">
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>邮箱</th>
                  <th>加入时间</th>
                  {user?.isAdmin && <th className="th-act"></th>}
                </tr>
              </thead>
              <tbody>
                {members.map(m => (
                  <tr key={m.id} className="lead-row">
                    <td>
                      <div className="cell-name">
                        <div className="avatar-sm" style={{ background: '#7C5CFF' }}>
                          {m.name.slice(0, 1)}
                        </div>
                        <span>{m.name}</span>
                      </div>
                    </td>
                    <td style={{ fontSize: 13, color: '#64748b' }}>{m.email}</td>
                    <td style={{ fontSize: 13, color: '#94a3b8' }}>{(m.created_at || '').slice(0, 10)}</td>
                    {user?.isAdmin && (
                      <td className="td-act">
                        <button className="btn-ghost danger sm" onClick={() => handleDelete(m.id)}>删除</button>
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </main>
  );
}

window.MembersPage = MembersPage;