// BEGIN CHANGE: pagina Last Kills
"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 { ItemIcon } from "@/components/ItemIcon";
import { apiUrl, type Look } from "@/lib/api";

type Killer =
  | { type: "monster"; monster: string; count: number; look: Look | null; itemId: number | null }
  | { type: "player"; player: string; count: number; deleted?: boolean; look: Look | null }
  | {
      type: "summon";
      monster: string;
      player: string;
      count: number;
      monsterLook: Look | null;
      monsterItem: number | null;
      playerLook: Look | null;
    };

type Death = {
  date: number;
  level: number;
  name: string;
  look: Look;
  killers: Killer[];
};

function KillerChip({ killer }: { killer: Killer }) {
  const prefix = killer.count > 1 ? `${killer.count}x ` : "";
  if (killer.type === "monster") {
    return (
      <span className="inline-flex items-center gap-1.5">
        {killer.look && killer.look.looktype > 0 ? (
          <Outfit look={killer.look} size="inline" alt={killer.monster} />
        ) : killer.itemId ? (
          <ItemIcon id={killer.itemId} size={28} alt={killer.monster} />
        ) : null}
        <span>
          {prefix}
          {killer.monster}
        </span>
      </span>
    );
  }
  if (killer.type === "player") {
    return (
      <span className="inline-flex items-center gap-1.5">
        {killer.look && <Outfit look={killer.look} size="inline" alt={killer.player} />}
        {killer.deleted ? (
          <span>{killer.player}</span>
        ) : (
          <Link
            href={`/character/?name=${encodeURIComponent(killer.player)}`}
            className="font-medium text-brand hover:underline"
          >
            {killer.player}
          </Link>
        )}
      </span>
    );
  }
  return (
    <span className="inline-flex flex-wrap items-center gap-1.5">
      {killer.monsterLook && killer.monsterLook.looktype > 0 ? (
        <Outfit look={killer.monsterLook} size="inline" alt={killer.monster} />
      ) : killer.monsterItem ? (
        <ItemIcon id={killer.monsterItem} size={28} alt={killer.monster} />
      ) : null}
      <span>
        {prefix}
        {killer.monster}
      </span>
      <span className="text-muted">summoned by</span>
      <Link
        href={`/character/?name=${encodeURIComponent(killer.player)}`}
        className="inline-flex items-center gap-1.5 font-medium text-brand hover:underline"
      >
        {killer.playerLook && <Outfit look={killer.playerLook} size="inline" alt={killer.player} />}
        {killer.player}
      </Link>
    </span>
  );
}

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

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

  const fmt = (n: number) => (n > 0 ? new Date(n * 1000).toLocaleString() : "-");

  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.lastKills.title}</h1>
        <p className="mt-2 text-muted">{t.lastKills.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" && rows.length === 0 && (
          <p className="mt-8 text-muted">{t.common.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((d) => (
              <li key={`${d.name}-${d.date}`} className="px-5 py-4">
                <div className="text-xs text-muted">{fmt(d.date)}</div>
                <div className="mt-2 flex flex-wrap items-center gap-2 text-sm">
                  {d.look && <Outfit look={d.look} size="inline" alt={d.name} />}
                  <Link
                    href={`/character/?name=${encodeURIComponent(d.name)}`}
                    className="font-medium text-brand hover:underline"
                  >
                    {d.name}
                  </Link>
                  <span className="text-muted">
                    {t.lastKills.diedAt} <b className="text-foreground">{d.level}</b>
                  </span>
                  {d.killers.length > 0 && (
                    <>
                      <span className="text-muted">{t.lastKills.by}</span>
                      {d.killers.map((k, i) => (
                        <span key={i} className="inline-flex items-center gap-1">
                          {i > 0 && <span className="text-muted">,</span>}
                          <KillerChip killer={k} />
                        </span>
                      ))}
                    </>
                  )}
                </div>
              </li>
            ))}
          </ul>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE