import { type FormEvent, useEffect, useState, useRef } from "react";

import {
  ApiRequestError,
  type Employee,
  type Workspace,
  type WorkspaceMember,
} from "../../services/api";
import { useApi, useAuth } from "../../context/AuthContext";
import Icon from "../../components/common/Icon";
import "../../styles/admin.css";
import "../../styles/dashboard.css";
import "../../styles/platform.css";


type Notice = {
  tone: "success" | "error" | "info";
  message: string;
};

export function DashboardPage({
  scriptCount,
  online,
  onNavigate,
}: {
  scriptCount: number;
  online: boolean;
  onNavigate: (page: "scripts" | "schedules" | "system") => void;
}) {
  const { user, currentWorkspace } = useAuth();
  return (
    <section className="dashboard-page">
      <div className="dashboard-hero">
        <div>
          <span>MODEL DEVELOPMENT PLATFORM</span>
          <h2>下午好，{user?.display_name ?? "用户"}</h2>
          <p>
            当前位于 {currentWorkspace?.workspace_name ?? "（未选择 Workspace）"}
            ，可以继续构建脚本或配置调度。
          </p>
        </div>
        <span className="dashboard-hero__badge">{online ? "服务正常" : "服务连接中"}</span>
      </div>
      <div className="dashboard-metrics">
        <article><Icon name="script" /><span><b>{scriptCount}</b><small>工作副本</small></span></article>
        <article><Icon name="workspace" /><span><b>2</b><small>Workspace</small></span></article>
        <article><Icon name="settings" /><span><b>4</b><small>平台用户</small></span></article>
        <article><Icon name="check" /><span><b>{online ? "正常" : "检查中"}</b><small>平台状态</small></span></article>
      </div>
      <div className="dashboard-actions">
        <button type="button" onClick={() => onNavigate("scripts")}><Icon name="script" />构建脚本</button>
        <button type="button" onClick={() => onNavigate("schedules")}><Icon name="schedule" />调度配置</button>
        <button type="button" onClick={() => onNavigate("system")}><Icon name="settings" />系统管理</button>
      </div>
      <div className="dashboard-grid">
        <section className="dashboard-panel dashboard-panel--trend">
          <header><div><span>运行趋势</span><h3>近 7 天调度执行</h3></div><b>成功率 92.6%</b></header>
          <div className="trend-chart">
            {[38, 55, 44, 73, 61, 86, 78].map((value, index) => (
              <div className="trend-column" key={index}>
                <span className="trend-column__value">{Math.round(value / 7)}</span>
                <i style={{ height: `${value}%` }} />
                <small>{["周一", "周二", "周三", "周四", "周五", "周六", "今天"][index]}</small>
              </div>
            ))}
          </div>
          <footer><span><i className="legend-dot is-success" />成功 75</span><span><i className="legend-dot is-failed" />失败 6</span></footer>
        </section>
        <section className="dashboard-panel dashboard-panel--donut">
          <header><div><span>脚本资产</span><h3>类型分布</h3></div></header>
          <div className="donut-layout">
            <div className="donut-chart"><span><b>{scriptCount}</b><small>全部脚本</small></span></div>
            <div className="donut-legend">
              <span><i className="legend-dot is-notebook" /><b>Notebook</b><small>{Math.max(1, Math.round(scriptCount * .67))} 个 · 67%</small></span>
              <span><i className="legend-dot is-python" /><b>Python</b><small>{Math.max(0, scriptCount - Math.round(scriptCount * .67))} 个 · 33%</small></span>
              <span><i className="legend-dot is-version" /><b>稳定版本</b><small>3 个已发布</small></span>
            </div>
          </div>
        </section>
        <section className="dashboard-panel dashboard-panel--activity">
          <header><div><span>ACTIVITY</span><h3>最近平台活动</h3></div><button type="button">查看全部</button></header>
          <div className="activity-table">
            <div className="activity-table__head"><span>操作内容</span><span>执行人</span><span>状态</span><span>时间</span></div>
            {[
              ["数据探索.ipynb 发布稳定版本 v3.0", "张三", "成功", "16:42"],
              ["每日模型训练流程完成调度运行", "Scheduler", "成功", "15:25"],
              ["批量预测.py 更新工作副本", "王五", "已同步", "14:18"],
              ["风险验证流程完成 DAG 校验", "李四", "成功", "11:06"],
            ].map((row) => (
              <div className="activity-row" key={row[0]}>
                <span><i className="activity-icon"><Icon name="check" size={13} /></i>{row[0]}</span>
                <span>{row[1]}</span><span><b>{row[2]}</b></span><span>{row[3]}</span>
              </div>
            ))}
          </div>
        </section>
      </div>
    </section>
  );
}


const EMPTY_FORM = {
  username: "",
  display_name: "",
  email: "",
  role_code: "developer" as "admin" | "developer",
  password: "",
  status: "active" as "active" | "disabled" | "locked",
};

const EMPTY_PROJECT_FORM = {
  workspace_code: "",
  workspace_name: "",
  quota_bytes: 0,
  description: "",
};

type ProjectWithMembers = Workspace & {
  member_count: number;
  members?: WorkspaceMember[];
};

export function SystemAdminPage({
  onNotify,
  onConnectionChange,
}: {
  onNotify: (notice: Notice) => void;
  onConnectionChange: (online: boolean) => void;
}) {
  const [activeTab, setActiveTab] = useState<"users" | "projects">("users");
  const api = useApi();
  const { user, currentWorkspace } = useAuth();
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [editing, setEditing] = useState<Employee | null>(null);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [form, setForm] = useState(EMPTY_FORM);
  const [userSearchTerm, setUserSearchTerm] = useState("");

  // 项目管理状态
  const [projects, setProjects] = useState<Workspace[]>([]);
  const [projectLoading, setProjectLoading] = useState(true);
  const [projectDialogOpen, setProjectDialogOpen] = useState(false);
  const [projectForm, setProjectForm] = useState(EMPTY_PROJECT_FORM);
  const [editingProject, setEditingProject] = useState<Workspace | null>(null);
  const [importMemberDialogOpen, setImportMemberDialogOpen] = useState(false);
  const [selectedProject, setSelectedProject] = useState<Workspace | null>(null);
  const [availableUsers, setAvailableUsers] = useState<Employee[]>([]);
  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
  const [selectedRoleCode, setSelectedRoleCode] = useState<"admin" | "developer">("developer");
  const [projectSearchTerm, setProjectSearchTerm] = useState("");

  const canManage = user?.role_code === "admin";

  const load = async (): Promise<void> => {
    setLoading(true);
    try {
      setEmployees(await api.listEmployees());
      onConnectionChange(true);
    } catch (error) {
      onConnectionChange(false);
      onNotify({
        tone: "error",
        message: error instanceof Error ? error.message : "用户列表加载失败",
      });
    } finally {
      setLoading(false);
    }
  };

  const loadProjects = async (): Promise<void> => {
    setProjectLoading(true);
    try {
      const workspaceList = await api.listWorkspaces();
      setProjects(workspaceList);
      onConnectionChange(true);
    } catch (error) {
      onConnectionChange(false);
      onNotify({
        tone: "error",
        message: error instanceof Error ? error.message : "项目列表加载失败",
      });
    } finally {
      setProjectLoading(false);
    }
  };

  const loadAvailableUsers = async (): Promise<void> => {
    try {
      const list = await api.listEmployees();
      setAvailableUsers(list);
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof Error ? error.message : "用户列表加载失败",
      });
    }
  };

  useEffect(() => {
    void load();
  }, []);

  useEffect(() => {
    if (activeTab === "projects") {
      void loadProjects();
    }
  }, [activeTab]);

  const openCreate = (): void => {
    setEditing(null);
    setForm(EMPTY_FORM);
    setDialogOpen(true);
  };

  const openEdit = (employee: Employee): void => {
    setEditing(employee);
    setForm({
      username: employee.username,
      display_name: employee.display_name,
      email: employee.email ?? "",
      role_code: employee.role_code,
      password: "",
      status: employee.status,
    });
    setDialogOpen(true);
  };

  const submit = async (event: React.FormEvent): Promise<void> => {
    event.preventDefault();
    if (!form.display_name.trim() || (!editing && !form.username.trim())) return;
    // 新建用户时密码必填
    if (!editing && !form.password.trim()) {
      onNotify({ tone: "error", message: "请输入密码" });
      return;
    }
    // 密码长度校验 8~72 字符
    if (form.password && (form.password.length < 8 || form.password.length > 72)) {
      onNotify({ tone: "error", message: "密码长度必须在 8~72 字符之间" });
      return;
    }
    setSaving(true);
    try {
      if (editing) {
        const updated = await api.updateEmployee(editing.user_id, {
          display_name: form.display_name.trim(),
          email: form.email.trim() || null,
          role_code: form.role_code,
          status: form.status,
        });
        setEmployees((current) => current.map(
          (item) => item.user_id === updated.user_id ? updated : item,
        ));
        onNotify({ tone: "success", message: "用户信息已更新" });
      } else {
        const created = await api.createEmployee({
          username: form.username.trim(),
          display_name: form.display_name.trim(),
          email: form.email.trim() || null,
          role_code: form.role_code,
          password: form.password,
        });
        setEmployees((current) => [...current, created]);
        onNotify({ tone: "success", message: "用户已添加" });
      }
      setDialogOpen(false);
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof ApiRequestError ? error.message : "保存用户失败",
      });
    } finally {
      setSaving(false);
    }
  };

  const remove = async (employee: Employee): Promise<void> => {
    if (!window.confirm(`确定从当前 Workspace 删除用户"${employee.display_name}"吗？`)) return;
    try {
      await api.deleteEmployee(employee.user_id);
      setEmployees((current) => current.filter((item) => item.user_id !== employee.user_id));
      onNotify({ tone: "success", message: "用户已删除" });
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof Error ? error.message : "删除用户失败",
      });
    }
  };

  const openCreateProject = (): void => {
    setEditingProject(null);
    setProjectForm(EMPTY_PROJECT_FORM);
    setProjectDialogOpen(true);
  };

  const openEditProject = (project: Workspace): void => {
    setEditingProject(project);
    setProjectForm({
      workspace_code: project.workspace_code,
      workspace_name: project.workspace_name,
      quota_bytes: project.quota_bytes,
      description: project.description ?? "",
    });
    setProjectDialogOpen(true);
  };

  const submitProject = async (event: React.FormEvent): Promise<void> => {
    event.preventDefault();
    if (!projectForm.workspace_name.trim()) {
      onNotify({ tone: "error", message: "请输入项目名称" });
      return;
    }
    if (!projectForm.workspace_code.trim() && !editingProject) {
      onNotify({ tone: "error", message: "请输入项目编码" });
      return;
    }
    setSaving(true);
    try {
      if (editingProject) {
        // 编辑项目
        const updated = await api.updateWorkspace(editingProject.workspace_id, {
          workspace_name: projectForm.workspace_name.trim(),
          quota_bytes: projectForm.quota_bytes,
          description: projectForm.description.trim() || undefined,
        });
        setProjects((current) =>
          current.map((p) => (p.workspace_id === updated.workspace_id ? updated : p))
        );
        onNotify({ tone: "success", message: "项目信息已更新" });
      } else {
        // 创建项目
        const generatedCode = projectForm.workspace_code.trim() || projectForm.workspace_name.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-").slice(0, 32);
        const created = await api.createWorkspace({
          workspace_code: generatedCode,
          workspace_name: projectForm.workspace_name.trim(),
          quota_bytes: projectForm.quota_bytes,
          description: projectForm.description.trim() || undefined,
        });
        setProjects((current) => [...current, created]);
        onNotify({ tone: "success", message: "项目已创建" });
      }
      setProjectDialogOpen(false);
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof ApiRequestError ? error.message : (editingProject ? "更新项目失败" : "创建项目失败"),
      });
    } finally {
      setSaving(false);
    }
  };

  const deleteProject = async (project: Workspace): Promise<void> => {
    if (!window.confirm(`确定要删除项目"${project.workspace_name}"吗？此操作将级联软删所有成员。`)) return;
    try {
      await api.deleteWorkspace(project.workspace_id);
      setProjects((current) => current.filter((p) => p.workspace_id !== project.workspace_id));
      onNotify({ tone: "success", message: "项目已删除" });
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof Error ? error.message : "删除项目失败",
      });
    }
  };

  const openImportMemberDialog = (project: Workspace): void => {
    setSelectedProject(project);
    setSelectedUserIds([]);
    setSelectedRoleCode("developer");
    void loadAvailableUsers();
    setImportMemberDialogOpen(true);
  };

  const importMember = async (): Promise<void> => {
    if (!selectedProject || selectedUserIds.length === 0) {
      onNotify({ tone: "error", message: "请选择要添加的用户" });
      return;
    }
    setSaving(true);
    try {
      // 批量添加选中的用户
      await Promise.all(
        selectedUserIds.map((userId) =>
          api.addWorkspaceMember(selectedProject.workspace_id, {
            user_id: userId,
            role_code: selectedRoleCode,
          })
        )
      );
      setImportMemberDialogOpen(false);
      onNotify({ tone: "success", message: `已添加 ${selectedUserIds.length} 名成员` });
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof ApiRequestError ? error.message : "添加成员失败",
      });
    } finally {
      setSaving(false);
    }
  };

  return (
    <section className="admin-page">
      {/* <header className="admin-page__header">
        <div>
          <span>系统管理</span>
          <h3>{activeTab === "users" ? "用户管理" : "项目管理"}</h3>
          <p>
            {currentWorkspace?.workspace_name ?? "（未选择 Workspace）"}
            {activeTab === "users" ? ` · ${employees.length} 名用户` : ""}
          </p>
        </div>
        {activeTab === "users" && (
          <button className="primary-button" type="button" disabled={!canManage} onClick={openCreate}>
            <Icon name="plus" size={15} />添加用户
          </button>
        )}
      </header> */}

      <div className="admin-tabs">
        <button
          className={`admin-tab${activeTab === "users" ? " is-active" : ""}`}
          type="button"
          onClick={() => setActiveTab("users")}
        >
          <Icon name="workspace" size={16} />
          用户管理
        </button>
        <button
          className={`admin-tab${activeTab === "projects" ? " is-active" : ""}`}
          type="button"
          onClick={() => setActiveTab("projects")}
        >
          <Icon name="folder" size={16} />
          项目管理
        </button>
      </div>

      {activeTab === "users" && (
        <div className="admin-toolbar">
          <div className="admin-toolbar__search">
            <Icon name="search" size={14} />
            <input
              type="text"
              placeholder="请输入用户名"
              className="admin-toolbar__input"
              value={userSearchTerm}
              onChange={(event) => setUserSearchTerm(event.target.value)}
            />
          </div>
          <button
            className="primary-button admin-toolbar__button"
            type="button"
            disabled={!canManage}
            onClick={openCreate}
          >
            <Icon name="plus" size={15} />
            新建用户
          </button>
        </div>
      )}

      {activeTab === "projects" && (
        <div className="admin-toolbar">
          <div className="admin-toolbar__search">
            <Icon name="search" size={14} />
            <input
              type="text"
              placeholder="请输入项目名称"
              className="admin-toolbar__input"
              value={projectSearchTerm}
              onChange={(event) => setProjectSearchTerm(event.target.value)}
            />
          </div>
          <button
            className="primary-button admin-toolbar__button"
            type="button"
            disabled={!canManage}
            onClick={openCreateProject}
          >
            <Icon name="plus" size={15} />
            新建项目
          </button>
        </div>
      )}

      {activeTab === "users" ? (
        <>
          {!canManage && <div className="admin-readonly">当前为开发人员，只能查看用户列表。</div>}
          <div className="employee-table">
            <div className="employee-table__head"><span>用户</span><span>账号</span><span>角色</span><span>状态</span><span>操作</span></div>
            {loading ? (
              <p className="admin-empty">正在加载用户…</p>
            ) : (
              employees
                .filter((employee) => {
                  const term = userSearchTerm.toLowerCase().trim();
                  if (!term) return true;
                  return (
                    employee.display_name.toLowerCase().includes(term) ||
                    employee.username.toLowerCase().includes(term) ||
                    (employee.email && employee.email.toLowerCase().includes(term))
                  );
                })
                .map((employee) => {
                  const isProtectedAdmin = employee.role_code === "admin";
                  return (
                    <div className="employee-row" key={employee.user_id}>
                      <span className="employee-name"><b className="avatar">{employee.display_name.slice(0, 1)}</b><span><strong>{employee.display_name}</strong><small>{employee.email ?? "未设置邮箱"}</small></span></span>
                      <code>{employee.username}</code>
                      <span className={`role-pill is-${employee.role_code}`}>{employee.role_name}</span>
                      <span className={`status-pill is-${employee.status}`}>{employee.status === "active" ? "正常" : employee.status === "disabled" ? "已停用" : "已锁定"}</span>
                      <span className="employee-actions">
                        <button type="button" disabled={!canManage} onClick={() => openEdit(employee)}>编辑</button>
                        <button type="button" className="is-danger" disabled={!canManage || isProtectedAdmin} title={isProtectedAdmin ? "管理员账号不能删除" : "删除"} onClick={() => void remove(employee)}>删除</button>
                      </span>
                    </div>
                  );
                })
            )}
          </div>

          {dialogOpen && (
            <div className="modal-backdrop">
              <section className="modal modal--compact" role="dialog" aria-modal="true">
                <div className="modal__header">
                  <div>
                    <span className="modal__eyebrow">EMPLOYEE</span>
                    <h2>{editing ? "编辑用户" : "添加用户"}</h2>
                  </div>
                  <button className="icon-button" type="button" onClick={() => setDialogOpen(false)}><Icon name="close" /></button>
                </div>
                <form onSubmit={(event) => void submit(event)}>
                  <label className="form-field">
                    <span>姓名<span className="required">*</span></span>
                    <input
                      autoFocus={!editing}
                      value={form.display_name}
                      onChange={(event) => setForm({ ...form, display_name: event.target.value })}
                      placeholder="请输入姓名"
                    />
                  </label>
                  <label className="form-field">
                    <span>登录账号<span className="required">*</span></span>
                    <input
                      disabled={Boolean(editing)}
                      value={form.username}
                      onChange={(event) => setForm({ ...form, username: event.target.value })}
                      placeholder="请输入登录账号"
                      autoComplete="username"
                    />
                  </label>
                  {!editing && (
                    <label className="form-field">
                      <span>密码<span className="required">*</span></span>
                      <input
                        type="password"
                        autoComplete="new-password"
                        value={form.password}
                        onChange={(event) => setForm({ ...form, password: event.target.value })}
                        placeholder="请输入密码（8~72 字符）"
                      />
                    </label>
                  )}
                  <label className="form-field">
                    <span>邮箱</span>
                    <input
                      type="email"
                      autoComplete="email"
                      value={form.email}
                      onChange={(event) => setForm({ ...form, email: event.target.value })}
                      placeholder="请输入邮箱（可选）"
                    />
                  </label>
                  <label className="form-field">
                    <span>角色</span>
                    <select value={form.role_code} onChange={(event) => setForm({ ...form, role_code: event.target.value as "admin" | "developer" })}>
                      <option value="developer">开发人员</option>
                      <option value="admin">管理员</option>
                    </select>
                  </label>
                  {editing && (
                    <label className="form-field">
                      <span>状态</span>
                      <select value={form.status} onChange={(event) => setForm({ ...form, status: event.target.value as typeof form.status })}>
                        <option value="active">正常</option>
                        <option value="disabled">停用</option>
                        <option value="locked">锁定</option>
                      </select>
                    </label>
                  )}
                  <div className="modal__footer">
                    <button className="secondary-button" type="button" onClick={() => setDialogOpen(false)}>取消</button>
                    <button className="primary-button" type="submit" disabled={saving}>{saving ? "保存中…" : "保存"}</button>
                  </div>
                </form>
              </section>
            </div>
          )}
        </>
      ) : (
        <>
          {!canManage && <div className="admin-readonly">当前为开发人员，只能查看项目列表。</div>}
          <div className="employee-table">
            <div className="employee-table__head">
              <span>项目名称</span>
              <span>项目编码</span>
              <span>状态</span>
              <span>配额</span>
              <span>操作</span>
            </div>
            {projectLoading ? (
              <p className="admin-empty">正在加载项目…</p>
            ) : projects.length === 0 ? (
              <p className="admin-empty">暂无项目</p>
            ) : (
              projects
                .filter((project) => {
                  const term = projectSearchTerm.toLowerCase().trim();
                  if (!term) return true;
                  return (
                    project.workspace_name.toLowerCase().includes(term) ||
                    project.workspace_code.toLowerCase().includes(term) ||
                    (project.description && project.description.toLowerCase().includes(term))
                  );
                })
                .map((project) => (
                  <div className="employee-row" key={project.workspace_id}>
                    <span className="employee-name">
                      <b className="avatar">{project.workspace_name.slice(0, 1)}</b>
                      <span>
                        <strong>{project.workspace_name}</strong>
                        <small>{project.description ?? "无描述"}</small>
                      </span>
                    </span>
                    <code>{project.workspace_code}</code>
                    <span>
                      <span className={`status-pill is-${project.status}`}>
                        {project.status === "active" ? "正常" : project.status === "archived" ? "已归档" : "已删除"}
                      </span>
                    </span>
                    <span>{project.quota_bytes > 0 ? `${(project.quota_bytes / 1024 / 1024 / 1024).toFixed(1)} GB` : "无限制"}</span>
                    <span className="employee-actions">
                      <button type="button" disabled={!canManage} onClick={() => openEditProject(project)}>编辑</button>
                      <button type="button" disabled={!canManage} onClick={() => openImportMemberDialog(project)}>导入成员</button>
                      <button
                        type="button"
                        className="is-danger"
                        disabled={!canManage || project.status === "disabled"}
                        title={project.status === "disabled" ? "已删除的项目不能操作" : "删除项目"}
                        onClick={() => void deleteProject(project)}
                      >
                        删除
                      </button>
                    </span>
                  </div>
                ))
            )}
          </div>
        </>
      )}

      {projectDialogOpen && (
        <div className="modal-backdrop">
          <section className="modal modal--compact" role="dialog" aria-modal="true">
            <div className="modal__header">
              <div>
                <span className="modal__eyebrow">PROJECT</span>
                <h2>{editingProject ? "编辑项目" : "新建项目"}</h2>
              </div>
              <button className="icon-button" type="button" onClick={() => setProjectDialogOpen(false)}><Icon name="close" /></button>
            </div>
            <form onSubmit={(event) => void submitProject(event)}>
              {!editingProject && (
                <label className="form-field">
                  <span>项目编码<span className="required">*</span></span>
                  <input
                    autoFocus
                    value={projectForm.workspace_code}
                    onChange={(event) => setProjectForm({ ...projectForm, workspace_code: event.target.value })}
                    placeholder="例如：model-development（小写字母、数字、连字符，3-32 字符）"
                  />
                </label>
              )}
              <label className="form-field">
                <span>项目名称<span className="required">*</span></span>
                <input
                  autoFocus={!editingProject}
                  value={projectForm.workspace_name}
                  onChange={(event) => setProjectForm({ ...projectForm, workspace_name: event.target.value })}
                  placeholder="请输入项目名称"
                />
              </label>
              <label className="form-field">
                <span>配额（字节）</span>
                <input
                  type="number"
                  value={projectForm.quota_bytes}
                  onChange={(event) => setProjectForm({ ...projectForm, quota_bytes: parseInt(event.target.value) || 0 })}
                  placeholder="0 表示无配额限制"
                />
              </label>
              <label className="form-field">
                <span>项目描述</span>
                <textarea
                  value={projectForm.description}
                  onChange={(event) => setProjectForm({ ...projectForm, description: event.target.value })}
                  placeholder="请输入项目描述（可选）"
                  rows={4}
                />
              </label>
              <div className="modal__footer">
                <button className="secondary-button" type="button" onClick={() => setProjectDialogOpen(false)}>取消</button>
                <button className="primary-button" type="submit" disabled={saving}>{saving ? "保存中…" : "保存"}</button>
              </div>
            </form>
          </section>
        </div>
      )}

      {importMemberDialogOpen && (
        <div className="modal-backdrop">
          <section className="modal modal--compact" role="dialog" aria-modal="true">
            <div className="modal__header">
              <div>
                <span className="modal__eyebrow">IMPORT MEMBER</span>
                <h2>导入成员到 {selectedProject?.workspace_name ?? "项目"}</h2>
              </div>
              <button className="icon-button" type="button" onClick={() => setImportMemberDialogOpen(false)}><Icon name="close" /></button>
            </div>
            <div style={{ padding: "16px 24px 16px" }}>
              <label className="form-field">
                <span>选择用户<span className="required">*</span></span>
                {/* 多选下拉框 - 带 tag 显示 */}
                <UserMultiSelect
                  users={availableUsers}
                  selectedUserIds={selectedUserIds}
                  onChange={setSelectedUserIds}
                />
              </label>
              <label className="form-field" style={{ marginTop: "12px" }}>
                <span>角色<span className="required">*</span></span>
                <select
                  value={selectedRoleCode}
                  onChange={(event) => setSelectedRoleCode(event.target.value as "admin" | "developer")}
                  style={{ marginTop: "4px" }}
                >
                  <option value="developer">开发人员</option>
                  <option value="admin">管理员</option>
                </select>
              </label>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px", padding: "16px 24px", borderTop: "1px solid #e8e8e8" }}>
              <button className="secondary-button" type="button" onClick={() => setImportMemberDialogOpen(false)}>取消</button>
              <button className="primary-button" type="button" disabled={saving || selectedUserIds.length === 0} onClick={() => void importMember()}>
                {saving ? "添加中…" : `添加 (${selectedUserIds.length})`}
              </button>
            </div>
          </section>
        </div>
      )}
    </section>
  );
}

