// BEGIN CHANGE: pagina Changelog (z_changelog 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 Log = { type: string; place: string; date: number; description: string };

export default function ChangelogPage() {
  const { t } = useI18n();
  const [rows, setRows] = useState<Log[]>([]);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

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

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

  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.changelog.title}</h1>
        <p className="mt-2 text-muted">{t.changelog.subtitle}</p>

        <div className="mt-8 overflow-hidden rounded-xl border border-border bg-panel">
          {status === "loading" && <div className="p-8 text-center text-muted">{t.common.loading}</div>}
          {status === "error" && <div className="p-8 text-center text-muted">{t.common.error}</div>}
          {status === "ok" && rows.length === 0 && (
            <div className="p-8 text-center text-muted">{t.common.empty}</div>
          )}
          {status === "ok" && rows.length > 0 && (
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border text-left text-muted">
                  <th className="w-32 px-4 py-3 font-medium">{t.changelog.colDate}</th>
                  <th className="w-28 px-4 py-3 font-medium">{t.changelog.colType}</th>
                  <th className="px-4 py-3 font-medium">{t.changelog.colDesc}</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 text-muted">{fmtDate(r.date)}</td>
                    <td className="px-4 py-3">
                      <span className="rounded-full bg-brand/10 px-2 py-1 text-xs text-brand">{r.type}</span>
                    </td>
                    <td className="px-4 py-3">{r.description}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE