"use client";

import { useState } from "react";
import { signIn } from "next-auth/react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useParams } from "next/navigation";

export default function LoginPage() {
  const t = useTranslations("auth");
  const params = useParams();
  const locale = params.locale as string;
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;
    setLoading(true);
    setError("");

    try {
      await signIn("resend", {
        email,
        redirectTo: `/${locale}/auth/verify`,
      });
    } catch {
      setError("Une erreur est survenue.");
      setLoading(false);
    }
  };

  return (
    <div
      style={{
        minHeight: "calc(100vh - 64px)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "24px",
      }}
    >
      <div
        style={{
          width: "100%",
          maxWidth: 420,
        }}
      >
        {/* Logo */}
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <div
            style={{
              width: 56,
              height: 56,
              background: "#1d4ed8",
              borderRadius: 14,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontSize: 28,
              margin: "0 auto 16px",
            }}
          >
            🦉
          </div>
          <h1 style={{ fontSize: 24, fontWeight: 700, color: "#f1f5f9" }}>
            OwlCub Academy
          </h1>
          <p style={{ fontSize: 14, color: "#94a3b8", marginTop: 6 }}>
            {t("login_title")}
          </p>
        </div>

        {/* Form card */}
        <div className="card">
          <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div>
              <label
                htmlFor="email"
                style={{
                  display: "block",
                  fontSize: 13,
                  fontWeight: 600,
                  color: "#94a3b8",
                  marginBottom: 6,
                }}
              >
                Adresse email
              </label>
              <input
                id="email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder={t("email_placeholder")}
                required
                autoFocus
                style={{ fontSize: 15 }}
              />
            </div>

            {error && (
              <p
                style={{
                  fontSize: 13,
                  color: "#f87171",
                  background: "rgba(239,68,68,0.1)",
                  border: "1px solid rgba(239,68,68,0.3)",
                  borderRadius: 6,
                  padding: "10px 12px",
                }}
              >
                {error}
              </p>
            )}

            <button
              type="submit"
              disabled={loading || !email}
              className="btn btn-primary"
              style={{
                justifyContent: "center",
                opacity: loading || !email ? 0.7 : 1,
                cursor: loading || !email ? "not-allowed" : "pointer",
                padding: "12px",
                fontSize: 15,
              }}
            >
              {loading ? (
                <span>Envoi en cours…</span>
              ) : (
                <>
                  <span>✉️</span>
                  <span>{t("send_link")}</span>
                </>
              )}
            </button>
          </form>

          <p
            style={{
              fontSize: 12,
              color: "#64748b",
              textAlign: "center",
              marginTop: 20,
              lineHeight: 1.5,
            }}
          >
            Nous vous enverrons un lien de connexion sécurisé par email. Aucun mot de passe requis.
          </p>
        </div>

        <div style={{ textAlign: "center", marginTop: 20 }}>
          <Link
            href={`/${locale}/courses`}
            style={{ fontSize: 13, color: "#94a3b8" }}
          >
            ← Retour aux formations
          </Link>
        </div>
      </div>
    </div>
  );
}