// BEGIN CHANGE: pagina Cast / livestreams
"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 Caster = {
  name: string;
  level: number;
  reset: number;
  viewers: number;
  vocation: string;
  description: string;
  look: Look;
};

export default function CastingPage() {
  const { t } = useI18n();
  const [rows, setRows] = useState<Caster[]>([]);
  const [cmds, setCmds] = useState<{ spectator: string[]; streamer: string[] }>({
    spectator: [],
    streamer: [],
  });
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

  useEffect(() => {
    fetch(apiUrl("casting.php"))
      .then((r) => {
        if (!r.ok) throw new Error("http");
        return r.json();
      })
      .then((json) => {
        setRows(json.data ?? []);
        setCmds({
          spectator: json.spectatorCommands ?? [],
          streamer: json.streamerCommands ?? [],
        });
        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.casting.title}</h1>
        <p className="mt-2 text-muted">{t.casting.subtitle}</p>

        <div className="mt-6 space-y-3 rounded-xl border border-border bg-panel p-5 text-sm text-muted">
          <p>{t.casting.howWatch}</p>
          <p>{t.casting.howStart}</p>
        </div>

        {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" && rows.length === 0 && (
          <p className="mt-8 text-muted">{t.casting.empty}</p>
        )}
        {status === "ok" && rows.length > 0 && (
          <ul className="mt-8 divide-y divide-border/50 overflow-hidden rounded-xl border border-border bg-panel">
            {rows.map((c) => (
              <li key={c.name} className="flex items-center justify-between gap-3 px-5 py-4">
                <div className="flex items-center gap-3">
                  <Outfit look={c.look} size="row" alt={c.name} />
                  <div>
                    <Link
                      href={`/character/?name=${encodeURIComponent(c.name)}`}
                      className="font-medium text-brand hover:underline"
                    >
                      {c.name}
                    </Link>
                    <div className="mt-1 text-xs text-muted">
                      {c.vocation} | R{c.reset} | Lv {c.level}
                      {c.description ? ` - ${c.description}` : ""}
                    </div>
                  </div>
                </div>
                <div className="shrink-0 text-sm text-muted">
                  {c.viewers} {t.casting.viewers}
                </div>
              </li>
            ))}
          </ul>
        )}

        {status === "ok" && (
          <div className="mt-8 grid gap-4 sm:grid-cols-2">
            <section className="rounded-xl border border-border bg-panel p-5">
              <h2 className="font-semibold">{t.casting.spectatorCmds}</h2>
              <ul className="mt-3 space-y-1 text-sm text-muted">
                {cmds.spectator.map((x) => (
                  <li key={x}>
                    <code className="text-foreground">{x}</code>
                  </li>
                ))}
              </ul>
            </section>
            <section className="rounded-xl border border-border bg-panel p-5">
              <h2 className="font-semibold">{t.casting.streamerCmds}</h2>
              <ul className="mt-3 space-y-1 text-sm text-muted">
                {cmds.streamer.map((x) => (
                  <li key={x}>
                    <code className="text-foreground">{x}</code>
                  </li>
                ))}
              </ul>
            </section>
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE