import 'package:flutter/material.dart';

void main() {
  runApp(NetpcSpaceApp());
}

class NetpcSpaceApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Netpc.Space Dashboard',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xFF532E41),
        scaffoldBackgroundColor: Color(0xFF09090A),
        fontFamily: 'Roboto', // Default font
        textTheme: TextTheme(
          bodyLarge: TextStyle(color: Colors.white),
          bodyMedium: TextStyle(color: Colors.white),
        ),
      ),
      home: DashboardScreen(),
    );
  }
}

class DashboardScreen extends StatefulWidget {
  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  String selectedTab = 'Главное';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Sidebar(
            selectedTab: selectedTab,
            onTabSelected: (tab) {
              setState(() {
                selectedTab = tab;
              });
            },
          ),
          Expanded(
            child: MainContent(
              selectedTab: selectedTab,
            ),
          ),
        ],
      ),
    );
  }
}

class Sidebar extends StatelessWidget {
  final String selectedTab;
  final Function(String) onTabSelected;

  Sidebar({required this.selectedTab, required this.onTabSelected});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300, // Reduced width for better UI
      height: MediaQuery.of(context).size.height,
      color: Color(0xFF1C1C1C), // Distinct sidebar color
      padding: EdgeInsets.only(left: 24, top: 48), // Adjusted padding
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Logo
          Text(
            'netpc.space',
            style: TextStyle(
              color: Color(0xFF532E41), // Using primary color
              fontSize: 24,
              fontWeight: FontWeight.bold,
              fontFamily: 'Roboto', // Keeping default or change as needed
            ),
          ),
          SizedBox(height: 40), // Spacing between logo and user card
          // User Card with Balance and Logout
          Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.1),
              border: Border.all(color: Colors.white30),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    // Static User Icon
                    Icon(
                      Icons.person,
                      color: Colors.white,
                      size: 40,
                    ),
                    SizedBox(width: 16),
                    // Username and Logout IconButton
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'username',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontFamily: 'Roboto',
                            ),
                          ),
                          // Logout Button with Only Icon
                          Align(
                            alignment: Alignment.centerLeft,
                            child: IconButton(
                              onPressed: () {
                                // Handle logout
                              },
                              icon: Icon(
                                Icons.logout,
                                color: Colors.white,
                                size: 20,
                              ),
                              tooltip: 'Logout',
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 16),
                // User Balance
                Text(
                  'Balance: 10000',
                  style: TextStyle(
                    color: Colors.white70,
                    fontSize: 16,
                    fontFamily: 'Roboto',
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 40), // Spacing between user card and sections
          // Основное Section
          Padding(
            padding: const EdgeInsets.only(left: 0.0),
            child: Text(
              'Основное',
              style: TextStyle(
                color: Color(0xFF532E41), // Purple color
                fontSize: 20,
                fontWeight: FontWeight.bold,
                fontFamily: 'Roboto',
              ),
            ),
          ),
          SizedBox(height: 16),
          // Navigation Buttons
          NavButton(
            icon: Icons.dashboard,
            label: 'Главное',
            isSelected: selectedTab == 'Главное',
            onTap: () => onTabSelected('Главное'),
          ),
          NavButton(
            icon: Icons.settings,
            label: 'Настройки',
            isSelected: selectedTab == 'Настройки',
            onTap: () => onTabSelected('Настройки'),
          ),
          // Add more navigation buttons here as needed
        ],
      ),
    );
  }
}

class NavButton extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool isSelected;
  final VoidCallback onTap;

  NavButton({
    required this.icon,
    required this.label,
    this.isSelected = false,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        margin: EdgeInsets.only(bottom: 16),
        padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
        decoration: BoxDecoration(
          color: isSelected ? Colors.white24 : Colors.transparent,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Icon(
              icon,
              color: Colors.white,
            ),
            SizedBox(width: 16),
            Text(
              label,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
                fontFamily: 'Roboto',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MainContent extends StatelessWidget {
  final String selectedTab;

  MainContent({required this.selectedTab});

  @override
  Widget build(BuildContext context) {
    if (selectedTab == 'Главное') {
      return MainTab();
    } else if (selectedTab == 'Настройки') {
      return SettingsTab();
    }
    // Add more tabs as needed
    return Center(
      child: Text(
        'Unknown Tab',
        style: TextStyle(fontSize: 24, color: Colors.white),
      ),
    );
  }
}

class SettingsTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Placeholder for Settings
    return Center(
      child: Text(
        'Настройки',
        style: TextStyle(
          fontSize: 24,
          color: Colors.white,
          fontFamily: 'Roboto',
        ),
      ),
    );
  }
}

class MainTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        // Adjusted padding based on specifications
        padding: EdgeInsets.only(left: 24, top: 24, right: 32, bottom: 50),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Welcome Image and Text
            Container(
              width: double.infinity,
              height: 200,
              decoration: BoxDecoration(
                color: Colors.grey[800],
                borderRadius: BorderRadius.circular(12),
                image: DecorationImage(
                  image: AssetImage(
                      'assets/images/welcome_background.png'), // Ensure you have this image in assets
                  fit: BoxFit.cover,
                  colorFilter: ColorFilter.mode(
                      Colors.black.withOpacity(0.3), BlendMode.darken),
                ),
              ),
              child: Stack(
                children: [
                  Positioned(
                    left: 20,
                    top: 20,
                    child: Text(
                      'Добро пожаловать, username',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 28,
                        fontFamily: 'Unbounded', // Using Unbounded font
                      ),
                    ),
                  ),
                  Positioned(
                    left: 20,
                    top: 70,
                    child: Container(
                      width: 600,
                      child: Text(
                        'Приветствуем в панели хостинга netpc.space, тут вы можете управлять вашими услугами',
                        style: TextStyle(
                          color: Colors.grey[300],
                          fontSize: 16,
                          fontFamily: 'Roboto',
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 50),
            // Server List
            ServerList(),
          ],
        ),
      ),
    );
  }
}

class ServerList extends StatelessWidget {
  // Mock server data
  final List<Map<String, String>> servers = [
    {
      'name': 'Server One',
      'address': '192.168.1.1',
      'cpu': '4 cores',
      'ram': '16GB',
      'disk': '512GB SSD',
      'flag': '🇩🇪', // Germany flag as emoji
    },
    {
      'name': 'Server Two',
      'address': '192.168.1.2',
      'cpu': '8 cores',
      'ram': '32GB',
      'disk': '1TB SSD',
      'flag': '🇺🇸', // USA flag as emoji
    },
    // Add more servers as needed
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'My Servers',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
            fontFamily: 'Roboto',
          ),
        ),
        SizedBox(height: 16),
        ...servers.map((server) => ServerCard(server: server)).toList(),
      ],
    );
  }
}

