import { createFileRoute, Link } from "@tanstack/react-router";
import { CheckCircle, Package, Mail, Landmark, Loader2 } from "lucide-react";
import { useEffect, useState } from "react";
import { useCartStore } from "@/stores/cartStore";
import { useGqlCart } from "@/hooks/useGqlCart";
import { useSearchParams } from "@/hooks/useSearchParams";
import { getBacsDetails, confluxOrderStatus } from "@/lib/wc.functions";
import { sanitizeHtml } from "@/lib/sanitize";
import { trackPurchase } from "@/lib/analytics";
import { useT, headLang } from "@/lib/i18n";

export const Route = createFileRoute("/bestelling-bevestigd")({
  head: (ctx) => {
    const lang = headLang(ctx);
    return {
      meta: [
        {
          title:
            lang === "en"
              ? "Order Confirmed | Peptidewinkel"
              : "Bestelling bevestigd | Peptidewinkel",
        },
        {
          name: "description",
          content: lang === "en" ? "Thank you for your order." : "Bedankt voor je bestelling.",
        },
        { name: "robots", content: "noindex, nofollow" },
      ],
    };
  },
  component: OrderConfirmationPage,
});

interface BacsInfo {
  instructions: string;
  total: string;
  currency: string;
  reference: string;
}

function OrderConfirmationPage() {
  const t = useT();
  const { clearCart } = useCartStore();
  const [params] = useSearchParams();
  const orderId = params.get("order") || params.get("order_id");
  const orderKey = params.get("order_key") || undefined;
  const method = params.get("method");
  const isBacs = method === "bacs";
  // Wallet payments are routed to Conflux or Gyvo by the backend; both return
  // here with the gateway that handled them as `method`.
  const isWalletPayment = method === "conflux" || method === "gyvo";

  const [payState, setPayState] = useState<
    "pending" | "paid" | "failed" | "cancelled" | "refunded" | "unknown"
  >("pending");

  const [bacs, setBacs] = useState<BacsInfo | null>(null);
  const [bacsLoading, setBacsLoading] = useState(isBacs);

  const { emptyCart } = useGqlCart();
  useEffect(() => {
    if (orderId) trackPurchase(orderId);
    clearCart();
    // Also empty the WooCommerce (server-side) cart, otherwise items reappear.
    emptyCart().catch(() => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [clearCart, orderId]);

  // Backup for the async webhook: actively ask the backend for the payment status.
  useEffect(() => {
    if (!isWalletPayment || !orderId || !orderKey) return;
    let cancelled = false;
    let attempt = 0;
    let timer: ReturnType<typeof setTimeout> | undefined;

    const poll = async () => {
      attempt += 1;
      try {
        const res = (await confluxOrderStatus({
          data: { order_id: Number(orderId), order_key: orderKey },
        })) as { error?: string; state?: string };
        if (cancelled) return;
        if (res && !res.error && res.state && res.state !== "pending") {
          setPayState(res.state as "paid" | "failed" | "cancelled" | "refunded");
          return;
        }
        if (res?.error) {
          setPayState("unknown");
          return;
        }
      } catch (e) {
        console.error("confluxOrderStatus failed:", e);
      }
      if (!cancelled && attempt < 8) timer = setTimeout(poll, 4000);
      else if (!cancelled) setPayState("unknown");
    };

    poll();
    return () => {
      cancelled = true;
      if (timer) clearTimeout(timer);
    };
  }, [isWalletPayment, orderId, orderKey]);

  useEffect(() => {
    if (!isBacs || !orderId || !orderKey) return;
    let cancelled = false;
    (async () => {
      try {
        const res = (await getBacsDetails({
          data: { order_id: Number(orderId), order_key: orderKey },
        })) as { error?: string } | BacsInfo;
        if (cancelled) return;
        if ("error" in res && res.error) setBacs(null);
        else setBacs(res as BacsInfo);
      } catch (e) {
        console.error("getBacsDetails failed:", e);
      } finally {
        if (!cancelled) setBacsLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [isBacs, orderId, orderKey]);

  return (
    <div className="container py-16 md:py-24 max-w-2xl text-center">
      <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-success/10 flex items-center justify-center">
        <CheckCircle className="w-12 h-12 text-success" />
      </div>
      <h1 className="text-3xl md:text-4xl font-black mb-3">
        {t("Bedankt voor je bestelling!", "Thank you for your order!")}
      </h1>
      <p className="text-muted-foreground text-lg mb-8">
        {isBacs ? (
          <>
            {t(
              `We hebben je bestelling${orderId ? ` (#${orderId})` : ""} ontvangen en wachten op je bankoverschrijving.`,
              `We have received your order${orderId ? ` (#${orderId})` : ""} and are waiting for your bank transfer.`,
            )}
          </>
        ) : (
          <>
            {t(
              `We hebben je bestelling${orderId ? ` (#${orderId})` : ""} succesvol ontvangen. Je krijgt zo een bevestiging per e-mail.`,
              `We have successfully received your order${orderId ? ` (#${orderId})` : ""}. You will receive a confirmation by email shortly.`,
            )}
          </>
        )}
      </p>

      {isWalletPayment && (
        <div className="text-left bg-card border border-border rounded-2xl p-5 mb-8">
          {payState === "pending" ? (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Loader2 className="w-4 h-4 animate-spin" />{" "}
              {t(
                "Betaalstatus controleren bij de betaalprovider...",
                "Checking payment status with the payment provider...",
              )}
            </div>
          ) : payState === "paid" ? (
            <p className="text-sm font-semibold text-success">
              {t(
                "Betaling ontvangen en bevestigd. We gaan direct aan de slag met je bestelling.",
                "Payment received and confirmed. We will start processing your order right away.",
              )}
            </p>
          ) : payState === "failed" || payState === "cancelled" ? (
            <p className="text-sm text-destructive font-semibold">
              {t(
                `De betaling is ${payState === "failed" ? "mislukt" : "geannuleerd"}. Je bestelling is nog niet betaald — probeer het opnieuw of neem contact met ons op.`,
                `The payment ${payState === "failed" ? "failed" : "was cancelled"}. Your order has not been paid yet — please try again or contact us.`,
              )}
            </p>
          ) : payState === "refunded" ? (
            <p className="text-sm font-semibold">
              {t("Deze betaling is terugbetaald.", "This payment has been refunded.")}
            </p>
          ) : (
            <p className="text-sm text-muted-foreground">
              {t(
                "We konden de betaalstatus nog niet definitief bevestigen. Zodra de betaling verwerkt is, ontvang je een bevestiging per e-mail.",
                "We could not yet definitively confirm the payment status. Once the payment is processed, you will receive a confirmation by email.",
              )}
            </p>
          )}
        </div>
      )}

      {isBacs && (
        <div className="text-left bg-card border border-border rounded-2xl p-6 mb-8">
          <div className="flex items-center gap-2 mb-3">
            <Landmark className="w-5 h-5 text-primary" />
            <h2 className="text-lg font-bold">
              {t("Bankgegevens voor overschrijving", "Bank details for the bank transfer")}
            </h2>
          </div>
          {bacsLoading ? (
            <div className="flex items-center gap-2 text-sm text-muted-foreground py-4">
              <Loader2 className="w-4 h-4 animate-spin" />{" "}
              {t("Bankgegevens laden...", "Loading bank details...")}
            </div>
          ) : bacs ? (
            <>
              <div className="grid sm:grid-cols-2 gap-3 mb-4 text-sm">
                {bacs.total && (
                  <div className="bg-muted/50 rounded-md p-3">
                    <p className="text-xs text-muted-foreground">
                      {t("Te betalen bedrag", "Amount due")}
                    </p>
                    <p className="font-bold text-base">
                      {bacs.currency === "EUR" ? "€" : `${bacs.currency} `}
                      {bacs.total}
                    </p>
                  </div>
                )}
                <div className="bg-muted/50 rounded-md p-3">
                  <p className="text-xs text-muted-foreground">
                    {t("Omschrijving / referentie", "Description / reference")}
                  </p>
                  <p className="font-bold text-base font-mono">{bacs.reference}</p>
                </div>
              </div>
              {bacs.instructions ? (
                <div
                  className="prose prose-sm max-w-none text-sm [&_p]:my-2"
                  dangerouslySetInnerHTML={{ __html: sanitizeHtml(bacs.instructions) }}
                />
              ) : (
                <p className="text-sm text-muted-foreground">
                  {t(
                    "De bankgegevens worden ook in de bevestigingsmail meegestuurd. Vermeld bij betaling de referentie",
                    "The bank details will also be included in the confirmation email. Please state the reference",
                  )}{" "}
                  <strong>{bacs.reference}</strong> {t("bij betaling.", "when paying.")}
                </p>
              )}
              <p className="text-xs text-muted-foreground mt-4">
                {t(
                  "Je bestelling wordt verwerkt zodra de betaling op onze rekening is bijgeschreven.",
                  "Your order will be processed once the payment has been credited to our account.",
                )}
              </p>
            </>
          ) : (
            <p className="text-sm text-muted-foreground">
              {t(
                "De bankgegevens worden in de bevestigingsmail meegestuurd. Vermeld bij betaling de referentie",
                "The bank details will be included in the confirmation email. Please state the reference",
              )}{" "}
              <strong>#{orderId}</strong>.
            </p>
          )}
        </div>
      )}

      <div className="grid sm:grid-cols-2 gap-4 max-w-md mx-auto mb-10">
        <div className="bg-card border border-border/50 rounded-2xl p-5">
          <Mail className="w-6 h-6 text-primary mx-auto mb-2" />
          <p className="text-sm font-bold">{t("Check je inbox", "Check your inbox")}</p>
          <p className="text-xs text-muted-foreground mt-1">
            {t("Bevestiging onderweg", "Confirmation on its way")}
          </p>
        </div>
        <div className="bg-card border border-border/50 rounded-2xl p-5">
          <Package className="w-6 h-6 text-primary mx-auto mb-2" />
          <p className="text-sm font-bold">{t("Discrete verzending", "Discreet shipping")}</p>
          <p className="text-xs text-muted-foreground mt-1">
            {t("1-3 werkdagen", "1-3 business days")}
          </p>
        </div>
      </div>

      <div className="flex flex-wrap items-center justify-center gap-3">
        <Link
          to="/shop"
          className="inline-flex items-center gap-2 gradient-primary text-white font-bold px-6 py-3 rounded-xl text-sm uppercase tracking-wide"
        >
          {t("Verder winkelen", "Continue shopping")}
        </Link>
        <Link
          to="/my-account"
          className="inline-flex items-center gap-2 border border-border px-6 py-3 rounded-xl text-sm font-semibold hover:bg-muted"
        >
          {t("Mijn bestellingen", "My orders")}
        </Link>
      </div>
    </div>
  );
}