from flask import Flask, jsonify, request, render_template
from flask_cors import CORS
from flask_jwt_extended import (
    JWTManager, create_access_token,
    jwt_required, get_jwt_identity
)
from passlib.hash import pbkdf2_sha256
from logging.handlers import RotatingFileHandler
import json
from datetime import datetime, timedelta
import random
import logging
import string
import os
import user_agents
import traceback
from werkzeug.exceptions import BadRequest

app = Flask(__name__, static_folder='static', template_folder='templates')
CORS(app)

# JWT Configuration
app.config['JWT_SECRET_KEY'] = 'gbauy45bguyab3e4gbaehrbghbg'  # Change this in production
app.config['JWT_ACCESS_TOKEN_EXPIRES'] = timedelta(hours=1)
jwt = JWTManager(app)

OS_OPTIONS = {
    'win2020': 'Windows Server 2020',
    'win2022': 'Windows Server 2022',
    'win2025': 'Windows Server 2025',
    'win10': 'Windows 10',
    'win11': 'Windows 11'
}

IP_POOL_START = [192, 168, 1, 100]  # Starting IP address
current_ip = IP_POOL_START.copy()

def generate_unique_ip():
    global current_ip
    ip = '.'.join(map(str, current_ip))
    current_ip[3] += 1
    if current_ip[3] > 254:
        current_ip[3] = 1
        current_ip[2] += 1
        if current_ip[2] > 254:
            current_ip[2] = 1
            current_ip[1] += 1
            if current_ip[1] > 254:
                current_ip[1] = 1
                current_ip[0] += 1
                if current_ip[0] > 254:
                    raise Exception("IP Pool Exhausted")
    return ip

@app.route('/')
def home():
    return render_template('index.html')

def setup_logging():
    # Create logs directory if it doesn't exist
    if not os.path.exists('logs'):
        os.makedirs('logs')
    
    # Configure main application logger
    formatter = logging.Formatter(
        '[%(asctime)s] %(levelname)s in %(module)s: %(message)s'
    )
    
    # File handler for general logs
    file_handler = RotatingFileHandler(
        'logs/app.log', 
        maxBytes=1024 * 1024,  # 1MB
        backupCount=10
    )
    file_handler.setFormatter(formatter)
    file_handler.setLevel(logging.INFO)
    
    # File handler for errors
    error_file_handler = RotatingFileHandler(
        'logs/error.log',
        maxBytes=1024 * 1024,  # 1MB
        backupCount=10
    )
    error_file_handler.setFormatter(formatter)
    error_file_handler.setLevel(logging.ERROR)
    
    # Configure Flask logger
    app.logger.addHandler(file_handler)
    app.logger.addHandler(error_file_handler)
    app.logger.setLevel(logging.INFO)
    
    # Also log basic request info
    @app.before_request
    def log_request_info():
        app.logger.info(f'Request: {request.method} {request.url} from {request.remote_addr}')
        app.logger.debug(f'Headers: {dict(request.headers)}')
        
        if request.method in ['POST', 'PUT', 'PATCH']:
            if request.is_json:
                try:
                    json_body = request.get_json()
                    app.logger.debug(f'JSON Body: {json_body}')
                except BadRequest as e:
                    app.logger.warning(f'Failed to parse JSON body: {e}')
            else:
                app.logger.debug('No JSON body present in the request.')
        else:
            app.logger.debug('Request method does not contain a JSON body.')
    
    # Add error handler
    @app.errorhandler(Exception)
    def handle_exception(e):
        app.logger.error(f'Unhandled Exception: {str(e)}')
        app.logger.error(traceback.format_exc())
        return jsonify({
            'error': 'An internal server error occurred',
            'details': str(e) if app.debug else None
        }), 500

def load_db():
    try:
        if not os.path.exists('db.json'):
            app.logger.info('Creating new database file')
            with open('db.json', 'w') as f:
                json.dump({
                    'users': {},
                    'server_plans': [
                        {
                            'name': 'План 1',
                            'specs': '1 vCPU, 2 GB RAM',
                            'price': 10
                        },
                        {
                            'name': 'План 2',
                            'specs': '2 vCPU, 4 GB RAM',
                            'price': 20
                        }
                    ],
                    'logs': []  # Ensure logs array exists in initial DB structure
                }, f)
        with open('db.json', 'r') as f:
            db = json.load(f)
            # Ensure logs array exists even in existing DB files
            if 'logs' not in db:
                db['logs'] = []
                save_db(db)
            return db
    except Exception as e:
        app.logger.error(f'Database load error: {str(e)}')
        app.logger.error(traceback.format_exc())
        raise

def save_db(db):
    with open('db.json', 'w') as f:
        json.dump(db, f, indent=2)

def log_activity(username, action, user_agent_string):
    try:
        db = load_db()
        ua = user_agents.parse(user_agent_string)
        log_entry = {
            'timestamp': datetime.now().isoformat(),
            'username': username,
            'action': action,
            'browser': ua.browser.family,
            'os': ua.os.family,
            'device': ua.device.family,
            'ip': request.remote_addr
        }
        
        if 'logs' not in db:
            db['logs'] = []
            
        db['logs'].append(log_entry)
        save_db(db)
    except Exception as e:
        app.logger.error(f'Error logging activity: {str(e)}')
        app.logger.error(traceback.format_exc())

def generate_password():
    return ''.join(random.choices(string.ascii_letters + string.digits, k=12))

@app.route('/api/login', methods=['POST'])
def login():
    try:
        app.logger.info('Processing login request')
        db = load_db()
        data = request.get_json()
        
        if not data:
            app.logger.warning('No JSON data in login request')
            return jsonify({'error': 'No JSON data provided'}), 400
        
        username = data.get('username')
        password = data.get('password')
        
        app.logger.info(f'Login attempt for user: {username}')
        
        if not username or not password:
            app.logger.warning('Missing username or password in login request')
            return jsonify({'error': 'Username and password are required'}), 400
        
        user_data = db['users'].get(username)
        if not user_data:
            app.logger.warning(f'Login failed: User {username} not found')
            return jsonify({'error': 'Invalid credentials'}), 401
            
        if pbkdf2_sha256.verify(password, user_data['password']):
            app.logger.info(f'Login successful for user: {username}')
            access_token = create_access_token(identity=username)
            try:
                log_activity(username, 'login', request.headers.get('User-Agent', ''))
            except Exception as e:
                app.logger.error(f'Failed to log login activity: {str(e)}')
                # Continue with login even if logging fails
            return jsonify({
                'token': access_token,
                'username': username,
                'balance': user_data.get('balance', 0)
            })
        
        app.logger.warning(f'Login failed: Invalid password for user {username}')
        return jsonify({'error': 'Invalid credentials'}), 401
        
    except Exception as e:
        app.logger.error(f'Login error: {str(e)}')
        app.logger.error(traceback.format_exc())
        return jsonify({'error': 'An internal server error occurred'}), 500

