// BEGIN CHANGE: pagina Prey (1 PP, ativacao offline)
"use client";

import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useI18n } from "@/i18n/LanguageProvider";
import { useAuth } from "@/auth/AuthProvider";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { apiUrl } from "@/lib/api";

type PreyActive = {
  monsterName: string;
  expireAt: number;
  remainingSec: number;
  expBonus: number;
  lootBonus: number;
};

type CharOpt = {
  playerId: number;
  name: string;
  level: number;
  vocation: string;
  online: boolean;
  prey: PreyActive | null;
};

type PreyPayload = {
  ok: boolean;
  cost: number;
  durationSec: number;
  expBonus: number;
  lootBonus: number;
  premiumPoints: number;
  characters: CharOpt[];
  monsters: string[];
  excludedBoostMonster?: string | null;
  hint: string;
  error?: string;
  remainingSec?: number;
  monsterName?: string;
};

function formatRemaining(sec: number): string {
  const s = Math.max(0, Math.floor(sec));
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const r = s % 60;
  if (h > 0) return `${h}h ${String(m).padStart(2, "0")}m`;
  return `${m}m ${String(r).padStart(2, "0")}s`;
}

export default function PreyPage() {
  const { t } = useI18n();
  const page = t.preyPage;
  const { ready, token } = useAuth();
  const [data, setData] = useState<PreyPayload | null>(null);
  const [status, setStatus] = useState<"idle" | "loading" | "ok" | "error">("idle");
  const [err, setErr] = useState("");
  const [playerId, setPlayerId] = useState("");
  const [monsterName, setMonsterName] = useState("");
  const [monsterQ, setMonsterQ] = useState("");
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState("");

  const load = useCallback(async () => {
    if (!token) return;
    setStatus("loading");
    setErr("");
    try {
      const res = await fetch(apiUrl("prey.php"), {
        headers: { Authorization: `Bearer ${token}` },
        cache: "no-store",
      });
      const json = (await res.json()) as PreyPayload;
      if (!res.ok || !json.ok) {
        setStatus("error");
        setErr(page.errors.load);
        return;
      }
      setData(json);
      setStatus("ok");
      if (!playerId && json.characters.length > 0) {
        const offline = json.characters.find((c) => !c.online);
        setPlayerId(String((offline || json.characters[0]).playerId));
      }
      const stillValid =
        monsterName && json.monsters.some((m) => m.toLowerCase() === monsterName.toLowerCase());
      if (!stillValid) {
        setMonsterName(json.monsters[0] || "");
      }
    } catch {
      setStatus("error");
      setErr(page.errors.load);
    }
  }, [token, page.errors.load, playerId, monsterName]);

  useEffect(() => {
    if (!ready || !token) return;
    void load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ready, token]);

  const filteredMonsters = useMemo(() => {
    const list = data?.monsters || [];
    const q = monsterQ.trim().toLowerCase();
    if (!q) return list;
    return list.filter((m) => m.toLowerCase().includes(q));
  }, [data, monsterQ]);

  const selected = data?.characters.find((c) => String(c.playerId) === playerId) || null;

  async function onActivate(e: FormEvent) {
    e.preventDefault();
    if (!token || !data || !playerId || !monsterName) return;
    if (!window.confirm(page.confirm.replace("{cost}", String(data.cost)).replace("{monster}", monsterName))) {
      return;
    }
    setBusy(true);
    setMsg("");
    setErr("");
    try {
      const res = await fetch(apiUrl("prey.php"), {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          action: "activate",
          playerId: Number(playerId),
          monsterName,
          confirmed: true,
        }),
      });
      const json = (await res.json()) as PreyPayload & {
        playerName?: string;
        hint?: string;
      };
      if (!res.ok || !json.ok) {
        const code = json.error || "";
        if (code === "char_online") setErr(page.errors.online);
        else if (code === "not_enough_points") setErr(page.errors.points);
        else if (code === "prey_active") {
          setErr(
            page.errors.active
              .replace("{monster}", json.monsterName || "-")
              .replace("{time}", formatRemaining(json.remainingSec || 0))
          );
        } else if (code === "monster_not_allowed") setErr(page.errors.monster);
        else if (code === "monster_is_daily_boost") {
          setErr(
            page.errors.dailyBoost.replace(
              "{monster}",
              json.monsterName || data.excludedBoostMonster || "-"
            )
          );
        } else setErr(page.errors.generic);
        return;
      }
      setMsg(
        page.success
          .replace("{monster}", json.monsterName || monsterName)
          .replace("{char}", json.playerName || selected?.name || "")
      );
      await load();
    } catch {
      setErr(page.errors.generic);
    } finally {
      setBusy(false);
    }
  }

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

        <section className="mt-10 rounded-xl border border-border bg-panel p-5">
          <h2 className="text-lg font-semibold">{page.howTitle}</h2>
          <ol className="mt-3 list-decimal space-y-2 pl-5 text-sm text-muted">
            {page.howSteps.map((step, i) => (
              <li key={i}>{step}</li>
            ))}
          </ol>
        </section>

        <section className="mt-6 rounded-xl border border-border bg-panel p-5">
          <h2 className="text-lg font-semibold">{page.rulesTitle}</h2>
          <ul className="mt-3 list-disc space-y-2 pl-5 text-sm text-muted">
            {page.rules.map((rule, i) => (
              <li key={i}>{rule}</li>
            ))}
          </ul>
          <p className="mt-4 text-sm text-muted">{page.statusHint}</p>
          <p className="mt-2 text-sm">
            <Link href="/shop" className="text-brand hover:underline">
              {page.linkShop}
            </Link>
            <span className="mx-2 text-muted">-</span>
            <Link href="/monsters" className="text-brand hover:underline">
              {page.linkMonsters}
            </Link>
          </p>
        </section>

        {!ready ? (
          <p className="mt-10 text-sm text-muted">{page.loading}</p>
        ) : !token ? (
          <p className="mt-10 text-sm text-muted">
            {page.loginRequired}{" "}
            <Link href="/account" className="text-brand hover:underline">
              {page.loginLink}
            </Link>
          </p>
        ) : status === "loading" && !data ? (
          <p className="mt-10 text-sm text-muted">{page.loading}</p>
        ) : status === "error" && !data ? (
          <p className="mt-10 text-sm text-red-400">{err}</p>
        ) : data ? (
          <section className="mt-10 rounded-xl border border-border bg-panel p-5">
            <div className="flex flex-wrap items-baseline justify-between gap-2">
              <h2 className="text-lg font-semibold">{page.activateTitle}</h2>
              <p className="text-sm text-muted">
                {page.pointsLabel}: <span className="font-medium text-foreground">{data.premiumPoints}</span>
              </p>
            </div>
            {data.excludedBoostMonster ? (
              <p className="mt-2 text-sm text-amber-300/90">
                {page.boostExcludedHint.replace("{monster}", data.excludedBoostMonster)}
              </p>
            ) : null}
            <p className="mt-2 text-sm text-muted">
              {page.costHint
                .replace("{cost}", String(data.cost))
                .replace("{exp}", String(data.expBonus))
                .replace("{loot}", String(data.lootBonus))
                .replace("{hours}", String(Math.round(data.durationSec / 3600)))}
            </p>

            <form className="mt-6 space-y-4" onSubmit={onActivate}>
              <label className="block text-sm">
                <span className="text-muted">{page.charLabel}</span>
                <select
                  className="mt-1 w-full rounded border border-border bg-background px-3 py-2"
                  value={playerId}
                  onChange={(e) => setPlayerId(e.target.value)}
                  required
                >
                  {data.characters.map((c) => (
                    <option key={c.playerId} value={c.playerId} disabled={c.online}>
                      {c.name} (Lv {c.level}
                      {c.online ? ` - ${page.onlineTag}` : ""})
                    </option>
                  ))}
                </select>
              </label>

              {selected?.prey ? (
                <p className="rounded border border-border bg-background px-3 py-2 text-sm">
                  {page.activeLabel
                    .replace("{monster}", selected.prey.monsterName)
                    .replace("{time}", formatRemaining(selected.prey.remainingSec))}
                </p>
              ) : null}

              <label className="block text-sm">
                <span className="text-muted">{page.searchLabel}</span>
                <input
                  className="mt-1 w-full rounded border border-border bg-background px-3 py-2"
                  value={monsterQ}
                  onChange={(e) => setMonsterQ(e.target.value)}
                  placeholder={page.searchPlaceholder}
                />
              </label>

              <label className="block text-sm">
                <span className="text-muted">{page.monsterLabel}</span>
                <select
                  className="mt-1 w-full rounded border border-border bg-background px-3 py-2"
                  value={monsterName}
                  onChange={(e) => setMonsterName(e.target.value)}
                  required
                  size={Math.min(10, Math.max(4, filteredMonsters.length))}
                >
                  {filteredMonsters.map((m) => (
                    <option key={m} value={m}>
                      {m}
                    </option>
                  ))}
                </select>
              </label>

              {err ? <p className="text-sm text-red-400">{err}</p> : null}
              {msg ? <p className="text-sm text-emerald-500">{msg}</p> : null}

              <button
                type="submit"
                disabled={busy || !playerId || !monsterName || !!selected?.online}
                className="rounded bg-brand px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
              >
                {busy ? page.activating : page.activateBtn.replace("{cost}", String(data.cost))}
              </button>
              <p className="text-xs text-muted">{data.hint}</p>
            </form>
          </section>
        ) : null}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE