"use client";

import { useEffect } 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 { ConfigSection } from "@/modules/config/config-section";
import { OddsConfigDocScreen } from "@/modules/config/doc/odds-config-doc-screen";
import { RebateConfigDocScreen } from "@/modules/config/doc/rebate-config-doc-screen";
import { RulesPageShell } from "@/modules/rules/rules-page-shell";

/** 赔率与回水：共用赔率版本线，单页上下分区。 */
export function RulesOddsConfigScreen() {
  const { t } = useTranslation("config");

  useEffect(() => {
    const scrollToRebate = () => {
      if (window.location.hash !== "#rebate") {
        return;
      }
      document.getElementById("rebate")?.scrollIntoView({ behavior: "smooth", block: "start" });
    };
    scrollToRebate();
    window.addEventListener("hashchange", scrollToRebate);
    return () => window.removeEventListener("hashchange", scrollToRebate);
  }, []);

  return (
    <RulesPageShell>
      <AdminPermissionGate requiredAny={PRD_RULES_ODDS_ACCESS_ANY}>
        <ConfigDocPage
          title={t("nav.rulesOddsTitle")}
          description={t("nav.rulesOddsDescription")}
          contentClassName="space-y-10"
        >
          <ConfigSection title={t("nav.items.odds")} description={t("odds.sectionHint")}>
            <OddsConfigDocScreen embedded />
          </ConfigSection>
          <ConfigSection id="rebate" title={t("nav.items.rebate")} description={t("rebate.sectionHint")}>
            <RebateConfigDocScreen embedded />
          </ConfigSection>
        </ConfigDocPage>
      </AdminPermissionGate>
    </RulesPageShell>
  );
}
