import React, { useState } from 'react';
import CryptoJS from 'crypto-js';

const MASTER_USERNAME = "hop";
const MASTER_PASSWORD_HASH = "5cdf907c69ae7a7f0c2e18a67e9b70a4c4fc35f9582637354c1bc45edf092a79";

function LoginSimple({ onLoginSuccess }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("LoginSimple: Form submitted");
    
    const inputHash = CryptoJS.SHA256(password).toString();
    console.log("Username:", username, "| Match:", username === MASTER_USERNAME);
    console.log("Hash match:", inputHash === MASTER_PASSWORD_HASH);
    
    if (username === MASTER_USERNAME && inputHash === MASTER_PASSWORD_HASH) {
      sessionStorage.setItem("authenticated", "true");
      sessionStorage.setItem("authTime", Date.now().toString());
      onLoginSuccess();
    } else {
      setError("Invalid username or password");
    }
  };

  return (
    <div style={{ maxWidth: '400px', margin: '100px auto', padding: '20px', border: '1px solid #ccc' }}>
      <h2>Simple Login Test</h2>
      <form onSubmit={handleSubmit}>
        {error && <div style={{ color: 'red', marginBottom: '10px' }}>{error}</div>}
        
        <div style={{ marginBottom: '10px' }}>
          <label>Username:</label><br/>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            required
            style={{ width: '100%', padding: '8px' }}
          />
        </div>
        
        <div style={{ marginBottom: '10px' }}>
          <label>Password:</label><br/>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            style={{ width: '100%', padding: '8px' }}
          />
        </div>
        
        <button type="submit" style={{ width: '100%', padding: '10px', background: '#667eea', color: 'white', border: 'none', cursor: 'pointer' }}>
          Login (Press Enter or Click)
        </button>
      </form>
      <p style={{ marginTop: '20px', fontSize: '12px', color: '#666' }}>
        Credentials: hop / hop@2026ilovejesus<br/>
        Press Enter in any field to submit
      </p>
    </div>
  );
}

export default LoginSimple;
