// BEGIN CHANGE: pagina Who's Online (outfit via preset global OUTFIT_SIZE.row)
"use client";

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

type Row = { name: string; level: number; vocation: string; look: Look };

export default function OnlinePage() {
  const { t } = useI18n();
  const [rows, setRows] = useState<Row[]>([]);
  const [count, setCount] = useState(0);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

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

  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.online.title}</h1>
        <p className="mt-2 text-muted">
          {t.online.subtitle}{" "}
          {status === "ok" && (
            <span className="text-brand">
              {count} {t.online.count}
            </span>
          )}
        </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="px-4 py-3 font-medium">{t.online.colName}</th>
                  <th className="px-4 py-3 font-medium">{t.online.colVocation}</th>
                  <th className="px-4 py-3 text-right font-medium">{t.online.colLevel}</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((row) => (
                  <tr
                    key={row.name}
                    className="border-b border-border/50 last:border-0 hover:bg-background/40"
                  >
                    <td className="px-4 py-2">
                      <PlayerName name={row.name} look={row.look} size="row" />
                    </td>
                    <td className="px-4 py-3 text-muted">{row.vocation}</td>
                    <td className="px-4 py-3 text-right">{row.level}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE