'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';

export default function BillingSuccessPage() {
  const [status, setStatus] = useState<'pending' | 'ok' | 'error'>('pending');
  const [message, setMessage] = useState<string | null>(null);

  useEffect(() => {
    const session =
      typeof window !== 'undefined'
        ? new URLSearchParams(window.location.search).get('session')
        : null;
    (async () => {
      try {
        const res = await fetch('/api/billing/finalize', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ session }),
        });
        if (!res.ok) {
          const body = (await res.json().catch(() => ({}))) as {
            error?: string;
          };
          setStatus('error');
          setMessage(body.error ?? `Finalize failed (${res.status})`);
          return;
        }
        setStatus('ok');
      } catch (e) {
        setStatus('error');
        setMessage((e as Error).message);
      }
    })();
  }, []);

  return (
    <div>
      <h1>Upgrade complete</h1>
      <div className="card">
        {status === 'pending' && <p>Finalizing your upgrade…</p>}
        {status === 'ok' && (
          <>
            <p className="success">Your account has been upgraded.</p>
            <Link className="btn" href="/dashboard">
              Back to dashboard
            </Link>
          </>
        )}
        {status === 'error' && (
          <>
            <p className="error">{message}</p>
            <Link className="btn secondary" href="/billing">
              Try again
            </Link>
          </>
        )}
      </div>
    </div>
  );
}