import { useState } from "react";

import Icon from "../../components/common/Icon";
import { UserManagementPage } from "../../components/admin/UserManagementPage";
import { ProjectManagementPage } from "../../components/admin/ProjectManagementPage";

export function SystemAdminPage({
  onNotify,
  onConnectionChange,
}: {
  onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
  onConnectionChange: (online: boolean) => void;
}) {
  const [activeTab, setActiveTab] = useState<"users" | "projects">("users");

  return (
    <section className="admin-page">
      <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" && (
        <UserManagementPage onNotify={onNotify} onConnectionChange={onConnectionChange} />
      )}
      {activeTab === "projects" && (
        <ProjectManagementPage onNotify={onNotify} onConnectionChange={onConnectionChange} />
      )}
    </section>
  );
}