'use client'

import { useState } from 'react'
import Link from 'next/link'

export default function SubscribeButton({ loggedIn }: { loggedIn: boolean }) {
  const [pending, setPending] = useState(false)
  const [comingSoon, setComingSoon] = useState(false)

  async function subscribe() {
    setPending(true)
    const res = await fetch('/api/subscribe', { method: 'POST' })
    if (res.ok) {
      const data = await res.json()
      if (data?.url) {
        window.location.href = data.url as string
        return
      }
    }
    // Stripe pending mode (no keys configured) or failure
    setComingSoon(true)
    setPending(false)
  }

  if (comingSoon) {
    return <p className="plan-soon" role="status">الدفع الإلكتروني متاح قريباً. راسلنا على <a href="mailto:hello@anwarpy.ai" dir="ltr">hello@anwarpy.ai</a> لتفعيل عضويتك يدوياً.</p>
  }

  if (!loggedIn) {
    /* QA-R01/R07: anonymous visitors get explicit signup + login CTAs instead
       of a silent redirect. Both preserve /subscription as the destination. */
    return (
      <span className="cta-pair">
        <Link className="btn btn-primary" href="/signup?next=%2Fsubscription">أنشئ حساباً واشترك</Link>
        <Link className="btn btn-quiet" href="/login?next=%2Fsubscription">لدي حساب، تسجيل الدخول</Link>
      </span>
    )
  }

  return (
    <button className="btn btn-primary" onClick={subscribe} disabled={pending}>
      {pending ? 'جارٍ التحويل…' : 'اشترك الآن'}
    </button>
  )
}