import { useNavigate } from 'react-router-dom'
import { useTenantCtx } from '../context/TenantContext'
import AuthModal from '../components/AuthModal'

interface Props {
  onLogin: (user: any) => void
}

export default function LoginPage({ onLogin }: Props) {
  const navigate = useNavigate()
  const tenant = useTenantCtx()

  return (
    <div className="min-h-screen bg-black flex items-center justify-center p-4">
      {/* Background gradient */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full blur-3xl opacity-10"
          style={{ background: `radial-gradient(circle, ${tenant.primary_color}, transparent)` }} />
      </div>

      <div className="relative z-10 w-full max-w-md">
        <div className="text-center mb-8">
          {tenant.logo_url
            ? <img src={tenant.logo_url} alt={tenant.name} className="h-12 object-contain mx-auto mb-4" />
            : <h1 className="text-2xl font-black tracking-tight mb-1" style={{ color: tenant.primary_color }}>{tenant.name}</h1>
          }
          <p className="text-slate-500 text-sm">Sua conta de benefícios</p>
        </div>

        <AuthModal
          onSuccess={user => { onLogin(user); navigate('/minha-area') }}
          defaultTab="login"
        />
      </div>
    </div>
  )
}
