<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/auth/Welcome.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { supabase } from '@/lib/supabase/client'

import Message from 'primevue/message'
import Chip from 'primevue/chip'
import ProgressSpinner from 'primevue/progressspinner'

const route = useRoute()
const router = useRouter()

// ============================
// Query
// ============================
const planFromQuery = computed(() => String(route.query.plan || '').trim().toLowerCase())
const intervalFromQuery = computed(() => String(route.query.interval || '').trim().toLowerCase())

function normalizeInterval (v) {
  if (v === 'monthly') return 'month'
  if (v === 'annual' || v === 'yearly') return 'year'
  return v
}

const intervalNormalized = computed(() => normalizeInterval(intervalFromQuery.value))

const intervalLabel = computed(() => {
  if (intervalNormalized.value === 'year') return 'Anual'
  if (intervalNormalized.value === 'month') return 'Mensal'
  return ''
})

const hasPlanQuery = computed(() => !!planFromQuery.value)

// ============================
// Session (opcional para CTA melhor)
// ============================
const hasSession = ref(false)

async function checkSession () {
  try {
    const { data } = await supabase.auth.getSession()
    hasSession.value = !!data?.session
  } catch {
    hasSession.value = false
  }
}

// ============================
// Pricing
// ============================
const loading = ref(false)
const planRow = ref(null)

const planName = computed(() => planRow.value?.public_name || planRow.value?.plan_name || null)
const planDescription = computed(() => planRow.value?.public_description || null)

function amountForInterval (row, interval) {
  if (!row) return null
  const cents = interval === 'year' ? row.yearly_cents : row.monthly_cents
  // fallback inteligente: se não houver preço nesse intervalo, tenta o outro
  if (cents == null) return interval === 'year' ? row.monthly_cents : row.yearly_cents
  return cents
}

function currencyForInterval (row, interval) {
  if (!row) return 'BRL'
  const cur = interval === 'year' ? (row.yearly_currency || 'BRL') : (row.monthly_currency || 'BRL')
  return cur || 'BRL'
}

const amountCents = computed(() => amountForInterval(planRow.value, intervalNormalized.value))
const currency = computed(() => currencyForInterval(planRow.value, intervalNormalized.value))

const formattedPrice = computed(() => {
  if (amountCents.value == null) return null
  try {
    return new Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: currency.value || 'BRL'
    }).format(Number(amountCents.value) / 100)
  } catch {
    return null
  }
})

async function loadPlan () {
  planRow.value = null
  if (!planFromQuery.value) return

  loading.value = true
  try {
    const { data, error } = await supabase
      .from('v_public_pricing')
      .select(`
        plan_key,
        plan_name,
        public_name,
        public_description,
        badge,
        is_featured,
        monthly_cents,
        yearly_cents,
        monthly_currency,
        yearly_currency,
        is_visible
      `)
      .eq('plan_key', planFromQuery.value)
      .eq('is_visible', true)
      .maybeSingle()

    if (error) throw error
    if (data) planRow.value = data
  } catch (err) {
    console.error('[Welcome] loadPlan:', err)
  } finally {
    loading.value = false
  }
}

function goLogin () {
  router.push('/auth/login')
}

function goBackLanding () {
  router.push('/lp')
}

function goDashboard () {
  router.push('/admin')
}

function goPricing () {
  router.push('/lp#pricing')
}

onMounted(async () => {
  await checkSession()
  await loadPlan()
})

watch(
  () => planFromQuery.value,
  () => loadPlan()
)
</script>

