/* ────────────────────────────────────────────────────────────
   admin.jsx — 관리자 전용 풀스크린 페이지 (회원관리 + API관리)
   대시보드 "관리자" 진입(role==='admin'). app.jsx route==="admin".
   탭1 회원관리(신규) · 탭2 API관리(기존 AI 설정 패널 AiSettingsPanel).
   계약(검증됨):
     GET    /api/admin/users      -> { users:[{id,email,name,role,status,createdAt,lastLoginAt}] }
     PATCH  /api/admin/users/:id  {role?,status?} -> { user }
     DELETE /api/admin/users/:id  -> { ok:true }
   본인(user.id===행.id) 행은 역할변경·정지·삭제 비활성(서버도 막지만 UI도 혼란 방지).
   Button(수정금지)·Pill·Spinner·StateMsg·api(core.jsx)·AiSettingsPanel(settings.jsx) 재사용.
   해요체·이모지 없음·플랫·tokens 변수만.
   ──────────────────────────────────────────────────────────── */

/* 가입일/마지막 로그인 표기(YYYY.MM.DD). 결함 방어. */
function adminFmtDate(s) {
  if (!s) return "—";
  try {
    const d = new Date(s);
    if (isNaN(d.getTime())) return "—";
    const mm = String(d.getMonth() + 1).padStart(2, "0");
    const dd = String(d.getDate()).padStart(2, "0");
    return `${d.getFullYear()}.${mm}.${dd}`;
  } catch (e) { return "—"; }
}

/* 역할 Pill — admin 강조(primary), user 중립 */
function RolePill({ role }) {
  return role === "admin"
    ? React.createElement(Pill, { color: "var(--primary)", bg: "var(--primary-light)" },
        React.createElement("span", { style: { width: 6, height: 6, borderRadius: "50%", background: "var(--primary)" } }), "관리자")
    : React.createElement(Pill, { color: "var(--label-neutral)", bg: "var(--bg-alt)" }, "일반");
}

/* 상태 Pill — suspended 강조(negative), active 긍정 */
function StatusPill({ status }) {
  return status === "suspended"
    ? React.createElement(Pill, { color: "var(--negative)", bg: "var(--negative-bg)" },
        React.createElement("span", { style: { width: 6, height: 6, borderRadius: "50%", background: "var(--negative)" } }), "정지")
    : React.createElement(Pill, { color: "var(--positive)", bg: "var(--positive-bg)" },
        React.createElement("span", { style: { width: 6, height: 6, borderRadius: "50%", background: "var(--positive)" } }), "활성");
}

/* 표 헤더 셀 */
function Th({ children, style }) {
  return React.createElement("th", {
    style: {
      textAlign: "left", padding: "10px 14px", fontSize: 12, fontWeight: 700,
      color: "var(--label-alt)", borderBottom: "1px solid var(--line-normal)",
      whiteSpace: "nowrap", ...(style || {}),
    },
  }, children);
}
/* 표 본문 셀 */
function Td({ children, style }) {
  return React.createElement("td", {
    style: {
      padding: "12px 14px", fontSize: 13.5, color: "var(--label-normal)",
      borderBottom: "1px solid var(--line-neutral)", verticalAlign: "middle", ...(style || {}),
    },
  }, children);
}

/* ── 회원 행 ──
   본인(isSelf) 행은 역할변경·정지·삭제 비활성. busy 키로 행별 동작 스피너. */
function UserRow({ u, isSelf, busyAction, onToggleRole, onToggleStatus, onDelete }) {
  const suspended = u.status === "suspended";
  const isAdmin = u.role === "admin";
  const anyBusy = !!busyAction;

  return React.createElement("tr", { style: isSelf ? { background: "var(--bg-neutral)" } : null },
    React.createElement(Td, { style: { maxWidth: 240 } },
      React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 } },
        React.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: 600 } }, u.email || "—"),
        isSelf ? React.createElement(Pill, { color: "var(--label-alt)", bg: "var(--bg-alt)" }, "나") : null)),
    React.createElement(Td, null, u.name || "—"),
    React.createElement(Td, null, React.createElement(RolePill, { role: u.role })),
    React.createElement(Td, null, React.createElement(StatusPill, { status: u.status })),
    React.createElement(Td, { style: { color: "var(--label-alt)", whiteSpace: "nowrap" } }, adminFmtDate(u.createdAt)),
    React.createElement(Td, { style: { whiteSpace: "nowrap" } },
      React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, justifyContent: "flex-end" } },
        /* 역할 토글 */
        React.createElement(Button, {
          kind: "outline", size: "sm",
          disabled: isSelf || anyBusy,
          onClick: () => onToggleRole(u),
        }, busyAction === "role"
            ? React.createElement(Spinner, { s: 13 })
            : (isAdmin ? "일반으로" : "관리자로")),
        /* 상태 토글 */
        React.createElement(Button, {
          kind: "outline", size: "sm",
          disabled: isSelf || anyBusy,
          onClick: () => onToggleStatus(u),
        }, busyAction === "status"
            ? React.createElement(Spinner, { s: 13 })
            : (suspended ? "활성화" : "정지")),
        /* 삭제 */
        React.createElement(Button, {
          kind: "danger", size: "sm",
          disabled: isSelf || anyBusy,
          onClick: () => onDelete(u),
        }, busyAction === "delete"
            ? React.createElement(Spinner, { s: 13, color: "#fff" })
            : "삭제")))
  );
}

/* ── 회원관리 패널 ── */
function UserManagementPanel({ user }) {
  const [users, setUsers] = useState(null);   // null=로딩
  const [err, setErr] = useState("");         // 목록 조회 오류
  const [actionErr, setActionErr] = useState(""); // 동작 오류
  const [busyId, setBusyId] = useState("");   // 동작 중인 행 id
  const [busyAction, setBusyAction] = useState(""); // role|status|delete

  const load = useCallback(async () => {
    setErr("");
    try {
      const data = await api("/admin/users");
      setUsers(Array.isArray(data?.users) ? data.users : []);
    } catch (ex) {
      setErr((ex && ex.message) || "회원 목록을 불러오지 못했어요.");
      setUsers([]);
    }
  }, []);
  useEffect(() => { load(); }, [load]);

  async function patchUser(u, body, action) {
    if (busyId) return;
    setActionErr(""); setBusyId(u.id); setBusyAction(action);
    try {
      await api("/admin/users/" + u.id, { method: "PATCH", body });
      await load();
    } catch (ex) {
      setActionErr((ex && ex.message) || "변경하지 못했어요.");
    } finally {
      setBusyId(""); setBusyAction("");
    }
  }

  function toggleRole(u) {
    patchUser(u, { role: u.role === "admin" ? "user" : "admin" }, "role");
  }
  function toggleStatus(u) {
    patchUser(u, { status: u.status === "suspended" ? "active" : "suspended" }, "status");
  }
  async function removeUser(u) {
    if (busyId) return;
    if (typeof window !== "undefined" && typeof window.confirm === "function") {
      const ok = window.confirm(`${u.email || "이 회원"} 계정을 삭제할까요? 되돌릴 수 없어요.`);
      if (!ok) return;
    }
    setActionErr(""); setBusyId(u.id); setBusyAction("delete");
    try {
      await api("/admin/users/" + u.id, { method: "DELETE" });
      await load();
    } catch (ex) {
      setActionErr((ex && ex.message) || "삭제하지 못했어요.");
    } finally {
      setBusyId(""); setBusyAction("");
    }
  }

  return React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16 } },
    React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4 } },
      React.createElement("div", { className: "t-title-3", style: { color: "var(--label-normal)" } }, "회원관리"),
      React.createElement("p", { className: "t-body-2", style: { color: "var(--label-alt)", margin: 0 } },
        "가입한 회원의 역할과 상태를 관리해요. 본인 계정은 여기서 바꿀 수 없어요.")),

    actionErr ? React.createElement("div", { className: "t-label-2", style: { color: "var(--negative)", background: "var(--negative-bg)", borderRadius: "var(--r-sm)", padding: "10px 14px" } }, actionErr) : null,
    err ? React.createElement("div", { className: "t-label-2", style: { color: "var(--negative)", background: "var(--negative-bg)", borderRadius: "var(--r-sm)", padding: "10px 14px" } }, err) : null,

    users === null
      ? React.createElement(StateMsg, { icon: React.createElement(Spinner, { s: 24 }), title: "불러오는 중이에요" })
      : users.length === 0
        ? React.createElement(StateMsg, { title: "회원이 없어요", desc: "아직 가입한 회원이 없어요." })
        : React.createElement("div", {
            style: {
              border: "1px solid var(--border)", borderRadius: "var(--r-lg)", background: "var(--bg-normal)", overflow: "hidden",
            },
          },
            React.createElement("div", { style: { overflowX: "auto" } },
              React.createElement("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: 720 } },
                React.createElement("thead", null,
                  React.createElement("tr", null,
                    React.createElement(Th, null, "이메일"),
                    React.createElement(Th, null, "이름"),
                    React.createElement(Th, null, "역할"),
                    React.createElement(Th, null, "상태"),
                    React.createElement(Th, null, "가입일"),
                    React.createElement(Th, { style: { textAlign: "right" } }, "동작"))),
                React.createElement("tbody", null,
                  users.map((u) => React.createElement(UserRow, {
                    key: u.id,
                    u,
                    isSelf: !!(user && user.id === u.id),
                    busyAction: busyId === u.id ? busyAction : "",
                    onToggleRole: toggleRole,
                    onToggleStatus: toggleStatus,
                    onDelete: removeUser,
                  }))))))
  );
}

