'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { useAuth } from '@/hooks/useAuth'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { AuthenticationError } from '@/lib/auth'

export default function LoginAdminPage() {
  const [credentials, setCredentials] = useState({ email: '', password: '' })
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const router = useRouter()
  const { login } = useAuth()

  const handleLogin = async (e: React.MouseEvent) => {
    e.preventDefault();
    console.log('[LOGIN-DEBUG] 1. handleLogin iniciado.');
    setLoading(true);
    setError('');

    try {
      console.log('[LOGIN-DEBUG] 2. Chamando a função de login do useAuth...');
      const success = await login(credentials.email, credentials.password, 'administrador');
      console.log('[LOGIN-DEBUG] 3. A função de login retornou:', success);
      
      if (success) {
        console.log('[LOGIN-DEBUG] 4. Sucesso! Redirecionando para /dashboard...');
        window.location.href = '/dashboard';
      } else {
        console.log('[LOGIN-DEBUG] 4b. A função de login retornou um valor falso, mas não lançou erro.');
        setError('Ocorreu uma falha inesperada no login.');
      }
    } catch (err) {
      console.log('[LOGIN-DEBUG] 5. Ocorreu um erro (catch).');
      console.error('[LOGIN-ADMIN] Erro no login:', err);
      
      if (err instanceof AuthenticationError) {
        setError(err.message);
      } else {
        setError('Erro inesperado. Tente novamente.');
      }
    } finally {
      console.log('[LOGIN-DEBUG] 6. Bloco finally executado.');
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
            Login Administrador de Clínica
          </h2>
          <p className="mt-2 text-sm text-gray-600">
            Entre com suas credenciais para acessar o sistema administrativo
          </p>
        </div>
        
        <Card>
          <CardHeader>
            <CardTitle className="text-center">Acesso Administrativo</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={(e) => e.preventDefault()} className="space-y-6">
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                  Email
                </label>
                <Input
                  id="email"
                  type="email"
                  placeholder="Digite seu email"
                  value={credentials.email}
                  onChange={(e) => setCredentials({...credentials, email: e.target.value})}
                  required
                  className="mt-1"
                  disabled={loading}
                />
              </div>
              
              <div>
                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                  Senha
                </label>
                <Input
                  id="password"
                  type="password"
                  placeholder="Digite sua senha"
                  value={credentials.password}
                  onChange={(e) => setCredentials({...credentials, password: e.target.value})}
                  required
                  className="mt-1"
                  disabled={loading}
                />
              </div>

              {error && (
                <Alert variant="destructive">
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

              <Button 
                type="button" 
                onClick={handleLogin}
                className="w-full cursor-pointer" 
                disabled={loading}
              >
                {loading ? 'Entrando...' : 'Entrar no Sistema Administrativo'}
              </Button>
            </form>
            
            <div className="mt-4 text-center">
              <Button variant="outline" asChild className="w-full">
                <Link href="/">
                  Voltar ao Início
                </Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}