/* Sign in page — placeholder UI.
 *
 * This is a visual implementation only — submitting the form does NOT contact
 * any auth backend. On submit it shows a friendly "coming soon" state. When
 * the studio chooses an auth provider (Auth0, Clerk, Supabase, custom API,
 * Hostinger DB, etc.), wire `onSubmit` below to that provider.
 */

const signinStyles = {
  /* outer wrap centers the card vertically inside the available space */
  wrap: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "64px 24px",
    minHeight: "calc(100vh - 84px)",  // viewport minus header so footer doesn't push the card off
  },
  wrapMobile: {
    padding: "40px 20px",
    minHeight: "auto",
  },

  card: {
    width: "100%",
    maxWidth: 440,
    display: "flex",
    flexDirection: "column",
    gap: 28,
    padding: "44px 40px",
    border: "1px solid var(--line)",
    borderRadius: 12,
    background: "color-mix(in oklch, var(--bg) 70%, transparent)",
    backdropFilter: "blur(14px) saturate(140%)",
    WebkitBackdropFilter: "blur(14px) saturate(140%)",
    boxShadow: "0 24px 60px -20px rgba(0,0,0,0.55)",
  },
  cardMobile: {
    padding: "32px 24px",
    gap: 22,
    borderRadius: 10,
  },

  head: { display: "flex", flexDirection: "column", gap: 12 },
  title: {
    fontSize: "clamp(28px, 3.6vw, 38px)",
    lineHeight: 1.05,
    letterSpacing: "-0.025em",
    fontWeight: 500,
    margin: 0,
    color: "var(--fg)",
    textWrap: "balance",
  },
  titleItalic: { color: "var(--accent)", fontStyle: "italic", fontWeight: 300 },
  sub: {
    fontSize: 15,
    lineHeight: 1.5,
    color: "var(--fg-dim)",
    margin: 0,
  },

  form: { display: "flex", flexDirection: "column", gap: 18 },
  field: { display: "flex", flexDirection: "column", gap: 8 },
  labelRow: {
    display: "flex",
    alignItems: "baseline",
    justifyContent: "space-between",
    gap: 12,
  },
  label: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--fg-faint)",
  },
  forgot: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "var(--accent)",
    textDecoration: "none",
  },
  input: {
    background: "transparent",
    border: "none",
    borderBottom: "1px solid var(--line)",
    color: "var(--fg)",
    fontFamily: "inherit",
    fontSize: 16,
    padding: "10px 0",
    outline: "none",
    transition: "border-color 160ms ease",
  },

  remember: {
    display: "flex",
    alignItems: "center",
    gap: 10,
    fontSize: 13,
    color: "var(--fg-dim)",
    cursor: "pointer",
    userSelect: "none",
    margin: "4px 0 0",
  },
  checkbox: {
    width: 16,
    height: 16,
    accentColor: "var(--accent)",
    cursor: "pointer",
  },

  submit: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 10,
    background: "var(--fg)",
    color: "var(--bg)",
    border: "none",
    padding: "16px 24px",
    borderRadius: 999,
    fontFamily: "inherit",
    fontSize: 14,
    fontWeight: 500,
    letterSpacing: "0.01em",
    cursor: "pointer",
    transition: "background 160ms ease, transform 160ms ease",
    marginTop: 6,
  },

  divider: {
    display: "flex",
    alignItems: "center",
    gap: 14,
    margin: "4px 0",
  },
  dividerLine: {
    flex: 1,
    height: 1,
    background: "var(--line)",
  },
  dividerLabel: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--fg-faint)",
  },

  helper: {
    fontSize: 13,
    lineHeight: 1.5,
    color: "var(--fg-dim)",
    textAlign: "center",
    margin: 0,
  },
  helperLink: {
    color: "var(--fg)",
    textDecoration: "underline",
    textUnderlineOffset: 3,
    textDecorationColor: "var(--accent)",
  },

  /* Inline error banner — appears above the Sign in button when submit fails */
  errorBanner: {
    display: "flex",
    flexDirection: "column",
    gap: 6,
    padding: "14px 16px",
    border: "1px solid color-mix(in oklch, var(--accent) 45%, transparent)",
    borderLeft: "2px solid var(--accent)",
    borderRadius: 8,
    background: "color-mix(in oklch, var(--accent) 10%, transparent)",
  },
  errorTitle: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--accent)",
    margin: 0,
  },
  errorBody: {
    fontSize: 13.5,
    lineHeight: 1.55,
    color: "var(--fg)",
    margin: 0,
  },
  errorLink: {
    color: "var(--accent)",
    textDecoration: "none",
    borderBottom: "1px solid color-mix(in oklch, var(--accent) 60%, transparent)",
  },

  /* Forgot password hint — toggled by clicking "Forgot?" */
  forgotHint: {
    fontSize: 13,
    lineHeight: 1.5,
    color: "var(--fg-dim)",
    margin: "8px 0 0",
    padding: "10px 12px",
    border: "1px solid var(--line)",
    borderRadius: 6,
    background: "color-mix(in oklch, var(--bg) 50%, transparent)",
  },
  forgotHintLink: {
    color: "var(--accent)",
    textDecoration: "none",
    borderBottom: "1px solid color-mix(in oklch, var(--accent) 60%, transparent)",
  },

  /* "coming soon" placeholder shown after submit */
  notice: {
    display: "flex",
    flexDirection: "column",
    gap: 14,
    padding: "20px 22px",
    border: "1px solid var(--line)",
    borderLeft: "2px solid var(--accent)",
    borderRadius: 8,
    background: "color-mix(in oklch, var(--accent) 8%, transparent)",
  },
  noticeLabel: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--accent)",
    margin: 0,
  },
  noticeBody: {
    fontSize: 14.5,
    lineHeight: 1.55,
    color: "var(--fg)",
    margin: 0,
  },
  noticeActions: {
    display: "flex",
    gap: 10,
    flexWrap: "wrap",
    marginTop: 4,
  },
  ghostBtn: {
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    background: "transparent",
    color: "var(--fg)",
    border: "1px solid var(--glass-border)",
    padding: "10px 16px",
    borderRadius: 999,
    fontFamily: "inherit",
    fontSize: 13,
    cursor: "pointer",
    textDecoration: "none",
  },
};

