/* SER-OS — Login Screen
   Centered card layout matching Serenity design language.
   Conceptual Odoo auth flow: /web/session/authenticate */

function LoginScreen({ onLogin }) {
  const [email,       setEmail]       = React.useState("");
  const [password,    setPassword]    = React.useState("");
  const [showPwd,     setShowPwd]     = React.useState(false);
  const [rememberMe,  setRememberMe]  = React.useState(false);
  const [loading,     setLoading]     = React.useState(false);
  const [error,       setError]       = React.useState("");

  const clearError = () => { if (error) setError(""); };

  const handleSubmit = (e) => {
    e && e.preventDefault();
    if (!email.trim() || !password) {
      setError("Please enter your email and password.");
      return;
    }
    setError("");
    setLoading(true);
    // Conceptual: POST /web/session/authenticate with { db, login, password }
    setTimeout(() => {
      setLoading(false);
      onLogin({ email, rememberMe });
    }, 900);
  };

  return (
    <div style={{
      minHeight: "100vh",
      background: "var(--surface-app)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      padding: "32px 16px",
    }}>
      <div style={{
        width: "100%",
        maxWidth: 440,
        background: "var(--surface-card)",
        borderRadius: "var(--radius-xl)",
        border: "1px solid var(--border-subtle)",
        padding: "48px",
        boxShadow: "var(--shadow-card)",
      }}>

        {/* Logo */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 32 }}>
          <img src="./assets/logo-serenity-navy.png" alt="Serenity" style={{ height: 112, maxWidth: "100%" }} />
        </div>

        {/* Heading */}
        <div style={{ marginBottom: 32, textAlign: "center" }}>
          <h1 style={{
            font: "var(--type-h1)",
            fontSize: 28,
            lineHeight: "36px",
            letterSpacing: "-0.5px",
            color: "var(--fg-primary)",
            margin: "0 0 10px",
          }}>
            Welcome Back
          </h1>
          <p style={{
            fontSize: 14,
            color: "var(--fg-secondary)",
            letterSpacing: "var(--tracking-body)",
            lineHeight: "20px",
            margin: 0,
          }}>
            Sign in to access your operational workspace
          </p>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} noValidate>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>

            {/* Email */}
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <label style={{
                fontSize: 13, fontWeight: 500,
                color: "var(--fg-primary)",
                letterSpacing: "var(--tracking-body)",
              }}>
                Email
              </label>
              <Input
                icon={<SerIcons.Mail size={16} />}
                type="email"
                value={email}
                onChange={(e) => { setEmail(e.target.value); clearError(); }}
                placeholder="Enter your corporate email"
              />
            </div>

            {/* Password */}
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <label style={{
                fontSize: 13, fontWeight: 500,
                color: "var(--fg-primary)",
                letterSpacing: "var(--tracking-body)",
              }}>
                Password
              </label>
              <LoginPasswordInput
                value={password}
                onChange={(v) => { setPassword(v); clearError(); }}
                show={showPwd}
                onToggle={() => setShowPwd((s) => !s)}
              />
            </div>

            {/* Remember me + Forgot password */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <label style={{
                display: "flex", alignItems: "center", gap: 8,
                cursor: "pointer",
              }}>
                <input
                  type="checkbox"
                  checked={rememberMe}
                  onChange={(e) => setRememberMe(e.target.checked)}
                  style={{
                    width: 16, height: 16,
                    accentColor: "var(--brand-navy)",
                    cursor: "pointer",
                  }}
                />
                <span style={{
                  fontSize: 13,
                  color: "var(--fg-secondary)",
                  letterSpacing: "var(--tracking-body)",
                }}>
                  Remember me
                </span>
              </label>
              <button
                type="button"
                style={{
                  all: "unset",
                  fontSize: 13, fontWeight: 500,
                  color: "var(--brand-navy)",
                  cursor: "pointer",
                  letterSpacing: "var(--tracking-body)",
                }}
              >
                Forgot Password?
              </button>
            </div>

            {/* Error */}
            {error && (
              <p style={{
                fontSize: 13,
                color: "var(--status-danger)",
                letterSpacing: "var(--tracking-body)",
                margin: 0,
              }}>
                {error}
              </p>
            )}

            {/* CTA */}
            <Button
              variant="primary-navy"
              size="md"
              style={{ width: "100%", height: 48, marginTop: 4 }}
              onClick={handleSubmit}
              disabled={loading}
            >
              {loading ? "Signing in…" : "Sign In with Odoo Credentials"}
            </Button>

            {/* Footer note */}
            <p style={{
              textAlign: "center",
              fontSize: 12,
              color: "var(--fg-tertiary)",
              letterSpacing: "var(--tracking-body)",
              margin: 0,
            }}>
              Authenticates via your Odoo workspace
            </p>

          </div>
        </form>
      </div>
    </div>
  );
}

/* Password field — mirrors Input styling exactly, adds trailing eye toggle */
function LoginPasswordInput({ value, onChange, show, onToggle }) {
  return (
    <div style={{ position: "relative" }}>
      <input
        type={show ? "text" : "password"}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="••••••••"
        style={{
          width: "100%", boxSizing: "border-box",
          height: 48, padding: "0 44px 0 14px",
          fontFamily: "inherit", fontSize: 14, color: "var(--fg-primary)",
          background: "#FFFFFF",
          border: "1px solid var(--border-subtle)",
          borderRadius: 8,
          letterSpacing: "-0.15px",
          WebkitAppearance: "none",
          /* Focus styling handled by the global :focus-visible rule
             (2px outline in --border-focus, 2px offset). */
        }}
      />
      <button
        type="button"
        tabIndex={-1}
        onClick={onToggle}
        aria-label={show ? "Hide password" : "Show password"}
        style={{
          all: "unset",
          position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)",
          cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--fg-tertiary)",
          width: 24, height: 24,
          borderRadius: 4,
        }}
      >
        {show ? <SerIcons.EyeOff size={16} /> : <SerIcons.Eye size={16} />}
      </button>
    </div>
  );
}

Object.assign(window, { LoginScreen });