/* ===== ContaBilè — Login screen ===== */

function CreditBadge({ credits, plan }) {
  const unlimited = plan === 'admin' || plan === 'team';
  const low = !unlimited && credits <= 10;
  return (
    <span className={"badge " + (unlimited ? "pos" : low ? "warn" : "neutral")} style={{ fontSize: 12 }}>
      {unlimited ? '∞ crediti' : `${credits} crediti`}
    </span>
  );
}

function LoginScreen({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [showPass, setShowPass] = useState(false);

  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const result = await window.ContaAuth.login(username, password);
      if (result.ok) onLogin(result.user);
      else setError(result.error || 'Accesso non riuscito.');
    } catch {
      setError('Impossibile contattare il server.');
    }
    setLoading(false);
  };

  return (
    <div className="login-shell">
      <div className="login-brand">
        <div className="login-brand-row">
          <img className="brand-bull brand-on-dark" src="assets/bull.png" alt=""/>
          <img className="brand-word brand-on-dark" src="assets/wordmark.png" alt="ContaBilè"/>
        </div>
        <div className="login-eyebrow">ContaBilè AI Accountant</div>
        <h1>
          Your finances at a glance —<br/>
          <em>powered by AI.</em>
        </h1>
        <p>
          Receipts, transactions, payments and insights for Italian SMBs. Sign in with your beta credentials.
        </p>
        <div className="login-footer">© 2026 Contabile S.r.l. — Beta accesso riservato</div>
      </div>

      <div className="login-form-panel">
        <div className="login-form">
          <h2>Accedi</h2>
          <p className="lead">Inserisci le tue credenziali beta.</p>
          <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="field">
              <label>Username</label>
              <input className="ipt" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="es. unlimited.alpha"/>
            </div>
            <div className="field">
              <label>Password</label>
              <div style={{ position: 'relative' }}>
                <input className="ipt" type={showPass ? 'text' : 'password'} value={password}
                  onChange={(e) => setPassword(e.target.value)} placeholder="••••••••••"
                  style={{ paddingRight: 44 }}/>
                <button type="button" className="btn" onClick={() => setShowPass((s) => !s)}
                  style={{ position: 'absolute', right: 6, top: '50%', transform: 'translateY(-50%)', fontSize: 11, padding: '4px 8px' }}>
                  {showPass ? 'Hide' : 'Show'}
                </button>
              </div>
            </div>
            {error && (
              <div className="card login-error">
                <span style={{ fontSize: 13, color: 'var(--neg)' }}>{error}</span>
              </div>
            )}
            <button type="submit" className="btn btn-primary login-submit" disabled={loading || !username || !password}>
              {loading ? 'Accesso…' : 'Accedi →'}
            </button>
          </form>
          <div className="card login-beta">
            <div style={{ fontSize: 12, color: 'var(--text-2)', lineHeight: 1.5 }}>
              <strong>Beta chiusa:</strong> {window.ContaAuth?.totalUsers || 33} utenti selezionati. Stesse credenziali del portale Conta Advisor.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, CreditBadge });