/* global React, Icon, Logo, Placeholder */
const { useState: useStateL, useEffect: useEffectL } = React;

const LoginScreen = ({ onEnter }) => {
  const [email, setEmail] = useStateL("");
  const [pw, setPw] = useStateL("");

  // ambient bars
  const bars = Array.from({ length: 70 }).map((_, i) => ({
    h: 20 + Math.abs(Math.sin(i * .4)) * 60 + Math.random() * 20,
    d: (i * 30) % 1800,
  }));

  return (
    <div className="login">
      <div className="login-bg">
        <img src="assets/hero-vocalist.jpg" alt="" />
      </div>
      <div className="fog" style={{ zIndex: 1 }}></div>
      <div className="grain"></div>

      <div className="waveform-ambient">
        {bars.map((b, i) => (
          <i key={i} style={{ height: `${b.h}%`, animationDelay: `${b.d}ms` }}></i>
        ))}
      </div>

      <div className="login-panel">
        <div className="login-panel-header">
          <div className="login-avatar"><Logo size={32} /></div>
          <span className="login-eyebrow">VIRAL TENSION · Members</span>
          <h1 className="login-title">Enter the Noise</h1>
          <p className="login-sub">Premium underground streaming for heavy emotional music.</p>
        </div>

        <div className="field">
          <input
            type="email"
            placeholder=" "
            value={email}
            onChange={e => setEmail(e.target.value)}
            onKeyDown={e => e.key === "Enter" && onEnter()}
          />
          <label>Email</label>
        </div>
        <div className="field">
          <input
            type="password"
            placeholder=" "
            value={pw}
            onChange={e => setPw(e.target.value)}
            onKeyDown={e => e.key === "Enter" && onEnter()}
          />
          <label>Password</label>
        </div>

        <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 6 }} onClick={onEnter}>
          Enter App <Icon name="arrowRight" size={16} />
        </button>

        <div className="trial-offer">
          <b>3-day free trial</b>
          <span>Then $4.99/month through Stripe. Free accounts can still preview 30 seconds of every song.</span>
        </div>

        <div className="divider">or continue with</div>

        <div className="oauth">
          <button onClick={onEnter}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="#1DB954"><circle cx="12" cy="12" r="11"/><path d="M17.5 16.5c-.2.3-.6.4-.9.2-2.5-1.5-5.6-1.8-9.3-1-.4.1-.7-.2-.8-.5-.1-.4.2-.7.5-.8 4-.9 7.5-.5 10.3 1.2.3.2.4.6.2.9zm1.5-3.4c-.3.4-.7.5-1.1.2-2.9-1.8-7.3-2.3-10.7-1.2-.4.1-.9-.1-1-.5-.1-.4.1-.9.5-1 3.9-1.2 8.7-.7 12.1 1.4.3.2.4.7.2 1.1zm.1-3.5c-3.4-2-9.1-2.2-12.4-1.2-.5.1-1.1-.2-1.2-.7-.1-.5.2-1.1.7-1.2 3.8-1.1 10.1-.9 14.1 1.4.5.3.6.9.4 1.4-.3.4-.9.6-1.4.3z" fill="#000"/></svg>
            Continue with Spotify
          </button>
          <button onClick={onEnter}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
            Continue with Apple
          </button>
        </div>

        <div className="login-foot">
          No API-key image generation — artwork uses local uploads or the logged-in ChatGPT account.
        </div>
      </div>
    </div>
  );
};

window.LoginScreen = LoginScreen;