// BEGIN CHANGE: pagina Records (server_record via API PHP)
"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 Rec = { record: number; timestamp: number };

export default function RecordsPage() {
  const { t } = useI18n();
  const [best, setBest] = useState<Rec | null>(null);
  const [rows, setRows] = useState<Rec[]>([]);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

  useEffect(() => {
    fetch(apiUrl("records.php"))
      .then((r) => {
        if (!r.ok) throw new Error("http " + r.status);
        return r.json();
      })
      .then((json) => {
        setBest(json.best ?? null);
        setRows(json.data ?? []);
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }, []);

  const fmtDate = (epoch: number) =>
    epoch > 0 ? new Date(epoch * 1000).toLocaleString() : "-";

  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.records.title}</h1>
        <p className="mt-2 text-muted">{t.records.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-6">
            {best && (
              <div className="rounded-xl border border-border bg-panel p-8 text-center">
                <div className="text-5xl font-semibold text-brand">{best.record}</div>
                <div className="mt-2 text-sm text-muted">
                  {t.records.playersOn} {fmtDate(best.timestamp)}
                </div>
              </div>
            )}

            {rows.length > 0 && (
              <div className="overflow-hidden rounded-xl border border-border bg-panel">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-border text-left text-muted">
                      <th className="px-4 py-3 font-medium">{t.records.colRecord}</th>
                      <th className="px-4 py-3 text-right font-medium">{t.records.colDate}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {rows.map((r, i) => (
                      <tr key={i} className="border-b border-border/50 last:border-0 hover:bg-background/40">
                        <td className="px-4 py-3 font-medium">{r.record}</td>
                        <td className="px-4 py-3 text-right text-muted">{fmtDate(r.timestamp)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE