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

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

function initialLetter(name = "") {
  const s = (name || "").trim();
  return s ? s[0].toUpperCase() : "G";
}

export default function TopBar({ theme = "dark", onChangeTheme }) {
  const {
    loading,
    authenticated,
    username,
    login,
    logout,
    needsEmailVerification,
    openKeycloak,
    lastError,
    lastErrorCode,
    lastInfo,
    clearError,
    clearInfo,
  } = 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 openModal = (nextMode) => {
    setMode(nextMode);
    setShowAuth(true);
    setSignupError("");
    setSignupInfo("");
  };

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

  useEffect(() => {
    if (authenticated) setShowAuth(false);
  }, [authenticated]);

  /* SW_URL_NOTICE:BEGIN */
  useEffect(() => {
    try {
      const qs = new URLSearchParams(window.location.search || "");
      const verified = qs.get("verified") || qs.get("email_verified");
      const signup = qs.get("signup");
      const notice = qs.get("notice");

      if (verified === "1" || verified === "true") {
        setSignupInfo("✅ Email confirmé. Tu peux te connecter.");
        setMode("login");
        setShowAuth(true);
      } else if (signup === "1" || signup === "true") {
        setSignupInfo("✅ Compte créé. Vérifie tes emails (et le spam), puis connecte-toi.");
        setMode("login");
        setShowAuth(true);
      } else if (notice) {
        // allow custom notice (URL-encoded)
        const msg = decodeURIComponent(notice);
        if (msg && msg.trim()) {
          setSignupInfo(msg.trim());
          setMode("login");
          setShowAuth(true);
        }
      }

      // clean URL (remove params without reload)
      if (verified or signup or notice):
        const clean = window.location.pathname + (window.location.hash || "");
        window.history.replaceState({}, "", clean);
    } catch {
      // ignore
    }
  }, []);
  /* SW_URL_NOTICE:END */


  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(),
      });

      setSignupInfo("Account created. Check your inbox (spam) to verify your email, then login.");
      setMode("login");
      setLoginUser(regUser.trim());
      setLoginPass("");
    } catch (err) {
      console.error(err);
      setSignupError(err.message || "Registration error.");
    } finally {
      setSignupLoading(false);
    }
  };

  const toast = useMemo(() => {
    if (lastError) {
      const t = needsEmailVerification ? "warn" : "error";
      const title = needsEmailVerification ? "Vérification email requise" : "Connexion impossible";
      return { type: t, title, message: lastError };
    }
    if (lastInfo) {
      return { type: "success", title: "", message: lastInfo };
    }
    return null;
  }, [lastError, lastInfo, needsEmailVerification]);

  return (
    <>
      {/* Toast area (under topbar) */}
      {(toast?.message) && (
        <div className="sw-toast-wrap">
          <AuthToast
            type={toast.type}
            title={toast.title}
            message={toast.message}
            onClose={() => {
              if (lastError) clearError();
              if (lastInfo) clearInfo();
            }}
          />
          {needsEmailVerification && (
            <div style={{ maxWidth: 980, margin: "10px auto 0", display: "flex", gap: 10, justifyContent: "center" }}>
              <button className="btn-secondary" type="button" onClick={openKeycloak}>
                Ouvrir Keycloak (Proceed)
              </button>
            </div>
          )}
        </div>
      )}

      <header className="topbar">
        <div style={{ display: "flex", alignItems: "center", gap: "0.65rem" }}>
          <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" }}>
              <div className="sw-userchip" title={username}>
                <div className="sw-avatar">
                  <span>{initialLetter(username)}</span>
                </div>
                <div className="sw-usertext">
                  <div className="sw-userline">Connecté</div>
                  <div className="sw-userhandle">@{username || "user"}</div>
                </div>
              </div>
              <button className="btn-primary" onClick={logout}>
                Logout
              </button>
            </div>
          ) : (
            <div style={{ display: "flex", gap: "0.35rem", alignItems: "center" }}>
              <div className="sw-userchip" title="Guest">
                <div className="sw-avatar">
                  <i className="fa-solid fa-user" />
                </div>
                <div className="sw-usertext">
                  <div className="sw-userline">{loading ? "Loading…" : "Guest"}</div>
                  <div className="sw-userhandle">anon</div>
                </div>
              </div>

              <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>

            {/* SW_MODAL_NOTICE:BEGIN */}
            {signupInfo ? (
              <div className="auth-notice auth-notice-success">
                {signupInfo}
              </div>
            ) : null}
            {/* SW_MODAL_NOTICE:END */}

            {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 && <div className="auth-error">{signupError}</div>}
                {signupInfo && (
                  <div className="auth-error" style={{ background: "rgba(34,197,94,0.14)", borderColor: "rgba(34,197,94,0.55)", color: "#d1fae5" }}>
                    {signupInfo}
                  </div>
                )}

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