"use client";

import { useEffect, useRef, 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 { 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 { 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);
  const rebateSectionRef = useRef<HTMLDivElement>(null);
  const [rebateMounted, setRebateMounted] = useState(
    () => typeof window !== "undefined" && window.location.hash === "#rebate",
  );

  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);
  }, []);

  useEffect(() => {
    if (rebateMounted) {
      return;
    }
    const node = rebateSectionRef.current;
    if (!node) {
      return;
    }
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry?.isIntersecting) {
          setRebateMounted(true);
        }
      },
      { rootMargin: "240px 0px" },
    );
    observer.observe(node);
    return () => observer.disconnect();
  }, [rebateMounted]);

  return (
    <RulesPageShell>
      <AdminPermissionGate requiredAny={PRD_RULES_ODDS_ACCESS_ANY}>
        <ConfigDocPage title={t("nav.rulesOddsTitle")} contentClassName="space-y-8">
          <ConfigSection title={t("nav.items.odds")}>
            <OddsConfigDocScreen embedded workspace={workspace} />
          </ConfigSection>
          <ConfigSection id="rebate" title={t("nav.items.rebate")}>
            <div ref={rebateSectionRef}>
              {rebateMounted ? (
                <RebateConfigDocScreen embedded workspace={workspace} />
              ) : (
                <p className="text-muted-foreground py-6 text-center text-sm">
                  {t("rebate.lazyLoadHint", { ns: "config" })}
                </p>
              )}
            </div>
          </ConfigSection>
        </ConfigDocPage>
      </AdminPermissionGate>
    </RulesPageShell>
  );
}
