import React, { useState, useRef, useEffect } from 'react'
import { Link, useForm, usePage } from '@inertiajs/react'
import AccessBadge from '../../../components/academy/billing/AccessBadge'
import SeoHead from '../../../components/seo/SeoHead'

function formatDate(iso) {
  if (!iso) return null
  try {
    return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
  } catch {
    return null
  }
}

export default function AcademyBillingAccount({ seo, currentTier, isSubscribed, subscription, activePlan = null, links = {} }) {
  const { flash, auth } = usePage().props
  const { data, setData, post, processing } = useForm({
    issue_type: 'billing',
    contact_email: auth?.user?.email || '',
    message: '',
    session_id: null,
  })

  function IssueTypeDropdown({ value, onChange }) {
    const options = [
      { value: 'billing', label: 'Billing question' },
      { value: 'payment', label: 'Payment problem' },
      { value: 'upgrade', label: 'Upgrade problem' },
      { value: 'downgrade', label: 'Downgrade problem' },
      { value: 'cancel', label: 'Cancellation problem' },
      { value: 'access', label: 'Access not updated' },
      { value: 'other', label: 'Other' },
    ]
    const [open, setOpen] = useState(false)
    const ref = useRef(null)

    useEffect(() => {
      function onDoc(e) {
        if (ref.current && !ref.current.contains(e.target)) setOpen(false)
      }
      document.addEventListener('mousedown', onDoc)
      return () => document.removeEventListener('mousedown', onDoc)
    }, [])

    const current = options.find((o) => o.value === value) || options[0]

    return (
      <div ref={ref} className="relative">
        <button
          type="button"
          onClick={() => setOpen((s) => !s)}
          className="w-full text-left rounded-xl border border-amber-300/20 bg-black/20 p-3 text-sm text-amber-50 flex items-center justify-between"
        >
          <span>{current.label}</span>
          <svg className="ml-2 h-4 w-4 text-amber-100/70" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 8l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>

        {open ? (
          <div className="absolute left-0 top-full mt-2 w-full rounded-xl border border-white/10 bg-[#10192e] shadow-2xl z-50 overflow-hidden">
            {options.map((opt) => (
              <button
                key={opt.value}
                type="button"
                onClick={() => {
                  onChange(opt.value)
                  setOpen(false)
                }}
                className={`w-full text-left px-4 py-3 text-sm ${opt.value === value ? 'bg-white/[0.03] text-white' : 'text-slate-300 hover:bg-white/[0.02]'}`}
              >
                {opt.label}
              </button>
            ))}
          </div>
        ) : null}
      </div>
    )
  }

  function getCsrfToken() {
    return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
  }
  const endsAt = formatDate(subscription?.endsAt)
  const onGracePeriod = subscription?.onGracePeriod === true
  const subscriptionActive = subscription?.active === true

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.14),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.14),_transparent_26%),linear-gradient(180deg,_#07111f_0%,_#0f172a_45%,_#111827_100%)] px-4 py-8 sm:px-6 lg:px-8">
      <SeoHead seo={seo || {}} title="Academy Subscription" />

      <div className="mx-auto max-w-[1280px] space-y-8">
        {flash?.error ? (
          <section className="rounded-[20px] border border-rose-300/20 bg-rose-300/8 p-4">
            <p className="font-semibold text-rose-100">{flash.error}</p>
          </section>
        ) : null}
        {flash?.success ? (
          <section className="rounded-[20px] border border-emerald-300/20 bg-emerald-300/8 p-4">
            <p className="font-semibold text-emerald-100">{flash.success}</p>
          </section>
        ) : null}
        {/* Header */}
        <section className="rounded-[40px] border border-white/10 bg-[linear-gradient(135deg,rgba(7,17,31,0.95),rgba(12,24,45,0.9),rgba(15,23,42,0.96))] p-8 shadow-[0_32px_100px_rgba(2,6,23,0.42)] md:p-10">
          <div className="flex flex-wrap items-center gap-3">
            <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-100/85">Skinbase Academy</p>
            <AccessBadge tier={currentTier} />
          </div>
          <h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">
            {isSubscribed ? 'Your subscription' : 'Academy subscription'}
          </h1>
          <p className="mt-4 max-w-2xl text-base leading-8 text-slate-300">
            {isSubscribed
              ? 'Your Academy access is active. Manage, upgrade, or cancel your subscription here at any time.'
              : 'You are on the free Academy tier. Upgrade to Creator or Pro to unlock premium content.'}
          </p>
        </section>

        {/* Grace period warning */}
        {onGracePeriod && endsAt ? (
          <section className="rounded-[30px] border border-amber-300/25 bg-amber-300/[0.06] px-6 py-5">
            <p className="font-semibold text-amber-100">Your subscription was cancelled and will end on {endsAt}.</p>
            <p className="mt-2 text-sm leading-6 text-amber-100/75">You still have full access until that date. Open the subscription portal to resume your plan if you change your mind.</p>
            <a
              href={links.portal}
              className="mt-4 inline-flex items-center rounded-full border border-amber-300/30 bg-amber-300/12 px-5 py-2.5 text-sm font-semibold text-amber-100 transition hover:bg-amber-300/20"
            >
              Resume subscription
            </a>
          </section>
        ) : null}

        {/* No subscription: upgrade CTA */}
        {!isSubscribed ? (
          <section className="rounded-[30px] border border-white/10 bg-[linear-gradient(135deg,rgba(8,47,73,0.92),rgba(30,41,59,0.94))] p-6 md:p-7">
            <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-100/85">Upgrade</p>
            <h2 className="mt-3 text-2xl font-semibold tracking-[-0.04em] text-white">Choose a plan to get started</h2>
            <p className="mt-3 max-w-xl text-sm leading-7 text-slate-200/90">
              Creator unlocks premium lessons and the full prompt library for €4.99/month. Pro gives you everything — all lessons, the advanced content track, and every new Academy drop — for €9.99/month.
            </p>
            <div className="mt-5 flex flex-wrap gap-3">
              <Link
                href={links.pricing || '/academy/pricing'}
                className="rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/18"
              >
                See plans and pricing
              </Link>
              <Link
                href={links.academy || '/academy'}
                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]"
              >
                Back to Academy
              </Link>
            </div>
          </section>
        ) : null}

        {/* Active subscription: details + manager */}
        {isSubscribed ? (
          <section className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_320px]">
            <div className="space-y-5 rounded-[32px] border border-white/10 bg-white/[0.04] p-6 md:p-7">
              <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Subscription details</p>

              <div className="grid gap-4 sm:grid-cols-2">
                <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Active plan</p>
                  <p className="mt-2 text-lg font-semibold text-white">{activePlan?.label || 'Academy plan'}</p>
                  {activePlan?.price_display ? (
                    <p className="mt-1 text-sm text-slate-400">{activePlan.price_display} / month</p>
                  ) : null}
                </div>

                <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Status</p>
                  <p className="mt-2 text-lg font-semibold capitalize text-white">
                    {onGracePeriod ? 'Cancelling' : subscriptionActive ? 'Active' : (subscription?.status || 'Active')}
                  </p>
                  {onGracePeriod && endsAt ? (
                    <p className="mt-1 text-sm text-amber-300/80">Access ends {endsAt}</p>
                  ) : null}
                  {!onGracePeriod && subscriptionActive ? (
                    <p className="mt-1 text-sm text-emerald-300/80">Renews automatically</p>
                  ) : null}
                </div>
              </div>

              <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4">
                <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Your Academy access</p>
                <div className="mt-3 flex flex-wrap items-center gap-3">
                  <AccessBadge tier={currentTier} />
                  <p className="text-sm text-slate-300">
                    {currentTier === 'pro'
                      ? 'Full access to all Academy lessons and content.'
                      : currentTier === 'creator'
                        ? 'Full access to all Creator lessons and prompts.'
                        : 'Access to free Academy content.'}
                  </p>
                </div>
              </div>
            </div>

            <aside className="space-y-3 rounded-[32px] border border-white/10 bg-black/20 p-6">
              <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-300">Manage</p>
              <p className="text-xs leading-6 text-slate-400">
                Use the subscription portal to cancel or manage billing details. Plan upgrades are handled here on Skinbase.
              </p>
                {/* Use a plain anchor to perform a full navigation to Stripe (avoid Inertia XHR/CORS) */}
                <a
                  href={links.portal}
                  className="mt-2 inline-flex w-full items-center justify-center rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:border-sky-300/40 hover:bg-sky-300/18"
                >
                  Open billing portal
                </a>
              <Link
                href={links.pricing || '/academy/pricing'}
                className="inline-flex w-full items-center justify-center 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]"
              >
                Compare plans
              </Link>
              {/* Quick upgrade form: allow Creator -> Pro upgrade in one click (full POST, not Inertia) */}
              {activePlan?.tier === 'creator' ? (
                <form action={links.checkout} method="POST" data-no-inertia className="mt-2">
                  <input type="hidden" name="_token" value={getCsrfToken()} />
                  <input type="hidden" name="plan" value="pro_monthly" />
                  <button type="submit" className="inline-flex w-full items-center justify-center rounded-full border border-emerald-300/25 bg-emerald-300/10 px-5 py-3 text-sm font-semibold text-emerald-100 transition hover:bg-emerald-300/18">Upgrade to Pro now</button>
                </form>
              ) : null}
              {links.reportIssue ? (
                <div className="mt-3 rounded-2xl border border-amber-300/20 bg-amber-300/8 p-4">
                  <p className="text-sm font-semibold text-amber-100">Need help with billing or access?</p>
                  <p className="mt-1 text-xs leading-5 text-amber-100/80">
                    Send a quick report here if payment, access, or subscription changes do not behave as expected.
                  </p>
                  <form
                    onSubmit={(event) => {
                      event.preventDefault()
                      post(links.reportIssue, { preserveScroll: true })
                    }}
                    className="mt-3 space-y-3"
                  >
                    <div className="grid gap-3">
                      <label className="space-y-1 relative">
                        <span className="text-xs font-medium text-amber-100/80">Issue type</span>
                        {/* Custom dropdown to avoid native browser option styling */}
                        <IssueTypeDropdown value={data.issue_type} onChange={(v) => setData('issue_type', v)} />
                      </label>
                      <label className="space-y-1">
                        <span className="text-xs font-medium text-amber-100/80">Reply email</span>
                        <input
                          type="email"
                          value={data.contact_email}
                          onChange={(event) => setData('contact_email', event.target.value)}
                          placeholder="you@example.com"
                          className="w-full rounded-xl border border-amber-300/20 bg-black/20 p-3 text-sm text-amber-50 placeholder:text-amber-100/40"
                        />
                      </label>
                    </div>
                    <textarea
                      value={data.message}
                      onChange={(event) => setData('message', event.target.value)}
                      placeholder="Describe the issue you hit, what you expected, and anything already charged or missing"
                      className="min-h-[96px] w-full rounded-xl border border-amber-300/20 bg-black/20 p-3 text-sm text-amber-50 placeholder:text-amber-100/40"
                    />
                    <button
                      type="submit"
                      disabled={processing}
                      className="inline-flex w-full items-center justify-center rounded-full border border-amber-300/30 bg-amber-300/12 px-5 py-3 text-sm font-semibold text-amber-100 transition hover:bg-amber-300/18 disabled:cursor-not-allowed disabled:opacity-60"
                    >
                      {processing ? 'Sending report...' : 'Send support report'}
                    </button>
                  </form>
                </div>
              ) : null}
              <Link
                href={links.academy || '/academy'}
                className="inline-flex w-full items-center justify-center 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]"
              >
                Go to Academy
              </Link>
            </aside>
          </section>
        ) : null}
      </div>
    </main>
  )
}