Variantes de Produto

import { useState, useEffect } from 'react'

interface Price {
  id: string
  amount: number
  formatted: string
  interval: string
}

interface Tier {
  name: string
  key: string
  description: string
  features: string[]
  prices: Price[]
  highlighted?: boolean
}

const TIER_CONFIG: Record<string, Omit<Tier, 'prices'>> = {
  basic: {
    name: 'Basic',
    key: 'basic',
    description: 'Para profissionais autonomos',
    features: ['1 usuario', '1.000 transacoes/mes', 'Suporte por email', 'Relatorios basicos'],
  },
  pro: {
    name: 'Pro',
    key: 'pro',
    description: 'Para pequenas e medias empresas',
    features: ['Ate 10 usuarios', '10.000 transacoes/mes', 'Suporte prioritario', 'Relatorios avancados', 'API completa'],
    highlighted: true,
  },
  enterprise: {
    name: 'Enterprise',
    key: 'enterprise',
    description: 'Para grandes operacoes',
    features: ['Usuarios ilimitados', 'Transacoes ilimitadas', 'Suporte dedicado', 'SLA 99,9%', 'API completa', 'Webhooks customizados'],
  },
}

export function PricingTable() {
  const [tiers, setTiers] = useState<Tier[]>([])
  const [billingInterval, setBillingInterval] = useState<'month' | 'year'>('month')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/products/prod_xxxx')
      .then(r => r.json())
      .then(product => {
        // Agrupar precos por tier
        const grouped: Record<string, Price[]> = {}
        for (const price of product.prices) {
          const tier = price.metadata?.tier || 'default'
          if (!grouped[tier]) grouped[tier] = []
          grouped[tier].push({
            id: price.id,
            amount: price.priceAmount,
            formatted: `R$ ${(price.priceAmount / 100).toFixed(2)}`,
            interval: price.recurringInterval,
          })
        }

        const tierList = Object.entries(TIER_CONFIG).map(([key, config]) => ({
          ...config,
          prices: grouped[key] || [],
        }))

        setTiers(tierList)
        setLoading(false)
      })
  }, [])

  async function handleSubscribe(priceId: string) {
    const res = await fetch('/api/subscriptions/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ priceId, customerEmail: '[email protected]' }),
    })
    const { checkoutUrl } = await res.json()
    window.location.href = checkoutUrl
  }

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

  return (
    <div>
      <h2 style={{ textAlign: 'center' }}>Escolha seu plano</h2>

      {/* Toggle mensal/anual */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: '0.5rem', marginBottom: '2rem' }}>
        <button
          onClick={() => setBillingInterval('month')}
          style={{
            padding: '0.5rem 1rem',
            borderRadius: '4px',
            border: '1px solid #d1d5db',
            background: billingInterval === 'month' ? '#2563eb' : 'white',
            color: billingInterval === 'month' ? 'white' : '#374151',
            cursor: 'pointer',
          }}
        >
          Mensal
        </button>
        <button
          onClick={() => setBillingInterval('year')}
          style={{
            padding: '0.5rem 1rem',
            borderRadius: '4px',
            border: '1px solid #d1d5db',
            background: billingInterval === 'year' ? '#2563eb' : 'white',
            color: billingInterval === 'year' ? 'white' : '#374151',
            cursor: 'pointer',
          }}
        >
          Anual <span style={{ fontSize: '0.75rem' }}>(-20%)</span>
        </button>
      </div>

      {/* Cards de planos */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.5rem', maxWidth: '900px', margin: '0 auto' }}>
        {tiers.map(tier => {
          const price = tier.prices.find(p => p.interval === billingInterval)
          if (!price) return null

          return (
            <div
              key={tier.key}
              style={{
                border: tier.highlighted ? '2px solid #2563eb' : '1px solid #e5e7eb',
                borderRadius: '12px',
                padding: '2rem',
                position: 'relative',
              }}
            >
              {tier.highlighted && (
                <span style={{
                  position: 'absolute', top: '-12px', left: '50%', transform: 'translateX(-50%)',
                  background: '#2563eb', color: 'white', padding: '2px 12px', borderRadius: '12px', fontSize: '0.75rem',
                }}>
                  Mais popular
                </span>
              )}

              <h3>{tier.name}</h3>
              <p style={{ color: '#6b7280', fontSize: '0.875rem' }}>{tier.description}</p>

              <p style={{ fontSize: '2rem', fontWeight: 'bold', margin: '1rem 0' }}>
                {price.formatted}
                <span style={{ fontSize: '1rem', fontWeight: 'normal', color: '#6b7280' }}>
                  /{billingInterval === 'month' ? 'mes' : 'ano'}
                </span>
              </p>

              <button
                onClick={() => handleSubscribe(price.id)}
                style={{
                  width: '100%', padding: '0.75rem',
                  background: tier.highlighted ? '#2563eb' : 'white',
                  color: tier.highlighted ? 'white' : '#2563eb',
                  border: '1px solid #2563eb', borderRadius: '6px', cursor: 'pointer',
                }}
              >
                Assinar {tier.name}
              </button>

              <ul style={{ marginTop: '1.5rem', listStyle: 'none', padding: 0 }}>
                {tier.features.map(feature => (
                  <li key={feature} style={{ padding: '0.25rem 0', fontSize: '0.875rem' }}>
                    {feature}
                  </li>
                ))}
              </ul>
            </div>
          )
        })}
      </div>
    </div>
  )
}