import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Button } from './ui/button.js';

const Paywall = () => {
  const navigate = useNavigate();
  const { state } = useLocation();
  const { selectedCareer } = state || {};

  const handleSubscribe = async () => {
  const token = localStorage.getItem('token');
  if (!token) return navigate('/signin');

  try {
    const res = await fetch('/api/activate-premium', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json',
                 'Authorization': `Bearer ${token}` }
    });

    if (res.status === 401) return navigate('/signin-landing');

    if (res.ok) {
      // 1) grab the fresh token / profile if the API returns it
      const { token: newToken, user } = await res.json().catch(() => ({}));
      if (newToken) localStorage.setItem('token', newToken);
      if (user)     window.dispatchEvent(new Event('user-updated')); // or your context setter

      // 2) give the auth context time to update, then push
      navigate('/premium-onboarding', { replace: true, state: { selectedCareer } });
    } else {
      console.error('activate-premium failed:', await res.text());
    }
  } catch (err) {
    console.error('Error activating premium:', err);
  }
};


  return (
    <div className="paywall">
      <h2>Unlock AptivaAI Premium</h2>
      <ul>
        <li>✅ Personalized Career Milestone Planning</li>
        <li>✅ Comprehensive Financial Projections</li>
        <li>✅ Resume & Interview Assistance</li>
      </ul>

      <Button
      onClick={handleSubscribe}
      className="bg-green-600 hover:bg-green-700"
    >
      Subscribe Now
    </Button>
      
      <Button onClick={() => navigate(-1)}>Cancel / Go Back</Button>
    </div>
  );
};

export default Paywall;