@app.route('/api/register', methods=['POST'])
def register():
    try:
        app.logger.info('Processing registration request')
        db = load_db()
        data = request.get_json()
        
        if not data:
            app.logger.warning('No JSON data in registration request')
            return jsonify({'error': 'No JSON data provided'}), 400
        
        username = data.get('username')
        password = data.get('password')
        
        app.logger.info(f'Registration attempt for username: {username}')
        
        if not username or not password:
            app.logger.warning('Missing username or password in registration request')
            return jsonify({'error': 'Username and password are required'}), 400
        
        if username in db['users']:
            app.logger.warning(f'Registration failed: Username {username} already exists')
            return jsonify({'error': 'Username already taken'}), 400
        
        hashed_password = pbkdf2_sha256.hash(password)
        
        db['users'][username] = {
            'password': hashed_password,
            'servers': [],
            'balance': 0,
            'tickets': [],
            'created_at': datetime.now().isoformat()
        }
        
        save_db(db)
        app.logger.info(f'Registration successful for user: {username}')
        log_activity(username, 'register', request.headers.get('User-Agent', ''))
        return jsonify({'message': 'Registration successful'}), 201
        
    except Exception as e:
        app.logger.error(f'Registration error: {str(e)}')
        app.logger.error(traceback.format_exc())
        return jsonify({'error': 'An internal server error occurred'}), 500

@app.route('/api/servers', methods=['GET', 'POST'])
@jwt_required()
def servers():
    current_user = get_jwt_identity()
    db = load_db()
    
    if request.method == 'GET':
        user_data = db['users'].get(current_user)
        if not user_data:
            return jsonify({'error': 'User not found'}), 404
            
        return jsonify(user_data.get('servers', []))
    
    elif request.method == 'POST':
        data = request.get_json()
        if not data or 'plan' not in data or 'os' not in data or 'name' not in data:
            return jsonify({'error': 'Invalid request data'}), 400
            
        user_data = db['users'].get(current_user)
        
        if not user_data:
            return jsonify({'error': 'User not found'}), 404
            
        if user_data['balance'] < data['plan']['price']:
            return jsonify({'error': 'Insufficient funds'}), 400
            
        if data['os'] not in OS_OPTIONS:
            return jsonify({'error': 'Invalid operating system selected'}), 400
            
        # Generate unique IP address
        try:
            server_ip = generate_unique_ip()
        except Exception as e:
            app.logger.error(f'IP generation error: {str(e)}')
            return jsonify({'error': 'Unable to generate unique IP address'}), 500
        
        new_server = {
            'id': len(user_data['servers']) + 1,
            'name': data['name'],
            'plan': data['plan'],
            'os': OS_OPTIONS[data['os']],
            'status': 'active',
            'password': generate_password(),
            'ip': server_ip,
            'created_at': datetime.now().isoformat(),
            'auto_renewal': True
        }
        
        user_data['balance'] -= data['plan']['price']
        user_data['servers'].append(new_server)
        save_db(db)
        log_activity(current_user, 'create_server', request.headers.get('User-Agent', ''))
        return jsonify(new_server), 201

@app.route('/api/servers/<int:server_id>', methods=['GET'])
@jwt_required()
def get_server(server_id):
    current_user = get_jwt_identity()
    db = load_db()
    user_data = db['users'].get(current_user)

    if not user_data:
        return jsonify({'error': 'User not found'}), 404

    server = next((s for s in user_data['servers'] if s['id'] == server_id), None)
    if not server:
        return jsonify({'error': 'Server not found'}), 404

    return jsonify(server), 200

@app.route('/api/servers/<int:server_id>/toggle', methods=['POST'])
@jwt_required()
def toggle_server(server_id):
    current_user = get_jwt_identity()
    db = load_db()
    user_data = db['users'].get(current_user)

    if not user_data:
        return jsonify({'error': 'User not found'}), 404

    server = next((s for s in user_data['servers'] if s['id'] == server_id), None)
    if not server:
        return jsonify({'error': 'Server not found'}), 404

    # Toggle server status
    server['status'] = 'active' if server['status'] == 'frozen' else 'frozen'
    save_db(db)
    log_activity(current_user, f'toggle_server_{server_id}', request.headers.get('User-Agent', ''))
    return jsonify({'message': f"Server status changed to {server['status']}"}), 200

@app.route('/api/servers/<int:server_id>', methods=['DELETE'])
@jwt_required()
def delete_server(server_id):
    current_user = get_jwt_identity()
    db = load_db()
    user_data = db['users'].get(current_user)

    if not user_data:
        return jsonify({'error': 'User not found'}), 404

    server = next((s for s in user_data['servers'] if s['id'] == server_id), None)
    if not server:
        return jsonify({'error': 'Server not found'}), 404

    user_data['servers'].remove(server)
    save_db(db)
    log_activity(current_user, f'delete_server_{server_id}', request.headers.get('User-Agent', ''))
    return jsonify({'message': 'Server deleted successfully'}), 200

@app.route('/api/servers/<int:server_id>', methods=['PUT'])
@jwt_required()
def update_server(server_id):
    current_user = get_jwt_identity()
    db = load_db()
    user_data = db['users'].get(current_user)

    if not user_data:
        return jsonify({'error': 'User not found'}), 404

    server = next((s for s in user_data['servers'] if s['id'] == server_id), None)
    if not server:
        return jsonify({'error': 'Server not found'}), 404

    data = request.get_json()
    if not data:
        return jsonify({'error': 'No data provided'}), 400

    # Example: Allow updating server name and OS
    new_name = data.get('name')
    new_os = data.get('os')

    if new_name:
        server['name'] = new_name

    if new_os:
        if new_os not in OS_OPTIONS:
            return jsonify({'error': 'Invalid operating system selected'}), 400
        server['os'] = OS_OPTIONS[new_os]

    save_db(db)
    log_activity(current_user, f'update_server_{server_id}', request.headers.get('User-Agent', ''))
    return jsonify({'message': 'Server updated successfully', 'server': server}), 200

@app.route('/api/userinfo', methods=['GET', 'PUT'])
@jwt_required()
def userinfo():
    current_user = get_jwt_identity()
    db = load_db()
    user_data = db['users'].get(current_user)

    if not user_data:
        return jsonify({'error': 'User not found'}), 404

    if request.method == 'GET':
        return jsonify({'username': current_user, 'balance': user_data.get('balance', 0)}), 200
    
    elif request.method == 'PUT':
        data = request.get_json()
        if not data:
            return jsonify({'error': 'No data provided'}), 400
        
        current_password = data.get('current_password')
        new_username = data.get('new_username')
        new_password = data.get('new_password')

        if not current_password:
            return jsonify({'error': 'Current password is required'}), 400

        # Verify current password
        if not pbkdf2_sha256.verify(current_password, user_data['password']):
            return jsonify({'error': 'Current password is incorrect'}), 401

        # Update username if provided
        if new_username:
            if new_username in db['users']:
                return jsonify({'error': 'Username already taken'}), 400
            db['users'][new_username] = db['users'].pop(current_user)
            current_user = new_username

        # Update password if provided
        if new_password:
            db['users'][current_user]['password'] = pbkdf2_sha256.hash(new_password)

        save_db(db)
        log_activity(current_user, 'update_userinfo', request.headers.get('User-Agent', ''))
        return jsonify({'message': 'User information updated successfully', 'username': current_user}), 200

@app.route('/api/tickets', methods=['GET', 'POST'])
@jwt_required()
def tickets():
    current_user = get_jwt_identity()
    db = load_db()
    
    if request.method == 'GET':
        user_data = db['users'].get(current_user)
        if not user_data:
            return jsonify({'error': 'User not found'}), 404
            
        return jsonify(user_data.get('tickets', []))
    
    elif request.method == 'POST':
        data = request.get_json()
        if not data or 'title' not in data or 'description' not in data:
            return jsonify({'error': 'Invalid request data'}), 400
            
        user_data = db['users'].get(current_user)
        if not user_data:
            return jsonify({'error': 'User not found'}), 404
            
        new_ticket = {
            'id': len(user_data['tickets']) + 1,
            'title': data['title'],
            'description': data.get('description', ''),
            'status': 'open',
            'created_at': datetime.now().isoformat(),
            'messages': []
        }
        
        user_data['tickets'].append(new_ticket)
        save_db(db)
        log_activity(current_user, 'create_ticket', request.headers.get('User-Agent', ''))
        return jsonify(new_ticket), 201

@app.route('/api/tickets/<int:ticket_id>', methods=['GET'])
@jwt_required()
def get_ticket(ticket_id):
    current_user = get_jwt_identity()
    db = load_db()
    user_data = db['users'].get(current_user)

    if not user_data:
        return jsonify({'error': 'User not found'}), 404

    ticket = next((t for t in user_data['tickets'] if t['id'] == ticket_id), None)
    if not ticket:
        return jsonify({'error': 'Ticket not found'}), 404

    return jsonify(ticket), 200

@app.route('/api/tickets/<int:ticket_id>/reply', methods=['POST'])
@jwt_required()
def reply_ticket(ticket_id):
    current_user = get_jwt_identity()
    db = load_db()
    
    user_data = db['users'].get(current_user)
    if not user_data:
        return jsonify({'error': 'User not found'}), 404
        
    ticket = next((t for t in user_data['tickets'] if t['id'] == ticket_id), None)
    if not ticket:
        return jsonify({'error': 'Ticket not found'}), 404
        
    data = request.get_json()
    if not data or 'message' not in data:
        return jsonify({'error': 'Message is required'}), 400
        
    message = {
        'content': data['message'],
        'sender': current_user,
        'timestamp': datetime.now().isoformat()
    }
    
    ticket['messages'].append(message)
    save_db(db)
    log_activity(current_user, f'reply_ticket_{ticket_id}', request.headers.get('User-Agent', ''))
    return jsonify(message), 201

if __name__ == '__main__':
    setup_logging()
    app.run(debug=True)



