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
          Sidebar(
            selectedTab: selectedTab,
            onTabSelected: (tab) {
              setState(() {
                selectedTab = tab;
              });
            },
          ),
          // Main Content
          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: double.infinity, // Full height
      color: Color(0xFF09090A), // Background color
      child: Padding(
        padding: const EdgeInsets.symmetric(
            horizontal: 40.0), // Consistent horizontal padding
        child: Column(
          crossAxisAlignment:
              CrossAxisAlignment.start, // Align children to the start (left)
          children: [
            SizedBox(height: 63), // Spacer for "netpc.space" text
            // "netpc.space" Text
            Text(
              'netpc.space',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
                fontFamily: 'NeueMachina', // Ensure this font is added
              ),
            ),
            SizedBox(
                height:
                    40), // Reduced spacer between "netpc.space" and user info
            // User Information
            Container(
              width: double.infinity, // Expand to take full available width
              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, // Align content to the start (left)
                children: [
                  // Username with Emoji Logout Icon
                  Row(
                    children: [
                      Text(
                        'username',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          fontFamily: 'Roboto',
                        ),
                      ),
                      SizedBox(width: 8),
                      GestureDetector(
                        onTap: () {
                          // Handle logout
                          print('Logout tapped');
                          // Implement your logout logic here
                        },
                        child: Text(
                          '🚪', // Emoji for logout; replace with preferred emoji
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 16),
                  // User Balance
                  Text(
                    'Баланс: 10000',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontFamily: 'Roboto',
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 40), // Spacer before "Основное" text
            // "Основное" Text
            Text(
              'Основное',
              style: TextStyle(
                color: Color(0xFF532E41), // Purple color
                fontSize: 20,
                fontWeight: FontWeight.bold,
                fontFamily: 'Roboto',
              ),
            ),
            SizedBox(height: 16), // Spacer before navigation buttons
            // Navigation Buttons
            Column(
              children: [
                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
              ],
            ),
            // Optionally, add Spacer() here to push content to the top
            Spacer(),
          ],
        ),
      ),
    );
  }
}

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: 240, // Fixed width to maintain consistency
        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 SingleChildScrollView(
      child: Container(
        width: 1520, // 1920 - 400 (sidebar) = 1520
        padding: EdgeInsets.symmetric(
            horizontal: 123, vertical: 20), // Reduced vertical padding
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Welcome Image Container
            Container(
              width: 1176,
              height: 184,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
              ),
              child: Stack(
                children: [
                  // Image Layer
                  Positioned.fill(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12),
                      child: Image.asset(
                        'assets/images/welcome_background.png',
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  // Semi-transparent Overlay
                  Positioned.fill(
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.3),
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                  ),
                  // Welcome Texts
                  Positioned(
                    left: 58,
                    top: 58,
                    child: Text(
                      'Добро пожаловать, username',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 28,
                        fontFamily: 'Unbounded', // Ensure this font is added
                        shadows: [
                          Shadow(
                            offset: Offset(2.0, 2.0),
                            blurRadius: 3.0,
                            color: Colors.black54,
                          ),
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                    left: 54,
                    top: 117,
                    child: Text(
                      'Приветствуем в панели хостинга netpc.space, тут вы можете управлять вашими услугами',
                      style: TextStyle(
                        color: const Color.fromARGB(255, 138, 138, 138),
                        fontSize: 16,
                        fontFamily: 'Roboto',
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 40),
            // "Мои сервера" Text
            Text(
              'Мои сервера',
              style: TextStyle(
                color: Colors.white,
                fontSize: 41,
                fontWeight: FontWeight.bold,
                fontFamily: 'NeueMachina',
              ),
            ),
            SizedBox(height: 16),
            // 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(
      children: servers
          .map((server) => Padding(
                padding: const EdgeInsets.only(bottom: 16),
                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,
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: const Color.fromARGB(255, 4, 4, 4),
        border: Border.all(color: const Color.fromARGB(192, 64, 64, 64)),
        borderRadius: BorderRadius.circular(24),
      ),
      child: Column(
        crossAxisAlignment:
            CrossAxisAlignment.start, // Align contents to the start (left)
        children: [
          // Server Info Row
          Row(
            children: [
              // Server Name and Address on the Left
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Server Name
                  Text(
                    server['name'] ?? 'Unnamed Server',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontFamily: 'Unbounded', // Ensure this font is added
                    ),
                  ),
                  SizedBox(height: 8),
                  // Server Address
                  Text(
                    server['address'] ?? 'N/A',
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 16,
                      fontFamily: 'Roboto',
                    ),
                  ),
                ],
              ),
              Spacer(), // Pushes the server details to the right
              // Server Details on the Right
              Column(
                crossAxisAlignment: CrossAxisAlignment
                    .start, // Align to the start within the column
                children: [
                  // 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'}'),
                    ],
                  ),
                ],
              ),
            ],
          ),
          SizedBox(height: 8), // Minimal spacing before the button
          // Manage Button
          Align(
            alignment: Alignment.centerRight, // Align the button to the right
            child: ElevatedButton.icon(
              onPressed: () {
                // Handle management action
                print('Manage ${server['name']} tapped');
                // Implement your management logic here
              },
              icon: Icon(
                Icons.settings,
                color: Colors.white,
                size: 20,
              ),
              label: Text(
                'Управление',
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Unbounded',
                  fontSize: 16,
                ),
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: Color(0xFF532E41), // Match the theme color
                padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(14),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // Helper method to get flag asset based on emoji
  String _getFlagAsset(String emojiFlag) {
    // Map emoji to asset paths
    // Ensure these images are added to assets/images/flags/
    switch (emojiFlag) {
      case '🇩🇪':
        return 'assets/images/flags/germany.png';
      case '🇺🇸':
        return 'assets/images/flags/usa.png';
      // Add more cases as needed
      default:
        return 'assets/images/flags/default.png';
    }
  }
}

class InfoButton extends StatelessWidget {
  final String label;

  InfoButton({required this.label});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // OnClick action (currently only prints the label)
        print('$label tapped');
        // Implement your info action here
      },
      child: Text(
        label,
        style: TextStyle(
          fontSize: 14,
          fontFamily: 'Roboto',
        ),
      ),
      style: ElevatedButton.styleFrom(
        foregroundColor: const Color.fromARGB(255, 235, 235, 235),
        backgroundColor: const Color.fromARGB(255, 32, 32, 32)
            .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 Container(
      color: Colors.black54, // Semi-transparent background
      child: Center(
        child: Text(
          'Настройки',
          style: TextStyle(
            fontSize: 24,
            color: Colors.white,
            fontFamily: 'Roboto',
          ),
        ),
      ),
    );
  }
}


we need to move main content to the top of the page pslpslsplsplsplspl