import { useState } from 'react'
import './Login.css'

function Login({ onLogin }) {
  const [credentials, setCredentials] = useState({
    username: '',
    password: ''
  })
  const [error, setError] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    setError('')

    // Get credentials from runtime config (set via Helm values)
    const ADMIN_USERNAME = window.ENV?.VITE_ADMIN_USERNAME || import.meta.env.VITE_ADMIN_USERNAME || 'admin'
    const ADMIN_PASSWORD = window.ENV?.VITE_ADMIN_PASSWORD || import.meta.env.VITE_ADMIN_PASSWORD || 'wedding2025'

    if (credentials.username === ADMIN_USERNAME && credentials.password === ADMIN_PASSWORD) {
      localStorage.setItem('isAuthenticated', 'true')
      onLogin()
    } else {
      setError('שם משתמש או סיסמה שגויים')
    }
  }

  const handleChange = (e) => {
    const { name, value } = e.target
    setCredentials(prev => ({
      ...prev,
      [name]: value
    }))
  }

  return (
    <div className="login-page" dir="rtl">
      <div className="login-container">
        <h1>💒 כניסה לניהול רשימת מוזמנים</h1>
        <p className="login-subtitle">הזן שם משתמש וסיסמה לגישה</p>

        <form onSubmit={handleSubmit} className="login-form">
          <div className="form-group">
            <label htmlFor="username">שם משתמש</label>
            <input
              type="text"
              id="username"
              name="username"
              value={credentials.username}
              onChange={handleChange}
              placeholder="הזן שם משתמש"
              required
              autoComplete="username"
            />
          </div>

          <div className="form-group">
            <label htmlFor="password">סיסמה</label>
            <input
              type="password"
              id="password"
              name="password"
              value={credentials.password}
              onChange={handleChange}
              placeholder="הזן סיסמה"
              required
              autoComplete="current-password"
            />
          </div>

          {error && <div className="error-message">{error}</div>}

          <button type="submit" className="btn btn-primary">
            התחבר
          </button>
        </form>
      </div>
    </div>
  )
}

export default Login