import React, { useState, useEffect, useMemo } from "react";
import { useAuth } from "../../auth/AuthContext";
import { registerUser } from "../../api/client";

const THEME_LABELS = { dark: "Dark", blue: "Blue", light: "Light" };
const LAST_SIGNUP_USER_KEY = "sociowire:lastSignupUser";

const KC_BASE =
  (import.meta?.env?.VITE_KEYCLOAK_BASE_URL) || "https://auth.sociowire.com";
const KC_REALM =
  (import.meta?.env?.VITE_KEYCLOAK_REALM) || "sociowire";
const KC_CLIENT =
  (import.meta?.env?.VITE_KEYCLOAK_CLIENT_ID) || "sociowire";

function isEmailVerifyError(raw) {
  const msg = String(raw || "").toLowerCase();
  return (
    msg.includes("not fully set up") ||
    msg.includes("verify") ||
    msg.includes("verification") ||
    msg.includes("required action") ||
    (msg.includes("email") && msg.includes("verified"))
  );
}

function normalizeAuthMessage(raw) {
  const msg = String(raw || "").trim();
  if (!msg) return "";

  const lower = msg.toLowerCase();

  if (isEmailVerifyError(lower)) {
    return "Ton compte est créé, mais l’email n’est pas confirmé. Clique “Vérifier mon email” (Keycloak), puis utilise le lien reçu par email.";
  }

  if (
    lower.includes("invalid user credentials") ||
    lower.includes("bad credentials") ||
    lower.includes("invalid_grant")
  ) {
    return "Mauvais username ou mot de passe.";
  }

  if (msg.length > 220) return msg.slice(0, 220) + "…";
  return msg;
}

function buildKeycloakAuthUrl() {
  const redirectUri = `${window.location.origin}/auth/verified`;
  const url =
    `${KC_BASE}/realms/${encodeURIComponent(KC_REALM)}` +
    `/protocol/openid-connect/auth` +
    `?client_id=${encodeURIComponent(KC_CLIENT)}` +
    `&redirect_uri=${encodeURIComponent(redirectUri)}` +
    `&response_type=code&scope=openid`;
  return url;
}

