'use client'

import { useState } from 'react'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import {
  Check,
  X,
  Zap,
  Crown,
  Building2,
  Rocket,
  FlaskConical,
  ChevronDown,
  Sparkles,
  Shield,
  Users,
  Headphones,
  FileText,
  Search,
  MessageSquare,
  Layout,
  Code,
  GraduationCap,
  Clock,
  UserCheck,
  Loader2,
} from 'lucide-react'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'

/* ------------------------------------------------------------------ */
/*  Data                                                               */
/* ------------------------------------------------------------------ */

const PRICE_IDS = {
  TESTE: 'price_1Sw6zbGq8gFtWtyfFMuknvQQ',
  STARTER: 'price_1Sw6zbGq8gFtWtyf14b5v2iG',
  PRO: 'price_1Sw6zcGq8gFtWtyfRGDo58Q7',
  ENTERPRISE: 'price_1Sw6zcGq8gFtWtyfw9TNA7Ax',
}

const plans = [
  {
    id: 'free',
    name: 'Gratuito',
    icon: Zap,
    monthlyPrice: 0,
    description: 'Ideal para experimentar os recursos e avaliar a plataforma.',
    features: [
      '5 créditos por mês',
      'Consultor IA básico',
      '3 pesquisas por dia',
      'Modelos essenciais',
    ],
    cta: 'Experimentar Grátis',
    ctaHref: '/register',
    priceId: null,
    highlighted: false,
  },
  {
    id: 'starter',
    name: 'Starter',
    icon: Rocket,
    monthlyPrice: 97,
    description: 'Para advogados autônomos que precisam de mais recursos.',
    features: [
      '30 créditos por mês',
      'Consultor IA avançado',
      'Jurisprudência premium',
      'Modelos personalizáveis',
      'Atendimento por email',
    ],
    cta: 'Assinar Starter',
    ctaHref: null,
    priceId: PRICE_IDS.STARTER,
    highlighted: false,
  },
  {
    id: 'pro',
    name: 'Pro',
    icon: Crown,
    monthlyPrice: 197,
    description: 'Para escritórios que exigem produtividade máxima.',
    features: [
      '100 créditos por mês',
      'Consultor IA avançado',
      'Jurisprudência premium',
      'Modelos personalizáveis',
      'Gestão de prazos',
      'Atendimento prioritário',
    ],
    cta: 'Assinar Pro',
    ctaHref: null,
    priceId: PRICE_IDS.PRO,
    highlighted: true,
  },
  {
    id: 'enterprise',
    name: 'Enterprise',
    icon: Building2,
    monthlyPrice: 497,
    description: 'Para operações jurídicas que exigem escala e governança.',
    features: [
      'Tudo do plano Pro',
      '500 créditos por mês',
      'Acesso à API',
      'Até 10 operadores',
      'SLA 99.9%',
      'Gestor de conta dedicado',
    ],
    cta: 'Assinar Enterprise',
    ctaHref: null,
    priceId: PRICE_IDS.ENTERPRISE,
    highlighted: false,
  },
]

const testPlan = {
  id: 'teste',
  name: 'Teste',
  icon: FlaskConical,
  monthlyPrice: 0.01,
  description: 'Plano de teste para validar o fluxo de pagamento.',
  features: [
    '100 créditos (teste)',
    'Todas as funcionalidades Pro',
    'Apenas R$0,01/mês',
  ],
  cta: 'Testar por R$0,01',
  priceId: PRICE_IDS.TESTE,
}

type FeatureRow = {
  label: string
  icon: React.ElementType
  free: string | boolean
  starter: string | boolean
  pro: string | boolean
  enterprise: string | boolean
}

const comparisonFeatures: FeatureRow[] = [
  { label: 'Créditos mensais', icon: FileText, free: '5', starter: '30', pro: '100', enterprise: '500' },
  { label: 'Chat com IA', icon: MessageSquare, free: 'Básico', starter: 'Avançado', pro: 'Avançado', enterprise: 'Avançado' },
  { label: 'Busca jurisprudência', icon: Search, free: '3/dia', starter: 'Ilimitada', pro: 'Ilimitada', enterprise: 'Ilimitada' },
  { label: 'Modelos personalizáveis', icon: Layout, free: false, starter: true, pro: true, enterprise: true },
  { label: 'Gestão de prazos', icon: Clock, free: false, starter: false, pro: true, enterprise: true },
  { label: 'Atendimento prioritário', icon: Headphones, free: false, starter: false, pro: true, enterprise: true },
  { label: 'Integração via API', icon: Code, free: false, starter: false, pro: false, enterprise: true },
  { label: 'Multi-usuários', icon: Users, free: false, starter: false, pro: false, enterprise: 'Até 10' },
  { label: 'SLA garantido', icon: Shield, free: false, starter: false, pro: false, enterprise: '99.9%' },
  { label: 'Gerente de conta', icon: UserCheck, free: false, starter: false, pro: false, enterprise: true },
]

