// BEGIN CHANGE: Highscores multi-categoria (ranks.lua + patentes + tasks + powergamers + frags)
"use client";

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

type Category =
  | "level"
  | "magic"
  | "dodge"
  | "critical"
  | "mining"
  | "money"
  | "fist"
  | "club"
  | "sword"
  | "axe"
  | "distance"
  | "shield"
  | "fishing"
  | "patents"
  | "tasks"
  | "powergamers"
  | "frags";

type PgPeriod = "today" | "week";

type Row = {
  rank: number;
  name: string;
  level: number;
  reset: number;
  vocation: string;
  value: number;
  valueText: string;
  experience?: number;
  armyLevel?: number;
  armyRank?: string | null;
  taskPoints?: number;
  taskRank?: string | null;
  look: Look;
};

const CATEGORIES: Category[] = [
  "level",
  "powergamers",
  "frags",
  "magic",
  "dodge",
  "critical",
  "mining",
  "money",
  "fist",
  "club",
  "sword",
  "axe",
  "distance",
  "shield",
  "fishing",
  "patents",
  "tasks",
];

function readCategoryFromUrl(): Category {
  if (typeof window === "undefined") return "level";
  const raw = new URLSearchParams(window.location.search).get("category") || "level";
  const c = raw.toLowerCase();
  const aliases: Record<string, Category> = {
    ml: "magic",
    minning: "mining",
    minerar: "mining",
    gold: "money",
    shielding: "shield",
    dist: "distance",
    fish: "fishing",
    patent: "patents",
    patente: "patents",
    army: "patents",
    task: "tasks",
    taskpoints: "tasks",
    task_points: "tasks",
    powergamer: "powergamers",
    pg: "powergamers",
    expoday: "powergamers",
    frag: "frags",
    topfrags: "frags",
    top_frags: "frags",
    pk: "frags",
  };
  const mapped = (aliases[c] || c) as Category;
  return CATEGORIES.includes(mapped) ? mapped : "level";
}

function readPeriodFromUrl(): PgPeriod {
  if (typeof window === "undefined") return "today";
  const raw = (new URLSearchParams(window.location.search).get("period") || "today").toLowerCase();
  if (raw === "week" || raw === "7" || raw === "7d") return "week";
  return "today";
}

