opsxsql/frontend/src/pages/UsersPage.tsx

import { useState, useEffect, useCallback } from 'react';
import { Plus, Search, Edit2, Trash2, XCircle } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { roles } from '@/lib/mock';
import { userApi } from '@/api/user';

interface UserItem {
  id: number;
  username: string;
  display_name: string;
  email: string | null;
  role: string;
  is_active: boolean;
  created_at: string;
}

const roleNameMap: Record<string, string> = {
  admin: '超级管理员',
  dba: '数据库管理员',
  developer: '开发人员',
  guest: '访客',
};

const roleTagStyle: Record<string, string> = {
  admin: 'bg-purple-500/15 text-purple-400',
  dba: 'bg-blue-500/15 text-blue-400',
  developer: 'bg-green-500/15 text-green-400',
  guest: 'bg-gray-500/15 text-gray-400',
};

export default function UsersPage() {
  const [search, setSearch] = useState('');
  const [roleFilter, setRoleFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [users, setUsers] = useState<UserItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [showCreate, setShowCreate] = useState(false);

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    try {
      const res = await userApi.list();
      const data = (res as any)?.items || res;
      setUsers(Array.isArray(data) ? data : []);
    } catch {
      // keep existing data
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { fetchUsers(); }, [fetchUsers]);

  const filtered = users.filter(u => {
    if (roleFilter && u.role !== roleFilter) return false;
    if (statusFilter === 'active' && !u.is_active) return false;
    if (statusFilter === 'disabled' && u.is_active) return false;
    if (search && !u.username.includes(search) && !(u.email || '').includes(search)) return false;
    return true;
  });

  const handleToggleActive = async (user: UserItem) => {
    try {
      await userApi.update(user.id, { is_active: !user.is_active });
      fetchUsers();
    } catch {}
  };

  const handleDelete = async (id: number) => {
    if (!confirm('确定删除该用户？')) return;
    try {
      await userApi.delete(id);
      fetchUsers();
    } catch {}
  };

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold">用户管理</h1>
          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">管理系统用户，分配角色和数据库访问权限</p>
        </div>
        <button onClick={() => setShowCreate(true)} className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity">
          <Plus className="w-4 h-4" /> 新建用户
        </button>
      </div>

      {/* 筛选 */}
      <div className="flex items-center gap-3 p-4 dg-card flex-wrap">
        <div className="relative flex-1 max-w-xs">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
          <input className="w-full pl-10 pr-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm placeholder:text-[var(--dg-text-muted)] focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400/20" placeholder="搜索用户名/邮箱" value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <select className="px-3 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={roleFilter} onChange={e => setRoleFilter(e.target.value)}>
          <option value="">全部角色</option>
          {roles.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
        </select>
        <select className="px-3 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
          <option value="">全部状态</option>
          <option value="active">启用</option>
          <option value="disabled">禁用</option>
        </select>
      </div>

      {/* 用户表格 */}
      <Card className="dg-card">
        <CardContent className="p-0">
          {loading && users.length === 0 ? (
            <div className="p-10 text-center text-[var(--dg-text-muted)]">加载中...</div>
          ) : (
            <>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
                      <th className="text-left px-5 py-3 font-semibold">用户</th>
                      <th className="text-left px-5 py-3 font-semibold">角色</th>
                      <th className="text-left px-5 py-3 font-semibold">邮箱</th>
                      <th className="text-left px-5 py-3 font-semibold">状态</th>
                      <th className="text-left px-5 py-3 font-semibold">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtered.map(user => (
                      <tr key={user.id} className="border-b border-[var(--dg-border-light)] hover:bg-[var(--dg-bg-hover)] transition-colors">
                        <td className="px-5 py-3.5">
                          <div className="flex items-center gap-3">
                            <div className="w-9 h-9 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-semibold">
                              {(user.display_name || user.username).charAt(0)}
                            </div>
                            <div>
                              <div className="font-medium">{user.display_name || user.username}</div>
                              <div className="text-xs text-[var(--dg-text-muted)]">@{user.username}</div>
                            </div>
                          </div>
                        </td>
                        <td className="px-5 py-3.5">
                          <span className={`inline-flex px-2.5 py-1 rounded-md text-xs font-medium ${roleTagStyle[user.role] || 'bg-gray-500/15 text-gray-400'}`}>
                            {roleNameMap[user.role] || user.role}
                          </span>
                        </td>
                        <td className="px-5 py-3.5 text-[var(--dg-text-secondary)]">{user.email || '-'}</td>
                        <td className="px-5 py-3.5">
                          <button onClick={() => handleToggleActive(user)} className={`relative w-11 h-6 rounded-full transition-colors ${user.is_active ? 'bg-green-500' : 'bg-[var(--dg-bg-hover)]'}`}>
                            <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-all`} style={{ transform: user.is_active ? 'translateX(20px)' : 'translateX(2px)' }} />
                          </button>
                        </td>
                        <td className="px-5 py-3.5">
                          <div className="flex gap-2">
                            <button className="text-blue-400 hover:text-blue-300 transition-colors"><Edit2 className="w-4 h-4" /></button>
                            <button className="text-red-400 hover:text-red-300 transition-colors" onClick={() => handleDelete(user.id)}><Trash2 className="w-4 h-4" /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="flex items-center justify-between px-5 py-4 border-t border-[var(--dg-border)]">
                <span className="text-sm text-[var(--dg-text-muted)]">共 {filtered.length} 条记录</span>
              </div>
            </>
          )}
        </CardContent>
      </Card>

      {/* 新建用户弹窗 */}
      {showCreate && (
        <CreateUserModal onClose={() => setShowCreate(false)} onCreated={() => { setShowCreate(false); fetchUsers(); }} />
      )}
    </div>
  );
}

function CreateUserModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
  const [username, setUsername] = useState('');
  const [displayName, setDisplayName] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');
  const [role, setRole] = useState('developer');
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    if (!username || !password) { setError('用户名和密码必填'); return; }
    setSubmitting(true);
    setError('');
    try {
      await userApi.create({ username, display_name: displayName, password, email: email || undefined, role });
      onCreated();
    } catch (e: any) {
      setError(e?.response?.data?.detail || '创建失败');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="w-full max-w-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 shadow-xl">
        <div className="flex items-center justify-between mb-5">
          <h2 className="text-lg font-semibold">新建用户</h2>
          <button onClick={onClose} className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]"><XCircle className="w-5 h-5" /></button>
        </div>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">用户名 *</label>
            <input value={username} onChange={e => setUsername(e.target.value)} className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">显示名称</label>
            <input value={displayName} onChange={e => setDisplayName(e.target.value)} className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">密码 *</label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">邮箱</label>
            <input value={email} onChange={e => setEmail(e.target.value)} className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none" />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">角色</label>
            <select value={role} onChange={e => setRole(e.target.value)} className="w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none">
              <option value="admin">超级管理员</option>
              <option value="dba">数据库管理员</option>
              <option value="developer">开发人员</option>
              <option value="guest">访客</option>
            </select>
          </div>
          {error && <div className="text-sm text-red-400">{error}</div>}
          <div className="flex justify-end gap-3 pt-2">
            <button onClick={onClose} className="px-4 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)]">取消</button>
            <button onClick={handleSubmit} disabled={submitting} className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:opacity-90 disabled:opacity-50">
              {submitting ? '创建中...' : '创建'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}