function Login({ onLogin }) {
  const [username, setUsername] = useState("");
  const [pass, setPass]         = useState("");
  const [show, setShow]         = useState(false);
  const [loading, setLoading]   = useState(false);
  const [error, setError]       = useState("");

  const submit = async (e) => {
    e?.preventDefault();
    if (!username.trim() || !pass.trim()) return;
    setLoading(true); setError("");
    try {
      const data = await API.login(username.trim(), pass.trim());
      localStorage.setItem("crm_auth", "1");
      localStorage.setItem("crm_user_name", data.name || username.trim());
      onLogin(data.name || username.trim(), data.role || "manager");
    } catch {
      setError("Невірний логін або пароль");
    } finally {
      setLoading(false);
    }
  };

  const inputStyle = (hasError) => ({
    width: "100%", boxSizing: "border-box", height: 46, padding: "0 14px 0 38px",
    background: "var(--bg-raised)", color: "var(--fg-primary)",
    border: `1px solid ${hasError ? "var(--danger)" : "var(--border-default)"}`,
    borderRadius: 10, fontSize: 14, outline: "none", fontFamily: "inherit",
    transition: "border-color 150ms",
  });

  return (
    <div style={{
      flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
      height: "100dvh", padding: 20, background: "var(--bg-base)",
    }}>
      <div style={{
        width: "100%", maxWidth: 380,
        background: "var(--bg-panel)", border: "1px solid var(--border-default)",
        borderRadius: 16, padding: 32, boxShadow: "var(--shadow-2)",
      }}>
        {/* Logo */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 32 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 14,
            background: "linear-gradient(135deg, #6366F1, #8B5CF6)",
            display: "flex", alignItems: "center", justifyContent: "center",
            marginBottom: 16, boxShadow: "0 12px 32px rgba(99,102,241,.35)",
          }}>
            <Icon name="zap" size={28} color="#fff"/>
          </div>
          <h1 style={{ fontSize: 22, fontWeight: 600, color: "var(--fg-primary)", margin: 0, marginBottom: 6 }}>Вхід в Digitalshop</h1>
          <p style={{ fontSize: 13, color: "var(--fg-muted)", margin: 0 }}>Увійдіть до робочого простору</p>
        </div>

        <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {/* Username */}
          <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--fg-muted)" }}>Логін</span>
            <div style={{ position: "relative" }}>
              <Icon name="user" size={16} style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--fg-muted)" }}/>
              <input
                type="text"
                value={username}
                onChange={e => { setUsername(e.target.value); setError(""); }}
                placeholder="Введіть логін"
                autoFocus
                autoComplete="username"
                style={inputStyle(!!error)}
              />
            </div>
          </label>

          {/* Password */}
          <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--fg-muted)" }}>Пароль</span>
            <div style={{ position: "relative" }}>
              <Icon name="lock" size={16} style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--fg-muted)" }}/>
              <input
                type={show ? "text" : "password"}
                value={pass}
                onChange={e => { setPass(e.target.value); setError(""); }}
                placeholder="Введіть пароль"
                autoComplete="current-password"
                style={{ ...inputStyle(!!error), paddingRight: 42 }}
              />
              <button type="button" onClick={() => setShow(s => !s)} style={{
                position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)",
                width: 32, height: 32, border: 0, background: "transparent",
                color: "var(--fg-muted)", cursor: "pointer", borderRadius: 6,
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name={show ? "eye-off" : "eye"} size={16}/>
              </button>
            </div>
            {error && <span style={{ fontSize: 12, color: "var(--danger)" }}>{error}</span>}
          </label>

          <button type="submit" disabled={loading || !username.trim() || !pass.trim()} style={{
            height: 48, marginTop: 6, border: 0, borderRadius: 12,
            background: "var(--accent)", color: "#fff", fontSize: 15, fontWeight: 600,
            cursor: loading ? "wait" : "pointer", fontFamily: "inherit",
            boxShadow: "0 8px 20px rgba(99,102,241,.3)",
            opacity: loading || !username.trim() || !pass.trim() ? 0.7 : 1,
            transition: "opacity 150ms",
          }}>
            {loading ? "Вхід…" : "Увійти"}
          </button>
        </form>
      </div>
    </div>
  );
}

window.Login = Login;