const faqs = [
  {
    q: 'É possível alterar meu plano a qualquer momento?',
    a: 'Sim! Você pode fazer upgrade ou downgrade a qualquer momento. No upgrade, a diferença é cobrada proporcionalmente. No downgrade, o novo valor vale no próximo ciclo.',
  },
  {
    q: 'Existe um período de avaliação gratuita?',
    a: 'O plano Gratuito é permanente, sem necessidade de cartão de crédito. Para testar os planos pagos, use nosso plano Teste por apenas R$0,01.',
  },
  {
    q: 'Quais meios de pagamento são aceitos?',
    a: 'Aceitamos cartão de crédito (Visa, Mastercard, Elo, Amex) via Stripe, com total segurança.',
  },
  {
    q: 'Há cláusula de permanência mínima?',
    a: 'Não. Todos os planos são sem fidelidade. Você pode cancelar a qualquer momento pela sua área de gerenciamento.',
  },
  {
    q: 'Como é garantida a segurança dos dados?',
    a: 'Utilizamos criptografia AES-256, servidores no Brasil e estamos em conformidade total com a LGPD. Seus dados nunca são usados para treinar modelos de IA.',
  },
  {
    q: 'O que acontece quando meus créditos acabam?',
    a: 'Seus créditos são renovados automaticamente a cada ciclo de faturamento. Se acabarem antes, você pode fazer upgrade para um plano com mais créditos.',
  },
]

/* ------------------------------------------------------------------ */
/*  Helpers                                                            */
/* ------------------------------------------------------------------ */

function formatPrice(price: number) {
  if (price === 0) return { integer: '0', decimal: '' }
  const str = price.toFixed(2).replace('.', ',')
  const [integer, decimal] = str.split(',')
  return { integer, decimal }
}

function CellValue({ value }: { value: string | boolean }) {
  if (value === true) return <Check className="w-5 h-5 text-teal-400 mx-auto" />
  if (value === false) return <X className="w-5 h-5 text-gray-600 mx-auto" />
  return <span className="text-sm text-gray-200">{value}</span>
}

/* ------------------------------------------------------------------ */
/*  Page                                                               */
/* ------------------------------------------------------------------ */

