// BEGIN CHANGE: pagina Jackpot (sem lista de ganhadores)
"use client";

import { useEffect, useState } from "react";
import { useI18n } from "@/i18n/LanguageProvider";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { ItemIcon } from "@/components/ItemIcon";
import { apiUrl } from "@/lib/api";

type JackpotInfo = {
  schedule: string[];
  lottery: { title: string; body: string; minEligible: number; prizeItemId: number };
  onlineReward: { title: string; body: string };
};

export default function JackpotPage() {
  const { t } = useI18n();
  const [info, setInfo] = useState<JackpotInfo | null>(null);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

  useEffect(() => {
    fetch(apiUrl("jackpot.php"))
      .then((r) => {
        if (!r.ok) throw new Error("http");
        return r.json();
      })
      .then((json) => {
        setInfo({
          schedule: json.schedule ?? [],
          lottery: json.lottery,
          onlineReward: json.onlineReward,
        });
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }, []);

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-4xl flex-1 px-6 py-14">
        <h1 className="text-3xl font-semibold tracking-tight">{t.jackpot.title}</h1>
        <p className="mt-2 text-muted">{t.jackpot.subtitle}</p>

        {status === "loading" && <p className="mt-8 text-muted">{t.common.loading}</p>}
        {status === "error" && <p className="mt-8 text-muted">{t.common.error}</p>}

        {status === "ok" && info && (
          <div className="mt-8 space-y-6">
            <section className="rounded-xl border border-border bg-panel p-5">
              <h2 className="font-semibold">{info.lottery.title}</h2>
              {info.schedule.length > 0 && (
                <p className="mt-2 text-sm text-muted">
                  {t.jackpot.schedule}: {info.schedule.join(" / ")} (BRT)
                </p>
              )}
              <p className="mt-3 text-sm text-muted">{info.lottery.body}</p>
              <div className="mt-4 flex items-center gap-3">
                <ItemIcon id={info.lottery.prizeItemId} size={32} alt="Premium Box" />
                <span className="text-sm">{t.jackpot.prizeHint}</span>
              </div>
            </section>

            <section className="rounded-xl border border-border bg-panel p-5">
              <h2 className="font-semibold">{info.onlineReward.title}</h2>
              <p className="mt-2 text-sm text-muted">{info.onlineReward.body}</p>
            </section>

            <section className="rounded-xl border border-border bg-panel p-5">
              <h2 className="font-semibold">{t.jackpot.openTitle}</h2>
              <p className="mt-2 text-sm text-muted">{t.jackpot.openBody}</p>
            </section>
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE