"use client";

import { useState } from "react";
import { useTranslation } from "react-i18next";

import { AdminPermissionGate } from "@/components/admin/admin-permission-gate";
import { PRD_RULES_ODDS_ACCESS_ANY } from "@/lib/admin-prd";
import { ConfigDocPage } from "@/modules/config/config-doc-page";
import { OddsConfigDocScreen } from "@/modules/config/doc/odds-config-doc-screen";
import { useOddsConfigWorkspace } from "@/modules/config/use-odds-config-workspace";
import { RulesPageShell } from "@/modules/rules/rules-page-shell";

/** 赔率与回水：共用赔率版本线，主栏两步骤 + 右侧配置摘要。 */
export function RulesOddsConfigScreen() {
  const { t } = useTranslation("config");
  const [sharedVersionId, setSharedVersionId] = useState("");
  const workspace = useOddsConfigWorkspace(sharedVersionId, setSharedVersionId);

  return (
    <RulesPageShell>
      <AdminPermissionGate requiredAny={PRD_RULES_ODDS_ACCESS_ANY}>
        <ConfigDocPage
          title={t("nav.rulesOddsTitle")}
          description={t("nav.rulesOddsDescriptionShort")}
          contentClassName="pt-2"
        >
          <OddsConfigDocScreen embedded mergedLayout workspace={workspace} />
        </ConfigDocPage>
      </AdminPermissionGate>
    </RulesPageShell>
  );
}