// BEGIN CHANGE: pagina /patents - guia de patentes sync OT
"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 { Outfit } from "@/components/Outfit";
import { apiUrl, patenteUrl, type Look } from "@/lib/api";

type PatentRank = {
  level: number;
  name: string;
  pointsPerKill: number;
  pointsToUp: number;
  rewardGold: number;
};

type PatentTop = {
  name: string;
  level: number;
  reset: number;
  armyLevel: number;
  armyRank: string | null;
  look: Look | null;
};

type PatentsPayload = {
  ranks: PatentRank[];
  rules: {
    pvpOnly: boolean;
    targetLevelStrictlyHigher: boolean;
    blockedOnHardcoreTile: boolean;
    warEventKillsIgnored: boolean;
    rewardOnRankUp: boolean;
    maxLevel: number;
  };
  video: string;
  top: PatentTop[];
};

function fmtGold(n: number): string {
  return n.toLocaleString("pt-BR");
}

export default function PatentsPage() {
  const { t } = useI18n();
  const tr = t.patentsPage;
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
  const [data, setData] = useState<PatentsPayload | null>(null);
  const [showAll, setShowAll] = useState(false);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const r = await fetch(apiUrl("patents.php"));
        if (!r.ok) throw new Error("fail");
        const j = (await r.json()) as PatentsPayload;
        if (cancelled) return;
        setData(j);
        setStatus("ok");
      } catch {
        if (!cancelled) setStatus("error");
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const ranks = useMemo(() => {
    if (!data?.ranks?.length) return [];
    return showAll ? data.ranks : data.ranks.slice(0, 12);
  }, [data, showAll]);

  const pointsPerKill = data?.ranks?.[0]?.pointsPerKill ?? 50;

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-8">
        <div className="mb-6">
          <h1 className="text-2xl font-semibold tracking-tight">{tr.title}</h1>
          <p className="mt-2 text-sm text-muted">{tr.subtitle}</p>
          <p className="mt-3 text-sm">
            <Link href="/events#patents" className="text-brand hover:underline">
              {tr.backEvents}
            </Link>
            {" - "}
            <Link
              href="/highscores/?category=patents"
              className="text-brand hover:underline"
            >
              {tr.linkHighscores}
            </Link>
          </p>
        </div>

        {status === "loading" && (
          <p className="text-sm text-muted">{t.common.loading}</p>
        )}
        {status === "error" && (
          <p className="text-sm text-red-600">{tr.loadError}</p>
        )}

        {status === "ok" && data && (
          <div className="space-y-6">
            <section className="rounded-xl border border-border bg-card/40 p-5">
              <h2 className="text-lg font-semibold">{tr.howTitle}</h2>
              <ul className="mt-3 list-disc space-y-2 pl-5 text-sm text-muted">
                <li>{tr.howStart}</li>
                <li>
                  {tr.howKill.replace("{points}", String(pointsPerKill))}
                </li>
                <li>{tr.howHigher}</li>
                <li>{tr.howHardcore}</li>
                <li>{tr.howWar}</li>
                <li>{tr.howReward}</li>
              </ul>
            </section>

            {data.video && (
              <div className="overflow-hidden rounded-xl border border-border">
                <iframe
                  title={tr.videoTitle}
                  src={data.video}
                  className="aspect-video w-full"
                  allowFullScreen
                />
              </div>
            )}

            <section className="overflow-hidden rounded-xl border border-border">
              <div className="flex items-center justify-between border-b border-border px-5 py-3">
                <h2 className="text-sm font-medium">{tr.tableTitle}</h2>
                <button
                  type="button"
                  onClick={() => setShowAll((v) => !v)}
                  className="text-xs text-brand hover:underline"
                >
                  {showAll ? tr.showLess : tr.showAll}
                </button>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full min-w-[560px] text-left text-sm">
                  <thead className="border-b border-border text-muted">
                    <tr>
                      <th className="px-4 py-2 font-medium">{tr.colPatent}</th>
                      <th className="px-4 py-2 font-medium">{tr.colPointsKill}</th>
                      <th className="px-4 py-2 font-medium">{tr.colPointsUp}</th>
                      <th className="px-4 py-2 font-medium">{tr.colReward}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {ranks.map((r) => (
                      <tr key={r.level} className="border-t border-border/40">
                        <td className="px-4 py-2">
                          <span className="inline-flex items-center gap-2">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img
                              src={patenteUrl(r.level)}
                              alt=""
                              width={24}
                              height={24}
                              className="h-6 w-6 object-contain"
                            />
                            {r.name}
                          </span>
                        </td>
                        <td className="px-4 py-2 tabular-nums text-muted">
                          {r.pointsPerKill}
                        </td>
                        <td className="px-4 py-2 tabular-nums text-muted">
                          {r.pointsToUp.toLocaleString("pt-BR")}
                        </td>
                        <td className="px-4 py-2 tabular-nums text-muted">
                          {fmtGold(r.rewardGold)}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>

            {data.top?.length > 0 && (
              <section className="rounded-xl border border-border bg-card/40 p-5">
                <h2 className="text-lg font-semibold">{tr.topTitle}</h2>
                <ul className="mt-4 space-y-3">
                  {data.top.map((p) => (
                    <li
                      key={p.name}
                      className="flex items-center gap-3 text-sm"
                    >
                      {p.look ? (
                        <Outfit look={p.look} size={48} />
                      ) : (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img
                          src={patenteUrl(p.armyLevel)}
                          alt=""
                          width={28}
                          height={28}
                          className="h-7 w-7 object-contain"
                        />
                      )}
                      <div className="min-w-0 flex-1">
                        <Link
                          href={`/character/?name=${encodeURIComponent(p.name)}`}
                          className="font-medium text-brand hover:underline"
                        >
                          {p.name}
                        </Link>
                        <div className="text-xs text-muted">
                          {p.armyRank ?? `Lv ${p.armyLevel}`}
                          {" - "}
                          lvl {p.level}
                          {p.reset > 0 ? ` - RR ${p.reset}` : ""}
                        </div>
                      </div>
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={patenteUrl(p.armyLevel)}
                        alt=""
                        width={24}
                        height={24}
                        className="h-6 w-6 object-contain"
                      />
                    </li>
                  ))}
                </ul>
              </section>
            )}
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE