// AdminUsers — 帳號管理（僅 admin）
(() => {
const { Panel, Badge, Button, Input, Select } = window.WCATalentGameDesignSystem_377d00;
const { userRoleLabel } = window.WCA_UTIL;
const { Modal, FormRow, ModalActions, EditPencil } = window.WCA_UI;

const ROLE_TONE = { admin: "gold", leader: "info", member: "neutral" };
const ROLE_OPTIONS = [
  { value: "member", label: "Member · 隊員（檢視＋勾清單）" },
  { value: "leader", label: "Leader · 幹部（可編輯內容）" },
  { value: "admin", label: "Admin · 統帥（全部＋帳號）" },
];

function UserModal({ user, onClose, refresh }) {
  const [f, setF] = React.useState(user
    ? { username: user.username, display_name: user.display_name, role: user.role, password: "" }
    : { username: "", display_name: "", role: "member", password: "" });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const save = async () => {
    if (user) {
      const body = { display_name: f.display_name, role: f.role };
      if (f.password) body.password = f.password;
      await api("PUT", "/api/users/" + user.id, body);
    } else {
      if (!f.username.trim() || !f.password) return alert("帳號與密碼必填");
      await api("POST", "/api/users", { username: f.username.trim(), password: f.password, display_name: f.display_name, role: f.role });
    }
    await refresh(); onClose();
  };
  const del = user ? async () => { await api("DELETE", "/api/users/" + user.id); await refresh(); onClose(); } : null;
  return (
    <Modal title={user ? "編輯帳號 · " + user.username : "新增帳號"} onClose={onClose}>
      {!user && (
        <FormRow cols="1fr 1fr">
          <Input label="帳號（登入用）" value={f.username} onChange={set("username")} autoComplete="off" />
          <Input label="密碼（至少 6 碼）" type="password" value={f.password} onChange={set("password")} autoComplete="new-password" />
        </FormRow>
      )}
      <FormRow cols="1fr 1fr">
        <Input label="顯示名稱" value={f.display_name} onChange={set("display_name")} placeholder="例：王柏睿" />
        <Select label="權限" value={f.role} onChange={set("role")} options={ROLE_OPTIONS} />
      </FormRow>
      {user && (
        <FormRow cols="1fr">
          <Input label="重設密碼（留空＝不變更）" type="password" value={f.password} onChange={set("password")} autoComplete="new-password" />
        </FormRow>
      )}
      <ModalActions onSave={save} onCancel={onClose} onDelete={del} />
    </Modal>
  );
}

function AdminUsers({ me }) {
  const [users, setUsers] = React.useState(null);
  const [modal, setModal] = React.useState(null);
  const load = React.useCallback(async () => setUsers(await api("GET", "/api/users")), []);
  React.useEffect(() => { load(); }, [load]);
  if (!users) return <div style={{ color: "var(--text-muted)" }}>載入中…</div>;
  return (
    <Panel header="帳號管理 · Accounts" inset="0">
      <div style={{ padding: "14px 18px 0", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>
          Member 檢視＋勾文宣清單／在營時間 · Leader 可編輯全部內容 · Admin 加帳號管理
        </div>
        <Button size="sm" onClick={() => setModal({ new: true })}>＋ 新增帳號</Button>
      </div>
      <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 10 }}>
        {users.map((u) => (
          <div key={u.id} style={{ display: "flex", alignItems: "center", gap: 14, padding: "12px 14px", background: "var(--navy-850)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)" }}>
            <span style={{ width: 38, height: 38, borderRadius: "50%", background: u.role === "admin" ? "var(--grad-gold)" : "var(--navy-900)", color: u.role === "admin" ? "var(--navy-950)" : "var(--text-secondary)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-serif)", fontWeight: 900, border: "1px solid var(--border-strong)" }}>
              {(u.display_name || u.username)[0]}
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 15, color: "var(--text-primary)" }}>
                {u.display_name || u.username}
                <span style={{ fontSize: 12, color: "var(--text-muted)", fontWeight: 400, marginLeft: 8 }}>@{u.username}</span>
                {u.id === me.id && <span style={{ fontSize: 11, color: "var(--tooth-cyan)", marginLeft: 8 }}>（你）</span>}
              </div>
              <div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>建立於 {u.created_at.slice(0, 10)}</div>
            </div>
            <Badge tone={ROLE_TONE[u.role]} size="sm">{userRoleLabel[u.role]}</Badge>
            <EditPencil onClick={() => setModal({ user: u })} />
          </div>
        ))}
      </div>
      {modal && <UserModal user={modal.user} onClose={() => setModal(null)} refresh={load} />}
    </Panel>
  );
}
window.AdminUsers = AdminUsers;
})();