<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Управление серверами</title>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
    <div class="container">
        <!-- Auth forms container -->
        <div id="auth-container">
            <!-- Форма входа -->
            <div id="login-form" class="form-container">
                <h2><p align="center">Вход в систему</p></h2>
                <form id="login">
                    <input type="text" id="login-username" placeholder="Имя пользователя" required>
                    <input type="password" id="login-password" placeholder="Пароль" required>
                    <button type="submit" class="btn primary">Войти</button>
                    <p>Нет аккаунта? <a href="#" id="show-register">Зарегистрироваться</a></p>
                </form>
            </div>

            <!-- Форма регистрации -->
            <div id="register-form" class="form-container hidden">
                <h2><p align="center">Регистрация</p></h2>
                <form id="register">
                    <input type="text" id="reg-username" placeholder="Имя пользователя" required>
                    <input type="password" id="reg-password" placeholder="Пароль" required>
                    <button type="submit" class="btn primary">Зарегистрироваться</button>
                    <p>Уже есть аккаунт? <a href="#" id="show-login">Войти</a></p>
                </form>
            </div>
        </div>

        <!-- User panel container -->
        <div id="main-content" class="hidden">
            <header>
                <div id="user-info">
                    <span id="username"></span>
                    <span id="balance"></span>
                </div>
                <button id="settings-btn" class="btn secondary">Настройки</button>
                <button id="logout-btn" class="btn primary">Выйти</button>
            </header>

            <nav>
                <button class="tab-btn active" data-tab="servers">Серверы</button>
                <button class="tab-btn" data-tab="shop">Магазин</button>
                <button class="tab-btn" data-tab="support">Поддержка</button>
            </nav>

            <!-- Секция серверов -->
            <section id="servers" class="tab-content">
                <h2>Мои серверы</h2>
                <div id="servers-list" class="grid"></div>
            </section>

            <!-- Секция магазина -->
            <section id="shop" class="tab-content hidden">
                <h2>Магазин серверов</h2>
                <div class="plans-grid">
                    <div class="plan-card">
                        <h3>Базовый</h3>
                        <p>2 CPU / 4 GB RAM</p>
                        <p class="price">500 ₽/мес</p>
                        <button class="btn primary buy-server" data-plan="basic">Купить</button>
                    </div>
                    <div class="plan-card">
                        <h3>Продвинутый</h3>
                        <p>4 CPU / 8 GB RAM</p>
                        <p class="price">1000 ₽/мес</p>
                        <button class="btn primary buy-server" data-plan="advanced">Купить</button>
                    </div>
                    <div class="plan-card">
                        <h3>Премиум</h3>
                        <p>8 CPU / 16 GB RAM</p>
                        <p class="price">2000 ₽/мес</p>
                        <button class="btn primary buy-server" data-plan="premium">Купить</button>
                    </div>
                </div>
            </section>

            <!-- Секция поддержки -->
            <section id="support" class="tab-content hidden">
                <h2>Поддержка</h2>
                <div class="support-container">
                    <form id="ticket-form">
                        <input type="text" id="ticket-title" placeholder="Тема" required>
                        <textarea id="ticket-description" placeholder="Описание проблемы" required></textarea>
                        <button type="submit" class="btn primary">Отправить</button>
                    </form>
                    <div id="tickets-list"></div>
                </div>
            </section>
        </div>
    </div>

    <!-- Notification Container -->
    <div id="notification-container"></div>

    <!-- Ticket Detail Modal -->
    <div id="ticket-modal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modal-ticket-title">Тема Тикета</h3>
                <button class="close-modal" id="close-ticket-modal">&times;</button>
            </div>
            <div class="modal-body">
                <p id="modal-ticket-description">Описание</p>
                <div id="modal-ticket-messages"></div>
                <form id="reply-form">
                    <textarea id="reply-message" placeholder="Ваш ответ" required></textarea>
                    <button type="submit" class="btn primary">Отправить ответ</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Settings Modal -->
    <div id="settings-modal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Настройки</h3>
                <button class="close-modal" id="close-settings-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="settings-form">
                    <div class="form-group">
                        <label for="new-username">Новое имя пользователя</label>
                        <input type="text" id="new-username" placeholder="Имя пользователя">
                    </div>
                    <div class="form-group">
                        <label for="current-password">Текущий пароль</label>
                        <input type="password" id="current-password" placeholder="Текущий пароль" required>
                    </div>
                    <div class="form-group">
                        <label for="new-password">Новый пароль</label>
                        <input type="password" id="new-password" placeholder="Новый пароль">
                    </div>
                    <button type="submit" class="btn primary">Сохранить</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Buy Server Modal -->
    <div id="buy-server-modal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Создать сервер</h3>
                <button class="close-modal" id="close-buy-server-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="buy-server-form">
                    <div class="form-group">
                        <label for="server-name">Имя сервера</label>
                        <input type="text" id="server-name" placeholder="Введите имя сервера" required>
                    </div>
                    <div class="form-group">
                        <label for="server-os">Операционная система</label>
                        <select id="server-os" required>
                            <option value="" disabled selected>Выберите ОС</option>
                            <option value="win2020">Windows Server 2020</option>
                            <option value="win2022">Windows Server 2022</option>
                            <option value="win2025">Windows Server 2025</option>
                            <option value="win10">Windows 10</option>
                            <option value="win11">Windows 11</option>
                        </select>
                    </div>
                    <button type="submit" class="btn primary">Купить сервер</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Server Details Modal -->
    <div id="server-details-modal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modal-server-name">Имя Сервера</h3>
                <button class="close-modal" id="close-server-details-modal">&times;</button>
            </div>
            <div class="modal-body">
                <p><strong>IP адрес:</strong> <span id="modal-server-ip">192.168.1.1</span></p>
                <p><strong>План:</strong> <span id="modal-server-plan">Базовый</span></p>
                <p><strong>ОС:</strong> <span id="modal-server-os">Windows Server 2022</span></p>
                <p><strong>Статус:</strong> <span id="modal-server-status">Active</span></p>
                <p><strong>Пароль:</strong> <span id="modal-server-password" class="hidden-password">************</span>
                    <button class="btn secondary" id="toggle-password-btn">Показать пароль</button>
                </p>
            </div>
        </div>
    </div>

    <script src="/static/script.js"></script>
</body>
</html>



// Глобальные переменные
let currentUser = null;
const API_URL = '/api';

// Утилиты
const showElement = (id) => document.getElementById(id).classList.remove('hidden');
const hideElement = (id) => document.getElementById(id).classList.add('hidden');
const setActiveTab = (tabId) => {
    document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
    document.getElementById(tabId).classList.remove('hidden');
    document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');
};

// Helper function to get auth headers
const getAuthHeaders = () => {
    const token = localStorage.getItem('authToken');
    return {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
    };
};

// Function to show notifications
function showNotification(message, type = 'error') {
    const container = document.getElementById('notification-container');
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.innerHTML = `
        <span>${message}</span>
        <button class="close-notification">&times;</button>
    `;
    container.appendChild(notification);

    // Show the notification
    setTimeout(() => {
        notification.classList.add('show');
    }, 100);

    // Remove the notification after 5 seconds
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
            notification.remove();
        }, 500);
    }, 5000);

    // Close button functionality
    notification.querySelector('.close-notification').addEventListener('click', () => {
        notification.classList.remove('show');
        setTimeout(() => {
            notification.remove();
        }, 500);
    });
}

// Function to logout
function logout() {
    localStorage.removeItem('authToken');
    localStorage.removeItem('username');
    localStorage.removeItem('balance');
    currentUser = null;
    updateUserInterface();
    location.reload(); // Reload the page after logout
}

// Обработчик регистрации
document.getElementById('register').addEventListener('submit', async (e) => {
    e.preventDefault();
    const username = document.getElementById('reg-username').value;
    const password = document.getElementById('reg-password').value;

    if (!username || !password) {
        showNotification('Пожалуйста, заполните все поля', 'error');
        return;
    }

    try {
        const response = await fetch(`${API_URL}/register`, {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ username, password })
        });

        const data = await response.json();

        if (response.ok) {
            showNotification('Регистрация успешна! Теперь вы можете войти.', 'success');
            showElement('login-form');
            hideElement('register-form');
        } else {
            showNotification(data.error || 'Ошибка регистрации', 'error');
        }
    } catch (error) {
        console.error('Ошибка регистрации:', error);
        showNotification('Ошибка при регистрации', 'error');
    }
});

// Обработчик входа
document.getElementById('login').addEventListener('submit', async (e) => {
    e.preventDefault();
    const username = document.getElementById('login-username').value;
    const password = document.getElementById('login-password').value;

    if (!username || !password) {
        showNotification('Пожалуйста, заполните все поля', 'error');
        return;
    }

    try {
        const response = await fetch(`${API_URL}/login`, {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest' // Add this header
            },
            credentials: 'same-origin', // Add credentials
            body: JSON.stringify({ username, password })
        });

        if (!response.ok) {
            const data = await response.json();
            throw new Error(data.error || `HTTP error! status: ${response.status}`);
        }

        const data = await response.json();

        if (data.token) {
            // Store the token and user data in localStorage
            localStorage.setItem('authToken', data.token);
            localStorage.setItem('username', data.username);
            localStorage.setItem('balance', data.balance); // Assuming balance is a number
            currentUser = {
                username: data.username,
                balance: data.balance
            };
            updateUserInterface();
            setActiveTab('servers');
            showNotification('Вход выполнен успешно!', 'success');
        } else {
            showNotification('Неверные учетные данные', 'error');
        }
    } catch (error) {
        console.error('Ошибка входа:', error);
        showNotification(`Ошибка при входе в систему: ${error.message}`, 'error');
    }
});

