"use client";

import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { ArrowRight, Lock, Mail } from "@/components/ui/icons";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { signIn } from "@/lib/auth/client";

export function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const next = searchParams.get("next");

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setLoading(true);

    const result = await signIn.email({
      email: email.trim(),
      password,
      rememberMe: true,
    });

    if (result.error) {
      setError(messageFromError(result.error));
      setLoading(false);
      return;
    }

    // L'utilisateur est connecte. On redirige vers la cible demandee, sinon
    // vers /apres-connexion qui lit la session cote serveur et envoie vers
    // /atelier-novelia ou /portail selon le role.
    router.push(next ?? "/apres-connexion");
    router.refresh();
  }

  return (
    <form className="mt-8 space-y-5" onSubmit={handleSubmit}>
      <Field id="email" label="Adresse e-mail" error={undefined}>
        <div className="relative">
          <Mail aria-hidden className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-faint pointer-events-none" />
          <Input
            type="email"
            name="email"
            autoComplete="email"
            inputMode="email"
            required
            placeholder="vous@entreprise.fr"
            className="pl-9"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={loading}
          />
        </div>
      </Field>

      <Field
        id="password"
        label="Mot de passe"
        trailingLabel={
          <Link
            href="/mot-de-passe-oublie"
            className="text-xs text-text-dim hover:text-accent transition-colors"
          >
            Oublie ?
          </Link>
        }
      >
        <div className="relative">
          <Lock aria-hidden className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-faint pointer-events-none" />
          <Input
            type="password"
            name="password"
            autoComplete="current-password"
            required
            placeholder="Mot de passe"
            className="pl-9"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            disabled={loading}
          />
        </div>
      </Field>

      {error ? (
        <p
          role="alert"
          className="rounded-md border border-[color:var(--color-danger)]/30 bg-[color:var(--color-danger)]/10 px-3 py-2 text-sm text-[color:var(--color-danger)]"
        >
          {error}
        </p>
      ) : null}

      <Button
        type="submit"
        variant="primary"
        className="w-full mt-2"
        size="lg"
        loading={loading}
      >
        Se connecter
        <ArrowRight className="size-4" />
      </Button>
    </form>
  );
}

function messageFromError(error: { code?: string; message?: string }): string {
  switch (error.code) {
    case "INVALID_EMAIL_OR_PASSWORD":
    case "INVALID_PASSWORD":
    case "USER_NOT_FOUND":
      return "Identifiants invalides. Verifiez votre e-mail et votre mot de passe.";
    case "BANNED_USER":
      return "Ce compte est suspendu. Contactez le support.";
    case "TOO_MANY_REQUESTS":
      return "Trop de tentatives. Reessayez dans quelques minutes.";
    default:
      return error.message ?? "Connexion impossible pour le moment.";
  }
}