/**
 * @file AuthLogin.tsx
 * @description Página de Autenticação (Login) para a versão Web da aplicação.
 * Permite aos utilizadores (clientes e barbearias) entrarem na sua conta 
 * através de credenciais de email e palavra-passe, ligando-se ao fluxo de 
 * sessões do Supabase.
 */
import { FormEvent, useEffect, useState } from 'react'
import { useNavigate, Link } from 'react-router-dom'
import { Input } from '../components/ui/input'
import { Button } from '../components/ui/button'
import { Card } from '../components/ui/card'
import { LogIn } from 'lucide-react'
import { supabase } from '../lib/supabase'
import { useApp } from '../context/AppContext'

export default function AuthLogin() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  // Utilização do hook do react-router-dom para navegação entre páginas web
  const navigate = useNavigate()
  const { user } = useApp()

  /**
   * Hook executado na montagem inicial do componente.
   * Interage diretamente com o AppContext para verificar
   * de forma reativa se o utilizador já está logado.
   * Se os dados do utilizador confirmarem autenticação ativa, redireciona o fluxo consoante a role.
   */
  useEffect(() => {
    if (user) {
      navigate(user.role === 'barbearia' ? '/painel' : '/explorar', { replace: true })
    }
  }, [user, navigate])

  /**
   * Manipula a submissão do formulário na view para validar as credenciais.
   * @param {FormEvent} e - Evento padrão de submissão form para prevenir comportamento `submit` comum.
   */
  const handleLogin = async (e: FormEvent) => {
    e.preventDefault()
    setError('')
    setLoading(true)

    try {
      // Comunicação via API REST do Supabase para Login
      // A biblioteca gera pedido POST com as credenciais (Email e JSON PW) para endpoint /token
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password,
      })
      if (error) throw error

      // Sucesso na verificação origina redirecionamento baseado na rule (metadados guardados no Auth)
      const role = data.user?.user_metadata?.role
      if (role) {
        navigate(role === 'barbearia' ? '/painel' : '/explorar', { replace: true })
      }
    } catch (e: any) {
      setError('Credenciais inválidas ou email não confirmado')
      setLoading(false)
    }
  }

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-6 py-12">
      <Card className="w-full max-w-[440px] p-10 space-y-8 glass-card border-none rounded-[2rem] animate-in fade-in zoom-in duration-500">
        <div className="text-center space-y-4">
          <Link to="/" className="inline-flex p-4 bg-slate-900 rounded-2xl text-indigo-400 shadow-xl mb-2 hover:scale-105 transition-transform">
            <LogIn size={32} />
          </Link>
          <div className="space-y-1">
            <h1 className="text-3xl font-black text-slate-900 tracking-tight">Bem-vindo</h1>
            <p className="text-slate-500 font-medium">Aceda à sua conta Smart Agenda</p>
          </div>
        </div>

        {error && (
          <div className="rounded-2xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-600 font-medium animate-shake">
            {error}
          </div>
        )}

        <form className="space-y-5" onSubmit={handleLogin}>
          <div className="space-y-4">
            <Input
              label="Email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="exemplo@email.com"
              required
              className="rounded-xl border-slate-200/60 focus:ring-indigo-500/20"
            />

            <Input
              label="Palavra-passe"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
              required
              className="rounded-xl border-slate-200/60 focus:ring-indigo-500/20"
            />
          </div>

          <Button type="submit" className="w-full h-12 bg-slate-900 hover:bg-slate-800 text-indigo-400 font-bold rounded-xl shadow-lg shadow-slate-200 transition-all active:scale-[0.98]" disabled={loading}>
            {loading ? (
              <div className="flex items-center gap-2">
                <div className="w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
                <span>A entrar...</span>
              </div>
            ) : 'Entrar na Conta'}
          </Button>
        </form>

        <div className="text-center pt-6 border-t border-slate-100">
          <p className="text-sm text-slate-500 font-medium">
            Ainda não tem conta?{' '}
            <Link to="/registo" className="text-indigo-600 font-bold hover:text-indigo-700 underline-offset-4 hover:underline transition-all">
              Criar conta grátis
            </Link>
          </p>
        </div>
      </Card>
    </div>
  )
}