class ServerCard extends StatelessWidget {
  final Map<String, String> server;

  ServerCard({required this.server});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity, // Use full width
      height: 150, // Increased height for better layout
      margin: EdgeInsets.only(bottom: 16),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.05),
        border: Border.all(color: Colors.white30),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: EdgeInsets.fromLTRB(20, 16, 20, 16),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // Flag
            Text(
              server['flag'] ?? '',
              style: TextStyle(fontSize: 34),
            ),
            SizedBox(width: 16),
            // Server Details
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    server['name'] ?? 'Unnamed Server',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontFamily: 'NeueMachina', // Using Neue Machina font
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'Address: ${server['address'] ?? 'N/A'}',
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 16,
                      fontFamily: 'Roboto',
                    ),
                  ),
                  SizedBox(height: 16),
                  Row(
                    children: [
                      InfoButton(label: 'CPU: ${server['cpu'] ?? 'N/A'}'),
                      SizedBox(width: 8),
                      InfoButton(label: 'RAM: ${server['ram'] ?? 'N/A'}'),
                      SizedBox(width: 8),
                      InfoButton(label: 'Disk: ${server['disk'] ?? 'N/A'}'),
                    ],
                  ),
                ],
              ),
            ),
            Spacer(),
            // Manage Button
            ElevatedButton.icon(
              onPressed: () {
                // Handle management action
              },
              icon: Icon(
                Icons.settings,
                color: Color(0xFF532E41),
                size: 20,
              ),
              label: Text(
                'Управление',
                style: TextStyle(color: Colors.white, fontFamily: 'Unbounded'),
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.grey, // Grey background
                padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class InfoButton extends StatelessWidget {
  final String label;

  InfoButton({required this.label});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // OnClick info is zero as per specification
      },
      child: Text(
        label,
        style: TextStyle(
          fontSize: 14,
          fontFamily: 'Roboto',
        ),
      ),
      style: ElevatedButton.styleFrom(
        foregroundColor: Colors.white,
        backgroundColor: Colors.grey.withOpacity(0.5), // Grey with transparency
        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        elevation: 0,
      ),
    );
  }
}


we need to make sidebar with the same color as main content also balance is in card without text just icon also everything don't include server info has unbounded font also netpc.space has neue machina font and positioned in the centre and has white color also everything has static size


wsp we need to make a dashboard on flutter. we will have five screen. on all of the screen we'll have sidebar which will have max w400 also h for all of the page. at the top of the sidebar we will have text "netpc.space" positioned x128 y63 under it we'll have a cardlike which wi'll contain user icon(static) more right we'll have username at the top and after it logout button with icon(small) under it we'll show user balance(api request(for example make 10000)) again we'll have somespace after this transparent cardlike and after we'll have text Основное colored purple under it we'll have button but icon and text on it won't be ideally under the Основное text, only button need's to be under it ideally by the way when we'll aim on it or switch to this tab it will change colorfilter from transparent to black first button will have name Главное now we stop doing sidebar and switch to main content which will be right sidebar we'll have a picture here positioned x523 y74 and have w1176 h184 border radius 12 grey color in it we'll have positioned x578 y132 says Добро пожаловать, username with w800 h50 under it we'll have text Приветствуем в панели хостинга netpc.space, тут вы можете управлять вашими услугами with grey color positioned x577 y191 and w1084 h40 after it we'll make server list which can be accessed from api but for example we'll make two server with abstract names let's start we'll have text My server positioned x523 y314 under it we'll have first server but their count depend on user server by the way for example we'll have only two it will be a transparent box but with colorfilter black positioned x523 y380 also w1176 h139 in it we'll have germany flag positioned x577 y412 also w34 h37 next to it we'll have server name you want positioned x625 y417also w334 h28 under it we'll have connect adress info positioned x579 y448 also w221 h24 coloured grey after it we'll have server info like cpu info positioned x1235 y413 with w132 h37 after that ram info by the way all server info look's like button's but their onclick info is zero and they have border radius and color filter grey let's continue ram info is x1382 y413 also w132 h37 after it disk info positioned x1529 y413 also w132 h37 under it we'll have button call Управление with setting icon color #532E41 also positioned x1531 y460 with black colorfilter  and repeat this for all of the server we'll have background #09090A text is white when don't mention it color we'll perform http reqest later for now make example like


firstq