// Add a function to check if user is authenticated
function isAuthenticated() {
    return localStorage.getItem('authToken') !== null;
}

// Управление серверами
async function loadServers() {
    try {
        const response = await fetch(`${API_URL}/servers`, {
            method: 'GET',
            headers: getAuthHeaders()
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
        }

        const servers = await response.json();
        displayServers(servers);
    } catch (error) {
        console.error('Ошибка загрузки серверов:', error);
        showNotification(error.message, 'error');
    }
}

function displayServers(servers) {
    const serversList = document.getElementById('servers-list');
    serversList.innerHTML = '';

    if (servers.length === 0) {
        serversList.innerHTML = '<p>У вас нет серверов.</p>';
        return;
    }

    servers.forEach(server => {
        const serverCard = document.createElement('div');
        serverCard.className = 'server-card';
        serverCard.innerHTML = `
            <h3>${server.name}</h3>
            <span class="server-status status-${server.status}">${server.status}</span>
            <p><strong>IP:</strong> ${server.ip}</p>
            <p>План: ${server.plan.name}</p>
            <p>CPU: ${server.plan.cpu} / RAM: ${server.plan.ram}GB</p>
            <button class="btn primary view-server" data-server-id="${server.id}">Просмотреть</button>
        `;
        serversList.appendChild(serverCard);
    });

    // Attach event listeners to view server buttons
    document.querySelectorAll('.view-server').forEach(button => {
        button.addEventListener('click', () => {
            const serverId = button.getAttribute('data-server-id');
            openServerDetailsModal(serverId);
        });
    });
}

// Function to toggle server status
async function toggleServer(serverId, currentStatus) {
    try {
        const newStatus = currentStatus === 'active' ? 'stop' : 'start';
        const response = await fetch(`${API_URL}/servers/${serverId}/toggle`, {
            method: 'POST',
            headers: getAuthHeaders()
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
        }

        await loadServers();
        showNotification(`Сервер ${newStatus === 'start' ? 'запущен' : 'остановлен'} успешно!`, 'success');
    } catch (error) {
        console.error('Ошибка при переключении сервера:', error);
        showNotification(error.message, 'error');
    }
}

// Function to delete a server
async function deleteServer(serverId) {
    if (!confirm('Вы уверены, что хотите удалить этот сервер?')) return;

    try {
        const response = await fetch(`${API_URL}/servers/${serverId}`, {
            method: 'DELETE',
            headers: getAuthHeaders()
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
        }

        await loadServers();
        showNotification('Сервер успешно удален!', 'success');
    } catch (error) {
        console.error('Ошибка при удалении сервера:', error);
        showNotification(error.message, 'error');
    }
}

// Обработчик отправки тикетов
document.getElementById('ticket-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const title = document.getElementById('ticket-title').value;
    const description = document.getElementById('ticket-description').value;

    if (!title || !description) {
        showNotification('Пожалуйста, заполните все поля', 'error');
        return;
    }

    try {
        const response = await fetch(`${API_URL}/tickets`, {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                title,
                description
            })
        });

        if (!response.ok) {
            const data = await response.json();
            throw new Error(data.error || 'Ошибка при создании тикета');
        }

        showNotification('Тикет успешно создан!', 'success');
        document.getElementById('ticket-form').reset();
        loadTickets();
    } catch (error) {
        console.error('Ошибка создания тикета:', error);
        showNotification(error.message, 'error');
    }
});

