// BEGIN CHANGE: pagina /reset - guia Reset + EXP stack (sync OT)
"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 { apiUrl } from "@/lib/api";

type ResetRow = { rr: number; neededLevel: number; damagePercent: number; hpmpPercent: number };

type ResetGuide = {
  command: string;
  requiresPz: boolean;
  backToLevel: number;
  fixedTableMax: number;
  infinite: {
    neededLevel: number;
    damagePercentPerReset: number;
    hpmpPercentPerReset: number;
    baseDamagePercent: number;
    baseHpmpPercent: number;
  };
  expBonusPercentPerReset: number;
  table: ResetRow[];
};

type SlotExtra = {
  id: string;
  percent: number;
  mutexGroup: string | null;
  note: string;
};

type ExpStack = {
  formula: string;
  stageNote: string;
  staminaZeroKillsExp: boolean;
  slotExtras: SlotExtra[];
  engineExtras: {
    staminaAbove: { percent: number; minMinutes: number };
    staminaUnder: { percent: number; belowMinutes: number };
    cast: { enabled: boolean; percent: number; requiresBroadcastNoPassword: boolean };
    reset: { enabled: boolean; percentPerReset: number };
  };
  killExtras: {
    note: string;
    prey: { expPercent: number; lootPercent: number };
    mounts: Record<string, { expPct: number }>;
    monsterBoost: { expPercentMin: number; expPercentMax: number; daily: boolean };
  };
  example: {
    assumptions: Record<string, number | boolean>;
    slotSumPercent: number;
    engineSumPercent: number;
    totalMultiplierVsStage: number;
  };
};

type Payload = {
  enabled: boolean;
  resetGuide: ResetGuide;
  expStack: ExpStack;
};

function slotLabel(id: string, labels: Record<string, string>): string {
  return labels[id] || id;
}

export default function ResetPage() {
  const { t } = useI18n();
  const tr = t.resetPage;
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
  const [data, setData] = useState<Payload | null>(null);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch(apiUrl("reset-guide.php"), { credentials: "include" });
        if (!res.ok) throw new Error("api");
        const json = (await res.json()) as Payload;
        if (!cancelled) {
          setData(json);
          setStatus("ok");
        }
      } catch {
        if (!cancelled) setStatus("error");
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const slotLabels: Record<string, string> = {
    donate: tr.slotDonate,
    finiteFree: tr.slotFinite,
    potion: tr.slotPotion,
    favelaFree: tr.slotFavelaFree,
    favelaDonate: tr.slotFavelaDonate,
    castleFree: tr.slotCastleFree,
    castleDonate: tr.slotCastleDonate,
  };

  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">
        <h1 className="text-3xl font-semibold tracking-tight">{tr.title}</h1>
        <p className="mt-2 text-muted">{tr.subtitle}</p>
        <p className="mt-3 text-sm text-muted">
          <Link className="text-brand hover:underline" href="/server-info">
            {tr.backServerInfo}
          </Link>
        </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" && data && (
          <div className="mt-8 space-y-10">
            <section className="rounded-lg border border-border/60 bg-card/40 p-5">
              <h2 className="text-lg font-semibold">{tr.howTitle}</h2>
              <p className="mt-2 text-sm text-muted">{tr.howIntro}</p>
              <ul className="mt-4 list-disc space-y-2 pl-5 text-sm">
                <li>
                  {tr.howCommand}: <span className="font-mono text-brand">{data.resetGuide.command}</span>
                </li>
                <li>{tr.howPz}</li>
                <li>
                  {tr.howBackLevel.replace("{level}", String(data.resetGuide.backToLevel))}
                </li>
                <li>{tr.howExpBonus}</li>
                {!data.enabled && <li className="text-amber-600">{tr.disabled}</li>}
              </ul>
            </section>

            <section className="rounded-lg border border-border/60 bg-card/40 p-5">
              <h2 className="text-lg font-semibold">{tr.infiniteTitle}</h2>
              <p className="mt-2 text-sm text-muted">
                {tr.infiniteHint
                  .replace("{max}", String(data.resetGuide.fixedTableMax))
                  .replace("{level}", String(data.resetGuide.infinite.neededLevel))
                  .replace("{dmg}", String(data.resetGuide.infinite.damagePercentPerReset))
                  .replace("{hp}", String(data.resetGuide.infinite.hpmpPercentPerReset))}
              </p>
            </section>

            {data.resetGuide.table.length > 0 && (
              <section className="rounded-lg border border-border/60 bg-card/40 p-5">
                <h2 className="mb-4 text-lg font-semibold">{tr.tableTitle}</h2>
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-sm">
                    <thead className="text-muted">
                      <tr>
                        <th className="py-2 pr-4">RR</th>
                        <th className="py-2 pr-4">{tr.neededLevel}</th>
                        <th className="py-2 pr-4">{tr.damageBonus}</th>
                        <th className="py-2">{tr.hpmpBonus}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {data.resetGuide.table.map((r) => (
                        <tr key={r.rr} className="border-t border-border/50">
                          <td className="py-2 pr-4">{r.rr}</td>
                          <td className="py-2 pr-4">{r.neededLevel}</td>
                          <td className="py-2 pr-4">+{r.damagePercent}%</td>
                          <td className="py-2">+{r.hpmpPercent}%</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </section>
            )}

            <section className="rounded-lg border border-border/60 bg-card/40 p-5">
              <h2 className="text-lg font-semibold">{tr.expTitle}</h2>
              <p className="mt-2 text-sm text-muted">{tr.expIntro}</p>
              <p className="mt-3 font-mono text-xs text-brand">{data.expStack.formula}</p>
              <p className="mt-2 text-sm text-muted">{tr.expStageNote}</p>

              <h3 className="mt-6 text-sm font-semibold">{tr.expSlotTitle}</h3>
              <ul className="mt-2 space-y-2 text-sm">
                {data.expStack.slotExtras.map((s) => {
                  const hints: Record<string, string> = {
                    donate: tr.hintDonate,
                    finiteFree: tr.hintFinite,
                    potion: tr.hintPotion,
                    favelaFree: tr.hintFavelaFree,
                    favelaDonate: tr.hintFavelaDonate,
                    castleFree: tr.hintCastleFree,
                    castleDonate: tr.hintCastleDonate,
                  };
                  return (
                    <li key={s.id} className="flex flex-wrap gap-x-2 border-b border-border/40 pb-2">
                      <span className="font-medium">{slotLabel(s.id, slotLabels)}</span>
                      <span className="text-brand">+{s.percent}%</span>
                      <span className="text-muted">- {hints[s.id] || s.note}</span>
                    </li>
                  );
                })}
              </ul>

              <h3 className="mt-6 text-sm font-semibold">{tr.expEngineTitle}</h3>
              <ul className="mt-2 list-disc space-y-2 pl-5 text-sm text-muted">
                <li>
                  {tr.expStaminaAbove
                    .replace("{pct}", String(data.expStack.engineExtras.staminaAbove.percent))
                    .replace("{min}", String(data.expStack.engineExtras.staminaAbove.minMinutes))}
                </li>
                <li>
                  {tr.expStaminaUnder
                    .replace("{pct}", String(data.expStack.engineExtras.staminaUnder.percent))
                    .replace("{min}", String(data.expStack.engineExtras.staminaUnder.belowMinutes))}
                </li>
                <li>
                  {data.expStack.engineExtras.cast.enabled
                    ? tr.expCastOn.replace("{pct}", String(data.expStack.engineExtras.cast.percent))
                    : tr.expCastOff}
                </li>
                <li>{tr.expResetEngine}</li>
                <li>{tr.expStaminaZero}</li>
              </ul>

              <h3 className="mt-6 text-sm font-semibold">{tr.expKillTitle}</h3>
              <p className="mt-2 text-sm text-muted">{tr.expKillIntro}</p>
              <ul className="mt-2 list-disc space-y-2 pl-5 text-sm text-muted">
                <li>
                  {tr.expPrey
                    .replace("{exp}", String(data.expStack.killExtras.prey.expPercent))
                    .replace("{loot}", String(data.expStack.killExtras.prey.lootPercent))}
                </li>
                <li>
                  {tr.expMounts
                    .replace("{b}", String(data.expStack.killExtras.mounts.B?.expPct ?? 2))
                    .replace("{a}", String(data.expStack.killExtras.mounts.A?.expPct ?? 4))
                    .replace("{s}", String(data.expStack.killExtras.mounts.S?.expPct ?? 7))}
                </li>
                <li>
                  {tr.expBoost
                    .replace("{min}", String(data.expStack.killExtras.monsterBoost.expPercentMin))
                    .replace("{max}", String(data.expStack.killExtras.monsterBoost.expPercentMax))}
                </li>
              </ul>

              {data.expStack.example && (
                <div className="mt-6 rounded-md border border-border/50 bg-background/40 p-4 text-sm">
                  <h3 className="font-semibold">{tr.exampleTitle}</h3>
                  <p className="mt-2 text-muted">{tr.exampleHint}</p>
                  <p className="mt-3">
                    {tr.exampleResult
                      .replace("{slot}", String(data.expStack.example.slotSumPercent))
                      .replace("{engine}", String(data.expStack.example.engineSumPercent))
                      .replace("{mult}", String(data.expStack.example.totalMultiplierVsStage))}
                  </p>
                </div>
              )}
            </section>
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE