"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

const LOOKUP_URL = process.env.NEXT_PUBLIC_LOOKUP_URL || "https://licenses.dashcaddy.net/api/checkout/session";

interface LookupResult {
  status: "delivered" | "pending_email" | "processing" | "not_found" | "expired";
  code?: string;
  codeId?: string;
  productId?: string;
  durationDays?: number;
  deliveredVia?: string;
}

function SuccessContent() {
  const searchParams = useSearchParams();
  const sessionId = searchParams.get("session_id");

  const [result, setResult] = useState<LookupResult | null>(null);
  const [loading, setLoading] = useState(true);
  const [copied, setCopied] = useState(false);
  const [sessionCopied, setSessionCopied] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setResult(null);
    setError(null);
    setLoading(true);
    setCopied(false);
    setSessionCopied(false);
    if (!sessionId) {
      setLoading(false);
      setError("This page is missing the Stripe checkout session ID. Open the link from your Stripe confirmation or contact support.");
      return;
    }
    if (!/^cs_[A-Za-z0-9_]{3,252}$/.test(sessionId)) {
      setLoading(false);
      setError("The Stripe checkout session ID is invalid. Open the confirmation link again or contact support.");
      return;
    }
    let cancelled = false;
    let activeRequest: AbortController | null = null;
    let timer: ReturnType<typeof setTimeout> | null = null;
    let attempts = 0;
    const fetchOnce = async () => {
      attempts += 1;
      activeRequest = new AbortController();
      const requestTimeout = setTimeout(() => activeRequest?.abort(), 10000);
      try {
        const r = await fetch(`${LOOKUP_URL}/${encodeURIComponent(sessionId)}`, {
          cache: "no-store",
          signal: activeRequest.signal,
        });
        if (cancelled) return;
        if (r.ok) {
          let j: LookupResult;
          try {
            j = (await r.json()) as LookupResult;
          } catch {
            setError("The billing server returned malformed data. Check your Stripe or email receipt, then contact support.");
            setLoading(false);
            return;
          }
          const allowedStatuses = new Set(["delivered", "pending_email", "processing", "not_found", "expired"]);
          if (!j || typeof j !== "object") {
            setError("The billing server returned an invalid response. Check your Stripe or email receipt, then contact support.");
            setLoading(false);
            return;
          }
          const optionalFieldsValid =
            (j.code === undefined || typeof j.code === "string") &&
            (j.codeId === undefined || typeof j.codeId === "string") &&
            (j.productId === undefined || typeof j.productId === "string") &&
            (j.durationDays === undefined || (Number.isInteger(j.durationDays) && j.durationDays > 0)) &&
            (j.deliveredVia === undefined || typeof j.deliveredVia === "string");
          if (typeof j.status !== "string" || !allowedStatuses.has(j.status) || !optionalFieldsValid) {
            setError("The billing server returned an invalid response. Check your Stripe or email receipt, then contact support.");
            setLoading(false);
            return;
          }
          if ((j.status === "delivered" || j.status === "pending_email") &&
              (typeof j.code !== "string" || j.code.trim().length === 0)) {
            setError("Payment was confirmed, but the license key was not returned. Please contact support with the session ID below.");
            setLoading(false);
            return;
          }
          if (j.status === "processing" || j.status === "not_found") {
            if (attempts >= 40) {
              if (j.status === "not_found") setResult({ status: "not_found" });
              else setError("Stripe confirmation is taking longer than expected. Check your Stripe or email receipt, then contact support if needed.");
              setLoading(false);
              return;
            }
            timer = setTimeout(fetchOnce, 3000);
            return;
          }
          setResult(j);
          if (j.status === "expired") {
            setError("This checkout session has expired. If you were charged, contact support with the session ID below.");
          }
          setLoading(false);
        } else if (r.status === 404) {
          if (attempts >= 40) {
            setResult({ status: "not_found" });
            setLoading(false);
          } else {
            timer = setTimeout(fetchOnce, 3000);
          }
        } else if (r.status === 408 || r.status === 429 || r.status >= 500) {
          if (attempts >= 40) {
            setError(`The billing server remained unavailable (HTTP ${r.status}). Check your Stripe or email receipt, then contact support.`);
            setLoading(false);
          } else {
            timer = setTimeout(fetchOnce, 3000);
          }
        } else {
          setError(`The billing server is temporarily unavailable (HTTP ${r.status}). Check your Stripe or email receipt, then try again.`);
          setLoading(false);
        }
      } catch {
        if (!cancelled) {
          if (attempts >= 40) {
            setError("The billing request repeatedly timed out or could not reach the server. Check your Stripe or email receipt, then contact support.");
            setLoading(false);
          } else {
            timer = setTimeout(fetchOnce, 3000);
          }
        }
      } finally {
        clearTimeout(requestTimeout);
      }
    };
    fetchOnce();
    return () => {
      cancelled = true;
      activeRequest?.abort();
      if (timer) clearTimeout(timer);
    };
  }, [sessionId]);

  const copyCode = async () => {
    if (!result?.code) return;
    try {
      await navigator.clipboard.writeText(result.code);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      /* noop */
    }
  };

  const copySessionId = async () => {
    if (!sessionId) return;
    try {
      await navigator.clipboard.writeText(sessionId);
      setSessionCopied(true);
      setTimeout(() => setSessionCopied(false), 2000);
    } catch {
      /* noop */
    }
  };

  const productLabel =
    result?.productId === "pro-30d"
      ? "1 month"
      : result?.productId === "pro-90d"
      ? "3 months"
      : result?.productId === "pro-180d"
      ? "6 months"
      : result?.productId === "pro-365d"
      ? "12 months"
      : null;
  const confirmed = Boolean(result?.code) && (result?.status === "delivered" || result?.status === "pending_email");
  const failed = Boolean(error) || result?.status === "not_found" || result?.status === "expired";

  return (
    <>
      <Navbar />
      <main className="flex-1 flex items-center justify-center px-4 py-24">
        <div className="max-w-lg w-full text-center">
          {/* Order status icon */}
          <div className={`mx-auto w-20 h-20 rounded-full flex items-center justify-center mb-8 ${confirmed ? "bg-green-500/20" : failed ? "bg-red-500/20" : "bg-brand-500/20"}`}>
            <svg
              className={`w-10 h-10 ${confirmed ? "text-green-400" : failed ? "text-red-400" : "text-brand-400"}`}
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d={confirmed ? "M5 13l4 4L19 7" : failed ? "M6 18L18 6M6 6l12 12" : "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"}
              />
            </svg>
          </div>

          <h1 className="text-4xl font-bold text-surface-50 mb-4">
            {confirmed ? "Welcome to DashCaddy Premium!" : failed ? "We couldn't confirm your DashCaddy order" : "Confirming your DashCaddy order"}
          </h1>
          <p className="text-lg text-surface-300 mb-8">
            {error
              ? "Automatic confirmation has stopped. Try again below or contact support with the session ID."
              : result?.status === "delivered" || result?.status === "pending_email"
              ? "Your purchase is complete. Here's your license key:"
              : "Your license key will appear here once Stripe confirms payment."}
          </p>

          {/* License key panel — only shown once the bridge returns the code */}
          {!loading && result && (result.status === "delivered" || result.status === "pending_email") && result.code && (
            <div className="glass-card rounded-xl p-6 mb-8 text-left border border-brand-500/40">
              <div className="flex items-center justify-between mb-3">
                <h2 className="text-lg font-semibold text-surface-50">
                  Your license key{productLabel ? ` · ${productLabel}` : ""}
                </h2>
                <button
                  onClick={copyCode}
                  className="text-xs px-3 py-1 rounded-md bg-brand-500/10 text-brand-300 hover:bg-brand-500/20 transition-colors"
                >
                  {copied ? "✓ Copied" : "Copy"}
                </button>
              </div>
              <pre className="font-mono text-base text-brand-300 bg-surface-950/60 rounded-md p-4 overflow-x-auto border border-surface-700/50">
                {result.code}
              </pre>
              {result.status === "pending_email" && (
                <p className="mt-3 text-xs text-surface-500">
                  Email delivery didn&apos;t complete, but the license code above is valid now.
                </p>
              )}
            </div>
          )}

          {/* Loading state */}
          {loading && (
            <div className="glass-card rounded-xl p-6 mb-8 text-left border border-surface-700/50">
              <div className="flex items-center gap-3">
                <div className="w-5 h-5 rounded-full border-2 border-brand-500 border-t-transparent animate-spin" />
                <span className="text-surface-300 text-sm">Confirming payment and preparing your license&hellip;</span>
              </div>
            </div>
          )}

          {!loading && error && (
            <div role="alert" className="glass-card rounded-xl p-6 mb-8 text-left border border-red-500/40 bg-red-500/5">
              <h2 className="text-lg font-semibold text-red-300 mb-2">We couldn&apos;t finish loading this order</h2>
              <p className="text-sm text-surface-300">{error}</p>
              <button
                onClick={() => window.location.reload()}
                className="mt-4 text-sm px-4 py-2 rounded-md bg-brand-600 hover:bg-brand-500 text-white"
              >
                Try again
              </button>
            </div>
          )}

          {/* Not-found state (no session_id passed or session unknown) */}
          {!loading && result && result.status === "not_found" && (
            <div className="glass-card rounded-xl p-6 mb-8 text-left border border-amber-500/40 bg-amber-500/5">
              <h2 className="text-lg font-semibold text-amber-300 mb-2">
                We couldn&apos;t find that session
              </h2>
              <p className="text-sm text-surface-300">
                Stripe did not confirm this session within the confirmation window. If you were charged,
                keep the session ID below and contact{" "}
                <a href="mailto:support@dashcaddy.net" className="text-brand-400 underline">
                  support
                </a>
                .
              </p>
            </div>
          )}

          {/* Next Steps */}
          {result?.code && (
          <div className="glass-card rounded-xl p-6 mb-8 text-left">
            <h2 className="text-lg font-semibold text-surface-50 mb-4">Next Steps</h2>
            <ol className="space-y-3 text-surface-300">
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-500/20 text-brand-400 text-sm flex items-center justify-center font-medium">
                  1
                </span>
                <span>
                  {result?.code ? (
                    <>Copy the license key above{result.deliveredVia === "smtp" ? " (also emailed)" : ""}</>
                  ) : (
                    <>Check your email for your license key (DC-XXXXX-…)</>
                  )}
                </span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-500/20 text-brand-400 text-sm flex items-center justify-center font-medium">
                  2
                </span>
                <span>Open your DashCaddy dashboard and go to Admin → License</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-500/20 text-brand-400 text-sm flex items-center justify-center font-medium">
                  3
                </span>
                <span>Paste your license key and click Activate</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-500/20 text-brand-400 text-sm flex items-center justify-center font-medium">
                  4
                </span>
                <span>Enjoy SSO, Recipes, Docker Swarm, Fleet Management, and all premium features!</span>
              </li>
            </ol>
          </div>
          )}

          {sessionId && (
            <div className="mb-6 text-left rounded-lg border border-surface-700 p-3">
              <div className="flex items-center justify-between gap-3 mb-1">
                <span className="text-xs font-medium text-surface-400">Stripe session ID</span>
                <button onClick={copySessionId} className="text-xs text-brand-400 hover:underline">
                  {sessionCopied ? "Copied" : "Copy"}
                </button>
              </div>
              <code className="block text-xs text-surface-500 break-all">{sessionId}</code>
            </div>
          )}

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/docs"
              className="px-6 py-3 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-medium transition-colors"
            >
              View Setup Guide
            </Link>
            <Link
              href="/"
              className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
            >
              Back to Home
            </Link>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}

export default function SuccessPage() {
  return (
    <Suspense
      fallback={
        <div className="flex-1 flex items-center justify-center">
          <div className="text-surface-400">Loading...</div>
        </div>
      }
    >
      <SuccessContent />
    </Suspense>
  );
}
