// BEGIN CHANGE: pagina Support Team
"use client";

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

type Member = { name: string; online: boolean; look: Look };
type Group = { groupId: number; groupName: string; members: Member[] };

export default function TeamPage() {
  const { t } = useI18n();
  const [groups, setGroups] = useState<Group[]>([]);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

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

  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.teamPage.title}</h1>
        <p className="mt-2 text-muted">{t.teamPage.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" && groups.length === 0 && (
          <p className="mt-8 text-muted">{t.common.empty}</p>
        )}
        {status === "ok" &&
          groups.map((g) => (
            <section key={g.groupId} className="mt-8">
              <h2 className="text-xl font-semibold">{g.groupName}</h2>
              <ul className="mt-3 grid gap-3 sm:grid-cols-2">
                {g.members.map((m) => (
                  <li
                    key={m.name}
                    className="flex items-center gap-3 rounded-xl border border-border bg-panel p-4"
                  >
                    <Outfit look={m.look} size="row" alt={m.name} />
                    <div>
                      <Link
                        href={`/character/?name=${encodeURIComponent(m.name)}`}
                        className="font-medium text-brand hover:underline"
                      >
                        {m.name}
                      </Link>
                      <div className={`mt-1 text-xs ${m.online ? "text-brand" : "text-muted"}`}>
                        {m.online ? t.teamPage.online : t.teamPage.offline}
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </section>
          ))}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE