// Přihlášení / registrace — modal i samostatná stránka.
// Vizuální základ; logika (skutečné přihlášení, Google OAuth) se řeší ve WordPressu.
(function () {
  if (typeof React === "undefined") return;
  const DS = window.VElaStvNajmanDesignSystem_bc3fc2;
  const { Button, Input } = DS;
  const Icon = window.VNIcon;

  // Oficiální barevné „G" pro standardní přihlášení přes Google.
  function GoogleMark() {
    return (
      <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true" style={{ flex: "none" }}>
        <path fill="#4285F4" d="M45.1 24.5c0-1.6-.1-3.1-.4-4.5H24v8.5h11.8c-.5 2.7-2 5-4.4 6.6v5.5h7.1c4.1-3.8 6.6-9.4 6.6-16.1z" />
        <path fill="#34A853" d="M24 46c5.9 0 10.9-2 14.5-5.4l-7.1-5.5c-2 1.3-4.5 2.1-7.4 2.1-5.7 0-10.5-3.8-12.2-9H4.5v5.7C8.1 41.1 15.4 46 24 46z" />
        <path fill="#FBBC05" d="M11.8 28.2c-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2v-5.7H4.5C3 17.1 2.1 20.4 2.1 24s.9 6.9 2.4 9.9l7.3-5.7z" />
        <path fill="#EA4335" d="M24 10.7c3.2 0 6.1 1.1 8.4 3.3l6.3-6.3C34.9 4.1 29.9 2 24 2 15.4 2 8.1 6.9 4.5 14.1l7.3 5.7c1.7-5.2 6.5-9.1 12.2-9.1z" />
      </svg>
    );
  }

  // Vlastní obsah formuláře — sdílený pro modal i stránku.
  function AuthForm({ onLogin, compact }) {
    const [mode, setMode] = React.useState("login"); // login | register | forgot
    const D = window.SHOP_DATA;
    const submit = (e) => {
      e.preventDefault();
      if (mode === "forgot") { setMode("login"); return; }
      onLogin && onLogin(D && D.account ? D.account.user : null);
    };

    return (
      <div className="kit-auth__form">
        <div className="kit-auth__brandrow">
          <svg width="34" height="38" viewBox="0 0 48 54" fill="none" aria-hidden="true">
            <path d="M24 2 L45.65 14.5 L45.65 39.5 L24 52 L2.35 39.5 L2.35 14.5 Z" stroke="#7A4E1E" strokeWidth="2.4" strokeLinejoin="round" />
            <path d="M24 16 L34.39 22 L34.39 34 L24 40 L13.61 34 L13.61 22 Z" fill="#C8841E" />
          </svg>
          <span className="vn-eyebrow"><Icon name="hexagon" size={13} />Včelařství Najman</span>
        </div>

        <h2 className="kit-auth__title">
          {mode === "login" ? "Vítejte zpět" : mode === "register" ? "Vytvořit účet" : "Zapomenuté heslo"}
        </h2>
        <p className="kit-auth__sub">
          {mode === "login" ? "Přihlaste se ke svému účtu a sledujte objednávky i oblíbené medy."
            : mode === "register" ? "Založte si účet — uvidíte své objednávky, předobjednávky a oblíbené."
            : "Zadejte e-mail a pošleme vám odkaz pro obnovení hesla."}
        </p>

        <form className="kit-auth__fields" onSubmit={submit}>
          {mode === "register" && (
            <Input label="Jméno a příjmení" type="text" placeholder="Anna Nováková" autoComplete="name" required
              icon={<Icon name="user" />} />
          )}
          <Input label="E-mail" type="email" placeholder="vas@email.cz" autoComplete="email" required
            icon={<Icon name="mail" />} />
          {mode !== "forgot" && (
            <div className="kit-auth__pwd">
              <Input label="Heslo" type="password" placeholder="••••••••"
                autoComplete={mode === "login" ? "current-password" : "new-password"} required
                icon={<Icon name="lock" />} />
              {mode === "login" && (
                <button type="button" className="kit-auth__link kit-auth__forgot" onClick={() => setMode("forgot")}>
                  Zapomněli jste heslo?
                </button>
              )}
            </div>
          )}

          <Button type="submit" variant="primary" size="lg" block
            iconEnd={<Icon name="arrowRight" size={18} />}>
            {mode === "login" ? "Přihlásit" : mode === "register" ? "Vytvořit účet" : "Poslat odkaz"}
          </Button>
        </form>

        {mode !== "forgot" && (
          <>
            <div className="kit-auth__or"><span>nebo</span></div>
            <button type="button" className="kit-auth__google" onClick={() => onLogin && onLogin(window.SHOP_DATA && window.SHOP_DATA.account ? window.SHOP_DATA.account.user : null)}>
              <GoogleMark /> Pokračovat přes Google
            </button>
          </>
        )}

        <p className="kit-auth__switch">
          {mode === "login" ? (
            <>Nemáte účet? <button type="button" className="kit-auth__link" onClick={() => setMode("register")}>Vytvořit účet</button></>
          ) : mode === "register" ? (
            <>Už máte účet? <button type="button" className="kit-auth__link" onClick={() => setMode("login")}>Přihlásit se</button></>
          ) : (
            <>Vzpomněli jste si? <button type="button" className="kit-auth__link" onClick={() => setMode("login")}>Zpět na přihlášení</button></>
          )}
        </p>
      </div>
    );
  }

  // Modal varianta — otevírá se z profilové ikony v hlavičce.
  function Auth({ open, onClose, onLogin }) {
    React.useEffect(() => {
      const onKey = (e) => { if (e.key === "Escape" && open) onClose && onClose(); };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, [open, onClose]);

    return (
      <div className="kit-auth" data-open={open} onClick={onClose}>
        <div className="kit-auth__panel" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Přihlášení">
          <button className="kit-auth__close" onClick={onClose} aria-label="Zavřít"><Icon name="close" size={20} /></button>
          <AuthForm onLogin={onLogin} />
        </div>
      </div>
    );
  }

  Object.assign(window, { VNAuth: Auth, VNAuthForm: AuthForm });
})();