/* global React */
// Yomee — Auth Shared
// Reusable header + buttons + legal disclaimer used by SignUp/SignIn.

const { useState: useStateAS } = React;

// Legacy local HelpTooltip — kept as a no-op shim so any straggler imports work.
function HelpTooltip() { return null; }

function AuthHeader({ onBack, screenKey, noHelp = false }) {
  const onHelp = () => {
    if (window.YomeeHelp && screenKey) window.YomeeHelp.toggle(screenKey);
  };
  return (
    <div
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        zIndex: 5,
        paddingTop: 64,
        display: "flex",
        justifyContent: "center",
      }}
    >
      <button
        onClick={onBack}
        aria-label="Atrás"
        style={{
          position: "absolute",
          left: 16,
          top: 70,
          width: 32,
          height: 32,
          background: "transparent",
          border: "none",
          padding: 0,
          cursor: "pointer",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <img src="assets/icon-arrow-left.svg" alt="" style={{ width: 22, height: 16 }} />
      </button>

      <img
        src="assets/yomee-logo-wordmark.png"
        alt="Yomee"
        style={{ width: 151, height: "auto" }}
      />

      {!noHelp && (
        <button
          onClick={onHelp}
          aria-label="Ayuda"
          style={{
            position: "absolute",
            right: 16,
            top: 70,
            width: 30,
            height: 30,
            borderRadius: "50%",
            background: "transparent",
            border: "1.5px solid var(--yo-ink)",
            padding: 0,
            cursor: "pointer",
            fontFamily: "var(--font-body)",
            fontWeight: 700,
            fontSize: 14,
            color: "var(--yo-ink)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            lineHeight: 1,
          }}
        >
          ?
        </button>
      )}
    </div>
  );
}

// SSO Button — charcoal pill, brand mark on left
function SsoButton({ provider, label, arrow = false, onClick }) {
  const [hover, setHover] = useStateAS(false);
  const [pressed, setPressed] = useStateAS(false);

  const bg = pressed
    ? "var(--yo-forest-700)"
    : hover
      ? "var(--yo-mint-700)"
      : "var(--yo-ink)";

  let icon;
  if (provider === "google") {
    icon = (
      <img
        src="assets/icon-google.svg"
        alt=""
        style={{ width: 22, height: 22, display: "block" }}
      />
    );
  } else {
    icon = (
      <img
        src="assets/icon-apple.svg"
        alt=""
        style={{ width: 22, height: 22, display: "block", filter: "invert(1) brightness(2)" }}
      />
    );
  }

  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPressed(false); }}
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
      style={{
        position: "relative",
        width: "100%",
        height: 56,
        borderRadius: 16,
        background: bg,
        color: "#fff",
        border: "none",
        padding: "0 22px",
        cursor: "pointer",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 14,
        fontFamily: "var(--font-mono)",
        fontWeight: 700,
        fontSize: 13,
        letterSpacing: "0.14em",
        transform: pressed ? "scale(0.985)" : "scale(1)",
        transition: "background 180ms ease-out, transform 100ms ease-out",
      }}
    >
      <span
        style={{
          position: "absolute",
          left: 22,
          top: "50%",
          transform: "translateY(-50%)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {icon}
      </span>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 8, whiteSpace: "nowrap" }}>
        {label}
        {arrow && <span style={{ fontSize: 14, marginTop: -1 }}>→</span>}
      </span>
    </button>
  );
}

// Outlined ghost button
function GhostButton({ children, onClick }) {
  const [hover, setHover] = useStateAS(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        width: "100%",
        height: 56,
        borderRadius: 16,
        background: hover ? "rgba(51,51,51,0.04)" : "transparent",
        color: "var(--yo-ink)",
        border: "1.5px solid var(--yo-ink)",
        padding: "0 20px",
        cursor: "pointer",
        fontFamily: "var(--font-mono)",
        fontWeight: 700,
        fontSize: 13,
        letterSpacing: "0.14em",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        transition: "background 160ms ease-out",
      }}
    >
      {children}
    </button>
  );
}

// Legal disclaimer
function LegalDisclaimer({ onOpenTerms, onOpenPrivacy }) {
  const linkBase = {
    background: "transparent",
    border: "none",
    padding: 0,
    margin: 0,
    cursor: "pointer",
    color: "var(--yo-ink)",
    fontFamily: "inherit",
    fontSize: "inherit",
    lineHeight: "inherit",
    fontWeight: 700,
    textDecoration: "underline",
    textDecorationThickness: 1.5,
    textUnderlineOffset: 3,
    letterSpacing: "0.01em",
    display: "inline",
    verticalAlign: "baseline",
  };
  return (
    <p
      style={{
        margin: 0,
        fontFamily: "var(--font-body)",
        fontSize: 13,
        lineHeight: "20px",
        color: "var(--yo-ink)",
        letterSpacing: "0.01em",
      }}
    >
      Al continuar, aceptas nuestros{" "}
      <button type="button" onClick={onOpenTerms} style={linkBase}>Términos y condiciones</button>
      <br />y <button type="button" onClick={onOpenPrivacy} style={linkBase}>Aviso de privacidad</button>
    </p>
  );
}

window.AuthHeader = AuthHeader;
window.SsoButton = SsoButton;
window.GhostButton = GhostButton;
window.LegalDisclaimer = LegalDisclaimer;
window.HelpTooltip = HelpTooltip;