// 多选用户下拉框组件 - 带 tag 显示
function UserMultiSelect({
  users,
  selectedUserIds,
  onChange,
}: {
  users: Employee[];
  selectedUserIds: string[];
  onChange: (ids: string[]) => void;
}) {
  const [isOpen, setIsOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  // 点击外部关闭下拉框
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const selectedUsers = users.filter((user) => selectedUserIds.includes(user.user_id));

  const toggleUser = (userId: string) => {
    if (selectedUserIds.includes(userId)) {
      onChange(selectedUserIds.filter((id) => id !== userId));
    } else {
      onChange([...selectedUserIds, userId]);
    }
  };

  const removeUser = (userId: string, event: React.MouseEvent) => {
    event.stopPropagation();
    onChange(selectedUserIds.filter((id) => id !== userId));
  };

  return (
    <div ref={containerRef} style={{ position: "relative" }}>
      {/* 选择框 - 显示 tag */}
      <div
        className="admin-toolbar__input"
        onClick={() => setIsOpen(!isOpen)}
        style={{
          display: "flex",
          alignItems: "center",
          flexWrap: "wrap",
          gap: "4px",
          padding: "6px 32px 6px 8px",
          minHeight: "36px",
          border: "1px solid #ddd",
          borderRadius: "4px",
          cursor: "pointer",
          backgroundColor: "#fff",
        }}
      >
        {selectedUsers.length === 0 ? (
          <span style={{ color: "#999" }}>请选择用户</span>
        ) : (
          selectedUsers.map((user) => (
            <span
              key={user.user_id}
              style={{
                display: "inline-flex",
                alignItems: "center",
                backgroundColor: "#e6f7ff",
                color: "#1890ff",
                border: "1px solid #91d5ff",
                borderRadius: "2px",
                padding: "2px 6px",
                fontSize: "13px",
              }}
            >
              {user.display_name}
              <span
                onClick={(e) => removeUser(user.user_id, e)}
                style={{
                  marginLeft: "4px",
                  cursor: "pointer",
                  fontWeight: "bold",
                  fontSize: "14px",
                }}
              >
                ×
              </span>
            </span>
          ))
        )}
        <span
          style={{
            position: "absolute",
            right: "12px",
            top: "50%",
            transform: "translateY(-50%)",
            color: "#999",
            pointerEvents: "none",
          }}
        >
          {isOpen ? "▲" : "▼"}
        </span>
      </div>

      {/* 下拉列表 */}
      {isOpen && (
        <div
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            right: 0,
            maxHeight: "200px",
            overflowY: "auto",
            border: "1px solid #1890ff",
            borderRadius: "4px",
            backgroundColor: "#fff",
            zIndex: 1000,
            marginTop: "2px",
            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
          }}
        >
          {users.map((user) => {
            const isSelected = selectedUserIds.includes(user.user_id);
            return (
              <div
                key={user.user_id}
                onClick={() => toggleUser(user.user_id)}
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  padding: "8px 12px",
                  cursor: "pointer",
                  backgroundColor: isSelected ? "#e6f7ff" : "transparent",
                  borderBottom: "1px solid #f0f0f0",
                }}
              >
                <span>
                  {user.display_name} <span style={{ color: "#999" }}>({user.username})</span>
                </span>
                {isSelected && <span style={{ color: "#1890ff" }}>✓</span>}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}