// auth.jsx — owner-only login gate for the control panel
// NOTE: this is a CLIENT-SIDE gate (good enough to keep the public out of the panel
// in a prototype). It is NOT bank-grade security — real protection needs a backend.

const AUTH_KEY = 'ibtikar_auth_v1';

function useAuth() {
  const [user, setUser] = React.useState(() => {
    try { return JSON.parse(sessionStorage.getItem(AUTH_KEY) || 'null'); } catch (e) { return null; }
  });
  const login = React.useCallback((username, password) => {
    const u = (window.OWNERS || []).find(
      o => o.user.toLowerCase() === String(username).trim().toLowerCase() && o.pass === password
    );
    if (!u) return false;
    const session = { id: u.id, user: u.user, name: u.name };
    sessionStorage.setItem(AUTH_KEY, JSON.stringify(session));
    setUser(session);
    return true;
  }, []);
  const logout = React.useCallback(() => {
    sessionStorage.removeItem(AUTH_KEY);
    setUser(null);
  }, []);
  return { user, login, logout };
}

function AdminLogin({ t, L, onLogin, go }) {
  const [u, setU] = React.useState('');
  const [p, setP] = React.useState('');
  const [err, setErr] = React.useState(false);
  const [show, setShow] = React.useState(false);
  const [busy, setBusy] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setBusy(true);
    setErr(false);
    setTimeout(() => {
      const ok = onLogin(u, p);
      setBusy(false);
      if (!ok) { setErr(true); setP(''); }
    }, 500);
  };

  return (
    <div className="login-wrap">
      <BrainCanvas mode="backdrop" />
      <div className="login-card card">
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
          <LogoMark size={56} />
        </div>
        <div className="center">
          <div className="eyebrow" style={{ justifyContent: 'center' }}><Icon.shield s={15} /> {L({ ar: 'منطقة المالكين', en: 'Owners area' })}</div>
          <h2 style={{ fontSize: 26, marginTop: 12 }}>{t('admin_title')}</h2>
          <p className="muted" style={{ fontSize: 14.5, marginTop: 10, lineHeight: 1.6 }}>
            {L({ ar: 'الدخول مقصور على مالكَي المنصة. سجّل دخولك للمتابعة.', en: 'Access is restricted to the platform owners. Sign in to continue.' })}
          </p>
        </div>
        <form onSubmit={submit} style={{ display: 'grid', gap: 16, marginTop: 24 }}>
          <Field label={L({ ar: 'البريد الإلكتروني', en: 'Email' })} required>
            <input className="input" type="email" value={u} onChange={e => setU(e.target.value)} autoFocus placeholder="name@gmail.com" dir="ltr" style={{ textAlign: 'start' }} />
          </Field>
          <Field label={L({ ar: 'كلمة المرور', en: 'Password' })} required>
            <div style={{ position: 'relative' }}>
              <input className="input" type={show ? 'text' : 'password'} value={p} onChange={e => setP(e.target.value)} placeholder="••••••••" dir="ltr" style={{ textAlign: 'start', paddingInlineEnd: 44 }} />
              <button type="button" onClick={() => setShow(s => !s)} className="pw-toggle" title={show ? 'hide' : 'show'}>
                {show ? <Icon.x s={16} /> : <Icon.spark s={16} />}
              </button>
            </div>
          </Field>
          {err && (
            <div className="login-err">
              <Icon.shield s={15} /> {L({ ar: 'البريد أو كلمة المرور غير صحيحة.', en: 'Incorrect email or password.' })}
            </div>
          )}
          <button className="btn btn-primary btn-lg" disabled={busy} style={{ width: '100%' }}>
            {busy ? <><span className="spin" /> {L({ ar: 'جارٍ التحقق…', en: 'Verifying…' })}</> : <><Icon.shield s={18} /> {L({ ar: 'دخول', en: 'Sign in' })}</>}
          </button>
          <button type="button" className="back-link" style={{ justifySelf: 'center' }} onClick={() => go('home')}>
            <Icon.arrowL s={15} /> {t('back')}
          </button>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { useAuth, AdminLogin, AUTH_KEY });