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: 400, // Fixed width
      height: MediaQuery.of(context).size.height,
      color: Color(0xFF09090A), // Same as main content
      padding: EdgeInsets.only(
          left: 128, top: 63), // Positioned as per specification
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // "netpc.space" Text
          Center(
            child: Text(
              'netpc.space',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
                fontFamily: 'NeueMachina', // Neue Machina font
              ),
            ),
          ),
          SizedBox(height: 40), // Spacing
          // User Card with Icon, Username, Logout Button, and Balance Icon
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.1),
              border: Border.all(color: Colors.white30),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Column(
              children: [
                Row(
                  children: [
                    // Static User Icon
                    Icon(
                      Icons.person,
                      color: Colors.white,
                      size: 40,
                    ),
                    SizedBox(width: 16),
                    // Username and Logout Button
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'username',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontFamily: 'Roboto',
                            ),
                          ),
                          IconButton(
                            onPressed: () {
                              // Handle logout
                            },
                            icon: Icon(
                              Icons.logout,
                              color: Colors.white,
                              size: 20,
                            ),
                            tooltip: 'Logout',
                          ),
                        ],
                      ),
                    ),
                    // Balance Icon without Text
                    Icon(
                      Icons.account_balance_wallet,
                      color: Colors.white,
                      size: 24,
                    ),
                  ],
                ),
              ],
            ),
          ),
          SizedBox(height: 40), // Spacing
          // "Основное" Text
          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(
        width: 368, // Fixed width within sidebar
        height: 48, // Fixed height for uniformity
        margin: EdgeInsets.only(bottom: 16),
        padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
        decoration: BoxDecoration(
          color:
              isSelected ? Colors.black.withOpacity(0.7) : 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) {
    return Stack(
      children: [
        // Welcome Image and Text
        Positioned(
          left: 523,
          top: 74,
          child: Container(
            width: 1176,
            height: 184,
            decoration: BoxDecoration(
              color: Colors.grey[800],
              borderRadius: BorderRadius.circular(12),
              image: DecorationImage(
                image: AssetImage('assets/images/welcome_background.png'),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.3), BlendMode.darken),
              ),
            ),
          ),
        ),
        // Welcome Texts
        Positioned(
          left: 578,
          top: 132,
          child: Container(
            width: 800,
            height: 50,
            child: Text(
              'Добро пожаловать, username',
              style: TextStyle(
                color: Colors.white,
                fontSize: 28,
                fontFamily: 'Unbounded', // Unbounded font
              ),
            ),
          ),
        ),
        Positioned(
          left: 577,
          top: 191,
          child: Container(
            width: 1084,
            height: 40,
            child: Text(
              'Приветствуем в панели хостинга netpc.space, тут вы можете управлять вашими услугами',
              style: TextStyle(
                color: Colors.grey[300],
                fontSize: 16,
                fontFamily: 'Roboto',
              ),
            ),
          ),
        ),
        // Server List Section
        Positioned(
          left: 523,
          top: 314,
          child: Text(
            'My Servers',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
              fontFamily: 'Roboto',
            ),
          ),
        ),
        Positioned(
          left: 523,
          top: 380,
          child: 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(
      children: servers
          .map((server) => Positioned(
                child: 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: 1176, // Fixed width
      height: 139, // Fixed height
      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(
            54, 16, 0, 16), // Adjusted padding based on x positions
        child: Row(
          children: [
            // Flag
            Text(
              server['flag'] ?? '',
              style: TextStyle(fontSize: 34),
            ),
            SizedBox(width: 48), // 625 - 577 = 48
            // Server Name and Address
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  width: 334,
                  height: 28,
                  child: Text(
                    server['name'] ?? 'Unnamed Server',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontFamily: 'Unbounded', // Unbounded font
                    ),
                  ),
                ),
                SizedBox(height: 16),
                Container(
                  width: 221,
                  height: 24,
                  child: Text(
                    'Address: ${server['address'] ?? 'N/A'}',
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 16,
                      fontFamily: 'Roboto',
                    ),
                  ),
                ),
                SizedBox(height: 8),
                // Server Info Buttons
                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,
      ),
    );
  }
}

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) {
    // This widget is no longer used as positions are handled in MainContent
    return Container();
  }
}


carefully read what i have asked you
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
we have 19201080screen