// Function to load all tickets
async function loadTickets() {
    try {
        const response = await fetch(`${API_URL}/tickets`, {
            method: 'GET',
            headers: getAuthHeaders()
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
        }

        const tickets = await response.json();
        displayTickets(tickets);
    } catch (error) {
        console.error('Ошибка загрузки тикетов:', error);
        showNotification(error.message, 'error');
    }
}

// Function to display all tickets
function displayTickets(tickets) {
    const ticketsList = document.getElementById('tickets-list');
    ticketsList.innerHTML = '';

    if (tickets.length === 0) {
        ticketsList.innerHTML = '<p>У вас нет тикетов.</p>';
        return;
    }

    tickets.forEach(ticket => {
        const ticketCard = document.createElement('div');
        ticketCard.className = 'ticket-card';
        ticketCard.innerHTML = `
            <div class="ticket-header">
                <h3>${ticket.title}</h3>
                <span class="ticket-status status-${ticket.status}">${ticket.status}</span>
            </div>
            <p>${ticket.description}</p>
            <small>Создан: ${new Date(ticket.created_at).toLocaleString()}</small>
            <button class="btn primary view-ticket" data-ticket-id="${ticket.id}">Просмотреть</button>
        `;
        ticketsList.appendChild(ticketCard);
    });

    // Attach event listeners to view buttons
    document.querySelectorAll('.view-ticket').forEach(button => {
        button.addEventListener('click', () => {
            const ticketId = button.getAttribute('data-ticket-id');
            openTicketModal(ticketId);
        });
    });
}

// Function to open ticket modal and load ticket details
async function openTicketModal(ticketId) {
    try {
        const response = await fetch(`${API_URL}/tickets/${ticketId}`, {
            method: 'GET',
            headers: getAuthHeaders()
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
        }

        const ticket = await response.json();
        displayTicketDetails(ticket);
    } catch (error) {
        console.error('Ошибка загрузки тикета:', error);
        showNotification(error.message, 'error');
    }
}

// Function to display ticket details in modal
function displayTicketDetails(ticket) {
    // Populate modal fields
    document.getElementById('modal-ticket-title').textContent = ticket.title;
    document.getElementById('modal-ticket-description').textContent = ticket.description;

    const messagesContainer = document.getElementById('modal-ticket-messages');
    messagesContainer.innerHTML = '';

    if (ticket.messages.length === 0) {
        messagesContainer.innerHTML = '<p>Нет сообщений.</p>';
    } else {
        ticket.messages.forEach(msg => {
            const msgDiv = document.createElement('div');
            msgDiv.className = 'ticket-message';
            msgDiv.innerHTML = `
                <p><span class="sender">${msg.sender}</span> <span class="timestamp">${new Date(msg.timestamp).toLocaleString()}</span></p>
                <p>${msg.content}</p>
            `;
            messagesContainer.appendChild(msgDiv);
        });
    }

    // Show modal
    showElement('ticket-modal');
}

// Обработчик ответа на тикет
document.getElementById('reply-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const message = document.getElementById('reply-message').value.trim();
    const ticketId = document.querySelector('.view-ticket').getAttribute('data-ticket-id'); // Adjust as needed

    if (!message) {
        showNotification('Пожалуйста, введите сообщение', 'error');
        return;
    }

    try {
        const response = await fetch(`${API_URL}/tickets/${ticketId}/reply`, {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({ message })
        });

        if (!response.ok) {
            const data = await response.json();
            throw new Error(data.error || 'Ошибка при отправке ответа');
        }

        // Reload ticket details
        openTicketModal(ticketId);
        showNotification('Ответ отправлен успешно!', 'success');
    } catch (error) {
        console.error('Ошибка отправки ответа:', error);
        showNotification(error.message, 'error');
    }
});

// Close ticket modal
document.getElementById('close-ticket-modal').addEventListener('click', () => {
    hideElement('ticket-modal');
    document.getElementById('reply-form').reset();
});

// Settings Modal Functionality
document.getElementById('settings-btn').addEventListener('click', () => {
    showElement('settings-modal');
});

document.getElementById('close-settings-modal').addEventListener('click', () => {
    hideElement('settings-modal');
    document.getElementById('settings-form').reset();
});

// Обработчик настроек
document.getElementById('settings-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const newUsername = document.getElementById('new-username').value.trim();
    const currentPassword = document.getElementById('current-password').value;
    const newPassword = document.getElementById('new-password').value.trim();

    if (!currentPassword) {
        showNotification('Текущий пароль обязателен', 'error');
        return;
    }

    if (!newUsername && !newPassword) {
        showNotification('Пожалуйста, введите новое имя пользователя или пароль', 'error');
        return;
    }

    const payload = {
        current_password: currentPassword
    };

    if (newUsername) payload.new_username = newUsername;
    if (newPassword) payload.new_password = newPassword;

    try {
        const response = await fetch(`${API_URL}/userinfo`, {
            method: 'PUT',
            headers: getAuthHeaders(),
            body: JSON.stringify(payload)
        });

        if (!response.ok) {
            const data = await response.json();
            throw new Error(data.error || `HTTP error! status: ${response.status}`);
        }

        const data = await response.json();

        // Update local storage and UI
        if (data.username) {
            localStorage.setItem('username', data.username);
            currentUser.username = data.username;
            document.getElementById('username').textContent = `Пользователь: ${currentUser.username}`;
        }

        if (data.balance !== undefined) {
            localStorage.setItem('balance', data.balance);
            currentUser.balance = data.balance;
            document.getElementById('balance').textContent = `Баланс: ${currentUser.balance} ₽`;
        }

        hideElement('settings-modal');
        document.getElementById('settings-form').reset();
        showNotification('Настройки успешно обновлены!', 'success');
    } catch (error) {
        console.error('Ошибка обновления настроек:', error);
        showNotification(error.message, 'error');
    }
});

// Function to open Buy Server Modal
document.querySelectorAll('.buy-server').forEach(btn => {
    btn.addEventListener('click', () => {
        showElement('buy-server-modal');
    });
});

// Handle Buy Server Form Submission
document.getElementById('buy-server-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const serverName = document.getElementById('server-name').value.trim();
    const serverOS = document.getElementById('server-os').value;

    if (!serverName || !serverOS) {
        showNotification('Пожалуйста, заполните все поля', 'error');
        return;
    }

    const plan = document.querySelector('.buy-server.active')?.dataset.plan || 'basic';
    const planConfigs = {
        basic: { name: 'Базовый', cpu: 2, ram: 4, price: 500 },
        advanced: { name: 'Продвинутый', cpu: 4, ram: 8, price: 1000 },
        premium: { name: 'Премиум', cpu: 8, ram: 16, price: 2000 }
    };

    try {
        const response = await fetch(`${API_URL}/servers`, {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                name: serverName,
                plan: planConfigs[plan],
                os: serverOS
            })
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || 'Ошибка при создании сервера');
        }

        const newServer = await response.json();
        showNotification('Сервер успешно создан!', 'success');
        hideElement('buy-server-modal');
        document.getElementById('buy-server-form').reset();
        loadServers();

        // Update the user balance
        currentUser.balance -= planConfigs[plan].price;
        localStorage.setItem('balance', currentUser.balance); // Update localStorage
        document.getElementById('balance').textContent = `Баланс: ${currentUser.balance} ₽`;
    } catch (error) {
        console.error('Ошибка покупки сервера:', error);
        showNotification(error.message, 'error');
    }
});

// Function to open Server Details Modal
async function openServerDetailsModal(serverId) {
    try {
        const response = await fetch(`${API_URL}/servers/${serverId}`, {
            method: 'GET',
            headers: getAuthHeaders()
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
        }

        const server = await response.json();
        displayServerDetails(server);
    } catch (error) {
        console.error('Ошибка загрузки сервера:', error);
        showNotification(error.message, 'error');
    }
}

// Function to display server details in modal
function displayServerDetails(server) {
    // Populate modal fields
    document.getElementById('modal-server-name').textContent = server.name;
    document.getElementById('modal-server-ip').textContent = server.ip;
    document.getElementById('modal-server-plan').textContent = server.plan.name;
    document.getElementById('modal-server-os').textContent = server.os;
    document.getElementById('modal-server-status').textContent = server.status;

    const passwordElement = document.getElementById('modal-server-password');
    passwordElement.textContent = server.password;
    passwordElement.classList.add('hidden-password');

    const togglePasswordBtn = document.getElementById('toggle-password-btn');
    togglePasswordBtn.textContent = 'Показать пароль';

    togglePasswordBtn.onclick = () => {
        if (passwordElement.classList.contains('hidden-password')) {
            passwordElement.classList.remove('hidden-password');
            togglePasswordBtn.textContent = 'Скрыть пароль';
        } else {
            passwordElement.classList.add('hidden-password');
            togglePasswordBtn.textContent = 'Показать пароль';
        }
    };

    // Show modal
    showElement('server-details-modal');
}

// Close Server Details Modal
document.getElementById('close-server-details-modal').addEventListener('click', () => {
    hideElement('server-details-modal');
});

// updateUserInterface function
function updateUserInterface() {
    const authContainer = document.getElementById('auth-container');
    const mainContent = document.getElementById('main-content');
    const usernameElement = document.getElementById('username');
    const balanceElement = document.getElementById('balance');

    if (isAuthenticated()) {
        if (!currentUser) {
            const username = localStorage.getItem('username');
            const balance = parseFloat(localStorage.getItem('balance'));

            if (username && !isNaN(balance)) {
                currentUser = {
                    username: username,
                    balance: balance
                };
            } else {
                // Optionally, fetch user info from backend (recommended)
                const token = localStorage.getItem('authToken');
                fetch(`${API_URL}/userinfo`, {
                    method: 'GET',
                    headers: getAuthHeaders()
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Failed to fetch user info');
                    }
                    return response.json();
                })
                .then(data => {
                    currentUser = {
                        username: data.username,
                        balance: data.balance
                    };
                    // Optionally, store these details in localStorage
                    localStorage.setItem('username', data.username);
                    localStorage.setItem('balance', data.balance);
                    // Update UI
                    authContainer?.classList.add('hidden');
                    mainContent?.classList.remove('hidden');
                    if (usernameElement) usernameElement.textContent = `Пользователь: ${currentUser.username}`;
                    if (balanceElement) balanceElement.textContent = `Баланс: ${currentUser.balance} ₽`;
                    // Load user data
                    loadServers();
                    loadTickets();
                })
                .catch(error => {
                    console.error('Failed to fetch user info:', error);
                    logout(); // Optionally, log out the user if fetching fails
                });
            }
        } else {
            authContainer?.classList.add('hidden');
            mainContent?.classList.remove('hidden');

            // Update user information in the header
            if (usernameElement) usernameElement.textContent = `Пользователь: ${currentUser.username}`;
            if (balanceElement) balanceElement.textContent = `Баланс: ${currentUser.balance} ₽`;

            // Load user data
            loadServers();
            loadTickets();
        }
    } else {
        // Show auth container and hide main content
        authContainer?.classList.remove('hidden');
        mainContent?.classList.add('hidden');
    }
}

// Обработчики переключения форм
document.getElementById('show-register').addEventListener('click', (e) => {
    e.preventDefault();
    hideElement('login-form');
    showElement('register-form');
});

document.getElementById('show-login').addEventListener('click', (e) => {
    e.preventDefault();
    hideElement('register-form');
    showElement('login-form');
});

// Обработчики вкладок
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => setActiveTab(btn.dataset.tab));
});

// Покупка сервера (Open Buy Server Modal)
document.querySelectorAll('.buy-server').forEach(btn => {
    btn.addEventListener('click', () => {
        showElement('buy-server-modal');
    });
});

// Handle Buy Server Form Submission
document.getElementById('buy-server-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const serverName = document.getElementById('server-name').value.trim();
    const serverOS = document.getElementById('server-os').value;

    if (!serverName || !serverOS) {
        showNotification('Пожалуйста, заполните все поля', 'error');
        return;
    }

    // Determine which plan is selected based on active tab or button data
    const activePlanBtn = document.querySelector('.buy-server.active');
    const plan = activePlanBtn ? activePlanBtn.dataset.plan : 'basic';
    const planConfigs = {
        basic: { name: 'Базовый', cpu: 2, ram: 4, price: 500 },
        advanced: { name: 'Продвинутый', cpu: 4, ram: 8, price: 1000 },
        premium: { name: 'Премиум', cpu: 8, ram: 16, price: 2000 }
    };

    try {
        const response = await fetch(`${API_URL}/servers`, {
            method: 'POST',
            headers: getAuthHeaders(),
            body: JSON.stringify({
                name: serverName,
                plan: planConfigs[plan],
                os: serverOS
            })
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || 'Ошибка при создании сервера');
        }

        const newServer = await response.json();
        showNotification('Сервер успешно создан!', 'success');
        hideElement('buy-server-modal');
        document.getElementById('buy-server-form').reset();
        loadServers();

        // Update the user balance
        currentUser.balance -= planConfigs[plan].price;
        localStorage.setItem('balance', currentUser.balance); // Update localStorage
        document.getElementById('balance').textContent = `Баланс: ${currentUser.balance} ₽`;
    } catch (error) {
        console.error('Ошибка покупки сервера:', error);
        showNotification(error.message, 'error');
    }
});

// Function to open Server Details Modal
async function openServerDetailsModal(serverId) {
    try {
        const response = await fetch(`${API_URL}/servers/${serverId}`, {
            method: 'GET',
            headers: getAuthHeaders()
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
        }

        const server = await response.json();
        displayServerDetails(server);
    } catch (error) {
        console.error('Ошибка загрузки сервера:', error);
        showNotification(error.message, 'error');
    }
}

// Function to display server details in modal
function displayServerDetails(server) {
    // Populate modal fields
    document.getElementById('modal-server-name').textContent = server.name;
    document.getElementById('modal-server-ip').textContent = server.ip;
    document.getElementById('modal-server-plan').textContent = server.plan.name;
    document.getElementById('modal-server-os').textContent = server.os;
    document.getElementById('modal-server-status').textContent = server.status;

    const passwordElement = document.getElementById('modal-server-password');
    passwordElement.textContent = server.password;
    passwordElement.classList.add('hidden-password');

    const togglePasswordBtn = document.getElementById('toggle-password-btn');
    togglePasswordBtn.textContent = 'Показать пароль';

    togglePasswordBtn.onclick = () => {
        if (passwordElement.classList.contains('hidden-password')) {
            passwordElement.classList.remove('hidden-password');
            togglePasswordBtn.textContent = 'Скрыть пароль';
        } else {
            passwordElement.classList.add('hidden-password');
            togglePasswordBtn.textContent = 'Показать пароль';
        }
    };

    // Show modal
    showElement('server-details-modal');
}

// Close Server Details Modal
document.getElementById('close-server-details-modal').addEventListener('click', () => {
    hideElement('server-details-modal');
});

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
    const logoutBtn = document.getElementById('logout-btn');
    if (logoutBtn) {
        logoutBtn.addEventListener('click', logout);
    }

    updateUserInterface();
});