export default function TopBar({ theme = "dark", onChangeTheme }) {
  const {
    loading,
    authenticated,
    username,
    login,
    logout,
    resendVerificationEmail,
    lastError,
    lastInfo,
  } = useAuth();

  const [showAuth, setShowAuth] = useState(false);
  const [mode, setMode] = useState("login");

  const [loginUser, setLoginUser] = useState("");
  const [loginPass, setLoginPass] = useState("");

  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [regUser, setRegUser] = useState("");
  const [regEmail, setRegEmail] = useState("");
  const [regPass, setRegPass] = useState("");
  const [signupError, setSignupError] = useState("");
  const [signupInfo, setSignupInfo] = useState("");
  const [signupLoading, setSignupLoading] = useState(false);

  const prettyError = useMemo(() => normalizeAuthMessage(lastError), [lastError]);
  const showVerifyHelp = useMemo(() => isEmailVerifyError(lastError), [lastError]);

  const isVerifiedPage =
    typeof window !== "undefined" && window.location?.pathname === "/auth/verified";

  const openModal = (nextMode) => {
    setMode(nextMode);
    setShowAuth(true);
    setSignupError("");
    setSignupInfo("");
  };

  const closeModal = () => {
    setShowAuth(false);
    setLoginPass("");
    setSignupError("");
    setSignupInfo("");
  };

  // ✅ If error happens, open modal so errors are not in topbar
  useEffect(() => {
    if (prettyError) {
      setMode("login");
      setShowAuth(true);
    }
  }, [prettyError]);

  // ✅ On /auth/verified: open login + prefill username
  useEffect(() => {
    if (!isVerifiedPage) return;
    setMode("login");
    setShowAuth(true);

    try {
      const lastU = localStorage.getItem(LAST_SIGNUP_USER_KEY) || "";
      if (lastU && !loginUser) setLoginUser(lastU);
    } catch {}
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isVerifiedPage]);

  // ✅ After login on /auth/verified, go home
  useEffect(() => {
    if (!authenticated) return;
    if (typeof window === "undefined") return;
    const path = window.location?.pathname || "";
    if (path === "/auth/verified") {
      try { window.history.replaceState({}, "", "/"); } catch {}
    }
  }, [authenticated]);

  const handleLoginSubmit = async (e) => {
    e.preventDefault();
    await login(loginUser, loginPass);
  };

  const handleSignupSubmit = async (e) => {
    e.preventDefault();
    setSignupError("");
    setSignupInfo("");

    if (!firstName.trim() || !lastName.trim() || !regUser.trim() || !regEmail.trim() || !regPass) {
      setSignupError("First name, last name, username, email and password are required.");
      return;
    }

    try {
      setSignupLoading(true);

      await registerUser({
        username: regUser.trim(),
        email: regEmail.trim(),
        password: regPass,
        firstName: firstName.trim(),
        lastName: lastName.trim(),
      });

      try { localStorage.setItem(LAST_SIGNUP_USER_KEY, regUser.trim()); } catch {}

      // ✅ Do NOT auto-login (verify email flow)
      setSignupInfo("Compte créé ✅ Vérifie ton email (spam inclus), puis connecte-toi.");
      setMode("login");
      setLoginUser(regUser.trim());
      setLoginPass("");
    } catch (err) {
      console.error(err);
      setSignupError(err.message || "Registration error.");
    } finally {
      setSignupLoading(false);
    }
  };

  const NoticeBox = ({ variant, children }) => (
    <div className={"sw-notice sw-notice--" + variant}>
      {children}
    </div>
  );

  return (
    <>
      <header className="topbar">
        <div style={{ display: "flex", alignItems: "center", gap: "0.6rem" }}>
          <div className="logo-circle">SW</div>

          <div className="title-block">
            <div className="main-title">SOCIOWIRE.com</div>
            <div className="sub-title">Wired to life</div>
          </div>
        </div>

        <div className="topbar-right">
          <div className="theme-switch">
            {["dark", "blue", "light"].map((t) => (
              <button
                key={t}
                type="button"
                className={"theme-dot" + (theme === t ? " theme-dot-active" : "")}
                title={THEME_LABELS[t]}
                onClick={() => onChangeTheme && onChangeTheme(t)}
              >
                {THEME_LABELS[t][0]}
              </button>
            ))}
          </div>

          {authenticated ? (
            <div style={{ display: "flex", alignItems: "center", gap: "0.45rem" }}>
              {/* ✅ one single user chip */}
              <div className="user-chip" title={username || ""}>
                <span className="user-avatar">
                  <i className="fa-solid fa-user-astronaut" />
                </span>
                <span className="user-name">{username || "user"}</span>
                <span className="user-badge">
                  <i className="fa-solid fa-circle-check" />
                  Connecté
                </span>
              </div>

              <button className="btn-primary" onClick={logout}>
                Logout
              </button>
            </div>
          ) : (
            <div style={{ display: "flex", gap: "0.3rem" }}>
              <button type="button" className="btn-primary" onClick={() => openModal("login")}>
                Login
              </button>
              <button type="button" className="btn-secondary" onClick={() => openModal("signup")}>
                Sign up
              </button>
            </div>
          )}
        </div>
      </header>

      {showAuth && (
        <div className="auth-modal-backdrop" onClick={closeModal}>
          <div className="auth-modal" onClick={(e) => e.stopPropagation()}>
            <div className="auth-modal-header">
              <button
                type="button"
                className={"auth-tab" + (mode === "login" ? " auth-tab-active" : "")}
                onClick={() => setMode("login")}
              >
                Login
              </button>
              <button
                type="button"
                className={"auth-tab" + (mode === "signup" ? " auth-tab-active" : "")}
                onClick={() => setMode("signup")}
              >
                Sign up
              </button>
              <button type="button" className="auth-close" onClick={closeModal}>
                ✕
              </button>
            </div>

            {/* ✅ Verified page success message */}
            {isVerifiedPage && !authenticated && (
              <NoticeBox variant="success">
                <b>✅ Email confirmé.</b>&nbsp;Connecte-toi pour continuer.
              </NoticeBox>
            )}

            {/* ✅ Any error/info now lives INSIDE modal */}
            {prettyError && (
              <NoticeBox variant="error">
                <i className="fa-solid fa-circle-xmark" style={{ marginRight: 8 }} />
                {prettyError}
              </NoticeBox>
            )}

            {!prettyError && lastInfo && (
              <NoticeBox variant="info">
                <i className="fa-solid fa-circle-info" style={{ marginRight: 8 }} />
                {lastInfo}
              </NoticeBox>
            )}

            {/* ✅ Email verify helper buttons */}
            {showVerifyHelp && (
              <NoticeBox variant="warn">
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <div style={{ fontWeight: 900 }}>
                    <i className="fa-solid fa-triangle-exclamation" style={{ marginRight: 8 }} />
                    Vérification email requise
                  </div>
                  <div style={{ opacity: 0.92, lineHeight: 1.25 }}>
                    Ton login “modal” ne peut pas compléter l’action Keycloak. Ouvre la page Keycloak,
                    clique “proceed”, puis clique le lien reçu par email.
                  </div>
                  <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                    <a className="btn-secondary" href={buildKeycloakAuthUrl()}>
                      Vérifier mon email (Keycloak)
                    </a>
                    {typeof resendVerificationEmail === "function" && (
                      <button
                        type="button"
                        className="btn-secondary"
                        onClick={resendVerificationEmail}
                      >
                        Renvoyer l’email
                      </button>
                    )}
                  </div>
                </div>
              </NoticeBox>
            )}

            {mode === "login" ? (
              <form className="auth-form" onSubmit={handleLoginSubmit}>
                <label>
                  Username
                  <input
                    type="text"
                    value={loginUser}
                    onChange={(e) => setLoginUser(e.target.value)}
                    autoComplete="username"
                  />
                </label>
                <label>
                  Password
                  <input
                    type="password"
                    value={loginPass}
                    onChange={(e) => setLoginPass(e.target.value)}
                    autoComplete="current-password"
                  />
                </label>
                <button type="submit" className="btn-primary btn-full" disabled={loading}>
                  {loading ? "..." : "Sign in"}
                </button>
              </form>
            ) : (
              <form className="auth-form" onSubmit={handleSignupSubmit}>
                <div className="auth-row">
                  <label>
                    First name
                    <input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
                  </label>
                  <label>
                    Last name
                    <input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
                  </label>
                </div>
                <label>
                  Username
                  <input type="text" value={regUser} onChange={(e) => setRegUser(e.target.value)} />
                </label>
                <label>
                  Email
                  <input type="email" value={regEmail} onChange={(e) => setRegEmail(e.target.value)} />
                </label>
                <label>
                  Password
                  <input type="password" value={regPass} onChange={(e) => setRegPass(e.target.value)} />
                </label>

                {signupError && <NoticeBox variant="error">{signupError}</NoticeBox>}
                {signupInfo && <NoticeBox variant="success">{signupInfo}</NoticeBox>}

                <button type="submit" className="btn-primary btn-full" disabled={signupLoading}>
                  {signupLoading ? "..." : "Create account"}
                </button>
              </form>
            )}
          </div>
        </div>
      )}
    </>
  );
}
