// login.jsx — workspace sign-in gate (prototype / mock auth)

function Login({ onLogin, error }) {
  const { useState } = React;
  const USERS = window.SEED.USERS;
  const [email, setEmail] = useState('dilini@ideapipeline.lk');
  const [pw, setPw] = useState('demo1234');
  const [show, setShow] = useState(false);
  const [remember, setRemember] = useState(true);
  const [err, setErr] = useState(error || '');
  const [busy, setBusy] = useState(false);

  // Real Supabase email/password auth. On success we hand the app the
  // authenticated user's UUID; RLS then scopes every query to that user.
  const signIn = async (mail, pass) => {
    if (!window.db) { setErr('Backend not connected.'); return; }
    setBusy(true); setErr('');
    const { data, error } = await window.db.auth.signInWithPassword({
      email: (mail || '').trim(), password: pass,
    });
    if (error) { setErr(error.message); setBusy(false); return; }
    onLogin(data.user.id);
  };

  const submit = (e) => {
    if (e) e.preventDefault();
    if (!email.trim()) { setErr('Please enter your email address.'); return; }
    if (!pw.trim()) { setErr('Please enter your password.'); return; }
    signIn(email, pw);
  };

  // teammate shortcuts: demo accounts all share the password "demo1234"
  const quick = (u) => signIn(u.email, 'demo1234');

  return (
    <div className="login-stage">
      <div className="login-orb" />
      <div className={'login-card' + (busy ? ' busy' : '')}>
        <div className="login-brand">
          <span className="brand-mark"><window.Icon name="bolt" size={19} stroke={2.2} /></span>
          <span className="brand-name">Idea<span style={{ color: 'var(--primary)' }}>Pipeline</span>
            <span className="login-brand-sub">System</span></span>
        </div>

        <h1 className="login-title">Sign in to your workspace</h1>
        <p className="login-sub">Welcome back — pick up where your team left off.</p>

        <form className="login-form" onSubmit={submit}>
          <label className="lbl">Email address</label>
          <input className="mini-input big" type="email" autoComplete="username" value={email}
            onChange={(e) => { setEmail(e.target.value); setErr(''); }} placeholder="you@ideapipeline.lk" />

          <label className="lbl">Password</label>
          <div className="pw-wrap">
            <input className="mini-input big" type={show ? 'text' : 'password'} autoComplete="current-password"
              value={pw} onChange={(e) => { setPw(e.target.value); setErr(''); }} placeholder="••••••••" />
            <button type="button" className="pw-toggle" onClick={() => setShow((s) => !s)}>{show ? 'Hide' : 'Show'}</button>
          </div>

          {err && <div className="login-err"><window.Icon name="flag" size={13} stroke={2.4} />{err}</div>}

          <div className="login-row">
            <label className="login-check">
              <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
              <span>Keep me signed in</span>
            </label>
            <a className="login-link" href="#" onClick={(e) => e.preventDefault()}>Forgot password?</a>
          </div>

          <button className="btn-primary login-btn" type="submit" disabled={busy}>
            {busy ? 'Signing in…' : <>Sign in <window.Icon name="arrow" size={17} /></>}
          </button>
        </form>

        <div className="login-divider"><span>or sign in as a teammate</span></div>
        <div className="login-accounts">
          {USERS.map((u) => (
            <button key={u.id} className="login-acct" onClick={() => quick(u)} disabled={busy} title={u.email}>
              <window.Avatar id={u.id} size={26} />
              <span className="login-acct-name">{u.name.split(' ')[0]}</span>
            </button>
          ))}
        </div>

        <p className="login-demo">Connected to Supabase Auth. Demo accounts use the password <strong>demo1234</strong> — or tap a teammate above.</p>
      </div>
    </div>
  );
}

window.Login = Login;