/* ============ Enhanced Authentication with Partner/Agent Registration ============ */

// This extends the existing auth.jsx with new database-backed authentication system
// Supports self-registration for partners and agents

function AuthGateEnhanced({ onLogin }) {
  const [view, setView] = React.useState('login'); // login | register
  const [u, setU] = React.useState('');
  const [p, setP] = React.useState('');
  const [e, setE] = React.useState('');
  const [err, setErr] = React.useState('');
  const [remember, setRemember] = React.useState(true);

  const submitLogin = () => {
    setErr('');
    if (!u.trim() || !p.trim()) { setErr('Please enter username and password.'); return; }
    
    // Try database first
    const user = verifyCredential(u.trim(), p);
    if (user) {
      setSession({ userId: user.id, loginAt: Date.now(), lastActivity: Date.now(), remember, expiresAt: remember ? Date.now() + 90 * 86400000 : 0 });
      logActivity(user.username, 'Logged in (database)');
      onLogin(user);
      return;
    }

    // Fallback to localStorage users
    const users = loadUsers();
    const found = users.find((x) => x.username.toLowerCase() === u.trim().toLowerCase() && x.pass === p);
    if (!found) { setErr('Invalid username or password.'); return; }
    if (!found.active) { setErr('This account is disabled.'); return; }
    setSession({ userId: found.id, loginAt: Date.now(), lastActivity: Date.now(), remember, expiresAt: remember ? Date.now() + 90 * 86400000 : 0 });
    logActivity(found.username, 'Logged in (legacy)');
    onLogin(found);
  };

  const submitRegister = () => {
    setErr('');
    if (!u.trim() || !p.trim() || !e.trim()) { setErr('All fields required.'); return; }
    if (u.trim().length < 3) { setErr('Username must be at least 3 characters.'); return; }
    if (p.length < 6) { setErr('Password must be at least 6 characters.'); return; }

    // Check if user exists
    const existing = getCredentialsDB().find((c) => c.username === u.trim().toLowerCase());
    if (existing) { setErr('Username already taken.'); return; }

    // Register new user
    const newUser = addCredential({ username: u.trim(), email: e.trim(), password: p, role: 'agent' });
    logActivity(u.trim(), 'Self-registered as agent');
    setErr('');
    setView('login');
    setU('');
    setP('');
    setE('');
    alert('Account created! You can now log in.');
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      view === 'login' ? submitLogin() : submitRegister();
    }
  };

  return (
    <div className="auth-screen">
      <div className="auth-card">
        <div className="auth-brand">
          <div className="brand-mark" style={{ width: 52, height: 52 }}>
            <svg viewBox="0 0 64 64" fill="none"><path d="M15 55 V25 L35 11 L35 22 L49 22 V55 Z" stroke="#15140f" strokeWidth="4.5" strokeLinejoin="round" strokeLinecap="round" /><path d="M42 31 H27 V47 H39" stroke="#b3902f" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </div>
          <div><div className="auth-title">Casabilia Investment</div><div className="auth-sub">{view === 'login' ? 'Sign in to continue' : 'Create agent account'}</div></div>
        </div>

        {view === 'login' ? (
          <React.Fragment>
            <label className="auth-label">Username</label>
            <input className="auth-input" value={u} autoFocus onChange={(e) => setU(e.target.value)} onKeyDown={handleKeyPress} placeholder="admin" />
            <label className="auth-label">Password</label>
            <input className="auth-input" type="password" value={p} onChange={(e) => setP(e.target.value)} onKeyDown={handleKeyPress} placeholder="••••••" />
            {err ? <div className="auth-err">{err}</div> : null}
            <label className="auth-remember"><input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} /> Keep me signed in for 90 days</label>
            <button className="btn primary auth-btn" onClick={submitLogin}>Sign in</button>
            <button className="btn secondary auth-btn" onClick={() => { setView('register'); setErr(''); }}>Create agent account</button>
            <div className="auth-note">Demo login <b>admin / admin</b>. Prototype only — accounts are stored in your browser and are <b>not secure</b>. Use a backend for production.</div>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <label className="auth-label">Username</label>
            <input className="auth-input" value={u} autoFocus onChange={(e) => setU(e.target.value)} onKeyDown={handleKeyPress} placeholder="Choose username" />
            <label className="auth-label">Email</label>
            <input className="auth-input" type="email" value={e} onChange={(e) => setE(e.target.value)} onKeyDown={handleKeyPress} placeholder="your@email.com" />
            <label className="auth-label">Password</label>
            <input className="auth-input" type="password" value={p} onChange={(e) => setP(e.target.value)} onKeyDown={handleKeyPress} placeholder="••••••" />
            {err ? <div className="auth-err">{err}</div> : null}
            <button className="btn primary auth-btn" onClick={submitRegister}>Create Account</button>
            <button className="btn secondary auth-btn" onClick={() => { setView('login'); setErr(''); }}>Back to sign in</button>
            <div className="auth-note">Accounts registered as <b>Agent</b> role. Contact an admin to change your role.</div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ---- User Management Modal ---- */
function UserManagementModal({ onClose }) {
  const [users, setUsers] = React.useState(listUsers);
  const [adding, setAdding] = React.useState(false);
  const [draft, setDraft] = React.useState({ username: '', email: '', role: 'agent', password: '' });
  const [error, setError] = React.useState('');

  const addUser = () => {
    if (!draft.username || !draft.password) { setError('Username and password required'); return; }
    try {
      const newUser = addCredential({ username: draft.username, email: draft.email, password: draft.password, role: draft.role });
      setUsers([...users, newUser]);
      setDraft({ username: '', email: '', role: 'agent', password: '' });
      setAdding(false);
      setError('');
    } catch (e) {
      setError(e.message);
    }
  };

  const removeUser = (id) => {
    if (confirm('Deactivate this user?')) {
      deleteCredential(id);
      setUsers(users.filter((u) => u.id !== id));
    }
  };

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal admin-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h2>User Management</h2>
          <button className="btn" onClick={onClose}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12" /></svg></button>
        </div>
        <div className="modal-body" style={{ display: 'block' }}>
          <button className="btn primary" onClick={() => setAdding(!adding)} style={{ marginBottom: 12 }}>
            {adding ? '✕ Cancel' : '+ Add User'}
          </button>

          {adding && (
            <div style={{ background: '#f9f9f9', padding: 12, borderRadius: 4, marginBottom: 12 }}>
              <input
                className="set-input"
                placeholder="Username"
                value={draft.username}
                onChange={(e) => setDraft({ ...draft, username: e.target.value })}
                style={{ marginBottom: 8 }}
              />
              <input
                className="set-input"
                placeholder="Email"
                value={draft.email}
                onChange={(e) => setDraft({ ...draft, email: e.target.value })}
                style={{ marginBottom: 8 }}
              />
              <input
                className="set-input"
                type="password"
                placeholder="Password"
                value={draft.password}
                onChange={(e) => setDraft({ ...draft, password: e.target.value })}
                style={{ marginBottom: 8 }}
              />
              <select
                className="set-input"
                value={draft.role}
                onChange={(e) => setDraft({ ...draft, role: e.target.value })}
                style={{ marginBottom: 8 }}
              >
                <option value="agent">Agent</option>
                <option value="partner">Partner</option>
                <option value="admin">Admin</option>
              </select>
              {error && <div style={{ color: 'red', fontSize: 12, marginBottom: 8 }}>{error}</div>}
              <button className="btn primary" onClick={addUser}>Create</button>
            </div>
          )}

          <table className="users-table" style={{ width: '100%', fontSize: 13 }}>
            <thead>
              <tr>
                <th>Username</th>
                <th>Email</th>
                <th>Role</th>
                <th style={{ width: 40 }}></th>
              </tr>
            </thead>
            <tbody>
              {users.map((u) => (
                <tr key={u.id}>
                  <td><strong>{u.username}</strong></td>
                  <td>{u.email}</td>
                  <td>{u.role}</td>
                  <td style={{ textAlign: 'right' }}>
                    <button
                      onClick={() => removeUser(u.id)}
                      style={{ background: 'none', border: 'none', color: 'red', cursor: 'pointer', fontSize: 14 }}
                    >
                      ✕
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {users.length === 0 && (
            <div style={{ textAlign: 'center', padding: 24, color: '#999' }}>
              No users yet. Create one above.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AuthGateEnhanced, UserManagementModal });