"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { authClient } from "@/lib/auth-client";

export default function LoginForm({
  fallbackRedirect,
}: {
  fallbackRedirect?: string;
}) {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setSubmitting(true);

    const { data, error } = await authClient.signIn.email({
      email,
      password,
    });

    if (error) {
      setError(error.message ?? "Email ou mot de passe invalide.");
      setSubmitting(false);
      return;
    }

    if (data?.user) {
      // Redirect : si fallbackRedirect existe, suivre. Sinon, dispatch
      // sur le dashboard selon le rôle (le additional field 'role' n'est
      // pas typé par défaut côté client, donc cast léger).
      const role = (data.user as unknown as { role?: string }).role;
      const targetByRole =
        role === "admin" ? "/socialexadmin" : "/espace-client";
      router.push(fallbackRedirect ?? targetByRole);
      router.refresh();
    } else {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={onSubmit} className="space-y-6" noValidate>
      <div className="space-y-2">
        <label
          htmlFor="email"
          className="eyebrow !text-on-surface-variant block"
        >
          Email
        </label>
        <input
          id="email"
          type="email"
          required
          autoComplete="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
        />
      </div>

      <div className="space-y-2">
        <label
          htmlFor="password"
          className="eyebrow !text-on-surface-variant block"
        >
          Mot de passe
        </label>
        <input
          id="password"
          type="password"
          required
          minLength={10}
          autoComplete="current-password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
        />
      </div>

      {error && (
        <p className="text-error body-md">{error}</p>
      )}

      <button
        type="submit"
        disabled={submitting}
        className="btn btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {submitting ? "Connexion…" : "Se connecter"}
      </button>
    </form>
  );
}