/**
 * @file AuthRegister.tsx
 * @description Página de Registo para a versão Web. Permite a criação de
 * novas contas segmentadas por perfil ('cliente' ou 'barbearia'). Interage
 * diretamente com o serviço de autenticação do Supabase.
 */
import { FormEvent, useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Input } from '../components/ui/input'
import { Button } from '../components/ui/button'
import { Card } from '../components/ui/card'
import { UserPlus, User, Scissors } from 'lucide-react'
import { supabase } from '../lib/supabase'

export default function AuthRegister() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  // Estado local para definir as permissões associadas à conta nova
  const [role, setRole] = useState<'cliente' | 'barbearia'>('cliente')

  // Condicional, só inserido no metadados se o tipo de utilizador for 'barbearia'
  const [shopName, setShopName] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  const navigate = useNavigate()

  /**
   * Previne acesso à página de registo por utilizadores com Sessão ativa.
   * Utiliza um padrão `mounted` para não alterar state se o componente for desmontado.
   */
  // 🔐 Se já estiver logado, não pode ver o registo
  useEffect(() => {
    let mounted = true
      ; (async () => {
        // Efetua um fetch à sessão existente injetada pelo SDK da Supabase
        const { data } = await supabase.auth.getSession()
        if (!mounted) return
        if (data.session) {
          navigate('/explorar', { replace: true })
        }
      })()
    return () => {
      mounted = false
    }
  }, [navigate])

  /**
   * Processa a criação e envio do novo perfil e das informações para a BD via Supabase Auth.
   * @param {FormEvent} e - Evento de submissão do formulário.
   */
  async function onSubmit(e: FormEvent) {
    e.preventDefault()
    setError('')

    // Regras básicas de negócio à submissão (proteção pre-API)
    if (!name.trim()) return setError('Preencha o nome completo')
    if (!email.trim()) return setError('Preencha o email')
    if (!password.trim()) return setError('Preencha a senha')
    if (role === 'barbearia' && !shopName.trim()) {
      return setError('Informe o nome da barbearia')
    }

    try {
      setLoading(true)

      // Registo propriamente dito perante serviço do Supabase
      // Encaminha, adicionalmente, opções nos metadados (Data) da auth do serviço para mapeamento da "profile" table na BD
      const { data, error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          data: {
            name: name.trim(),
            role,
            // Apenas vincula shopName no json object se a rule aplicável confirmar que a role o exige
            // Envia ambas as formatações (camelCase para web, snake_case para o trigger SQL)
            shopName: role === 'barbearia' ? shopName.trim() : null,
            shop_name: role === 'barbearia' ? shopName.trim() : null,
          },
        },
      })

      if (error) throw error

      // 🔔 Se confirmação de email estiver ON (verificação pendente via SMTP em Supabase Configs)
      if (!data.session) {
        navigate('/login', {
          replace: true,
          state: {
            msg: 'Conta criada! Confirma o email antes de fazer login.',
          },
        })
        return
      }

      // ✅ Login automático: Rotas divergentes de acordo com a função Role
      navigate(role === 'barbearia' ? '/painel' : '/explorar', {
        replace: true,
      })
    } catch (err: any) {
      setError(err?.message || 'Erro ao criar conta')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-6 py-12">
      <Card className="w-full max-w-[500px] 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">
          <div className="inline-flex p-4 bg-slate-900 rounded-2xl text-indigo-400 shadow-xl mb-2">
            <UserPlus size={32} />
          </div>
          <div className="space-y-1">
            <h1 className="text-3xl font-black text-slate-900 tracking-tight">Criar Conta</h1>
            <p className="text-slate-500 font-medium">Junte-se à 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">
            {error}
          </div>
        )}

        <form className="space-y-6" onSubmit={onSubmit}>
          {/* Tipo de conta */}
          <div className="space-y-3">
            <label className="text-sm font-bold text-slate-900 uppercase tracking-wider ml-1">
              Eu sou...
            </label>
            <div className="grid grid-cols-2 gap-3">
              {(['cliente', 'barbearia'] as const).map((r) => (
                <button
                  key={r}
                  type="button"
                  onClick={() => {
                    setRole(r)
                    setError('')
                  }}
                  className={`p-4 rounded-2xl border-2 transition-all group ${role === r
                    ? 'border-slate-900 bg-slate-900 text-indigo-400 shadow-lg'
                    : 'border-slate-100 bg-slate-50/50 hover:border-slate-200 text-slate-500'
                    }`}
                >
                  <div className="flex flex-col items-center gap-2">
                    {r === 'cliente' ? (
                      <User size={20} className={role === r ? 'text-indigo-400' : 'text-slate-400 group-hover:text-slate-600'} />
                    ) : (
                      <Scissors size={20} className={role === r ? 'text-indigo-400' : 'text-slate-400 group-hover:text-slate-600'} />
                    )}
                    <span className="text-sm font-bold uppercase tracking-tight">
                      {r === 'cliente' ? 'Cliente' : 'Barbearia'}
                    </span>
                  </div>
                </button>
              ))}
            </div>
          </div>

          <div className="space-y-4">
            <Input
              label="Nome completo"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Ex: João Silva"
              required
              className="rounded-xl border-slate-200 focus:ring-indigo-500/20"
            />

            <Input
              label="Email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="exemplo@email.com"
              required
              className="rounded-xl border-slate-200 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 focus:ring-indigo-500/20"
            />

            {role === 'barbearia' && (
              <Input
                label="Nome da barbearia"
                value={shopName}
                onChange={(e) => setShopName(e.target.value)}
                placeholder="Ex: Barbearia Estilo"
                required
                className="rounded-xl border-slate-200 focus:ring-amber-500/20 animate-in slide-in-from-top-2"
              />
            )}
          </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 processar...</span>
              </div>
            ) : 'Criar minha conta'}
          </Button>
        </form>

        <div className="text-center pt-6 border-t border-slate-100">
          <p className="text-sm text-slate-500 font-medium">
            Já tem uma conta?{' '}
            <Link to="/login" className="text-indigo-600 font-bold hover:text-indigo-700 underline-offset-4 hover:underline transition-all">
              Fazer Login
            </Link>
          </p>
        </div>
      </Card>
    </div>
  )
}