<template>
  <div class="min-h-screen bg-[var(--surface-ground)] text-[var(--text-color)] flex items-center justify-center p-4">
    <!-- fundo suave (noir glow) -->
    <div class="pointer-events-none absolute inset-0 overflow-hidden">
      <div class="absolute -top-28 -left-28 h-96 w-96 rounded-full blur-3xl opacity-60 bg-indigo-400/10" />
      <div class="absolute top-24 -right-24 h-[28rem] w-[28rem] rounded-full blur-3xl opacity-60 bg-emerald-400/10" />
      <div class="absolute -bottom-40 left-1/3 h-[34rem] w-[34rem] rounded-full blur-3xl opacity-60 bg-fuchsia-400/10" />
    </div>

    <div class="relative w-full max-w-6xl">
      <div class="rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] shadow-sm overflow-hidden">
        <div class="grid grid-cols-12">
          <!-- LEFT -->
          <div
            class="col-span-12 lg:col-span-6 p-6 md:p-10 bg-[color-mix(in_srgb,var(--surface-card),transparent_6%)] border-b lg:border-b-0 lg:border-r border-[var(--surface-border)]"
          >
            <div class="flex items-center gap-3">
              <div
                class="h-11 w-11 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] grid place-items-center"
              >
                <i class="pi pi-sparkles opacity-80 text-lg" />
              </div>
              <div class="min-w-0">
                <div class="font-semibold leading-tight truncate">Psi Quasar</div>
                <div class="text-xs text-[var(--text-color-secondary)] truncate">Gestão clínica sem ruído.</div>
              </div>
            </div>

            <Divider class="my-6" />

            <div class="text-3xl md:text-4xl font-semibold leading-tight">
              Bem-vindo(a).
            </div>

            <div class="mt-3 text-sm md:text-base text-[var(--text-color-secondary)] max-w-lg leading-relaxed">
              Sua conta foi criada e sua intenção de assinatura foi registrada.
              Agora o caminho é simples: instruções de pagamento → confirmação → ativação do plano.
            </div>

            <div class="mt-6 grid grid-cols-12 gap-3">
              <div class="col-span-12 md:col-span-6">
                <div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] p-4">
                  <div class="text-xs text-[var(--text-color-secondary)]">1) Pagamento</div>
                  <div class="text-xl font-semibold mt-1">Manual</div>
                  <div class="text-xs text-[var(--text-color-secondary)] mt-1">PIX ou boleto</div>
                </div>
              </div>
              <div class="col-span-12 md:col-span-6">
                <div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] p-4">
                  <div class="text-xs text-[var(--text-color-secondary)]">2) Confirmação</div>
                  <div class="text-xl font-semibold mt-1">Rápida</div>
                  <div class="text-xs text-[var(--text-color-secondary)] mt-1">verificação e liberação</div>
                </div>
              </div>
              <div class="col-span-12">
                <div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] p-4">
                  <div class="flex items-start justify-between gap-3">
                    <div>
                      <div class="text-xs text-[var(--text-color-secondary)]">3) Plano ativo</div>
                      <div class="font-semibold mt-1">Recursos liberados</div>
                      <div class="text-xs text-[var(--text-color-secondary)] mt-1">
                        entitlements PRO quando confirmado
                      </div>
                    </div>
                    <i class="pi pi-verified opacity-60" />
                  </div>
                </div>
              </div>
            </div>

            <div class="mt-6 flex flex-wrap gap-2">
              <Tag severity="secondary" value="Sem cobrança automática" />
              <Tag severity="secondary" value="Ativação após confirmação" />
              <Tag severity="secondary" value="Gateway depois, sem retrabalho" />
            </div>

            <div class="mt-6 text-xs text-[var(--text-color-secondary)]">
              * Boas-vindas inspirada em layouts PrimeBlocks.
            </div>
          </div>

          <!-- RIGHT -->
          <div class="col-span-12 lg:col-span-6 p-6 md:p-10">
            <div class="max-w-md mx-auto">
              <div class="text-2xl font-semibold">Conta criada 🎉</div>
              <div class="text-sm text-[var(--text-color-secondary)] mt-1 leading-relaxed">
                Você já pode entrar. Se o seu plano for PRO, ele será ativado após confirmação do pagamento.
              </div>

              <div class="mt-5">
                <Message severity="success" class="mb-3">
                  Intenção de assinatura registrada.
                </Message>

                <div v-if="loading" class="flex items-center gap-2 text-sm text-[var(--text-color-secondary)]">
                  <ProgressSpinner style="width: 18px; height: 18px" strokeWidth="4" />
                  Carregando detalhes do plano…
                </div>

                <Card v-else class="overflow-hidden rounded-[2rem]">
                  <template #content>
                    <div class="flex items-start justify-between gap-3">
                      <div class="min-w-0">
                        <div class="text-xs text-[var(--text-color-secondary)]">Resumo</div>

                        <div v-if="hasPlanQuery" class="mt-1 flex items-center gap-2 flex-wrap">
                          <div class="text-lg font-semibold truncate">
                            {{ planName || 'Plano' }}
                          </div>
                          <Tag v-if="planRow?.is_featured" severity="success" value="Popular" />
                          <Tag v-if="planRow?.badge" severity="secondary" :value="planRow.badge" />
                          <Chip v-if="intervalLabel" :label="intervalLabel" />
                        </div>

                        <div v-else class="mt-1">
                          <div class="text-lg font-semibold">Sem plano selecionado</div>
                          <div class="text-sm text-[var(--text-color-secondary)] mt-1">
                            Você pode escolher um plano agora ou seguir no FREE.
                          </div>
                        </div>

                        <div v-if="hasPlanQuery" class="mt-2 text-2xl font-semibold leading-none">
                          {{ formattedPrice || '—' }}
                          <span v-if="intervalLabel" class="text-sm font-normal text-[var(--text-color-secondary)]">
                            /{{ intervalNormalized === 'month' ? 'mês' : 'ano' }}
                          </span>
                        </div>

                        <div v-if="planDescription" class="mt-2 text-sm text-[var(--text-color-secondary)] leading-relaxed">
                          {{ planDescription }}
                        </div>

                        <Message v-if="hasPlanQuery && !planRow" severity="warn" class="mt-3">
                          Não encontrei esse plano na vitrine pública. Você pode continuar normalmente.
                        </Message>
                      </div>
                    </div>

                    <Divider class="my-4" />

                    <Message severity="info" class="mb-0">
                      Próximo passo: você receberá instruções de pagamento (PIX/boleto).
                      Assim que confirmado, sua assinatura será ativada.
                    </Message>

                    <div v-if="!hasPlanQuery" class="mt-3">
                      <Button
                        label="Escolher um plano"
                        icon="pi pi-credit-card"
                        severity="secondary"
                        outlined
                        class="w-full"
                        @click="goPricing"
                      />
                    </div>
                  </template>
                </Card>
              </div>

              <div class="mt-5 gap-2">
                <Button
                  v-if="hasSession"
                  label="Ir para o painel"
                  class="w-full mb-2"
                  icon="pi pi-arrow-right"
                  @click="goDashboard"
                />
                <Button
                  v-else
                  label="Ir para login"
                  class="w-full mb-2"
                  icon="pi pi-sign-in"
                  @click="goLogin"
                />

                <Button
                  label="Voltar para a página inicial"
                  severity="secondary"
                  outlined
                  class="w-full"
                  icon="pi pi-arrow-left"
                  @click="goBackLanding"
                />
              </div>

              <div class="text-center text-xs text-[var(--text-color-secondary)] mt-4">
                Psi Quasar — gestão clínica sem ruído.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>