/* Login — email + password, with password reset by email */
function AuthShell({ children, foot }) {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <div className="authpage">
      <aside className="authside">
        <a href="index.html" className="logo on-dark"><span className="logo-mark">LT</span><span className="logo-t"><b>Labour Tech</b><span className="logo-tag">Digitizing India's construction workforce</span></span></a>
        <div>
          <h2>Workforce procurement, in one place.</h2>
          <p style={{ marginTop: 14 }}>Post requirements, compare bids, reach the registered labour pool — all from your business account.</p>
        </div>
        <Ticks items={[
          <span><b>Verified businesses only</b> — GST and KYC checked before anyone transacts</span>,
          <span><b>Labour pool access</b> — availability by trade and city in your subscribed cities</span>,
          <span><b>No commission</b> — a flat subscription, GST invoiced</span>,
        ]} />
        <div style={{ marginTop: 'auto', fontSize: 13, color: 'rgba(255,255,255,.55)' }}>{foot}</div>
      </aside>
      <main className="authmain"><div className="authcard">{children}</div></main>
    </div>
  );
}

const Err = ({ children }) => children ? <div className="note" style={{ borderColor: '#f3c2c2', background: '#fdf0f0', color: '#b3261e' }}>{children}</div> : null;

function LoginPage() {
  const isReset = /[?&]reset=1/.test(location.search);
  const [mode, setMode] = React.useState(isReset ? 'setpw' : 'login');
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [pw2, setPw2] = React.useState('');
  const [show, setShow] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [role, setRole] = React.useState('epc');
  const isEmail = v => /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v.trim());

  const enter = () => {
    try { localStorage.setItem('lt_role', role); localStorage.setItem('lt_signed_in', '1'); } catch (e) {}
    window.location.href = 'dashboard.html';
  };

  const signIn = async () => {
    const v = email.trim();
    if (!isEmail(v)) { setErr('Enter a valid email address.'); return; }
    if (!pw) { setErr('Enter your password.'); return; }
    setErr(''); setBusy(true);
    try {
      const u = await LTAuth.signIn(v, pw);
      try { localStorage.setItem('lt_verified', LTAuth.verified(u) ? '1' : '0'); } catch (e) {}
      /* staff accounts land in the admin panel, not the client dashboard */
      const staff = await LTAuth.staffRole();
      if (staff) {
        try { localStorage.setItem('lt_admin_mode', 'live'); } catch (e) {}
        window.location.href = 'admin/panel.html';
        return;
      }
      enter();
    } catch (e) {
      const m = e.message || '';
      setErr(/not confirmed|confirm/i.test(m)
        ? 'This account is not confirmed yet. Open the verification link we emailed you, then sign in.'
        : (/invalid/i.test(m) ? 'Email or password is incorrect.' : (m || 'Could not sign in.')));
      setBusy(false);
    }
  };

  const sendReset = async () => {
    const v = email.trim();
    if (!isEmail(v)) { setErr('Enter the email address on your account.'); return; }
    setErr(''); setBusy(true);
    try { await LTAuth.sendReset(v); setMode('resetsent'); } catch (e) { setErr(e.message || 'Could not send the reset email.'); }
    setBusy(false);
  };

  const savePw = async () => {
    if (pw.length < 8) { setErr('Use at least eight characters.'); return; }
    if (pw !== pw2) { setErr('The two passwords do not match.'); return; }
    setErr(''); setBusy(true);
    try { await LTAuth.setPassword(pw); enter(); } catch (e) { setErr(e.message || 'Could not set the password. Request a fresh reset link.'); setBusy(false); }
  };

  const pwField = (label, val, setVal, ph) => (
    <div className="field"><label>{label} <i>*</i></label>
      <div style={{ position: 'relative' }}>
        <input type={show ? 'text' : 'password'} value={val} placeholder={ph} onChange={e => { setVal(e.target.value); setErr(''); }} onKeyDown={e => e.key === 'Enter' && (mode === 'login' ? signIn() : savePw())} style={{ paddingRight: 62 }} />
        <button onClick={() => setShow(!show)} style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', border: 0, background: 'none', color: 'var(--blue)', fontSize: 13, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer' }}>{show ? 'Hide' : 'Show'}</button>
      </div>
    </div>
  );

  return (
    <AuthShell foot={<span>No account yet? <a href="get-started.html" style={{ color: '#fff', fontWeight: 600 }}>Register your business</a></span>}>
      {mode === 'login' && (
        <React.Fragment>
          <span className="eyebrow">Business log in</span>
          <h2 className="h3" style={{ margin: '10px 0 8px' }}>Sign in to your account</h2>
          <p className="small" style={{ marginBottom: 26 }}>Use the email address and password you set when you registered.</p>
          <div style={{ display: 'grid', gap: 16 }}>
            <div className="field"><label>Email address <i>*</i></label>
              <input value={email} onChange={e => { setEmail(e.target.value); setErr(''); }} placeholder="you@company.com" onKeyDown={e => e.key === 'Enter' && signIn()} /></div>
            {pwField('Password', pw, setPw, 'Your password')}
            <div className="field"><label>Account type</label>
              <select value={role} onChange={e => setRole(e.target.value)}>{Object.values(LT_PLANS).map(p => <option key={p.key} value={p.key}>{p.name}</option>)}</select></div>
            <Err>{err}</Err>
            <button className="btn btn-primary" onClick={signIn} disabled={busy}>{busy ? 'Signing in…' : 'Sign in'}</button>
            <a className="link" href="#" onClick={e => { e.preventDefault(); setErr(''); setMode('forgot'); }}>Forgot your password?</a>
          </div>
          <div className="note" style={{ marginTop: 24 }}>Exploring the platform? <a className="link" href="#" onClick={e => { e.preventDefault(); enter(); }}>Open the dashboard with demo data</a>.</div>
          <p className="small" style={{ marginTop: 16 }}>Labour Tech staff? <a className="link" href="admin/index.html">Sign in to the admin panel</a>.</p>
        </React.Fragment>
      )}

      {mode === 'forgot' && (
        <React.Fragment>
          <span className="eyebrow">Password reset</span>
          <h2 className="h3" style={{ margin: '10px 0 8px' }}>Reset your password</h2>
          <p className="small" style={{ marginBottom: 26 }}>We email a link to the address on your account. It opens this page and lets you set a new password.</p>
          <div style={{ display: 'grid', gap: 16 }}>
            <div className="field"><label>Email address <i>*</i></label>
              <input value={email} onChange={e => { setEmail(e.target.value); setErr(''); }} placeholder="you@company.com" onKeyDown={e => e.key === 'Enter' && sendReset()} /></div>
            <Err>{err}</Err>
            <button className="btn btn-primary" onClick={sendReset} disabled={busy}>{busy ? 'Sending…' : 'Send reset link'}</button>
            <a className="link" href="#" onClick={e => { e.preventDefault(); setErr(''); setMode('login'); }}>Back to log in</a>
            <p className="small">No longer have access to that address? <a className="link" href="#" onClick={e => { e.preventDefault(); setMode('recover'); }}>Recover the account with your GST record</a>.</p>
          </div>
        </React.Fragment>
      )}

      {mode === 'resetsent' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
          <span className="badge ok">Email sent</span>
          <h2 className="h3">Check {email}.</h2>
          <p>Open the link in that email to set a new password. It expires in one hour. Check spam if it has not arrived in a few minutes.</p>
          <a className="btn btn-ghost" href="#" onClick={e => { e.preventDefault(); setMode('login'); }}>Back to log in</a>
        </div>
      )}

      {mode === 'setpw' && (
        <React.Fragment>
          <span className="eyebrow">Password reset</span>
          <h2 className="h3" style={{ margin: '10px 0 8px' }}>Set a new password</h2>
          <p className="small" style={{ marginBottom: 26 }}>At least eight characters. You will use this with your email address from now on.</p>
          <div style={{ display: 'grid', gap: 16 }}>
            {pwField('New password', pw, setPw, 'At least 8 characters')}
            {pwField('Confirm password', pw2, setPw2, 'Type it again')}
            <Err>{err}</Err>
            <button className="btn btn-primary" onClick={savePw} disabled={busy}>{busy ? 'Saving…' : 'Save and continue'}</button>
            <a className="link" href="login.html">Back to log in</a>
          </div>
        </React.Fragment>
      )}

      {mode === 'recover' && (
        <React.Fragment>
          <span className="eyebrow">Account recovery</span>
          <h2 className="h3" style={{ margin: '10px 0 8px' }}>Can't access your registered address?</h2>
          <p className="small" style={{ marginBottom: 26 }}>Tell us your business details and we will verify you against your GST or PAN record, then move the account to a new address.</p>
          <div style={{ display: 'grid', gap: 16 }}>
            <div className="field"><label>Registered business name <i>*</i></label><input placeholder="As per GST certificate" /></div>
            <div className="field"><label>GSTIN or PAN <i>*</i></label><input placeholder="GSTIN, or PAN if not GST registered" /></div>
            <div className="field"><label>New email address <i>*</i></label><input placeholder="Address to move the account to" /></div>
            <div className="field"><label>Mobile number <i>*</i></label><input placeholder="10-digit mobile" /></div>
            <button className="btn btn-primary" onClick={() => setMode('sent')}>Submit request</button>
            <a className="link" href="#" onClick={e => { e.preventDefault(); setMode('login'); }}>Back to log in</a>
          </div>
        </React.Fragment>
      )}

      {mode === 'sent' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
          <span className="badge ok">Request received</span>
          <h2 className="h3">We will call you within one working day.</h2>
          <p>Our team verifies the request against your GST or PAN record before moving the account. Keep the certificate handy.</p>
          <a className="btn btn-ghost" href="home.html">Back to the website</a>
        </div>
      )}
    </AuthShell>
  );
}

LTMount('login', <LoginPage />);