<?php
// panel/instalar_panel_cliente.php

require_once __DIR__ . '/includes/proyecto_helper.php';

$resultado = null;
$subdominios_disponibles = listarSubdominios();

// Procesar formulario
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['instalar_panel'])) {
    $cliente = trim($_POST['cliente_nombre']);
    $resultado = copiarProyectoACliente($cliente);
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instalar Panel en Cliente - TizenTube Master</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
        .container { max-width: 900px; margin: 0 auto; }
        .card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        .card-header {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .card-header h1 { font-size: 28px; margin-bottom: 10px; }
        .card-header p { opacity: 0.8; }
        .card-body { padding: 30px; }
        .form-group { margin-bottom: 25px; }
        label { display: block; font-weight: 600; margin-bottom: 8px; color: #333; }
        input[type="text"], select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
        }
        input[type="text"]:focus, select:focus {
            outline: none;
            border-color: #667eea;
        }
        .input-preview {
            margin-top: 8px;
            font-size: 13px;
            color: #666;
            background: #f5f5f5;
            padding: 8px 12px;
            border-radius: 6px;
        }
        button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }
        button:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102,126,234,0.4); }
        .alert {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 25px;
        }
        .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
        .result-info {
            margin-top: 20px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .result-info h3 { margin-bottom: 15px; color: #333; }
        .result-info p { margin-bottom: 10px; }
        .result-info a { color: #667eea; word-break: break-all; }
        .subdominios-list {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
        }
        .subdominios-list h3 { margin-bottom: 15px; }
        .subdominio-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 8px;
        }
        .subdominio-nombre { font-family: monospace; font-size: 14px; }
        .badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .badge-success { background: #28a745; color: white; }
        .badge-warning { background: #ffc107; color: #333; }
        .btn-small {
            padding: 4px 8px;
            font-size: 12px;
            background: #667eea;
            width: auto;
        }
        hr { margin: 20px 0; border: none; border-top: 1px solid #e0e0e0; }
        .back-link { display: inline-block; margin-top: 20px; color: #667eea; text-decoration: none; }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h1>📦 Instalar Panel en Cliente</h1>
                <p>Copia el proyecto base a un subdominio ya creado</p>
            </div>
            <div class="card-body">
                
                <?php if ($resultado): ?>
                    <?php if ($resultado['success']): ?>
                        <div class="alert alert-success">
                            ✅ <?php echo htmlspecialchars($resultado['message']); ?>
                        </div>
                        <div class="result-info">
                            <h3>🎉 Panel Instalado Correctamente</h3>
                            <p><strong>👤 Cliente:</strong> <?php echo htmlspecialchars($resultado['data']['cliente']); ?></p>
                            <p><strong>🌐 Subdominio:</strong> <?php echo htmlspecialchars($resultado['data']['subdominio']); ?></p>
                            <p><strong>🔗 URL del Panel:</strong><br>
                               <a href="<?php echo htmlspecialchars($resultado['data']['url']); ?>" target="_blank">
                                   <?php echo htmlspecialchars($resultado['data']['url']); ?>
                               </a>
                            </p>
                        </div>
                    <?php else: ?>
                        <div class="alert alert-error">
                            ❌ <?php echo htmlspecialchars($resultado['message']); ?>
                        </div>
                    <?php endif; ?>
                    <hr>
                <?php endif; ?>
                
                <!-- Formulario para instalar en subdominio existente -->
                <form method="POST" action="">
                    <div class="form-group">
                        <label for="cliente_nombre">Nombre del subdominio (cliente):</label>
                        <input type="text" 
                               id="cliente_nombre" 
                               name="cliente_nombre" 
                               placeholder="Ej: cliente1, juanperez"
                               pattern="[a-zA-Z0-9]+"
                               required>
                        <div class="input-preview">
                            📌 El subdominio debe existir en aaPanel: <span id="preview-url">cliente</span>.<?php echo MAIN_DOMAIN; ?>
                        </div>
                        <small style="color: #666; display: block; margin-top: 5px;">
                            ⚠️ Primero crea el subdominio manualmente en aaPanel, luego usa este formulario para instalar el panel.
                        </small>
                    </div>
                    
                    <button type="submit" name="instalar_panel">📥 Instalar Panel en Cliente</button>
                </form>
                
                <!-- Lista de subdominios existentes -->
                <div class="subdominios-list">
                    <h3>📁 Subdominios creados en aaPanel</h3>
                    <?php if (empty($subdominios_disponibles)): ?>
                        <p>No hay subdominios creados. Créalos primero en aaPanel.</p>
                    <?php else: ?>
                        <?php foreach ($subdominios_disponibles as $sub): ?>
                            <div class="subdominio-item">
                                <span class="subdominio-nombre"><?php echo htmlspecialchars($sub['nombre']); ?></span>
                                <?php if ($sub['tiene_panel']): ?>
                                    <span class="badge badge-success">✅ Panel instalado</span>
                                    <a href="<?php echo htmlspecialchars($sub['url_panel']); ?>" target="_blank" class="btn-small" style="background: #28a745; color: white; padding: 4px 8px; border-radius: 4px; text-decoration: none;">🔗 Abrir</a>
                                <?php else: ?>
                                    <span class="badge badge-warning">⚠️ Sin panel</span>
                                    <button onclick="document.getElementById('cliente_nombre').value='<?php echo htmlspecialchars($sub['nombre']); ?>'" class="btn-small" style="background: #667eea; color: white; border: none; cursor: pointer;">📥 Usar este</button>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
                
                <a href="index.php" class="back-link">← Volver al panel principal</a>
            </div>
        </div>
    </div>
    
    <script>
        const inputCliente = document.getElementById('cliente_nombre');
        const previewUrl = document.getElementById('preview-url');
        const dominio = '<?php echo MAIN_DOMAIN; ?>';
        
        inputCliente.addEventListener('input', function() {
            let valor = this.value.trim();
            previewUrl.textContent = (valor === '') ? 'cliente' : valor;
        });
    </script>
</body>
</html>