"use client";

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

import { getDrawResults } from "@/api/draw";
import { PlayerPanel } from "@/components/layout/player-panel";
import { Skeleton } from "@/components/ui/skeleton";
import { DrawWinningCheckPanel } from "@/features/results/draw-winning-check-panel";

/** 保留组件供内嵌使用；独立路由已 redirect 至期号详情 */
export function CheckWinningScreen() {
  const { t } = useTranslation("player");
  const [drawNo, setDrawNo] = useState<string | null>(null);

  useEffect(() => {
    void getDrawResults({ page: 1, size: 1 })
      .then((res) => setDrawNo(res.items[0]?.draw_no ?? null))
      .catch(() => setDrawNo(null));
  }, []);

  return (
    <PlayerPanel title={t("results.check.title")} backHref="/results" backLabel={t("results.title")}>
      {drawNo ? (
        <DrawWinningCheckPanel drawNo={drawNo} collapsible={false} />
      ) : (
        <Skeleton className="h-56 rounded-2xl" />
      )}
    </PlayerPanel>
  );
}