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,
      height: MediaQuery.of(context).size.height,
      color: Color(0xFF1C1C1C), // Distinct sidebar color
      padding: EdgeInsets.only(left: 32, top: 63), // Adjusted padding for better layout
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Logo
          Text(
            'netpc.space',
            style: TextStyle(
              color: Colors.white,
              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: 523 - 400 + 32, top: 74, right: 32, bottom: 50),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Welcome Image and Text
            Container(
              width: 1176,
              height: 184,
              decoration: BoxDecoration(
                color: Colors.grey[800],
                borderRadius: BorderRadius.circular(12),
                image: DecorationImage(
                  image: NetworkImage(
                      'https://via.placeholder.com/1176x184.png?text=Welcome+Image'), // Placeholder image
                  fit: BoxFit.cover,
                  colorFilter:
                      ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
                ),
              ),
              child: Stack(
                children: [
                  Positioned(
                    left: 50, // Adjusted for better alignment
                    top: 20,
                    child: Text(
                      'Добро пожаловать, username',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                        backgroundColor: Colors.black45,
                        fontFamily: 'Unbounded', // Using Unbounded font
                      ),
                    ),
                  ),
                  Positioned(
                    left: 50,
                    top: 60,
                    child: Container(
                      width: 800,
                      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: 1176,
      height: 139,
      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(50, 16, 50, 16),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // Flag
            Text(
              server['flag'] ?? '',
              style: TextStyle(fontSize: 34),
            ),
            SizedBox(width: 16),
            // Server Details
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  server['name'] ?? 'Unnamed Server',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontFamily: 'Unbounded', // Using Unbounded 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: 'Roboto'),
              ),
              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,
      ),
    );
  }
}


sidebar and content doesn't have any color difference also server info is positioned as i said before no other variant button управление is grey no white also add font neue machina for server card and for welcome card with image unbounded font also add image