import { Elements, CardElement, useStripe, useElements } from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)

function CheckoutForm() {
  const stripe = useStripe()
  const elements = useElements()

  const handleSubmit = async (event) => {
    event.preventDefault()

    if (!stripe || !elements) return

    const cardElement = elements.getElement(CardElement)

    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
    })

    if (error) {
      console.error(error)
    } else {
      // Send paymentMethod.id to backend
      await attachPaymentMethod(paymentMethod.id)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button type="submit" disabled={!stripe}>
        Subscribe
      </button>
    </form>
  )
}

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  )
}

import { useRouter } from 'next/router'

function UpgradeButton() {
  const router = useRouter()

  const handleUpgrade = async () => {
    const response = await fetch('/api/billing/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        priceId: 'price_team_monthly',
        successUrl: `${window.location.origin}/success`,
        cancelUrl: `${window.location.origin}/pricing`,
      }),
    })

    const { url } = await response.json()
    router.push(url)
  }

  return (
    <button onClick={handleUpgrade}>
      Upgrade to Team Plan
    </button>
  )
}

function BillingSettings() {
  const handleManageBilling = async () => {
    const response = await fetch('/api/billing/portal', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        returnUrl: window.location.href,
      }),
    })

    const { url } = await response.json()
    window.location.href = url
  }

  return (
    <button onClick={handleManageBilling}>
      Manage Subscription
    </button>
  )
}

export const PRICING_PLANS = [
  {
    name: 'Free',
    price: 0,
    interval: 'month',
    features: ['10 users', '1 GB storage', 'Basic support'],
  },
  {
    name: 'Team',
    price: 29,
    priceId: 'price_team_monthly',
    interval: 'month',
    features: ['50 users', '50 GB storage', 'Priority support', 'Advanced features'],
  },
  {
    name: 'Business',
    price: 99,
    priceId: 'price_business_monthly',
    interval: 'month',
    features: [
      'Unlimited users',
      '500 GB storage',
      '24/7 support',
      'All features',
      'Custom integrations',
    ],
  },
]

// app/api/billing/webhook/route.ts
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

export async function POST(req: Request) {
  const body = await req.text()
  const signature = req.headers.get('stripe-signature')

  try {
    const event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET)

    switch (event.type) {
      case 'customer.subscription.created':
        await handleSubscriptionCreated(event.data.object)
        break
      case 'invoice.paid':
        await handleInvoicePaid(event.data.object)
        break
      case 'invoice.payment_failed':
        await handlePaymentFailed(event.data.object)
        break
    }

    return new Response(JSON.stringify({ received: true }), { status: 200 })
  } catch (error) {
    return new Response(JSON.stringify({ error: error.message }), { status: 400 })
  }
}

import { captureEvent } from '@/lib/analytics'

captureEvent('subscription_created', {
  plan: 'team',
  amount: 29,
  currency: 'usd',
  customerId: customer.id,
})

captureEvent('payment_failed', {
  customerId: customer.id,
  amount: invoice.amount_due,
  attemptCount: invoice.attempt_count,
})