import { useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { CheckCircle2, ArrowRight } from 'lucide-react';
import { PublicLayout } from '@/components/public/PublicLayout';
import { Button } from '@/components/ui/Button';
import { useQueryClient } from '@tanstack/react-query';

export default function BillingSuccessPage() {
  const navigate = useNavigate();
  const qc = useQueryClient();

  // Refresh billing/me state when the user lands here from Stripe
  useEffect(() => {
    qc.invalidateQueries();
  }, [qc]);

  return (
    <PublicLayout>
      <section className="container py-20 max-w-2xl text-center">
        <div className="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-emerald-100 text-emerald-600">
          <CheckCircle2 className="h-8 w-8" />
        </div>
        <h1 className="mt-6 text-3xl md:text-4xl font-bold text-ink-950 font-display">
          You're upgraded
        </h1>
        <p className="mt-3 text-lg text-ink-600">
          Stripe has confirmed your payment. Your firm's plan is being updated — usually within a
          few seconds. A confirmation email is on its way.
        </p>
        <div className="mt-8 flex items-center justify-center gap-2">
          <Link to="/app">
            <Button>
              Open dashboard
              <ArrowRight className="h-4 w-4" />
            </Button>
          </Link>
          <Link to="/app/settings">
            <Button variant="secondary">Manage billing</Button>
          </Link>
        </div>
        <p className="mt-8 text-xs text-ink-500">
          If your plan still shows as Starter after a minute,{' '}
          <button onClick={() => navigate(0)} className="underline hover:text-ink-700">
            refresh
          </button>{' '}
          this page.
        </p>
      </section>
    </PublicLayout>
  );
}