"use client";

import { Flex, Tabs, Typography } from "antd";
import { useAuth } from "@/lib/auth/AuthProvider";
import { GeneralTab } from "./GeneralTab";
import { AppearanceTab } from "./AppearanceTab";
import { ProtectAppCard } from "./ProtectAppCard";
import { RequireTwoFactorToggle } from "./RequireTwoFactorToggle";
import { DeveloperCard } from "./DeveloperCard";
import { ExtraTab } from "./ExtraTab";
import { SidebarTab } from "./SidebarTab";
import { CustomCssTab } from "./CustomCssTab";

/**
 * A single hub for General/Appearance/Security/Sidebar/Extra - see
 * docs/ARCHITECTURE.md §6.8. Crowned-Admin-or-above only: Security holds the
 * org-wide "require 2FA" policy (RequireTwoFactorToggle), this app's own
 * Cloudflare protection zone (ProtectAppCard), and the debug logging
 * toggle/download (DeveloperCard); Sidebar controls which items each role
 * sees in the sidebar menu (SidebarTab, Crowned-Admin-or-above per
 * RoleController::update()) - personal 2FA device management moved to
 * Settings > Profile, see profile/TwoFactorDevicesCard.tsx.
 */
export default function SettingsPage() {
  const { user } = useAuth();
  if (!user) return null;
  if (!user.is_crowned_or_above) return null;

  const items = [
    { key: "general", label: "General", children: <GeneralTab /> },
    { key: "appearance", label: "Appearance", children: <AppearanceTab /> },
    {
      key: "security",
      label: "Security",
      children: (
        <Flex vertical gap={16}>
          <RequireTwoFactorToggle />
          <ProtectAppCard />
          <DeveloperCard />
        </Flex>
      ),
    },
    { key: "sidebar", label: "Menu", children: <SidebarTab /> },
    { key: "custom-css", label: "Custom CSS", children: <CustomCssTab /> },
    { key: "extra", label: "Extra", children: <ExtraTab /> },
  ];

  return (
    <div className="flex flex-col gap-4 page page-settings">
      <Typography.Title level={4} style={{ margin: 0 }}>
        Settings
      </Typography.Title>

      <Tabs items={items} className="dms_settings_tabs" />
    </div>
  );
}