InkNote/frontend/src/ui/AuthScreen.jsx

import { useMemo, useState } from "react";
import * as sync from "../syncEngine";

/* ═══════ AUTH SCREEN ═══════ */
export function AuthScreen({ onLogin, dark }) {
  const [isLogin, setIsLogin] = useState(true);
  const [username, setUsername] = useState("");
  const [pass, setPass] = useState("");
  const [name, setName] = useState("");
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(false);
  const T = useMemo(
    () => ({
      bg: dark ? "#0d1117" : "#f6f8fa",
      card: dark ? "#161b22" : "#fff",
      border: dark ? "#30363d" : "#d0d7de",
      text: dark ? "#e6edf3" : "#1f2328",
      muted: dark ? "#8b949e" : "#656d76",
      accent: dark ? "#388bfd" : "#0969da",
      danger: dark ? "#f85149" : "#cf222e",
    }),
    [dark]
  );
  const submit = async () => {
    const u = username.trim();
    if (!u || !pass) {
      setErr("Username and password required");
      return;
    }
    if (!isLogin && !/^[a-zA-Z0-9._-]{3,32}$/.test(u)) {
      setErr("Username must be 3-32 chars: letters, digits, . _ -");
      return;
    }
    setLoading(true);
    setErr("");
    try {
      const user = isLogin ? await sync.login(u, pass) : await sync.register(u, pass, name || undefined);
      onLogin(user);
    } catch (e) {
      setErr(e.message === "AUTH" ? "Invalid credentials" : e.message);
    } finally {
      setLoading(false);
    }
  };
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "100vh",
        background: T.bg,
        fontFamily: "'DM Sans',sans-serif",
      }}
    >
      <div
        style={{
          background: T.card,
          borderRadius: 24,
          padding: 40,
          width: 400,
          maxWidth: "90vw",
          boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
          border: `1px solid ${T.border}`,
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 28 }}>
          <div
            style={{
              width: 42,
              height: 42,
              borderRadius: 14,
              background: `linear-gradient(135deg,${T.accent},#a855f7)`,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontSize: 22,
            }}
          >
            ✏️
          </div>
          <div>
            <div
              style={{
                fontSize: 22,
                fontWeight: 700,
                color: T.text,
                fontFamily: "'Newsreader',Georgia,serif",
              }}
            >
              InkNote
            </div>
            <div style={{ fontSize: 12, color: T.muted }}>
              {isLogin ? "Sign in to sync your notes" : "Create your account"}
            </div>
          </div>
        </div>
        {!isLogin && (
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Display name"
            style={{
              width: "100%",
              padding: "12px 16px",
              borderRadius: 12,
              border: `1px solid ${T.border}`,
              background: T.bg,
              color: T.text,
              fontSize: 14,
              outline: "none",
              marginBottom: 12,
              boxSizing: "border-box",
            }}
          />
        )}
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          placeholder="Username"
          autoFocus
          autoCapitalize="none"
          autoCorrect="off"
          spellCheck={false}
          autoComplete="username"
          style={{
            width: "100%",
            padding: "12px 16px",
            borderRadius: 12,
            border: `1px solid ${T.border}`,
            background: T.bg,
            color: T.text,
            fontSize: 14,
            outline: "none",
            marginBottom: 12,
            boxSizing: "border-box",
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter") submit();
          }}
        />
        <input
          type="password"
          value={pass}
          onChange={(e) => setPass(e.target.value)}
          placeholder="Password"
          autoComplete={isLogin ? "current-password" : "new-password"}
          style={{
            width: "100%",
            padding: "12px 16px",
            borderRadius: 12,
            border: `1px solid ${T.border}`,
            background: T.bg,
            color: T.text,
            fontSize: 14,
            outline: "none",
            marginBottom: 16,
            boxSizing: "border-box",
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter") submit();
          }}
        />
        {err && (
          <div
            style={{
              color: T.danger,
              fontSize: 12,
              marginBottom: 12,
              padding: "8px 12px",
              borderRadius: 8,
              background: T.danger + "12",
            }}
          >
            {err}
          </div>
        )}
        <button
          onClick={submit}
          disabled={loading}
          style={{
            width: "100%",
            padding: "12px",
            borderRadius: 12,
            border: "none",
            background: T.accent,
            color: "#fff",
            cursor: "pointer",
            fontSize: 14,
            fontWeight: 600,
            marginBottom: 16,
            opacity: loading ? 0.6 : 1,
          }}
        >
          {loading ? "..." : isLogin ? "Sign In" : "Create Account"}
        </button>
        <div style={{ textAlign: "center", fontSize: 13, color: T.muted }}>
          {isLogin ? "Don't have an account? " : "Already have an account? "}
          <button
            onClick={() => {
              setIsLogin(!isLogin);
              setErr("");
            }}
            style={{
              background: "none",
              border: "none",
              color: T.accent,
              cursor: "pointer",
              fontSize: 13,
              fontWeight: 600,
              textDecoration: "underline",
            }}
          >
            {isLogin ? "Sign Up" : "Sign In"}
          </button>
        </div>
      </div>
    </div>
  );
}