// BEGIN CHANGE: pagina Guild Wars (paridade wars.php)
"use client";

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

export default function WarsPage() {
  const { t } = useI18n();
  const [wars, setWars] = useState<WarRow[]>([]);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

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

  const cmds = [
    { cmd: "/war invite, guildname, fraglimit", desc: t.wars.cmdInvite, ex: "/war invite, Hardest, 50" },
    { cmd: "/war cancel, guildname", desc: t.wars.cmdCancel, ex: "/war cancel, Hardest" },
    { cmd: "/war accept, guildname", desc: t.wars.cmdAccept, ex: "/war accept, Hardest" },
    { cmd: "/war reject, guildname", desc: t.wars.cmdReject, ex: "/war reject, Hardest" },
  ];

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

        <div className="mt-8 overflow-hidden rounded-xl border border-border bg-panel">
          <div className="border-b border-border px-4 py-3 text-sm font-semibold">
            {t.wars.commandsTitle}
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border text-left text-muted">
                  <th className="px-4 py-2 font-medium">Command</th>
                  <th className="px-4 py-2 font-medium">Description</th>
                  <th className="px-4 py-2 font-medium">Example</th>
                </tr>
              </thead>
              <tbody>
                {cmds.map((c) => (
                  <tr key={c.cmd} className="border-b border-border/40">
                    <td className="px-4 py-2 font-mono text-xs">{c.cmd}</td>
                    <td className="px-4 py-2 text-muted">{c.desc}</td>
                    <td className="px-4 py-2 font-mono text-xs text-muted">{c.ex}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="mt-8 overflow-hidden rounded-xl border border-border bg-panel">
          <div className="grid grid-cols-1 border-b border-border text-sm font-semibold sm:grid-cols-[7rem_1fr_7rem]">
            <div className="px-4 py-3 text-center">{t.wars.aggressor}</div>
            <div className="px-4 py-3 text-center">{t.wars.information}</div>
            <div className="px-4 py-3 text-center">{t.wars.enemy}</div>
          </div>
          {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" && <GuildWarsList wars={wars} />}
        </div>
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE