@extends('dashboard.layouts.app')

@section('title', 'Crear Base de Datos')
@section('page-title', 'Crear Nueva Base de Datos Administrada')

@section('styles')
<style>
    .two-column-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    @media (max-width: 968px) {
        .two-column-layout {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')
<div style="max-width: 1400px; margin: 0 auto;">
    <form method="POST" action="{{ route('databases.store') }}">
        @csrf

        @if ($errors->any())
            <div style="background: #f8d7da; color: #721c24; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem;">
                @foreach ($errors->all() as $error)
                    <p style="margin: 0.5rem 0;">{{ $error }}</p>
                @endforeach
            </div>
        @endif

        <!-- Two Column Layout -->
        <div class="two-column-layout">

            <!-- Left Column -->
            <div>
                <!-- Info Box -->
                <div style="background: #e7f3ff; border-left: 4px solid #2196F3; padding: 1.5rem; margin-bottom: 2rem; border-radius: 0.5rem;">
                    <h3 style="font-size: 1.6rem; color: #043d13; margin-bottom: 0.5rem;">
                        <i class="fas fa-info-circle"></i> Bases de Datos Administradas
                    </h3>
                    <ul style="font-size: 1.3rem; color: #666; margin: 0.5rem 0 0 2rem; line-height: 1.8;">
                        <li>Alta disponibilidad y backups automáticos</li>
                        <li>Escalado vertical y horizontal</li>
                        <li>MySQL, PostgreSQL, Valkey, Kafka</li>
                    </ul>
                </div>

                <!-- Region -->
                <div style="background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 2rem;">
                    <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Región *</label>
                    <select name="region" required style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                        <option value="">Selecciona una región</option>
                        @foreach ($regions as $region)
                            <option value="{{ $region['id'] }}">{{ $region['city'] }} ({{ $region['country'] }})</option>
                        @endforeach
                    </select>
                </div>

                <!-- Server Type Information -->
                <div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 1.5rem; margin-bottom: 2rem; border-radius: 0.5rem;">
                    <h3 style="font-size: 1.6rem; color: #043d13; margin-bottom: 1rem;">
                        <i class="fas fa-layer-group"></i> Tipos de Servidor
                    </h3>
                    <div style="font-size: 1.3rem; line-height: 1.8;">
                        <div><strong style="color: #6c757d;">Hobbyist:</strong> Desarrollo y pruebas</div>
                        <div><strong style="color: #17a2b8;">Startup:</strong> Pequeños proyectos</div>
                        <div><strong style="color: #28a745;">Business:</strong> Uso empresarial</div>
                        <div><strong style="color: #dc3545;">Premium:</strong> Alto rendimiento</div>
                        <div><strong style="color: #6f42c1;">OCC SO:</strong> Optimizado para storage</div>
                    </div>
                </div>

                <!-- Plan Selection -->
                <div style="background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 2rem;">
                    <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Tipo de Servidor / Plan *</label>
                    <select name="plan" id="planSelect" required style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                        <option value="">Selecciona un tipo de servidor</option>
                        @foreach ($plansByType as $type => $plans)
                            <optgroup label="📦 {{ $typeLabels[$type] ?? ucfirst($type) }}">
                                @foreach ($plans as $plan)
                                    @php
                                        $engines = array_keys(array_filter($plan['supported_engines'] ?? []));
                                        $enginesList = implode(', ', array_map(fn($e) => $engineLabels[$e] ?? $e, $engines));
                                    @endphp
                                    <option value="{{ $plan['id'] }}"
                                            data-type="{{ $type }}"
                                            data-nodes="{{ $plan['number_of_nodes'] ?? 1 }}"
                                            data-disk="{{ $plan['disk'] ?? 0 }}"
                                            data-engines="{{ json_encode($engines) }}"
                                            data-cost="{{ $plan['monthly_cost'] }}">
                                        {{ $plan['number_of_nodes'] ?? 1 }} Nodo{{ ($plan['number_of_nodes'] ?? 1) > 1 ? 's' : '' }} • {{ $plan['disk'] ?? 'N/A' }}GB SSD • {{ $enginesList }}
                                        - ${{ number_format($plan['monthly_cost'], 2) }}/mes
                                    </option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                    <p style="font-size: 1.3rem; color: #666; margin-top: 0.5rem;">
                        <i class="fas fa-info-circle"></i> Planes organizados por tipo de servidor
                    </p>
                </div>
            </div>

            <!-- Right Column -->
            <div>
                <!-- Database Engine -->
                <div style="background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 2rem;">
                    <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Motor de Base de Datos *</label>
                    <select name="database_engine" id="engineSelect" required style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                        <option value="">Primero selecciona un plan</option>
                    </select>
                    <p style="font-size: 1.3rem; color: #666; margin-top: 0.5rem;">
                        <i class="fas fa-lightbulb"></i> Según el plan seleccionado
                    </p>
                </div>

                <!-- Version -->
                <div style="background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 2rem;">
                    <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Versión *</label>
                    <select name="database_engine_version" id="versionSelect" required style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                        <option value="">Primero selecciona un motor</option>
                    </select>
                </div>

                <!-- Label -->
                <div style="background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 2rem;">
                    <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Etiqueta</label>
                    <input type="text" name="label" value="{{ old('label') }}" placeholder="Mi base de datos"
                           style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                    <p style="font-size: 1.3rem; color: #666; margin-top: 0.5rem;">
                        <i class="fas fa-tag"></i> Nombre descriptivo (opcional)
                    </p>
                </div>

                <!-- Plan Details (shown when plan selected) -->
                <div id="planDetails" style="display: none; background: #f8f9fa; padding: 2rem; border-radius: 1rem; border: 1px solid #dee2e6; margin-bottom: 2rem;">
                    <h3 style="font-size: 1.6rem; color: #043d13; margin-bottom: 1rem;">
                        <i class="fas fa-check-circle"></i> Resumen del Plan
                    </h3>
                    <div style="font-size: 1.4rem; line-height: 2;">
                        <div><strong>Nodos:</strong> <span id="planNodes">-</span></div>
                        <div><strong>Disco:</strong> <span id="planDisk">-</span> GB SSD</div>
                        <div><strong>Motores:</strong> <span id="planEngines">-</span></div>
                        <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dee2e6;">
                            <strong>Costo Mensual:</strong> <span id="planCost" style="font-size: 1.8rem; color: #07941e;">$-</span>/mes
                        </div>
                    </div>
                </div>

                <!-- Actions -->
                <div style="background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                    <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                        <a href="{{ route('databases.index') }}" style="display: inline-block; padding: 1.5rem 3rem; background: #6c757d; color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.6rem;">
                            Cancelar
                        </a>
                        <button type="submit" style="padding: 1.5rem 3rem; background: linear-gradient(90deg, #043d13, #07941e); color: white; border: none; border-radius: 0.5rem; font-size: 1.6rem; cursor: pointer; font-weight: 600;">
                            Crear Base de Datos
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
// Engine labels
const engineLabels = {
    'mysql': 'MySQL',
    'pg': 'PostgreSQL',
    'valkey': 'Valkey (Redis)',
    'kafka': 'Kafka'
};

// Engine versions mapping
const engineVersions = {
    'mysql': ['8'],
    'pg': ['15', '14', '13'],
    'valkey': ['7'],
    'kafka': ['3.6']
};

// Handle plan selection - update available engines
document.getElementById('planSelect').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const engineSelect = document.getElementById('engineSelect');
    const versionSelect = document.getElementById('versionSelect');
    const planDetails = document.getElementById('planDetails');

    // Clear engine and version selects
    engineSelect.innerHTML = '<option value="">Selecciona un motor</option>';
    versionSelect.innerHTML = '<option value="">Primero selecciona un motor</option>';

    if (selectedOption.value) {
        // Get supported engines from data attribute
        const engines = JSON.parse(selectedOption.dataset.engines || '[]');

        // Populate engine select with supported engines
        engines.forEach(engine => {
            const option = document.createElement('option');
            option.value = engine;
            option.textContent = engineLabels[engine] || engine;
            engineSelect.appendChild(option);
        });

        // Show plan details
        const nodes = selectedOption.dataset.nodes || '-';
        const disk = selectedOption.dataset.disk || '-';
        const cost = selectedOption.dataset.cost || '-';
        const enginesList = engines.map(e => engineLabels[e] || e).join(', ');

        document.getElementById('planNodes').textContent = nodes;
        document.getElementById('planDisk').textContent = disk;
        document.getElementById('planEngines').textContent = enginesList;
        document.getElementById('planCost').textContent = '$' + parseFloat(cost).toFixed(2);

        planDetails.style.display = 'block';
    } else {
        planDetails.style.display = 'none';
    }
});

// Handle engine selection - update available versions
document.getElementById('engineSelect').addEventListener('change', function() {
    const engine = this.value;
    const versionSelect = document.getElementById('versionSelect');

    // Update version options
    versionSelect.innerHTML = '<option value="">Selecciona una versión</option>';
    if (engine && engineVersions[engine]) {
        engineVersions[engine].forEach(version => {
            const option = document.createElement('option');
            option.value = version;
            option.textContent = version;
            versionSelect.appendChild(option);
        });
    }
});
</script>
@endsection