'use client';

import { Suspense, useEffect, useMemo } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { XCircle, ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ROUTES } from '@/constants';
import { PageLoader } from '@/components/shared/Loader';
import {
  clearMobileCheckoutReturn,
  isSessionFlow,
  shouldReturnToMobileAccount,
} from '@/utils/sessionFlow';
import { cn } from '@/utils';

function CancelContent() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const returnToMobile = useMemo(
    () => searchParams.get('returnTo') === 'mobile' || shouldReturnToMobileAccount(),
    [searchParams],
  );

  const redirectTarget = returnToMobile ? ROUTES.MOBILE_ACCOUNT : ROUTES.PRICING;
  const secondaryTarget = returnToMobile ? ROUTES.MOBILE_ACCOUNT : ROUTES.DASHBOARD;

  useEffect(() => {
    clearMobileCheckoutReturn();

    if (!returnToMobile) return;

    const timer = setTimeout(() => {
      router.replace(ROUTES.MOBILE_ACCOUNT);
    }, 2500);

    return () => clearTimeout(timer);
  }, [router, returnToMobile]);

  return (
    <div
      className={cn(
        'relative flex items-center justify-center px-4',
        isSessionFlow() ? 'min-h-[100dvh]' : 'min-h-[calc(100vh-4rem)]',
      )}
    >
      <div className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] rounded-full bg-amber-500/[0.04] blur-[100px]" />
      </div>

      <div className="max-w-md w-full text-center space-y-8 animate-fade-in">
        <div className="flex h-24 w-24 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-500/10 border border-amber-500/20 mx-auto">
          <XCircle className="h-12 w-12 text-amber-500" />
        </div>

        <div className="space-y-3">
          <h1 className="text-3xl font-bold">Payment cancelled</h1>
          <p className="text-muted-foreground">
            No worries — your payment was cancelled and you haven&apos;t been charged. You can try again
            whenever you&apos;re ready.
          </p>
        </div>

        <div className="flex flex-col sm:flex-row gap-3 justify-center">
          <Button variant="gold" size="lg" asChild>
            <Link href={redirectTarget}>
              <ArrowLeft className="h-4 w-4" />
              {returnToMobile ? 'Back to Account' : 'Back to Plans'}
            </Link>
          </Button>
          {!returnToMobile && (
            <Button variant="glass" size="lg" asChild>
              <Link href={secondaryTarget}>Go to Dashboard</Link>
            </Button>
          )}
        </div>

        {returnToMobile && (
          <p className="text-xs text-muted-foreground">
            Redirecting back to your account…
          </p>
        )}
      </div>
    </div>
  );
}

export default function CancelPage() {
  return (
    <Suspense fallback={<PageLoader text="Loading…" />}>
      <CancelContent />
    </Suspense>
  );
}