import React from 'react';
import { Card, Row, Col, Layout } from 'antd';
import UserManagement from '../components/UserManagement';
import UserMenu from '../components/UserMenu';
import ClientsManagement from '../components/ClientsManagement';

export default function AdminDashboard({ user, darkMode, onLogout, onToggleDarkMode }) {
  return (
    <Layout>
      <Layout.Header style={{
        position: 'sticky',
        top: 0,
        zIndex: 100,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        background: darkMode ? '#1f1f1f' : '#fff',
        padding: '0 32px'
      }}>
        <div style={{ fontWeight: 700, fontSize: 20, color: darkMode ? '#fff' : undefined }}>Admin Dashboard</div>
        <UserMenu user={user} onLogout={onLogout} darkMode={darkMode} onToggleDarkMode={onToggleDarkMode} />
      </Layout.Header>
      <Layout.Content style={{ padding: 32 }}>
        <Row gutter={[16, 16]}>
          <Col span={16}>
            <Card title="Benutzerverwaltung" variant="outlined">
              <UserManagement />
            </Card>
            <Card title="Clients" variant="outlined" style={{ marginTop: 16 }}>
              <ClientsManagement />
            </Card>
          </Col>
          <Col span={8}>
            <Card title="Systeminfos" variant="outlined" disabled>
              Kommt bald…
            </Card>
          </Col>
          <Col span={8}>
            <Card title="Einstellungen" variant="outlined" disabled>
              Kommt bald…
            </Card>
          </Col>
        </Row>
      </Layout.Content>
    </Layout>
  );
}