import { useNavigate } from 'react-router-dom'
import { useAuthStore } from '@/lib/store'
import Button from '@/components/common/Button'
import { BeamsBackground } from '@/components/ui/beams-background'

export default function Login() {
  const navigate = useNavigate()
  const setUser = useAuthStore((state) => state.setUser)
  
  const handleSkipLogin = () => {
    // Entrar direto sem credenciais
    setUser({
      id: 'guest-user',
      email: 'guest@steelbook.com',
      nome_completo: 'Visitante',
    } as any)
    navigate('/dashboard')
  }
  
  return (
    <BeamsBackground intensity="strong">
      <div className="bg-white rounded-lg shadow-2xl p-8 w-full max-w-md">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-primary mb-2">SteelBook</h1>
          <p className="text-gray-600">Gestão Inteligente de Databooks</p>
        </div>
        
        <div className="space-y-4">
          <Button
            onClick={handleSkipLogin}
            variant="primary"
            className="w-full"
          >
            Entrar
          </Button>
          
          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-gray-300"></div>
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-2 bg-white text-gray-500">Modo Desenvolvimento</span>
            </div>
          </div>
          
          <p className="text-xs text-center text-gray-500">
            Autenticação desabilitada para desenvolvimento
          </p>
        </div>
        
        <div className="mt-6 text-center text-sm text-gray-600">
          <p>Versão 1.0.0 - 2025</p>
        </div>
      </div>
    </BeamsBackground>
  )
}