export default function PricingPage() {
  const router = useRouter()
  const [loadingPlan, setLoadingPlan] = useState<string | null>(null)

  async function handleSubscribe(priceId: string, planId: string) {
    setLoadingPlan(planId)
    try {
      const res = await fetch('/api/stripe/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ priceId }),
      })

      if (res.status === 401) {
        router.push('/register?plan=' + planId)
        return
      }

      const data = await res.json()
      if (data.url) {
        window.location.href = data.url
      } else {
        alert(data.error || 'Erro ao iniciar checkout')
      }
    } catch (err) {
      alert('Erro ao conectar com o servidor')
    } finally {
      setLoadingPlan(null)
    }
  }

  return (
    <>
      <Navbar />

      <main className="min-h-screen pt-24 pb-20">
        {/* ---- Bg effects ---- */}
        <div className="fixed inset-0 pointer-events-none">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[500px] bg-radial-teal opacity-60" />
          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[700px] h-[400px] bg-radial-bottom opacity-40" />
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* ---- Header ---- */}
          <section className="text-center mb-16 animate-fade-in-up">
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass text-xs text-teal-300 mb-6">
              <Sparkles className="w-3.5 h-3.5" />
              Escolha o plano ideal para seu escritório
            </div>
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4">
              <span className="gradient-text">Investimento transparente,</span>
              <br />
              <span className="text-white">resultados mensuráveis</span>
            </h1>
            <p className="text-gray-400 text-lg max-w-2xl mx-auto mb-10">
              Encontre o plano certo para a operação do seu escritório. Valores claros, sem taxas ocultas. Liberdade total para cancelar.
            </p>
          </section>

          {/* ---- Plan cards ---- */}
          <section className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {plans.map((plan, i) => {
              const { integer, decimal } = formatPrice(plan.monthlyPrice)
              const Icon = plan.icon

              return (
                <div
                  key={plan.id}
                  className={`relative rounded-2xl p-[1px] animate-fade-in-up ${
                    plan.highlighted
                      ? 'bg-gradient-to-b from-teal-500 via-teal-600/60 to-teal-900/30'
                      : 'bg-gradient-to-b from-teal-500/20 to-transparent'
                  }`}
                >
                  {plan.highlighted && (
                    <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 z-10">
                      <span className="px-4 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-teal-500 to-teal-600 text-white shadow-[0_0_20px_rgba(20,184,166,0.5)]">
                        ⭐ Recomendado
                      </span>
                    </div>
                  )}

                  <div
                    className={`rounded-[15px] h-full flex flex-col p-8 ${
                      plan.highlighted
                        ? 'bg-gradient-to-b from-[#0a1f1a] to-[#070b14]'
                        : 'glass'
                    }`}
                  >
                    <div className="flex items-center gap-3 mb-4">
                      <div
                        className={`w-10 h-10 rounded-xl flex items-center justify-center ${
                          plan.highlighted
                            ? 'bg-teal-500/30 text-teal-300'
                            : 'bg-teal-500/10 text-teal-400'
                        }`}
                      >
                        <Icon className="w-5 h-5" />
                      </div>
                      <h3 className="text-xl font-bold text-white">{plan.name}</h3>
                    </div>

                    <p className="text-sm text-gray-400 mb-6">{plan.description}</p>

                    <div className="mb-8">
                      <div className="flex items-baseline gap-1">
                        <span className="text-sm text-gray-400">R$</span>
                        <span className="text-5xl font-extrabold text-white">{integer}</span>
                        {decimal && <span className="text-xl font-bold text-gray-300">,{decimal}</span>}
                      </div>
                      <span className="text-xs text-gray-500">
                        {plan.monthlyPrice === 0 ? 'grátis para sempre' : '/mês'}
                      </span>
                    </div>

                    <ul className="space-y-3 mb-8 flex-1">
                      {plan.features.map((feat) => (
                        <li key={feat} className="flex items-start gap-2.5 text-sm text-gray-300">
                          <Check className="w-4 h-4 text-teal-400 mt-0.5 shrink-0" />
                          {feat}
                        </li>
                      ))}
                    </ul>

                    {plan.priceId ? (
                      <button
                        onClick={() => handleSubscribe(plan.priceId!, plan.id)}
                        disabled={loadingPlan === plan.id}
                        className={`block w-full py-3 rounded-xl text-sm font-semibold text-center transition-all disabled:opacity-70 ${
                          plan.highlighted
                            ? 'bg-gradient-to-r from-teal-600 to-teal-500 text-white shadow-[0_0_30px_rgba(20,184,166,0.4)] hover:shadow-[0_0_40px_rgba(20,184,166,0.6)] hover:from-teal-500 hover:to-teal-400'
                            : 'glass text-teal-300 hover:bg-teal-500/15 hover:text-white'
                        }`}
                      >
                        {loadingPlan === plan.id ? (
                          <span className="inline-flex items-center gap-2">
                            <Loader2 className="w-4 h-4 animate-spin" />
                            Redirecionando...
                          </span>
                        ) : (
                          plan.cta
                        )}
                      </button>
                    ) : (
                      <Link
                        href={plan.ctaHref || '/register'}
                        className="block w-full py-3 rounded-xl text-sm font-semibold text-center transition-all glass text-teal-300 hover:bg-teal-500/15 hover:text-white"
                      >
                        {plan.cta}
                      </Link>
                    )}
                  </div>
                </div>
              )
            })}
          </section>

          {/* ---- Test plan banner ---- */}
          <section className="mb-28 animate-fade-in-up">
            <div className="relative overflow-hidden rounded-2xl border border-amber-500/20 bg-gradient-to-r from-amber-950/30 via-[#111b27] to-amber-950/30 p-6 sm:p-8">
              <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-amber-600/10 blur-3xl" />
              <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center">
                    <FlaskConical className="w-6 h-6 text-amber-400" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-white">Plano Teste — R$0,01/mês</h3>
                    <p className="text-sm text-gray-400">
                      Quer testar o fluxo completo? Assine por apenas 1 centavo e ganhe 100 créditos Pro.
                    </p>
                  </div>
                </div>
                <button
                  onClick={() => handleSubscribe(testPlan.priceId, 'teste')}
                  disabled={loadingPlan === 'teste'}
                  className="shrink-0 inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold bg-amber-600/20 text-amber-300 border border-amber-500/30 hover:bg-amber-600/30 transition-all disabled:opacity-70"
                >
                  {loadingPlan === 'teste' ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      Redirecionando...
                    </>
                  ) : (
                    <>
                      <FlaskConical className="w-4 h-4" />
                      Testar por R$0,01
                    </>
                  )}
                </button>
              </div>
            </div>
          </section>

          {/* ---- Feature comparison table ---- */}
          <section className="mb-28 animate-fade-in-up delay-400">
            <h2 className="text-3xl font-bold text-center mb-2 gradient-text">Comparativo detalhado</h2>
            <p className="text-gray-400 text-center mb-10">Analise cada recurso disponível por plano, lado a lado.</p>

            <div className="overflow-x-auto rounded-2xl glass">
              <table className="w-full text-left min-w-[700px]">
                <thead>
                  <tr className="border-b border-teal-500/10">
                    <th className="py-4 px-6 text-sm text-gray-400 font-medium w-1/4">Funcionalidade</th>
                    <th className="py-4 px-6 text-sm text-gray-400 font-medium text-center">Gratuito</th>
                    <th className="py-4 px-6 text-sm text-gray-400 font-medium text-center">Starter</th>
                    <th className="py-4 px-6 text-sm font-medium text-center text-teal-300 bg-teal-500/5">Pro</th>
                    <th className="py-4 px-6 text-sm text-gray-400 font-medium text-center">Enterprise</th>
                  </tr>
                </thead>
                <tbody>
                  {comparisonFeatures.map((row, i) => {
                    const RowIcon = row.icon
                    return (
                      <tr
                        key={row.label}
                        className={`border-b border-teal-500/5 ${i % 2 === 0 ? '' : 'bg-teal-500/[0.02]'}`}
                      >
                        <td className="py-3.5 px-6 text-sm text-gray-300 flex items-center gap-2.5">
                          <RowIcon className="w-4 h-4 text-teal-500/50 shrink-0" />
                          {row.label}
                        </td>
                        <td className="py-3.5 px-6 text-center"><CellValue value={row.free} /></td>
                        <td className="py-3.5 px-6 text-center"><CellValue value={row.starter} /></td>
                        <td className="py-3.5 px-6 text-center bg-teal-500/5"><CellValue value={row.pro} /></td>
                        <td className="py-3.5 px-6 text-center"><CellValue value={row.enterprise} /></td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          </section>

          {/* ---- Trust badges ---- */}
          <section className="flex flex-wrap items-center justify-center gap-8 mb-28 animate-fade-in-up delay-500">
            {[
              { icon: Shield, text: 'LGPD Compliant' },
              { icon: Clock, text: 'SLA 99.9%' },
              { icon: Users, text: '3.100+ escritórios' },
              { icon: Sparkles, text: '47k+ peças redigidas' },
            ].map((badge) => (
              <div key={badge.text} className="flex items-center gap-2 text-sm text-gray-400">
                <badge.icon className="w-4 h-4 text-teal-500" />
                {badge.text}
              </div>
            ))}
          </section>

          {/* ---- FAQ ---- */}
          <section className="max-w-3xl mx-auto mb-20 animate-fade-in-up delay-600">
            <h2 className="text-3xl font-bold text-center mb-2 gradient-text">Perguntas frequentes</h2>
            <p className="text-gray-400 text-center mb-10">As dúvidas mais comuns sobre nossos planos.</p>

            <div className="space-y-3">
              {faqs.map((faq) => (
                <details key={faq.q} className="group glass rounded-xl overflow-hidden">
                  <summary className="flex items-center justify-between px-6 py-4 text-sm font-medium text-white hover:bg-teal-500/5 transition-colors">
                    {faq.q}
                    <ChevronDown className="w-4 h-4 text-gray-500 faq-chevron shrink-0 ml-4" />
                  </summary>
                  <div className="faq-content px-6 pb-4 text-sm text-gray-400 leading-relaxed">
                    {faq.a}
                  </div>
                </details>
              ))}
            </div>
          </section>

          {/* ---- Bottom CTA ---- */}
          <section className="text-center glass rounded-2xl p-12 mb-8 animate-fade-in-up delay-700">
            <h2 className="text-2xl sm:text-3xl font-bold mb-3 text-white">
              Pronto para modernizar sua operação jurídica?
            </h2>
            <p className="text-gray-400 mb-8 max-w-xl mx-auto">
              Inicie sem custo e evolua conforme a demanda. Sem cartão, sem amarras.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link
                href="/register"
                className="px-8 py-3 rounded-xl text-sm font-semibold bg-gradient-to-r from-teal-600 to-teal-500 text-white shadow-[0_0_30px_rgba(20,184,166,0.4)] hover:shadow-[0_0_40px_rgba(20,184,166,0.6)] transition-all"
              >
                Experimentar Grátis
              </Link>
              <button
                onClick={() => handleSubscribe(PRICE_IDS.PRO, 'pro')}
                disabled={loadingPlan === 'pro-bottom'}
                className="px-8 py-3 rounded-xl text-sm font-semibold glass text-teal-300 hover:bg-teal-500/15 hover:text-white transition-all"
              >
                Assinar Pro
              </button>
            </div>
          </section>
        </div>
      </main>

      <Footer />
    </>
  )
}
