"use client";

import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { AdminSubnav, AdminSubnavButton } from "@/components/admin/admin-subnav";
import { JackpotPoolsConsole } from "@/modules/jackpot/jackpot-pools-console";
import { JackpotRecordsConsole } from "@/modules/jackpot/jackpot-records-console";

type JackpotTab = "config" | "records";

function readTabFromHash(): JackpotTab {
  return window.location.hash === "#records" ? "records" : "config";
}

/** 奖池：配置与流水分 Tab，避免单页堆叠过长。 */
export function JackpotConfigScreen() {
  const { t } = useTranslation("jackpot");
  const [tab, setTab] = useState<JackpotTab>("config");

  useEffect(() => {
    const sync = () => setTab(readTabFromHash());
    sync();
    window.addEventListener("hashchange", sync);
    return () => window.removeEventListener("hashchange", sync);
  }, []);

  const switchTab = useCallback((next: JackpotTab) => {
    setTab(next);
    const path = window.location.pathname;
    if (next === "records") {
      window.history.replaceState(null, "", `${path}#records`);
      return;
    }
    window.history.replaceState(null, "", path);
  }, []);

  return (
    <div className="flex w-full max-w-none flex-col gap-4">
      <AdminSubnav aria-label={t("pageTabs")}>
        <AdminSubnavButton active={tab === "config"} onClick={() => switchTab("config")}>
          {t("tabConfig")}
        </AdminSubnavButton>
        <AdminSubnavButton active={tab === "records"} onClick={() => switchTab("records")}>
          {t("tabRecords")}
        </AdminSubnavButton>
      </AdminSubnav>

      {tab === "config" ? <JackpotPoolsConsole embedded /> : <JackpotRecordsConsole embedded />}
    </div>
  );
}