Múltiplas Assinaturas

import { Router } from 'express'
import { chargefy } from '../lib/chargefy.js'

export const customerSubsRouter = Router()

// Listar todas as assinaturas do cliente
customerSubsRouter.get('/subscriptions', async (req, res) => {
  try {
    const customerId = req.user.chargefyCustomerId

    const subscriptions = await chargefy.subscriptions.list({
      customerId,
      limit: 20,
    })

    const result = subscriptions.items.map(sub => ({
      id: sub.id,
      productName: sub.product.name,
      productId: sub.product.id,
      status: sub.status,
      amount: sub.amount,
      formatted: `R$ ${(sub.amount / 100).toFixed(2)}`,
      interval: sub.recurringInterval,
      currentPeriodEnd: sub.currentPeriodEnd,
      cancelAtPeriodEnd: sub.cancelAtPeriodEnd,
      isAddon: sub.product.metadata?.type === 'addon',
    }))

    const totalActive = result
      .filter(s => s.status === 'active')
      .reduce((sum, s) => sum + s.amount, 0)

    res.json({
      subscriptions: result,
      totalMonthly: totalActive,
      totalFormatted: `R$ ${(totalActive / 100).toFixed(2)}`,
    })
  } catch (error) {
    res.status(500).json({ error: 'Falha ao listar assinaturas' })
  }
})

// Listar add-ons disponiveis
customerSubsRouter.get('/available-addons', async (req, res) => {
  try {
    const customerId = req.user.chargefyCustomerId

    // Buscar todos os add-ons
    const addons = await chargefy.products.list({
      metadata: { type: 'addon' },
      isArchived: false,
    })

    // Verificar quais o cliente ja tem
    const activeSubs = await chargefy.subscriptions.list({
      customerId,
      active: true,
    })

    const activeProductIds = new Set(activeSubs.items.map(s => s.product.id))

    const available = addons.items.map(addon => ({
      id: addon.id,
      name: addon.name,
      description: addon.description,
      prices: addon.prices.map(p => ({
        id: p.id,
        amount: p.priceAmount,
        formatted: `R$ ${(p.priceAmount / 100).toFixed(2)}`,
        interval: p.recurringInterval,
      })),
      alreadySubscribed: activeProductIds.has(addon.id),
    }))

    res.json(available)
  } catch (error) {
    res.status(500).json({ error: 'Falha ao listar add-ons' })
  }
})

// Assinar um add-on
customerSubsRouter.post('/subscribe-addon', async (req, res) => {
  try {
    const { priceId } = req.body
    const customerId = req.user.chargefyCustomerId

    const checkout = await chargefy.checkouts.create({
      productPriceId: priceId,
      customerId,
      successUrl: `${process.env.FRONTEND_URL}/dashboard/addons/sucesso`,
    })

    res.json({ checkoutUrl: checkout.url })
  } catch (error) {
    res.status(400).json({ error: 'Falha ao criar checkout do add-on' })
  }
})

// Cancelar uma assinatura especifica
customerSubsRouter.post('/subscriptions/:id/cancel', async (req, res) => {
  try {
    const { id } = req.params
    const customerId = req.user.chargefyCustomerId

    // Verificar se a assinatura pertence ao cliente
    const sub = await chargefy.subscriptions.get(id)
    if (sub.customer.id !== customerId) {
      return res.status(403).json({ error: 'Assinatura nao pertence a este cliente' })
    }

    const canceled = await chargefy.subscriptions.cancel(id, {
      cancelAtPeriodEnd: true,
    })

    res.json({
      id: canceled.id,
      status: canceled.status,
      cancelAtPeriodEnd: canceled.cancelAtPeriodEnd,
      accessUntil: canceled.currentPeriodEnd,
    })
  } catch (error) {
    res.status(400).json({ error: 'Falha ao cancelar assinatura' })
  }
})

import { useState, useEffect } from 'react'

interface Subscription {
  id: string
  productName: string
  status: string
  amount: number
  formatted: string
  interval: string
  currentPeriodEnd: string
  cancelAtPeriodEnd: boolean
  isAddon: boolean
}

interface Addon {
  id: string
  name: string
  description: string
  prices: { id: string; amount: number; formatted: string; interval: string }[]
  alreadySubscribed: boolean
}

