// BEGIN CHANGE: pagina Regras do server
"use client";

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

type Rule = { title: string; body: string };

export default function RulesPage() {
  const { t } = useI18n();
  const [intro, setIntro] = useState("");
  const [rules, setRules] = useState<Rule[]>([]);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

  useEffect(() => {
    fetch(apiUrl("rules.php"))
      .then((r) => {
        if (!r.ok) throw new Error("http");
        return r.json();
      })
      .then((json) => {
        setIntro(json.intro ?? "");
        setRules(json.rules ?? []);
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }, []);

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-3xl flex-1 px-6 py-14">
        <h1 className="text-3xl font-semibold tracking-tight">{t.rules.title}</h1>
        <p className="mt-2 text-muted">{t.rules.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" && (
          <div className="mt-8 space-y-4">
            {intro && <p className="rounded-xl border border-border bg-panel p-5 text-sm">{intro}</p>}
            <ol className="space-y-4">
              {rules.map((r, i) => (
                <li key={i} className="rounded-xl border border-border bg-panel p-5">
                  <h2 className="font-semibold">
                    {i + 1}. {r.title}
                  </h2>
                  <p className="mt-2 text-sm text-muted whitespace-pre-wrap">{r.body}</p>
                </li>
              ))}
            </ol>
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE