"use client";

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

import { AdminPageCard } from "@/components/admin/admin-page-card";
import { JackpotPoolsConsole } from "@/modules/jackpot/jackpot-pools-console";
import { JackpotRecordsConsole } from "@/modules/jackpot/jackpot-records-console";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

/** 奖池单页：池参数 + 流水记录，与列表/设置页共用 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")}>
        <Alert className="mb-4 border-primary/20 bg-primary/5 text-foreground">
          <Info className="size-4" aria-hidden />
          <AlertTitle>{t("rulesTitle")}</AlertTitle>
          <AlertDescription className="space-y-1 text-xs leading-5">
            <p>{t("rulesJoin")}</p>
            <p>{t("rulesBurst")}</p>
            <p>{t("rulesManual")}</p>
          </AlertDescription>
        </Alert>
        <JackpotPoolsConsole embedded />
      </AdminPageCard>

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