export function MultiSubscriptionDashboard() {
  const [subscriptions, setSubscriptions] = useState<Subscription[]>([])
  const [totalFormatted, setTotalFormatted] = useState('')
  const [addons, setAddons] = useState<Addon[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    Promise.all([
      fetch('/api/customer/subscriptions').then(r => r.json()),
      fetch('/api/customer/available-addons').then(r => r.json()),
    ]).then(([subData, addonData]) => {
      setSubscriptions(subData.subscriptions)
      setTotalFormatted(subData.totalFormatted)
      setAddons(addonData)
      setLoading(false)
    })
  }, [])

  async function handleCancel(subId: string) {
    if (!confirm('Cancelar esta assinatura?')) return

    await fetch(`/api/customer/subscriptions/${subId}/cancel`, { method: 'POST' })
    window.location.reload()
  }

  async function handleSubscribeAddon(priceId: string) {
    const res = await fetch('/api/customer/subscribe-addon', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ priceId }),
    })
    const { checkoutUrl } = await res.json()
    window.location.href = checkoutUrl
  }

  if (loading) return <div>Carregando...</div>

  const mainSubs = subscriptions.filter(s => !s.isAddon)
  const addonSubs = subscriptions.filter(s => s.isAddon)

  return (
    <div style={{ maxWidth: '700px' }}>
      <h2>Minhas assinaturas</h2>
      <p style={{ color: '#6b7280' }}>Total mensal: <strong>{totalFormatted}</strong></p>

      {/* Assinaturas principais */}
      <h3>Planos</h3>
      {mainSubs.map(sub => (
        <div key={sub.id} style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '1rem', marginBottom: '0.75rem' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <strong>{sub.productName}</strong>
              <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>
                {sub.formatted}/{sub.interval === 'month' ? 'mes' : 'ano'} — {sub.status}
              </p>
            </div>
            {sub.status === 'active' && !sub.cancelAtPeriodEnd && (
              <button onClick={() => handleCancel(sub.id)} style={{ color: '#dc2626', fontSize: '0.875rem', cursor: 'pointer', background: 'none', border: 'none' }}>
                Cancelar
              </button>
            )}
          </div>
          {sub.cancelAtPeriodEnd && (
            <p style={{ color: '#d97706', fontSize: '0.875rem', marginTop: '0.5rem' }}>
              Cancela em {new Date(sub.currentPeriodEnd).toLocaleDateString('pt-BR')}
            </p>
          )}
        </div>
      ))}

      {/* Add-ons ativos */}
      {addonSubs.length > 0 && (
        <>
          <h3 style={{ marginTop: '1.5rem' }}>Add-ons ativos</h3>
          {addonSubs.map(sub => (
            <div key={sub.id} style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '1rem', marginBottom: '0.75rem' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <strong>{sub.productName}</strong>
                  <span style={{ marginLeft: '0.5rem', color: '#6b7280' }}>{sub.formatted}/{sub.interval === 'month' ? 'mes' : 'ano'}</span>
                </div>
                <button onClick={() => handleCancel(sub.id)} style={{ color: '#dc2626', fontSize: '0.875rem', cursor: 'pointer', background: 'none', border: 'none' }}>
                  Remover
                </button>
              </div>
            </div>
          ))}
        </>
      )}

      {/* Add-ons disponiveis */}
      {addons.filter(a => !a.alreadySubscribed).length > 0 && (
        <>
          <h3 style={{ marginTop: '1.5rem' }}>Add-ons disponiveis</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
            {addons.filter(a => !a.alreadySubscribed).map(addon => (
              <div key={addon.id} style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '1rem' }}>
                <strong>{addon.name}</strong>
                <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>{addon.description}</p>
                {addon.prices.map(price => (
                  <button
                    key={price.id}
                    onClick={() => handleSubscribeAddon(price.id)}
                    style={{
                      marginTop: '0.5rem', width: '100%', padding: '0.5rem',
                      background: '#2563eb', color: 'white', border: 'none',
                      borderRadius: '4px', cursor: 'pointer',
                    }}
                  >
                    Adicionar — {price.formatted}/{price.interval === 'month' ? 'mes' : 'ano'}
                  </button>
                ))}
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  )
}