/* global React */
const { useState } = React;

function LoadingScreen() {
  return (
    <div style={{minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--bg)"}}>
      <div style={{color:"var(--text-muted)",fontSize:14}}>Indlæser...</div>
    </div>
  );
}

function LoginScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    const { error } = await window.supabaseClient.auth.signInWithPassword({ email, password });
    if (error) setError("Forkert email eller kodeord");
    setLoading(false);
  };

  return (
    <div style={{minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--bg)"}}>
      <div style={{width:340,background:"var(--bg-card)",border:"1px solid var(--border)",borderRadius:"var(--radius)",boxShadow:"var(--shadow-lg)",padding:"28px 24px"}}>
        <div style={{marginBottom:20}}>
          <div style={{fontWeight:700,fontSize:18,color:"var(--text)",marginBottom:4}}>Festegnen 2026 · Lager</div>
          <div style={{fontSize:13,color:"var(--text-muted)"}}>Log ind for at fortsætte</div>
        </div>
        <form onSubmit={submit} style={{display:"flex",flexDirection:"column",gap:12}}>
          <div>
            <label style={{display:"block",fontSize:12,fontWeight:500,color:"var(--text-muted)",marginBottom:4}}>Email</label>
            <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)}
              placeholder="din@email.dk" required style={{width:"100%",boxSizing:"border-box"}}/>
          </div>
          <div>
            <label style={{display:"block",fontSize:12,fontWeight:500,color:"var(--text-muted)",marginBottom:4}}>Kodeord</label>
            <input className="input" type="password" value={password} onChange={e => setPassword(e.target.value)}
              placeholder="••••••••" required style={{width:"100%",boxSizing:"border-box"}}/>
          </div>
          {error && (
            <div style={{fontSize:12,color:"#c53030",background:"#fff5f5",padding:"8px 10px",borderRadius:6,border:"1px solid #fed7d7"}}>
              {error}
            </div>
          )}
          <button className="btn" data-variant="primary" type="submit" disabled={loading}
            style={{marginTop:4,width:"100%",justifyContent:"center"}}>
            {loading ? "Logger ind…" : "Log ind"}
          </button>
        </form>
      </div>
    </div>
  );
}

window.LagerAuth = { LoginScreen, LoadingScreen };