"use client";

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

import { AdminPageCard } from "@/components/admin/admin-page-card";
import { JackpotPoolsConsole } from "@/modules/jackpot/jackpot-pools-console";
import { JackpotRecordsConsole } from "@/modules/jackpot/jackpot-records-console";

/** 奖池单页：池参数 + 流水记录，与列表/设置页共用 admin-list-card 布局。 */
export function JackpotConfigScreen() {
  const { t } = useTranslation("jackpot");

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

  return (
    <div className="flex w-full max-w-none flex-col gap-6">
      <AdminPageCard title={t("poolsSectionTitle")}>
        <JackpotPoolsConsole embedded />
      </AdminPageCard>

      <AdminPageCard
        id="jackpot-records"
        title={t("recordsSectionTitle")}
        description={t("recordsSectionDescription")}
      >
        <JackpotRecordsConsole embedded />
      </AdminPageCard>
    </div>
  );
}
