import { useEffect, useState, useContext } from 'react';
import { useLocation, Link } from 'react-router-dom';
import { Button } from './ui/button.js';
import { ProfileCtx } from '../App.js';      // <- exported at very top of App.jsx

export default function BillingResult() {
  const { setUser } = useContext(ProfileCtx) || {};
  const q         = new URLSearchParams(useLocation().search);
  const outcome   = q.get('ck');              // 'success' | 'cancel' | null
  const [loading, setLoading] = useState(true);

  /* ─────────────────────────────────────────────────────────
     1) Ask the API for the latest user profile (flags, etc.)
        – will be fast because JWT is already cached
     ───────────────────────────────────────────────────────── */
  useEffect(() => {
    const token = localStorage.getItem('token') || '';
    fetch('/api/user-profile', { headers: { Authorization: `Bearer ${token}` } })
      .then(r => r.ok ? r.json() : null)
      .then(profile => { if (profile && setUser) setUser(profile); })
      .finally(() => setLoading(false));
  }, [setUser]);

  /* ─────────────────────────────────────────────────────────
     2) UX while waiting for that round‑trip
     ───────────────────────────────────────────────────────── */
  if (loading) {
    return <p className="p-8 text-center">Checking your subscription…</p>;
  }

  /* ─────────────────────────────────────────────────────────
     3) Success   – Stripe completed the checkout flow
     ───────────────────────────────────────────────────────── */
  if (outcome === 'success') {
    return (
      <div className="max-w-md mx-auto p-8 text-center space-y-6">
        <h1 className="text-2xl font-semibold">🎉 Subscription activated!</h1>
        <p className="text-gray-600">
          Premium features have been unlocked on your account.
        </p>

        <Button asChild className="w-full">
          <Link to="/premium-onboarding" className="block w-full">Set up Premium Features</Link>
        </Button>

        <Button variant="secondary" asChild className="w-full">
          <Link to="/profile" className="block w-full">Go to my account</Link>
        </Button>
      </div>
    );
  }

  /* ─────────────────────────────────────────────────────────
     4) Cancelled – user backed out of Stripe
     ───────────────────────────────────────────────────────── */
  return (
    <div className="max-w-md mx-auto p-8 text-center space-y-6">
      <h1 className="text-2xl font-semibold">Subscription cancelled</h1>
      <p className="text-gray-600">No changes were made to your account.</p>

      <Button asChild className="w-full">
        <Link to="/paywall" className="block w-full">Back to pricing</Link>
      </Button>
    </div>
  );
}