"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { ORDER_KEY, PENDING_ORDER_KEY } from "../../lib/order";
import { clearCart } from "../../lib/cart";
import { clearDiscount } from "../../lib/discount";
import { clearCheckoutDraft } from "../../lib/checkoutDraft";
import { dispatchAuthChanged } from "../../lib/auth";

const POLL_INTERVAL_MS = 1500;
const POLL_TIMEOUT_MS = 15000;

// The Payment Element's return_url target (see PaymentStep.tsx) — reached
// after a card confirms client-side or a PayPal redirect completes.
// Neither of those is trustworthy proof of payment on its own (see
// spicy-leaping-pizza.md §3's own reasoning: a closed tab mid-PayPal-
// redirect looks identical to success from here) — this page polls the
// order's actual `paymentStatus`, which only the webhook-driven
// confirm-payment endpoint ever sets, and only promotes the pending
// sessionStorage snapshot to the confirmed one once that's true.
export function VerarbeitungContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const orderNumber = searchParams.get("orderNumber");
  // "account" — the payment-method-switch flow on an existing order's
  // account page (see PaymentStep.tsx's own returnContext comment).
  // Defaults to "checkout" for a bare/missing param, same as before this
  // branch existed.
  const isAccountContext = searchParams.get("context") === "account";
  const [state, setState] = useState<"polling" | "timeout" | "failed" | "error">(orderNumber ? "polling" : "error");
  const startedAt = useRef<number | null>(null);

  useEffect(() => {
    if (!orderNumber) return;
    startedAt.current = Date.now();
    let cancelled = false;

    async function poll() {
      try {
        const res = await fetch(`/api/checkout/status?orderNumber=${encodeURIComponent(orderNumber!)}`, { cache: "no-store" });
        const data = await res.json();
        if (cancelled) return;
        if (!data.ok) {
          setState("error");
          return;
        }
        if (data.paymentStatus === "paid") {
          if (isAccountContext) {
            // Nothing to clear — this order was already placed (as
            // Überweisung) and confirmed long before this switch, there's
            // no cart/discount/draft snapshot involved. Land back on the
            // same order instead of /bestellbestaetigung, which would
            // read as a brand-new purchase.
            router.push(`/konto/bestellungen/${encodeURIComponent(orderNumber!)}`);
            return;
          }
          try {
            const pending = window.sessionStorage.getItem(PENDING_ORDER_KEY);
            if (pending) {
              // Patch in the real instrument (Kreditkarte/PayPal) now
              // that it's known — the pending snapshot was written at
              // checkout submission time with the neutral "Online-
              // Zahlung" placeholder, before the customer had actually
              // picked one on the Payment Element.
              const snapshot = JSON.parse(pending);
              if (data.paymentMethodTitle) snapshot.paymentMethodTitle = data.paymentMethodTitle;
              window.sessionStorage.setItem(ORDER_KEY, JSON.stringify(snapshot));
              window.sessionStorage.removeItem(PENDING_ORDER_KEY);
            }
          } catch {
            // Same private-browsing fallback as everywhere else this
            // sessionStorage snapshot is written — /bestellbestaetigung
            // has its own empty state.
          }
          clearCart();
          clearDiscount();
          clearCheckoutDraft();
          dispatchAuthChanged();
          router.push("/bestellbestaetigung");
          return;
        }
        if (data.paymentStatus === "failed" || data.status === "cancelled") {
          setState("failed");
          return;
        }
        if (startedAt.current != null && Date.now() - startedAt.current > POLL_TIMEOUT_MS) {
          setState("timeout");
          return;
        }
        setTimeout(poll, POLL_INTERVAL_MS);
      } catch {
        if (!cancelled) setState("error");
      }
    }

    poll();
    return () => {
      cancelled = true;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [orderNumber]);

  return (
    <main className="flex flex-col flex-1 items-center justify-center gap-6 py-24 px-[var(--layout-padding-x)] text-center">
      {state === "polling" && (
        <>
          <p className="text-h-feature font-semibold text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
            Zahlung wird bestätigt…
          </p>
          <p className="text-body text-text-muted">Einen Moment bitte, das dauert normalerweise nur wenige Sekunden.</p>
        </>
      )}
      {state === "timeout" && (
        <>
          <p className="text-h-feature font-semibold text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
            Das dauert etwas länger
          </p>
          <p className="text-body text-text-muted max-w-md">
            Deine Zahlung wird noch verarbeitet. Sobald sie bestätigt ist, schicken wir dir eine Bestätigungs-E-Mail — du musst hier nicht warten.
          </p>
        </>
      )}
      {state === "failed" && (
        <>
          <p className="text-h-feature font-semibold text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
            Zahlung fehlgeschlagen
          </p>
          <p className="text-body text-text-muted max-w-md">
            {isAccountContext
              ? "Die Zahlung konnte nicht abgeschlossen werden. Deine Bestellung bleibt unverändert — du kannst es jederzeit erneut versuchen."
              : "Deine Zahlung konnte nicht abgeschlossen werden. Dein Warenkorb ist noch vorhanden — du kannst es gerne erneut versuchen."}
          </p>
          <Link
            href={isAccountContext ? `/konto/bestellungen/${encodeURIComponent(orderNumber ?? "")}` : "/checkout"}
            className="flex items-center gap-2 px-7 py-4 rounded-sm bg-brand text-h4 font-bold text-text-primary hover:bg-brand-hover active:scale-[0.97] transition-all"
          >
            {isAccountContext ? "Zurück zur Bestellung" : "Zurück zum Checkout"}
          </Link>
        </>
      )}
      {state === "error" && (
        <>
          <p className="text-h-feature font-semibold text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
            Status konnte nicht geladen werden
          </p>
          <p className="text-body text-text-muted max-w-md">
            Falls die Zahlung erfolgreich war, erhältst du in Kürze eine Bestätigungs-E-Mail. Andernfalls kannst du es erneut versuchen.
          </p>
          <Link
            href={isAccountContext ? `/konto/bestellungen/${encodeURIComponent(orderNumber ?? "")}` : "/checkout"}
            className="flex items-center gap-2 px-7 py-4 rounded-sm bg-brand text-h4 font-bold text-text-primary hover:bg-brand-hover active:scale-[0.97] transition-all"
          >
            {isAccountContext ? "Zurück zur Bestellung" : "Zurück zum Checkout"}
          </Link>
        </>
      )}
    </main>
  );
}
