// BEGIN CHANGE: pagina Donate (wizard + checkout MP/PayPal)
"use client";
import { FormEvent, useEffect, useMemo, useRef, useState, type ReactNode, Suspense } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
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 MethodId = "mercadopago" | "paypal";
type Step = "rules" | "method" | "amount" | "confirm" | "done";
type Method = {
  id: MethodId;
  enabled: boolean;
  autoDelivery: boolean;
  label: string;
  hints: string[];
  warning: string;
};
type Package = { amount: number; points: number };
type PaypalPkg = {
  amount: number;
  pointsByCurrency: Record<"BRL" | "USD" | "EUR", number>;
};
type HistoryRow = {
  provider: string;
  id: string;
  status: string;
  amount: number;
  currency: string;
  points: number;
  processed: boolean;
  createdAt: string;
};
type DonateConfig = {
  serverName: string;
  doublePoints: boolean;
  methods: Method[];
  packages: Package[];
  paypalPackages: PaypalPkg[];
  paypalRates: Record<string, number>;
  promo: {
    doubleFrom: number;
    bonusFrom: number;
    bonusPercent: number;
    example20: number;
    example120: number;
  };
  account?: { id: number; name: string; premiumPoints: number };
  history?: HistoryRow[];
};
const STEPS: Step[] = ["rules", "method", "amount", "confirm", "done"];
function Panel({ children, className = "" }: { children: ReactNode; className?: string }) {
  return (
    <div className={`rounded-xl border border-border bg-panel p-5 ${className}`}>{children}</div>
  );
}
function StepBar({
  current,
  labels,
}: {
  current: Step;
  labels: Record<Step, string>;
}) {
  const idx = STEPS.indexOf(current);
  return (
    <ol className="mt-6 grid grid-cols-2 gap-2 sm:grid-cols-5">
      {STEPS.map((s, i) => {
        const active = i === idx;
        const done = i < idx;
        return (
          <li
            key={s}
            className={`rounded-lg border px-2 py-2 text-center text-xs ${
              active
                ? "border-brand/50 bg-brand/15 font-semibold text-foreground"
                : done
                  ? "border-border bg-background/40 text-muted"
                  : "border-border/50 text-muted/70"
            }`}
          >
            <span className="block text-[10px] uppercase tracking-wide opacity-70">
              {i + 1}
            </span>
            {labels[s]}
          </li>
        );
      })}
    </ol>
  );
}
export default function DonatePage() {
  return (
    <Suspense
      fallback={
        <div className="flex min-h-screen flex-col">
          <Navbar />
          <main className="mx-auto w-full max-w-3xl flex-1 px-6 py-14">
            <p className="text-muted">...</p>
          </main>
          <Footer />
        </div>
      }
    >
      <DonatePageInner />
    </Suspense>
  );
}
function DonatePageInner() {
  const { t } = useI18n();
  const { ready, token, account } = useAuth();
  const search = useSearchParams();
  const returnStatus = search.get("status");
  const [cfg, setCfg] = useState<DonateConfig | null>(null);
  const [loadStatus, setLoadStatus] = useState<"loading" | "ok" | "error">("loading");
  const [step, setStep] = useState<Step>("rules");
  const [agreed, setAgreed] = useState(false);
  const [method, setMethod] = useState<MethodId | null>(null);
  const [amount, setAmount] = useState(20);
  const [currency, setCurrency] = useState<"BRL" | "USD" | "EUR">("BRL");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");
  const [doneKind, setDoneKind] = useState<"success" | "failure" | "pending" | null>(null);
  // BEGIN CHANGE: apos voltar do checkout (bfcache), liberar botao Voltar
  useEffect(() => {
    const unlock = () => setBusy(false);
    const onPageShow = (e: PageTransitionEvent) => {
      if (e.persisted) unlock();
    };
    const onVisible = () => {
      if (document.visibilityState === "visible") unlock();
    };
    window.addEventListener("pageshow", onPageShow);
    document.addEventListener("visibilitychange", onVisible);
    return () => {
      window.removeEventListener("pageshow", onPageShow);
      document.removeEventListener("visibilitychange", onVisible);
    };
  }, []);
  // END CHANGE
  // BEGIN CHANGE: status na URL so aplica 1x; limpa query p/ refresh nao travar no Pronto
  const returnConsumed = useRef(false);
  function clearDonateQuery() {
    if (typeof window === "undefined") return;
    const path = window.location.pathname || "/donate";
    window.history.replaceState(null, "", path.endsWith("/") ? path : `${path}/`);
  }
  function reloadDonateConfig() {
    if (!ready) return;
    const headers: HeadersInit = {};
    if (token) headers.Authorization = `Bearer ${token}`;
    fetch(apiUrl("donate.php"), { headers })
      .then((r) => {
        if (!r.ok) throw new Error("http");
        return r.json();
      })
      .then((json: DonateConfig) => {
        setCfg(json);
        setLoadStatus("ok");
      })
      .catch(() => {
        /* keep previous cfg */
      });
  }
  useEffect(() => {
    if (returnConsumed.current) return;
    if (returnStatus === "success" || returnStatus === "failure" || returnStatus === "pending") {
      returnConsumed.current = true;
      setDoneKind(returnStatus);
      setStep("done");
      clearDonateQuery();
      reloadDonateConfig();
    }
  }, [returnStatus]);
  function startNewDonate() {
    returnConsumed.current = true;
    setStep("rules");
    setDoneKind(null);
    setErr("");
    setBusy(false);
    setAgreed(false);
    clearDonateQuery();
    reloadDonateConfig();
  }
  // END CHANGE
  useEffect(() => {
    if (!ready) return;
    setLoadStatus("loading");
    const headers: HeadersInit = {};
    if (token) headers.Authorization = `Bearer ${token}`;
    fetch(apiUrl("donate.php"), { headers })
      .then((r) => {
        if (!r.ok) throw new Error("http");
        return r.json();
      })
      .then((json: DonateConfig) => {
        setCfg(json);
        const enabled = (json.methods || []).filter((m) => m.enabled);
        if (enabled.length === 1) setMethod(enabled[0].id);
        const first = json.packages?.[0]?.amount ?? 20;
        setAmount(json.packages?.find((p) => p.amount === 20)?.amount ?? first);
        setLoadStatus("ok");
      })
      .catch(() => setLoadStatus("error"));
  }, [ready, token]);
  const selectedMethod = useMemo(
    () => cfg?.methods.find((m) => m.id === method) ?? null,
    [cfg, method],
  );
  const pointsPreview = useMemo(() => {
    if (!cfg || !method) return 0;
    if (method === "mercadopago") {
      return cfg.packages.find((p) => p.amount === amount)?.points ?? 0;
    }
    const pkg = cfg.paypalPackages.find((p) => p.amount === amount);
    return pkg?.pointsByCurrency[currency] ?? 0;
  }, [cfg, method, amount, currency]);
  const amountBRLPreview = useMemo(() => {
    if (!cfg || method !== "paypal") return amount;
    return amount * (cfg.paypalRates[currency] ?? 1);
  }, [cfg, method, amount, currency]);
  const stepLabels: Record<Step, string> = {
    rules: t.donatePage.stepRules,
    method: t.donatePage.stepMethod,
    amount: t.donatePage.stepAmount,
    confirm: t.donatePage.stepConfirm,
    done: t.donatePage.stepDone,
  };
  function goMethod() {
    if (!agreed) {
      setErr(t.donatePage.mustAgree);
      return;
    }
    setErr("");
    setStep("method");
  }
  function goAmount() {
    if (!method) {
      setErr(t.donatePage.mustMethod);
      return;
    }
    setErr("");
    if (method === "mercadopago" && cfg?.packages?.length) {
      setAmount(cfg.packages.find((p) => p.amount === 20)?.amount ?? cfg.packages[0].amount);
    }
    if (method === "paypal" && cfg?.paypalPackages?.length) {
      setAmount(
        cfg.paypalPackages.find((p) => p.amount === 20)?.amount ?? cfg.paypalPackages[0].amount,
      );
    }
    setStep("amount");
  }
  async function startCheckout(e: FormEvent) {
    e.preventDefault();
    if (!token) {
      setErr(t.donatePage.needLogin);
      return;
    }
    if (!method) return;
    setBusy(true);
    setErr("");
    try {
      const res = await fetch(apiUrl("donate.php"), {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          method,
          amount,
          currency: method === "paypal" ? currency : "BRL",
        }),
      });
      const json = await res.json();
      if (!res.ok) throw new Error(json.error || "fail");
      if (json.provider === "mercadopago" && json.checkoutUrl) {
        window.location.href = json.checkoutUrl as string;
        return;
      }
      if (json.provider === "paypal" && json.paypal?.action && json.paypal?.fields) {
        const form = document.createElement("form");
        form.method = "POST";
        form.action = json.paypal.action as string;
        Object.entries(json.paypal.fields as Record<string, string>).forEach(([k, v]) => {
          const input = document.createElement("input");
          input.type = "hidden";
          input.name = k;
          input.value = String(v);
          form.appendChild(input);
        });
        document.body.appendChild(form);
        form.submit();
        return;
      }
      throw new Error("invalid response");
    } catch (ex) {
      setErr(ex instanceof Error ? ex.message : t.common.error);
      setBusy(false);
    }
  }
  const loggedIn = !!(ready && token && account);
  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">{t.donatePage.title}</h1>
        <p className="mt-2 text-muted">{t.donatePage.subtitle}</p>
        <StepBar current={step} labels={stepLabels} />
        {loadStatus === "loading" && <p className="mt-8 text-muted">{t.common.loading}</p>}
        {loadStatus === "error" && <p className="mt-8 text-muted">{t.common.error}</p>}
        {loadStatus === "ok" && cfg && step === "rules" && (
          <div className="mt-8 space-y-4">
            <Panel>
              <h2 className="text-lg font-semibold">{t.donatePage.priceTitle}</h2>
              <p className="mt-2 text-sm text-muted">{t.donatePage.priceBody}</p>
              <div className="mt-4 rounded-lg border border-border/60 bg-background/40 p-3 text-sm">
                <div className="font-medium">
                  Double Points:{" "}
                  <span className={cfg.doublePoints ? "text-emerald-400" : "text-rose-400"}>
                    {cfg.doublePoints ? t.donatePage.promoOn : t.donatePage.promoOff}
                  </span>
                </div>
                {cfg.doublePoints ? (
                  <ul className="mt-2 list-disc space-y-1 pl-5 text-muted">
                    <li>
                      {t.donatePage.promoDouble
                        .replace("{from}", String(cfg.promo.doubleFrom))
                        .replace("{example}", String(cfg.promo.example20))}
                    </li>
                    <li>
                      {t.donatePage.promoBonus
                        .replace("{from}", String(cfg.promo.bonusFrom))
                        .replace("{pct}", String(cfg.promo.bonusPercent))
                        .replace("{example}", String(cfg.promo.example120))}
                    </li>
                  </ul>
                ) : (
                  <p className="mt-2 text-muted">{t.donatePage.promoInactiveHint}</p>
                )}
              </div>
            </Panel>
            <Panel>
              <h2 className="text-lg font-semibold">{t.donatePage.spiritTitle}</h2>
              <p className="mt-2 text-sm text-muted whitespace-pre-wrap">{t.donatePage.spiritBody}</p>
              <div className="mt-4 space-y-3 text-sm">
                <div>
                  <div className="font-medium">{t.donatePage.faqPointsQ}</div>
                  <p className="mt-1 text-muted">{t.donatePage.faqPointsA}</p>
                </div>
                <div>
                  <div className="font-medium">{t.donatePage.faqHowQ}</div>
                  <p className="mt-1 text-muted">{t.donatePage.faqHowA}</p>
                </div>
              </div>
              <p className="mt-4 text-sm">
                <Link href="/rules" className="text-brand hover:underline">
                  {t.donatePage.readRules}
                </Link>
                {" | "}
                <Link href="/events" className="text-brand hover:underline">
                  {t.donatePage.seePerks}
                </Link>
              </p>
            </Panel>
            <label className="flex items-start gap-3 rounded-xl border border-border bg-panel p-4 text-sm">
              <input
                type="checkbox"
                className="mt-1"
                checked={agreed}
                onChange={(e) => setAgreed(e.target.checked)}
              />
              <span>{t.donatePage.agreeLabel}</span>
            </label>
            {err && <p className="text-sm text-rose-400">{err}</p>}
            {!loggedIn ? (
              <Panel>
                <p className="text-sm text-muted">{t.donatePage.needLogin}</p>
                <div className="mt-3 flex flex-wrap gap-2">
                  <Link
                    href="/login"
                    className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-background"
                  >
                    {t.nav.items.login}
                  </Link>
                  <Link
                    href="/create-account"
                    className="rounded-lg border border-border px-4 py-2 text-sm"
                  >
                    {t.nav.items.createAccount}
                  </Link>
                </div>
              </Panel>
            ) : (
              <button
                type="button"
                onClick={goMethod}
                className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-background"
              >
                {t.donatePage.continue}
              </button>
            )}
          </div>
        )}
        {loadStatus === "ok" && cfg && step === "method" && (
          <div className="mt-8 space-y-4">
            {cfg.account && (
              <p className="text-sm text-muted">
                {t.donatePage.loggedAs}{" "}
                <span className="font-medium text-foreground">{cfg.account.name}</span>
                {" | "}
                {cfg.account.premiumPoints} {t.donatePage.points}
              </p>
            )}
            <div className="grid gap-3">
              {cfg.methods
                .filter((m) => m.enabled)
                .map((m) => (
                  <button
                    key={m.id}
                    type="button"
                    onClick={() => setMethod(m.id)}
                    className={`rounded-xl border p-4 text-left transition-colors ${
                      method === m.id
                        ? "border-brand/50 bg-brand/10"
                        : "border-border bg-panel hover:border-brand/30"
                    }`}
                  >
                    <div className="flex items-center justify-between gap-2">
                      <h3 className="font-semibold">{m.label}</h3>
                      {m.autoDelivery && (
                        <span className="rounded bg-emerald-500/15 px-2 py-0.5 text-[10px] uppercase tracking-wide text-emerald-400">
                          {t.donatePage.autoDelivery}
                        </span>
                      )}
                    </div>
                    <p className="mt-1 text-xs text-muted">{m.hints.join(" | ")}</p>
                    <p className="mt-2 text-sm text-muted">{m.warning}</p>
                  </button>
                ))}
              {cfg.methods.every((m) => !m.enabled) && (
                <Panel>
                  <p className="text-sm text-rose-400">{t.donatePage.noMethods}</p>
                </Panel>
              )}
            </div>
            {err && <p className="text-sm text-rose-400">{err}</p>}
            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                onClick={() => setStep("rules")}
                className="rounded-lg border border-border px-4 py-2 text-sm"
              >
                {t.donatePage.back}
              </button>
              <button
                type="button"
                onClick={goAmount}
                className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-background"
              >
                {t.donatePage.continue}
              </button>
            </div>
          </div>
        )}
        {loadStatus === "ok" && cfg && step === "amount" && selectedMethod && (
          <div className="mt-8 space-y-4">
            <Panel>
              <h2 className="font-semibold">
                {selectedMethod.label} - {t.donatePage.chooseAmount}
              </h2>
              <p className="mt-1 text-sm text-muted">{t.donatePage.amountHint}</p>
              <div className="mt-4 flex flex-wrap gap-3">
                <label className="text-sm">
                  <span className="mb-1 block text-muted">{t.donatePage.amount}</span>
                  <select
                    className="rounded-lg border border-border bg-background px-3 py-2"
                    value={amount}
                    onChange={(e) => setAmount(Number(e.target.value))}
                  >
                    {(method === "paypal" ? cfg.paypalPackages : cfg.packages).map((p) => (
                      <option key={p.amount} value={p.amount}>
                        {/* BEGIN CHANGE: separador ASCII (evita ? de encoding no option) */}
                        {method === "paypal"
                          ? `${p.amount} ${currency}`
                          : `R$ ${p.amount.toFixed(2)} - ${"points" in p ? (p as Package).points : 0} pts`}
                        {/* END CHANGE */}
                      </option>
                    ))}
                  </select>
                </label>
                {method === "paypal" && (
                  <label className="text-sm">
                    <span className="mb-1 block text-muted">{t.donatePage.currency}</span>
                    <select
                      className="rounded-lg border border-border bg-background px-3 py-2"
                      value={currency}
                      onChange={(e) => setCurrency(e.target.value as "BRL" | "USD" | "EUR")}
                    >
                      <option value="BRL">BRL</option>
                      <option value="USD">USD</option>
                      <option value="EUR">EUR</option>
                    </select>
                  </label>
                )}
              </div>
              <div className="mt-4 rounded-lg border border-brand/30 bg-brand/10 px-3 py-3 text-sm">
                {t.donatePage.youReceive}{" "}
                <strong className="text-foreground">
                  {pointsPreview} {t.donatePage.points}
                </strong>
                {method === "paypal" && (
                  <span className="mt-1 block text-xs text-muted">
                    ~ R$ {amountBRLPreview.toFixed(2)} ({t.donatePage.converted})
                  </span>
                )}
              </div>
            </Panel>
            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                onClick={() => setStep("method")}
                className="rounded-lg border border-border px-4 py-2 text-sm"
              >
                {t.donatePage.back}
              </button>
              <button
                type="button"
                onClick={() => setStep("confirm")}
                className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-background"
              >
                {t.donatePage.continue}
              </button>
            </div>
          </div>
        )}
        {loadStatus === "ok" && cfg && step === "confirm" && selectedMethod && (
          <div className="mt-8 space-y-4">
            <Panel>
              <h2 className="font-semibold">{t.donatePage.confirmTitle}</h2>
              <dl className="mt-4 space-y-2 text-sm">
                <div className="flex justify-between gap-4 border-b border-border/40 pb-2">
                  <dt className="text-muted">{t.donatePage.account}</dt>
                  <dd className="font-medium">{cfg.account?.name ?? account?.name}</dd>
                </div>
                <div className="flex justify-between gap-4 border-b border-border/40 pb-2">
                  <dt className="text-muted">{t.donatePage.method}</dt>
                  <dd className="font-medium">{selectedMethod.label}</dd>
                </div>
                <div className="flex justify-between gap-4 border-b border-border/40 pb-2">
                  <dt className="text-muted">{t.donatePage.amount}</dt>
                  <dd className="font-medium">
                    {method === "mercadopago"
                      ? `R$ ${amount.toFixed(2)}`
                      : `${amount} ${currency}`}
                  </dd>
                </div>
                <div className="flex justify-between gap-4">
                  <dt className="text-muted">{t.donatePage.points}</dt>
                  <dd className="font-semibold text-brand">{pointsPreview}</dd>
                </div>
              </dl>
              <p className="mt-4 text-xs text-muted">{t.donatePage.confirmHint}</p>
              <p className="mt-2 text-xs text-rose-300">{t.donatePage.noManual}</p>
            </Panel>
            {err && <p className="text-sm text-rose-400">{err}</p>}
            <form onSubmit={startCheckout} className="flex flex-wrap gap-2">
              {/* BEGIN CHANGE: Voltar nunca disabled (busy trava apos return do MP/PayPal) */}
              <button
                type="button"
                onClick={() => {
                  setBusy(false);
                  setStep("amount");
                }}
                className="rounded-lg border border-border px-4 py-2 text-sm"
              >
                {t.donatePage.back}
              </button>
              {/* END CHANGE */}
              <button
                type="submit"
                disabled={busy}
                className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-background disabled:opacity-50"
              >
                {busy ? t.donatePage.redirecting : t.donatePage.payNow}
              </button>
            </form>
          </div>
        )}
        {step === "done" && (
          <div className="mt-8 space-y-4">
            <Panel>
              <h2 className="text-lg font-semibold">
                {doneKind === "success" && t.donatePage.doneSuccess}
                {doneKind === "pending" && t.donatePage.donePending}
                {doneKind === "failure" && t.donatePage.doneFailure}
                {!doneKind && t.donatePage.stepDone}
              </h2>
              <p className="mt-2 text-sm text-muted">
                {doneKind === "success" && t.donatePage.doneSuccessBody}
                {doneKind === "pending" && t.donatePage.donePendingBody}
                {doneKind === "failure" && t.donatePage.doneFailureBody}
              </p>
              <div className="mt-4 flex flex-wrap gap-2">
                <Link
                  href="/account"
                  className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-background"
                >
                  {t.donatePage.goAccount}
                </Link>
                <button
                  type="button"
                  onClick={startNewDonate}
                  className="rounded-lg border border-border px-4 py-2 text-sm"
                >
                  {t.donatePage.newDonate}
                </button>
              </div>
            </Panel>
          </div>
        )}
        {loadStatus === "ok" && cfg?.history && cfg.history.length > 0 && (
          <section className="mt-12">
            <h2 className="text-lg font-semibold">{t.donatePage.historyTitle}</h2>
            <div className="mt-3 overflow-x-auto rounded-xl border border-border bg-panel">
              <table className="w-full min-w-[520px] text-left text-sm">
                <thead className="border-b border-border text-muted">
                  <tr>
                    <th className="px-3 py-2 font-medium">{t.donatePage.colProvider}</th>
                    <th className="px-3 py-2 font-medium">{t.donatePage.colStatus}</th>
                    <th className="px-3 py-2 font-medium">{t.donatePage.amount}</th>
                    <th className="px-3 py-2 font-medium">{t.donatePage.points}</th>
                    <th className="px-3 py-2 font-medium">{t.donatePage.colWhen}</th>
                  </tr>
                </thead>
                <tbody>
                  {cfg.history.map((h) => (
                    <tr key={`${h.provider}-${h.id}`} className="border-t border-border/40">
                      <td className="px-3 py-2 capitalize">{h.provider}</td>
                      <td className="px-3 py-2">
                        <span className="text-muted">{h.status}</span>
                        {h.processed && (
                          <span className="ml-2 text-[10px] uppercase text-emerald-400">
                            OK
                          </span>
                        )}
                      </td>
                      <td className="px-3 py-2 text-muted">
                        {h.amount} {h.currency}
                      </td>
                      <td className="px-3 py-2">{h.points}</td>
                      <td className="px-3 py-2 text-xs text-muted">{h.createdAt}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE