// Admin-Panel: Benutzerübersicht

function AdminPanel({ user, onBack }) {
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    window.apiAdminUsers().then(res => {
      if (res.ok) {
        setUsers(res.users);
      } else {
        setError(res.error || 'Fehler beim Laden.');
      }
      setLoading(false);
    }).catch(() => {
      setError('Verbindungsfehler.');
      setLoading(false);
    });
  }, []);

  return (
    <div className="dashboard">
      <header className="dash-topbar">
        <div className="topbar-brand">
          <a href="https://kalikoer.com" target="_blank" rel="noopener noreferrer">
            <img src="kalikoer-logo.png" alt="Kalikoer" className="topbar-logo" />
          </a>
        </div>
        <div style={{ flex: 1 }} />
        <button className="btn btn-secondary" onClick={onBack}>
          ← Zurück
        </button>
      </header>

      <div className="dash-content">
        <div className="dash-hero">
          <div>
            <h1>Admin-Panel</h1>
            <p className="dash-sub">Alle registrierten Benutzer</p>
          </div>
        </div>

        {loading && (
          <div className="admin-loading">Lade Benutzer…</div>
        )}

        {error && (
          <div className="admin-error">{error}</div>
        )}

        {!loading && !error && (
          <div className="admin-table-wrap">
            <table className="admin-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>E-Mail</th>
                  <th>Registriert</th>
                  <th>Letzter Login</th>
                </tr>
              </thead>
              <tbody>
                {users.map(u => (
                  <tr key={u.id}>
                    <td className="admin-cell-name">{u.name}</td>
                    <td className="admin-cell-email">{u.email}</td>
                    <td>{window.formatDate(u.createdAt)}</td>
                    <td>{u.lastLogin ? window.formatRelative(u.lastLogin) : '–'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="admin-count">{users.length} Benutzer insgesamt</div>
          </div>
        )}
      </div>
    </div>
  );
}

window.AdminPanel = AdminPanel;