function SigninForm({ isMobile }) {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [remember, setRemember] = React.useState(true);
  const [showError, setShowError] = React.useState(false);
  const [showForgotHint, setShowForgotHint] = React.useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    // No backend yet — Padre Studios is invitation-only, so any submitted
    // email triggers the "not recognized" state. When real auth is wired,
    // replace this with the provider call and only show the error on a true
    // 401/404 from the auth backend.
    setShowError(true);
  };

  // Build the mailto: with a sensible prefilled subject. encodeURIComponent
  // handles the em dash and any future copy edits cleanly.
  const accessRequestHref =
    "mailto:info@padrestudios.com" +
    "?subject=" + encodeURIComponent("Padre Studios — Access request") +
    (email ? "&body=" + encodeURIComponent(`Hello,\n\nI'd like to request access to the studio account for ${email}.\n\nThanks.`) : "");
  const passwordResetHref =
    "mailto:info@padrestudios.com" +
    "?subject=" + encodeURIComponent("Padre Studios — Password reset");

  return (
    <form style={signinStyles.form} onSubmit={onSubmit} noValidate>
      <div style={signinStyles.field}>
        <div style={signinStyles.labelRow}>
          <label htmlFor="ps-signin-email" style={signinStyles.label}>Email</label>
        </div>
        <input
          id="ps-signin-email"
          name="email"
          type="email"
          autoComplete="email"
          required
          value={email}
          onChange={(e) => { setEmail(e.target.value); setShowError(false); }}
          style={signinStyles.input}
        />
      </div>

      <div style={signinStyles.field}>
        <div style={signinStyles.labelRow}>
          <label htmlFor="ps-signin-password" style={signinStyles.label}>Password</label>
          <a
            href={passwordResetHref}
            onClick={(e) => { e.preventDefault(); setShowForgotHint((v) => !v); }}
            style={signinStyles.forgot}
            aria-expanded={showForgotHint}
            aria-controls="ps-forgot-hint"
          >
            Forgot?
          </a>
        </div>
        <input
          id="ps-signin-password"
          name="password"
          type="password"
          autoComplete="current-password"
          required
          value={password}
          onChange={(e) => { setPassword(e.target.value); setShowError(false); }}
          style={signinStyles.input}
        />
        {showForgotHint && (
          <p id="ps-forgot-hint" style={signinStyles.forgotHint} role="status">
            Forgot your password? Email{" "}
            <a href={passwordResetHref} style={signinStyles.forgotHintLink}>
              info@padrestudios.com
            </a>{" "}
            and we'll reset it for you.
          </p>
        )}
      </div>

      <label style={signinStyles.remember}>
        <input
          type="checkbox"
          checked={remember}
          onChange={(e) => setRemember(e.target.checked)}
          style={signinStyles.checkbox}
        />
        Keep me signed in on this device
      </label>

      {showError && (
        <div style={signinStyles.errorBanner} role="alert">
          <p style={signinStyles.errorTitle}>Email not recognized</p>
          <p style={signinStyles.errorBody}>
            Padre Studios is accessible by invitation only. To request access,
            email{" "}
            <a href={accessRequestHref} style={signinStyles.errorLink}>
              info@padrestudios.com
            </a>{" "}
            and we'll get you set up.
          </p>
        </div>
      )}

      <button
        type="submit"
        style={signinStyles.submit}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = "var(--accent)";
          e.currentTarget.style.transform = "translateY(-1px)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = "var(--fg)";
          e.currentTarget.style.transform = "translateY(0)";
        }}
      >
        Sign in <span aria-hidden="true" style={{ fontSize: 16 }}>→</span>
      </button>

      <div style={signinStyles.divider} aria-hidden="true">
        <span style={signinStyles.dividerLine} />
        <span style={signinStyles.dividerLabel}>or</span>
        <span style={signinStyles.dividerLine} />
      </div>

      <p style={signinStyles.helper}>
        Need access?{" "}
        <a href={accessRequestHref} style={signinStyles.helperLink}>
          Email the studio
        </a>{" "}
        and we'll set you up.
      </p>
    </form>
  );
}

function SigninPage() {
  const { isMobile } = window.useViewport();
  return (
    <window.PageShell active="" backdrop="quiet">
      <div style={{ ...signinStyles.wrap, ...(isMobile ? signinStyles.wrapMobile : null) }}>
        <div style={{ ...signinStyles.card, ...(isMobile ? signinStyles.cardMobile : null) }}>
          <header style={signinStyles.head}>
            <window.Eyebrow>Account</window.Eyebrow>
            <h1 style={signinStyles.title}>
              Welcome <span style={signinStyles.titleItalic}>back.</span>
            </h1>
            <p style={signinStyles.sub}>
              Sign in to your Padre Studios account.
            </p>
          </header>
          <SigninForm isMobile={isMobile} />
        </div>
      </div>
    </window.PageShell>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<SigninPage />);