'use client';

export const dynamic = 'force-dynamic';

import Link from 'next/link';
import { Suspense, useEffect, useMemo } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useSession } from 'next-auth/react';
import { AlertTriangle, Loader2 } from 'lucide-react';
import BillingCheckoutCard from '@/app/components/billing/BillingCheckoutCard';
import { isPlanId } from '@/lib/plans/catalog';
import type { PlanId } from '@/lib/plans/types';

type BillingInterval = 'MONTHLY' | 'YEARLY';

function parseCheckoutPlan(value: string | null): PlanId | null {
  if (!isPlanId(value) || value === 'FREE') {
    return null;
  }

  return value;
}

function parseCheckoutInterval(value: string | null): BillingInterval | null {
  if (value === 'MONTHLY' || value === 'YEARLY') {
    return value;
  }

  return null;
}

function CheckoutPageContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { status } = useSession();

  const searchParamsKey = searchParams.toString();
  const plan = useMemo(() => parseCheckoutPlan(searchParams.get('plan')), [searchParams]);
  const interval = useMemo(() => parseCheckoutInterval(searchParams.get('interval')), [searchParams]);

  const returnTo = useMemo(() => {
    return searchParamsKey ? `/billing/checkout?${searchParamsKey}` : '/billing/checkout';
  }, [searchParamsKey]);

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.replace(`/login?returnTo=${encodeURIComponent(returnTo)}`, { scroll: false });
    }
  }, [router, returnTo, status]);

  if (status === 'loading' || status === 'unauthenticated') {
    return (
      <div className="flex min-h-screen items-center justify-center bg-[#050505]">
        <div className="inline-flex items-center gap-2 text-sm text-gray-400">
          <Loader2 className="h-5 w-5 animate-spin text-violet-400" />
          Загрузка checkout...
        </div>
      </div>
    );
  }

  if (!plan || !interval) {
    return (
      <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#050505] px-4 text-white">
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute -left-20 top-[-100px] h-64 w-64 rounded-full bg-violet-500/20 blur-3xl" />
          <div className="absolute -right-24 bottom-[-100px] h-64 w-64 rounded-full bg-fuchsia-500/20 blur-3xl" />
        </div>
        <div className="relative w-full max-w-lg rounded-[1.5rem] border border-white/10 bg-black/40 p-8 text-center shadow-[0_24px_80px_rgba(0,0,0,0.6)] backdrop-blur-xl">
          <div className="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl border border-amber-500/35 bg-amber-500/15 text-amber-300">
            <AlertTriangle className="h-6 w-6" />
          </div>
          <h1 className="mb-2 text-2xl font-bold tracking-tight">Некорректные параметры checkout</h1>
          <p className="mb-6 text-gray-400">
            Проверьте ссылку и выберите тариф заново.
          </p>
          <Link
            href="/profile/pricing"
            className="inline-flex h-11 items-center justify-center rounded-xl bg-gradient-to-r from-fuchsia-500 to-violet-600 px-4 text-sm font-semibold text-white transition-colors hover:from-fuchsia-500/90 hover:to-violet-600/90"
          >
            Вернуться к тарифам
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#050505] px-4 py-10">
      <BillingCheckoutCard plan={plan} interval={interval} />
    </div>
  );
}

export default function BillingCheckoutPage() {
  return (
    <Suspense
      fallback={(
        <div className="flex min-h-screen items-center justify-center bg-[#050505]">
          <Loader2 className="h-7 w-7 animate-spin text-violet-400" />
        </div>
      )}
    >
      <CheckoutPageContent />
    </Suspense>
  );
}