"use client";

import { useState, useActionState } from "react";
import { loginAction, verifyTotpLoginAction, completeForcedPasswordChangeAction } from "@/lib/actions/auth";

const inputClass =
  "w-full rounded-lg bg-white/5 border border-white/10 px-4 py-2.5 text-sm text-[var(--rk-ink)] placeholder:text-[var(--rk-ink-muted)] focus:outline-none focus:border-white/30 transition-colors";
const labelClass = "text-xs uppercase tracking-[0.13em] text-[var(--rk-ink-muted)]";
const buttonClass =
  "mt-1 rounded-lg bg-white text-black text-sm font-medium py-2.5 hover:bg-white/90 transition-colors disabled:opacity-50";

// Bewusst kein useTranslations/next-intl — der Team-App-Bereich lebt
// außerhalb von [locale] (siehe app/team/layout.tsx) und ist wie der übrige
// Admin-Bereich ohnehin fest auf Deutsch ausgelegt.
export function TeamLoginForm() {
  const [state, formAction, pending] = useActionState(loginAction, {});
  const [totpState, totpFormAction, totpPending] = useActionState(verifyTotpLoginAction, {});
  const [pwState, pwFormAction, pwPending] = useActionState(completeForcedPasswordChangeAction, {});
  const [clientError, setClientError] = useState<string | null>(null);

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    const data = new FormData(e.currentTarget);
    if (!data.get("email") || !data.get("password")) {
      e.preventDefault();
      setClientError("Bitte E-Mail und Passwort eingeben.");
    } else {
      setClientError(null);
    }
  }

  if (state.mustChangePassword || totpState.mustChangePassword) {
    return (
      <form action={pwFormAction} className="flex flex-col gap-4">
        <p className="text-sm text-[var(--rk-ink-muted)]">Bitte lege ein neues Passwort fest.</p>
        <label className="flex flex-col gap-1.5">
          <span className={labelClass}>Neues Passwort</span>
          <input className={inputClass} name="password" type="password" autoComplete="new-password" required minLength={8} />
        </label>
        <label className="flex flex-col gap-1.5">
          <span className={labelClass}>Passwort bestätigen</span>
          <input className={inputClass} name="confirmPassword" type="password" autoComplete="new-password" required minLength={8} />
        </label>
        {pwState.error && <p className="text-sm text-red-400">{pwState.error}</p>}
        <button type="submit" disabled={pwPending} className={buttonClass}>
          {pwPending ? "…" : "Passwort speichern"}
        </button>
      </form>
    );
  }

  if (state.twoFactorRequired) {
    return (
      <form action={totpFormAction} className="flex flex-col gap-4">
        <p className="text-sm text-[var(--rk-ink-muted)]">Gib deinen 2FA-Code ein.</p>
        <label className="flex flex-col gap-1.5">
          <span className={labelClass}>Code</span>
          <input className={inputClass} name="code" type="text" autoComplete="one-time-code" required />
        </label>
        {totpState.error && <p className="text-sm text-red-400">{totpState.error}</p>}
        <button type="submit" disabled={totpPending} className={buttonClass}>
          {totpPending ? "…" : "Bestätigen"}
        </button>
      </form>
    );
  }

  return (
    <form action={formAction} onSubmit={handleSubmit} noValidate className="flex flex-col gap-4">
      <input type="hidden" name="locale" value="de" />
      {/* Weist loginAction an, ein Kundenkonto (role !== "staff") abzulehnen,
          statt es normal einzuloggen — siehe Kommentar in loginAction. */}
      <input type="hidden" name="staffOnly" value="1" />
      <label className="flex flex-col gap-1.5">
        <span className={labelClass}>E-Mail</span>
        <input className={inputClass} name="email" type="email" autoComplete="email" required />
      </label>
      <label className="flex flex-col gap-1.5">
        <span className={labelClass}>Passwort</span>
        <input className={inputClass} name="password" type="password" autoComplete="current-password" required />
      </label>
      {(clientError || state.error) && <p className="text-sm text-red-400">{clientError || state.error}</p>}
      <button type="submit" disabled={pending} className={buttonClass}>
        {pending ? "Anmelden…" : "Anmelden"}
      </button>
    </form>
  );
}