/* ── 탭 세그먼트 ── */
const ADMIN_TABS = [
  { key: "users", label: "회원관리" },
  { key: "api", label: "API관리" },
];

function AdminTabs({ value, onChange }) {
  return React.createElement("div", {
    role: "tablist",
    style: { display: "inline-flex", gap: 4, padding: 4, borderRadius: "var(--r-md)", background: "var(--bg-neutral)", border: "1px solid var(--line-alt)" },
  },
    ADMIN_TABS.map((t) => {
      const active = value === t.key;
      return React.createElement("button", {
        key: t.key,
        type: "button",
        role: "tab",
        "aria-selected": active,
        onClick: active ? undefined : () => onChange(t.key),
        style: {
          height: 36, padding: "0 18px", borderRadius: "var(--r-sm)", cursor: active ? "default" : "pointer",
          border: active ? "1px solid var(--primary)" : "1px solid transparent",
          background: active ? "var(--bg-normal)" : "transparent",
          color: active ? "var(--primary)" : "var(--label-alt)",
          fontSize: 13.5, fontWeight: 700, fontFamily: "var(--font)",
          transition: "background var(--t-fast), border-color var(--t-fast), color var(--t-fast)",
        },
      }, t.label);
    })
  );
}

/* ── 관리자 페이지 헤더 ── */
function AdminHeader({ user, onBack, onLogout }) {
  return React.createElement("header", {
    style: {
      height: 60, display: "flex", alignItems: "center", gap: 14, padding: "0 24px",
      background: "var(--bg-normal)", borderBottom: "1px solid var(--line-normal)", position: "sticky", top: 0, zIndex: 20,
    },
  },
    React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 9 } },
      React.createElement("span", { style: { width: 28, height: 28, borderRadius: "var(--r-sm)", background: "var(--primary)", display: "inline-flex", alignItems: "center", justifyContent: "center" } },
        React.createElement("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: 2 },
          React.createElement("rect", { x: 3, y: 3, width: 18, height: 18, rx: 2 }),
          React.createElement("path", { d: "M3 9h18M9 21V9" }))),
      React.createElement("span", { className: "t-headline-1", style: { letterSpacing: "-0.02em" } }, "Storyboard"),
      React.createElement("span", { style: { width: 1, height: 18, background: "var(--line-normal)", margin: "0 2px" } }),
      React.createElement("span", { className: "t-label-1", style: { color: "var(--label-alt)", fontWeight: 700 } }, "관리자")),
    React.createElement("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center", gap: 12 } },
      React.createElement(Button, { kind: "outline", size: "sm", onClick: onBack }, "대시보드로"),
      user ? React.createElement("span", { className: "t-label-2", style: { color: "var(--label-alt)" } }, `${user.name || user.email}님`) : null,
      React.createElement(Button, { kind: "ghost", size: "sm", onClick: onLogout }, "로그아웃"))
  );
}

/* ── 관리자 페이지 루트 ──
   props: { user, onBack, onLogout } */
function AdminView({ user, onBack, onLogout }) {
  const [tab, setTab] = useState("users");

  return React.createElement("div", { style: { minHeight: "100vh" } },
    React.createElement(AdminHeader, { user, onBack, onLogout }),
    React.createElement("main", { style: { maxWidth: 1080, margin: "0 auto", padding: "28px 24px 64px" } },
      React.createElement("div", { style: { marginBottom: 22 } },
        React.createElement(AdminTabs, { value: tab, onChange: setTab })),
      tab === "users"
        ? React.createElement(UserManagementPanel, { user })
        : React.createElement(AiSettingsPanel, null))
  );
}

Object.assign(window, {
  AdminView, AdminHeader, AdminTabs, UserManagementPanel, UserRow, RolePill, StatusPill, adminFmtDate,
});