/* Основные стили */
:root {
    --primary-color: #941b31;
    --secondary-color: #bbb;
    --success-color: #46d369;
    --danger-color: #f53b57;
    --light-gray: #0a0909; /* Dark background color */
    --dark-gray: #eaeaea; /* Light text color */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.8;
    color: var(--dark-gray);
    background-color: var(--light-gray);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Заголовок */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #1e1e1e;
    color: var(--dark-gray);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Формы */
.form-container {
    width: 800px;
    height: 370px;
    margin: 290px auto;
    padding: 70px;
    background-image: url("https://api15.iloveimg.com/v1/download/1thxyjmgs31rqAnbAm61gfgd0wp969xy0kw96mzb811s717rAs2k5089zhk5Asj0svvjhdbgvwrrnts9plw9rx99xf1qpbmlqp7zdwdzq3sbp9j384lxjcfzkwvp87yg1n0z2AcnAxls24w5mz5pqnjcp6wwt298jbvjqjcq0msmncz7pxp1");
    color: var(--dark-gray);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

input,
textarea {
    padding: 10px;
    background-color: #333;
    border: 2px solid #5c5c5c;
    border-radius: 12px;
    color: var(--dark-gray);
    font-size: 16px;
}

textarea {
    min-height: 100px;
    resize: vertical;
}

/* Кнопки */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.btn.primary {
    background-color: var(--primary-color);
    color: white;
}

.btn.primary:hover {
    background-color: #b51844;
}

/* Навигация */
nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--secondary-color);
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Сетка серверов */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.server-card {
    background-color: #1e1e1e;
    color: var(--dark-gray);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.server-card h3 {
    margin-bottom: 10px;
}

.server-password {
    background-color: #333;
    padding: 8px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
}

.server-password.hidden-password {
    color: transparent;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

.server-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--dark-gray);
}

.status-active {
    background-color: var(--success-color);
}

.status-frozen {
    background-color: var(--danger-color);
}

/* Планы в магазине */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.plan-card {
    background-color: #1e1e1e;
    color: var(--dark-gray);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.plan-card h3 {
    margin-bottom: 10px;
}

.price {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    margin: 15px 0;
}

/* Поддержка */
.support-container {
    max-width: 800px;
    margin: 0 auto;
}

.ticket-card {
    background-color: #1e1e1e;
    color: var(--dark-gray);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 15px;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ticket-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--dark-gray);
}

/* Notification */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    background-color: #1e1e1e;
    color: var(--dark-gray);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.notification.show {
    opacity: 1;
}

.notification.success {
    background-color: var(--success-color);
    color: white;
}

.notification.error {
    background-color: var(--danger-color);
    color: white;
}

.notification .close-notification {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background-color: #1e1e1e;
    color: var(--dark-gray);
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--secondary-color);
}

.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

#modal-ticket-messages, #modal-server-messages {
    margin-top: 20px;
    border-top: 1px solid var(--secondary-color);
    padding-top: 10px;
}

.ticket-message {
    margin-bottom: 10px;
}

.ticket-message .sender {
    font-weight: bold;
}

.ticket-message .timestamp {
    font-size: 12px;
    color: var(--secondary-color);
}

.server-password {
    background-color: #333;
    padding: 8px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
}

.hidden-password {
    color: transparent;
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

.show-password {
    color: var(--dark-gray);
    text-shadow: none;
}

/* Settings Button Style */
.btn.secondary {
    background-color: var(--secondary-color);
    color: var(--light-gray);
}

.btn.secondary:hover {
    background-color: #999;
}

/* Buy Server Modal Specific Styles */
#buy-server-form .form-group {
    margin-bottom: 15px;
}

#buy-server-form .form-group label {
    display: block;
    margin-bottom: 5px;
}

#buy-server-form .form-group input,
#buy-server-form .form-group select {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    background-color: #333;
    border: 1px solid #444;
    color: var(--dark-gray);
}

/* Server Details Modal Specific Styles */
#server-details-modal p {
    margin-bottom: 10px;
}

#toggle-password-btn {
    margin-left: 10px;
    padding: 5px 10px;
    font-size: 14px;
}

/* Animation */
@keyframes slideIn {
    from {
        transform: translateX(120%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(120%);
    }
}

.notification-slide-in {
    animation: slideIn 0.3s ease-in-out forwards;
}

.notification-slide-out {
    animation: slideOut 0.3s ease-in-out forwards;
}

.status-open {
    background-color: var(--primary-color);
}

.status-closed {
    background-color: var(--secondary-color);
}

/* Утилиты */
.hidden {
    display: none !important;
}

/* Адаптивность */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .grid,
    .plans-grid {
        grid-template-columns: 1fr;
    }

    nav {
        flex-wrap: wrap;
    }

    .tab-btn {
        flex: 1;
        min-width: 120px;
    }
}

.error-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #ff4444;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease-in-out;
}

.close-error {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
}

.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group select,
.form-group input {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    background-color: #333;
    border: 1px solid #444;
    color: var(--dark-gray);
}


/* Анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

/* Модальные окна */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: #1e1e1e;
    color: var(--dark-gray);
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--secondary-color);
}



Короче юзать мы будем docker-compose для запуска и создания этой параши. Создаем в папке root папочку test containers чтобы там все размещать. В этой папке делаем файл docker-compose.yml с таким содержанием:

    version: '3'
    services:
      windows:
        image: dockurr/windows
        container_name: имя
        environment:
          VERSION: "версии винды можете взять с отборного навоза ссылку на который я указал выше"
          DISK_SIZE: "100G" ( к примеру )
          RAM_SIZE: "8G" (к примеру)
          CPU_CORES: "4" (К ПРИМЕРУ)
          USERNAME: "юзер от рдп"
          PASSWORD: "пароль от рдп"
          KEYBOARD: "ru-RU"
        devices:
          - /dev/kvm
        cap_add:
          - NET_ADMIN
        ports:
          - "портвнспубличный:8006/tcp"
          - "портрдппубличный:3389/tcp"
          - "портрдппубличный:3389/udp"
        stop_grace_period: 2m
        restart: unless-stopped

подключение к серверу по ssh: 78.46.62.242, root, imp6Vjj8s4z3Ui
		
Создали? Ай джиги! Теперь переходим к запуску этого говнеца | docker-compose up -d | после того как запустили можем увидеть то что контейнер запущен по порту 8006 и в самой системе | docker ps | (логирование скачивания а после переход в внс)

Переходим к управлению питания этим контейнером:
docker start имяконтейнераилиайди   | запуск контейнера
docker stop имяконтейнераилиайди    | остановка контейнера
docker kill имяконтейнераилиайди    | килл контейнера (принудительная остановка)
docker restart имяконтейнераилиайди | перезапуск контейнера
docker rm имяконтейнераилиайди      | удаление контейнера (перед удалением контейнер должен быть остановлен)

docker network prune -f
docker system prune -f
docker volume prune -f