"use client";

import { FormEvent, useEffect, useRef, useState } from "react";
import "./login.css";
import "./requests.css";

type Mode = "login" | "register" | "forgot";

export default function LoginPage() {
  const [setup, setSetup] = useState<boolean | null>(null), [mode, setMode] = useState<Mode>("login");
  const [branding,setBranding]=useState({name:"Moventra ERP",subtitle:"Logistics & Transport ERP",initials:"ME",logoUrl:"/brand/moventra-logo-source.jpg",markUrl:"/brand/moventra-mark.png"});
  const [error, setError] = useState(""), [message, setMessage] = useState(""), [saving, setSaving] = useState(false);
  const [username,setUsername]=useState(""),[usernameCheck,setUsernameCheck]=useState<{checking:boolean;available:boolean;error:string;suggestions:string[]}|null>(null);
  const usernameTimer=useRef<number|undefined>(undefined),usernameSequence=useRef(0);
  useEffect(() => {
    fetch("/api/auth/status").then(r => r.json()).then(body => setSetup(Boolean(body.setupRequired))).catch(() => setError("Backend indisponible."));
    fetch("/api/branding").then(r=>r.ok?r.json():Promise.reject()).then(setBranding).catch(()=>{});
  }, []);
  function changeMode(next: Mode) { setMode(next); setError(""); setMessage(""); setUsername(""); setUsernameCheck(null); }
  function checkUsername(value:string,form:HTMLFormElement|null){setUsername(value);if(mode!=="register")return;window.clearTimeout(usernameTimer.current);const sequence=++usernameSequence.current;setUsernameCheck({checking:true,available:false,error:"Vérification…",suggestions:[]});usernameTimer.current=window.setTimeout(async()=>{const fields=form?new FormData(form):new FormData(),params=new URLSearchParams({value,name:String(fields.get("name")||""),email:String(fields.get("email")||"")});try{const response=await fetch(`/api/auth/username?${params}`),body=await response.json();if(sequence===usernameSequence.current)setUsernameCheck({checking:false,available:Boolean(body.available),error:String(body.error||""),suggestions:Array.isArray(body.suggestions)?body.suggestions:[]})}catch{if(sequence===usernameSequence.current)setUsernameCheck({checking:false,available:false,error:"Vérification momentanément indisponible.",suggestions:[]})}},350)}

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault(); setSaving(true); setError(""); setMessage("");
    const data = Object.fromEntries(new FormData(event.currentTarget));
    if ((setup || mode !== "login") && data.password !== data.confirmPassword) { setError("Les mots de passe ne correspondent pas."); setSaving(false); return; }
    if(mode==="register"&&usernameCheck&&!usernameCheck.available){setError(usernameCheck.error||"Choisissez un login disponible.");setSaving(false);return}
    const endpoint = setup ? "/api/auth/setup" : mode === "login" ? "/api/auth/login" : "/api/auth/request";
    const payload = { ...data, rememberMe: data.rememberMe === "on", kind: mode === "register" ? "REGISTRATION" : mode === "forgot" ? "PASSWORD_RESET" : undefined };
    try {
      const response = await fetch(endpoint, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(payload) });
      const body = await response.json();
      if (!response.ok) throw new Error(body.error || "Opération impossible.");
      if (mode !== "login" && !setup) { setMessage(body.message); setMode("login"); setUsername(""); setUsernameCheck(null); setSaving(false); return; }
      const returnTo = new URLSearchParams(window.location.search).get("returnTo");
      window.location.href = returnTo?.startsWith("/") && !returnTo.startsWith("//") ? returnTo : "/";
    } catch (reason) { setError(reason instanceof Error ? reason.message : "Opération impossible."); setSaving(false); }
  }

  const title = setup ? "Créer l’administrateur" : mode === "register" ? "Nouvelle inscription" : mode === "forgot" ? "Mot de passe oublié" : "Se connecter";
  const description = setup ? "Définissez le premier compte administrateur de l’application." : mode === "register" ? "Le compte restera bloqué jusqu’à la validation d’un administrateur." : mode === "forgot" ? "Le nouveau mot de passe sera activé après validation d’un administrateur." : "Saisissez vos identifiants Moventra ERP.";
  return <main className="login-screen"><section className="login-card">
    <header className="moventra-brand-header" aria-label={`${branding.name} — ${branding.subtitle}`}>
      <img
        className="moventra-brand-mark"
        src={branding.markUrl || "/brand/moventra-mark.png"}
        alt=""
        aria-hidden="true"
      />
      <div className="moventra-brand-wordmark">
        <strong>{branding.name.replace(/\s+ERP$/i, "")}</strong>
        <small>{branding.subtitle}</small>
      </div>
    </header>
    {setup===null?<p className="login-loading">Initialisation…</p>:<>
      <div className="login-title"><p>{setup?"PREMIÈRE UTILISATION":mode==="login"?"ESPACE SÉCURISÉ":"DEMANDE SOUMISE À VALIDATION"}</p><h1>{title}</h1><span>{description}</span></div>
      {error&&<p className="login-error">{error}</p>}{message&&<p className="login-success">{message}</p>}
        <form onSubmit={submit} data-confirm="none">
        {(setup||mode==="register")&&<label><span>Nom complet</span><input name="name" required autoComplete="name" onBlur={event=>mode==="register"&&checkUsername(username,event.currentTarget.form)}/></label>}
        {(setup||mode!=="login")&&<label><span>Adresse e-mail</span><input name="email" type="email" required autoComplete="email" onBlur={event=>mode==="register"&&checkUsername(username,event.currentTarget.form)}/></label>}
        <label><span>Login</span><input name="username" required minLength={3} autoComplete="username" value={username} onChange={event=>checkUsername(event.target.value,event.currentTarget.form)}/></label>
        {mode==="register"&&usernameCheck&&<div className={`username-check ${usernameCheck.available?"available":"unavailable"}`}><strong>{usernameCheck.checking?"Vérification du login…":usernameCheck.available?`✓ Le login « ${username} » est disponible`:`! ${usernameCheck.error}`}</strong>{usernameCheck.suggestions.length>0&&<div><span>Logins disponibles proposés :</span>{usernameCheck.suggestions.map(suggestion=><button type="button" key={suggestion} onClick={event=>checkUsername(suggestion,event.currentTarget.form)}>@{suggestion}</button>)}</div>}</div>}
        <label><span>{mode==="forgot"?"Nouveau mot de passe":"Mot de passe"}</span><input name="password" type="password" required minLength={8} autoComplete={setup||mode!=="login"?"new-password":"current-password"}/></label>
        {(setup||mode!=="login")&&<label><span>Confirmer le mot de passe</span><input name="confirmPassword" type="password" required minLength={8} autoComplete="new-password"/></label>}
        {!setup&&mode==="login"&&<label className="remember-me"><input name="rememberMe" type="checkbox"/><span>Se souvenir de moi pendant 30 jours</span></label>}
        {mode==="register"&&<p className="registration-approval-note"><strong>Validation obligatoire</strong><span>Votre login sera réservé, mais il restera inutilisable jusqu’à l’approbation d’un administrateur. Vous recevrez alors l’autorisation de vous connecter.</span></p>}
        <button disabled={saving}>{saving?"Traitement…":setup?"Créer et ouvrir Moventra ERP":mode==="register"?"Envoyer l’inscription":mode==="forgot"?"Demander la réinitialisation":"Connexion"}</button>
      </form>
      {!setup&&<nav className="login-links">{mode!=="login"&&<button type="button" onClick={()=>changeMode("login")}>Retour à la connexion</button>}{mode==="login"&&<><button type="button" onClick={()=>changeMode("forgot")}>Mot de passe oublié</button><button type="button" onClick={()=>changeMode("register")}>Créer une nouvelle inscription</button></>}</nav>}
    </>}
  </section></main>;
}