import { createRoot } from 'react-dom/client'

import { ClerkProvider } from '@clerk/clerk-react'
import { ptBR } from '@clerk/localizations'
import './index.css'
import App from './App.tsx'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error("Missing Publishable Key")
}

createRoot(document.getElementById('root')!).render(
  <ClerkProvider
    publishableKey={PUBLISHABLE_KEY}
    afterSignOutUrl="/"
    localization={ptBR}
    appearance={{
      variables: {
        colorPrimary: '#fb923c', // Cor primária do GPI (Laranja)
        colorBackground: '#ffffff',
        colorText: '#1c1917',
        colorTextSecondary: '#57534e',
        borderRadius: '0.75rem',
      },
      elements: {
        card: "shadow-none border-0 bg-transparent", // Deixamos o container da página controlar o card
        navbar: "hidden",
        headerTitle: "text-2xl font-bold tracking-tight",
        headerSubtitle: "text-text-muted font-medium",
        formButtonPrimary: "bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-primary/20",
        socialButtonsBlockButton: "bg-white hover:bg-surface-hover border-border/40 text-text-main font-semibold transition-all duration-300 rounded-xl",
        footerActionLink: "text-primary hover:text-primary/80 font-bold",
        formFieldInput: "bg-surface-soft border-border/40 focus:ring-2 focus:ring-primary/20 focus:border-primary rounded-xl",
        organizationSwitcherTrigger: "hover:bg-surface-hover transition-colors rounded-xl",
        organizationPreviewMainIdentifier: "font-bold",
        // Personalização específica para a lista de organizações que aparece na imagem
        organizationListPreview: "hover:bg-surface-soft rounded-xl transition-all p-3",
        organizationListCreateOrganizationButton: "text-primary font-bold hover:text-primary/80",
      }
    }}
  >
    <App />
  </ClerkProvider>,
)