export default function HighscoresPage() {
  const { t } = useI18n();
  const [category, setCategory] = useState<Category>("level");
  const [period, setPeriod] = useState<PgPeriod>("today");
  const [rows, setRows] = useState<Row[]>([]);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

  useEffect(() => {
    setCategory(readCategoryFromUrl());
    setPeriod(readPeriodFromUrl());
  }, []);

  useEffect(() => {
    setStatus("loading");
    const url = new URL(window.location.href);
    if (category === "level") url.searchParams.delete("category");
    else url.searchParams.set("category", category);
    if (category === "powergamers" && period === "week") {
      url.searchParams.set("period", "week");
    } else {
      url.searchParams.delete("period");
    }
    window.history.replaceState({}, "", url.toString());

    let api = `highscores.php?category=${encodeURIComponent(category)}`;
    if (category === "powergamers") {
      api += `&period=${encodeURIComponent(period)}`;
    }

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

  const labels = t.highscores.categories;
  const valueCol = useMemo(() => {
    if (category === "level") return t.highscores.colLevel;
    if (category === "magic") return labels.magic;
    if (category === "patents") return labels.patents;
    if (category === "tasks") return labels.tasks;
    if (category === "powergamers") {
      return period === "week" ? labels.powergamersWeek : labels.powergamers;
    }
    if (category === "frags") return labels.frags;
    if (category === "money") return labels.money;
    return labels[category] ?? t.highscores.colValue;
  }, [category, period, labels, t.highscores.colLevel, t.highscores.colValue]);

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

        <div className="mt-6 flex flex-wrap gap-2">
          {CATEGORIES.map((c) => {
            const active = c === category;
            return (
              <button
                key={c}
                type="button"
                onClick={() => setCategory(c)}
                className={`rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors sm:text-sm ${
                  active
                    ? "border-brand/50 bg-brand/15 text-foreground"
                    : "border-border text-muted hover:border-brand/40 hover:text-foreground"
                }`}
              >
                {labels[c] ?? c}
              </button>
            );
          })}
        </div>

        {category === "powergamers" && (
          <div className="mt-3 flex flex-wrap items-center gap-2 text-sm">
            <button
              type="button"
              onClick={() => setPeriod("today")}
              className={`rounded-lg border px-3 py-1 ${
                period === "today"
                  ? "border-brand/50 bg-brand/15 text-foreground"
                  : "border-border text-muted"
              }`}
            >
              {t.highscores.periodToday}
            </button>
            <button
              type="button"
              onClick={() => setPeriod("week")}
              className={`rounded-lg border px-3 py-1 ${
                period === "week"
                  ? "border-brand/50 bg-brand/15 text-foreground"
                  : "border-border text-muted"
              }`}
            >
              {t.highscores.periodWeek}
            </button>
            <span className="text-xs text-muted">{t.highscores.powergamersHint}</span>
          </div>
        )}

        {category === "tasks" && (
          <p className="mt-3 text-sm text-muted">
            <Link href="/tasks/" className="text-brand hover:underline">
              {t.highscores.tasksCatalogLink}
            </Link>
          </p>
        )}

        <div className="mt-6 overflow-x-auto 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">
              {category === "powergamers" ? t.highscores.powergamersEmpty : t.common.empty}
            </div>
          )}
          {status === "ok" && rows.length > 0 && (
            <table className="w-full min-w-[640px] text-sm">
              <thead>
                <tr className="border-b border-border text-left text-muted">
                  <th className="w-16 px-4 py-3 font-medium">{t.highscores.colRank}</th>
                  <th className="px-4 py-3 font-medium">{t.highscores.colName}</th>
                  <th className="px-4 py-3 font-medium">{t.highscores.colVocation}</th>
                  {category === "level" ? (
                    <>
                      <th className="px-4 py-3 text-right font-medium">{t.highscores.colReset}</th>
                      <th className="px-4 py-3 text-right font-medium">{t.highscores.colLevel}</th>
                      <th className="px-4 py-3 text-right font-medium">{t.highscores.colExp}</th>
                    </>
                  ) : (
                    <>
                      <th className="px-4 py-3 text-right font-medium">{valueCol}</th>
                      <th className="px-4 py-3 text-right font-medium">{t.highscores.colLevel}</th>
                      <th className="px-4 py-3 text-right font-medium">{t.highscores.colReset}</th>
                    </>
                  )}
                </tr>
              </thead>
              <tbody>
                {rows.map((row) => (
                  <tr
                    key={`${category}-${row.rank}-${row.name}`}
                    className="border-b border-border/50 last:border-0 hover:bg-background/40"
                  >
                    <td className="px-4 py-3 text-muted">{row.rank}</td>
                    <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>
                    {category === "level" ? (
                      <>
                        <td className="px-4 py-3 text-right font-medium text-brand">{row.reset}</td>
                        <td className="px-4 py-3 text-right">{row.level}</td>
                        <td className="px-4 py-3 text-right text-muted">
                          {(row.experience ?? 0).toLocaleString()}
                        </td>
                      </>
                    ) : category === "patents" ? (
                      <>
                        <td className="px-4 py-3 text-right">
                          <span className="inline-flex items-center justify-end gap-2">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img
                              src={patenteUrl(row.armyLevel ?? row.value)}
                              alt=""
                              width={22}
                              height={22}
                              className="h-5 w-5 object-contain"
                            />
                            <span className="font-medium text-brand">{row.valueText}</span>
                          </span>
                        </td>
                        <td className="px-4 py-3 text-right">{row.level}</td>
                        <td className="px-4 py-3 text-right text-muted">{row.reset}</td>
                      </>
                    ) : (
                      <>
                        <td className="px-4 py-3 text-right font-medium text-brand">
                          {row.valueText}
                        </td>
                        <td className="px-4 py-3 text-right">{row.level}</td>
                        <td className="px-4 py-3 text-right text-muted">{row.reset}</td>
                      </>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE