import React from 'react';
import { ConfigProvider, Layout, Menu, Typography, Card, Statistic, Row, Col } from 'antd';
import { UserOutlined, VideoCameraOutlined, DollarOutlined, SettingOutlined } from '@ant-design/icons';

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#6366f1',
        },
      }}
    >
      <Layout style={{ minHeight: '100vh' }}>
        <Sider width={250} style={{ background: '#001529' }}>
          <div style={{ padding: '16px', color: 'white', fontSize: '18px', fontWeight: 'bold' }}>
            AvanzaCast Admin
          </div>
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['1']}
            items={[
              {
                key: '1',
                icon: <UserOutlined />,
                label: 'Usuarios',
              },
              {
                key: '2',
                icon: <VideoCameraOutlined />,
                label: 'Transmisiones',
              },
              {
                key: '3',
                icon: <DollarOutlined />,
                label: 'Suscripciones',
              },
              {
                key: '4',
                icon: <SettingOutlined />,
                label: 'Configuración',
              },
            ]}
          />
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: '0 24px' }}>
            <Title level={3} style={{ margin: '14px 0' }}>Panel de Control SaaS</Title>
          </Header>
          <Content style={{ margin: '24px' }}>
            <Row gutter={16}>
              <Col span={6}>
                <Card>
                  <Statistic title="Usuarios Activos" value={1234} />
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <Statistic title="Transmisiones Hoy" value={89} />
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <Statistic title="Ingresos Mensuales" value={12450} prefix="$" />
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <Statistic title="Suscripciones" value={856} />
                </Card>
              </Col>
            </Row>
            <Card style={{ marginTop: 24 }}>
              <Title level={4}>Bienvenido al Panel de Administración</Title>
              <p>
                Gestiona usuarios, planes de pago, transmisiones y configuración de la plataforma AvanzaCast.
              </p>
            </Card>
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
}

export default App;
