riseup-squad21/components/LoginForm.tsx

// ARQUIVO COMPLETO E CORRIGIDO PARA: components/LoginForm.tsx

"use client";

import type React from "react";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { login, api } from "@/services/api.mjs";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent } from "@/components/ui/card";
import { useToast } from "@/hooks/use-toast";
import { Eye, EyeOff, Mail, Lock, Loader2 } from "lucide-react";
import { usersService } from "@/services/usersApi.mjs";

interface LoginFormProps {
  children?: React.ReactNode;
}

interface FormState {
  email: string;
  password: string;
}

export function LoginForm({ children }: LoginFormProps) {
  const [form, setForm] = useState<FormState>({ email: "", password: "" });
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();
  const { toast } = useToast();

  const [userRoles, setUserRoles] = useState<string[]>([]);
  const [authenticatedUser, setAuthenticatedUser] = useState<any>(null);

  /**
   * --- NOVA FUNÇÃO ---
   * Finaliza o login com o perfil de dashboard escolhido e redireciona.
   */
  const handleRoleSelection = (selectedDashboardRole: string, user: any) => {
    if (!user) {
      toast({
        title: "Erro de Sessão",
        description:
          "Não foi possível encontrar os dados do usuário. Tente novamente.",
        variant: "destructive",
      });
      setUserRoles([]);
      return;
    }

    const roleInLowerCase = selectedDashboardRole.toLowerCase();
    console.log("Salvando no localStorage com o perfil:", roleInLowerCase);

    const completeUserInfo = {
      ...user,
      user_metadata: { ...user.user_metadata, role: roleInLowerCase },
    };
    localStorage.setItem("user_info", JSON.stringify(completeUserInfo));

    let redirectPath = "";
    switch (selectedDashboardRole) {
      case "gestor":
        redirectPath = "/manager/dashboard";
        break;
      case "admin":
        redirectPath = "/manager/dashboard";
        break;
      case "medico":
        redirectPath = "/doctor/dashboard";
        break;
      case "secretaria":
        redirectPath = "/secretary/dashboard";
        break;
      case "paciente":
        redirectPath = "/patient/dashboard";
        break;
    }

    if (redirectPath) {
      toast({ title: `Entrando como ${selectedDashboardRole}...` });
      router.push(redirectPath);
    } else {
      toast({
        title: "Erro",
        description: "Perfil selecionado inválido.",
        variant: "destructive",
      });
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    localStorage.removeItem("token");
    localStorage.removeItem("user_info");

    try {
      const authData = await login(form.email, form.password);
      const user = authData.user;
      if (!user || !user.id) {
        throw new Error("Resposta de autenticação inválida.");
      }

      const rolesData = await api.get(
        `/rest/v1/user_roles?user_id=eq.${user.id}&select=role`
      );

      const me = await usersService.getMeSimple();
      console.log(me.roles);

      if (!me.roles || me.roles.length === 0) {
        throw new Error(
          "Nenhum perfil de acesso foi encontrado para este usuário."
        );
      }

      handleRoleSelection(me.roles[0], user);
    } catch (error) {
      localStorage.removeItem("token");
      localStorage.removeItem("user_info");
      toast({
        title: "Erro no Login",
        description:
          error instanceof Error
            ? error.message
            : "Ocorreu um erro inesperado.",
        variant: "destructive",
      });
      setIsLoading(false);
    }
  };

  // Estado para guardar os botões de seleção de perfil
  const [roleSelectionUI, setRoleSelectionUI] =
    useState<React.ReactNode | null>(null);

  return (
    <Card className="w-full bg-transparent border-0 shadow-none">
      <CardContent className="p-0">
        {!roleSelectionUI ? (
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="email">E-mail</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-5 h-5" />
                <Input
                  id="email"
                  type="email"
                  placeholder="seu.email@exemplo.com"
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  className="pl-10 h-11 focus-visible:ring-blue-600 focus-visible:ring-2"
                  required
                  disabled={isLoading}
                  autoComplete="username"
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Senha</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-5 h-5" />
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="Digite sua senha"
                  value={form.password}
                  onChange={(e) =>
                    setForm({ ...form, password: e.target.value })
                  }
                  className="pl-10 pr-12 h-11 focus-visible:ring-blue-600 focus-visible:ring-2"
                  required
                  disabled={isLoading}
                  autoComplete="current-password"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
                  disabled={isLoading}
                >
                  {showPassword ? (
                    <EyeOff className="w-5 h-5" />
                  ) : (
                    <Eye className="w-5 h-5" />
                  )}
                </button>
              </div>
            </div>
            <Button
              type="submit"
              className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white"
              disabled={isLoading}
            >
              {isLoading ? (
                <Loader2 className="w-5 h-5 animate-spin" />
              ) : (
                "Entrar"
              )}
            </Button>
          </form>
        ) : (
          <div className="space-y-4 animate-in fade-in-50">
            <h3 className="text-lg font-medium text-center text-foreground">
              Você tem múltiplos perfis
            </h3>
            <p className="text-sm text-muted-foreground text-center">
              Selecione com qual perfil deseja entrar:
            </p>
            <div className="flex flex-col space-y-3 pt-2">
              {userRoles.map((role) => (
                <Button
                  key={role}
                  variant="outline"
                  className="h-11 text-base"
                  onClick={() => handleRoleSelection(role, authenticatedUser)}
                >
                  Entrar como: {role.charAt(0).toUpperCase() + role.slice(1)}
                </Button>
              ))}
            </div>
          </div>
        )}
        {children}
      </CardContent>
    </Card>
  );
}