import React from 'react'
import { Head, Link } from '@inertiajs/react'
import AccessBadge from '../../../components/academy/billing/AccessBadge'

export default function AcademyBillingSuccess({ currentTier, isSubscribed, links = {} }) {
  return (
    <main className="flex min-h-screen items-center bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(16,185,129,0.14),_transparent_24%),linear-gradient(180deg,_#07111f_0%,_#0f172a_45%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
      <Head title="Subscription Confirmed" />

      <div className="mx-auto w-full max-w-[640px] space-y-6">
        <section className="rounded-[40px] border border-emerald-300/20 bg-[linear-gradient(135deg,rgba(7,17,31,0.95),rgba(12,24,45,0.92),rgba(6,78,59,0.82))] p-8 shadow-[0_32px_100px_rgba(2,6,23,0.42)] md:p-10">
          <div className="flex items-center gap-3">
            <span className="text-3xl leading-none">🎉</span>
            {isSubscribed ? <AccessBadge tier={currentTier} /> : null}
          </div>
          <h1 className="mt-5 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">
            {isSubscribed ? 'Welcome to Academy.' : "You're all set."}
          </h1>
          <p className="mt-4 max-w-lg text-base leading-8 text-slate-300">
            {isSubscribed
              ? 'Your subscription is active and all premium content for your plan is now unlocked. Head to Academy and start exploring.'
              : "Your payment was confirmed and your subscription is activating now. This usually takes just a moment. If you don't see your access right away, refresh the Academy page in a few seconds."}
          </p>
        </section>

        <div className="flex flex-wrap gap-3">
          <Link
            href={links.academy || '/academy'}
            className="rounded-full border border-emerald-300/25 bg-emerald-300/12 px-5 py-3 text-sm font-semibold text-emerald-100 transition hover:bg-emerald-300/18"
          >
            Go to Academy
          </Link>
          {links.account ? (
            <Link
              href={links.account}
              className="rounded-full border border-white/10 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.08]"
            >
              View my subscription
            </Link>
          ) : null}
        </div>
      </div>
    </main>
  )
}