@extends('dashboard.layouts.app')

@section('title', 'Detalles de Base de Datos')
@section('page-title', 'Detalles de la Base de Datos')

@section('content')
<div style="max-width: 1000px; margin: 0 auto;">

    @if (session('success'))
        <div style="background: #d4edda; color: #155724; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; border: 1px solid #c3e6cb;">
            {{ session('success') }}
        </div>
    @endif

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

    <div style="background: white; padding: 3rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 2rem;">
        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 2rem;">
            <div>
                <h2 style="font-size: 2.5rem; color: #043d13; margin: 0 0 0.5rem 0;">
                    <i class="fas fa-database"></i> {{ $database['label'] ?? 'Base de Datos' }}
                </h2>
                @php
                    $status = $database['status'] ?? 'unknown';
                    $statusColors = [
                        'running' => '#28a745',
                        'pending' => '#ffc107',
                        'stopped' => '#dc3545',
                        'rebuilding' => '#17a2b8',
                    ];
                    $statusLabels = [
                        'running' => 'Activa',
                        'pending' => 'Pendiente',
                        'stopped' => 'Detenida',
                        'rebuilding' => 'Reconstruyendo',
                    ];
                    $color = $statusColors[$status] ?? '#6c757d';
                    $label = $statusLabels[$status] ?? ucfirst($status);
                @endphp
                <span style="display: inline-block; padding: 0.5rem 1rem; background: {{ $color }}; color: white; border-radius: 0.3rem; font-size: 1.4rem; font-weight: 600;">
                    {{ $label }}
                </span>
            </div>
            <div style="display: flex; gap: 1rem;">
                <a href="{{ route('databases.index') }}" style="display: inline-block; padding: 1rem 2rem; background: #6c757d; color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.4rem;">
                    <i class="fas fa-arrow-left"></i> Volver
                </a>
            </div>
        </div>

        <!-- Database Credentials -->
        <div style="background: #f8f9fa; padding: 2rem; border-radius: 0.5rem; margin-bottom: 2rem; border-left: 4px solid #17a2b8;">
            <h3 style="font-size: 1.8rem; color: #043d13; margin: 0 0 1.5rem 0;">
                <i class="fas fa-key"></i> Credenciales de Conexión
            </h3>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">Host</h4>
                    <div style="display: flex; align-items: center; gap: 1rem;">
                        <p style="font-size: 1.6rem; color: #333; margin: 0; font-family: monospace; flex: 1; padding: 1rem; background: white; border-radius: 0.3rem;">
                            {{ $database['host'] ?? 'Pendiente' }}
                        </p>
                        @if(isset($database['host']) && !empty($database['host']))
                            <button onclick="copyToClipboard('{{ $database['host'] }}')" style="padding: 1rem 1.5rem; background: #17a2b8; color: white; border: none; border-radius: 0.3rem; cursor: pointer; font-size: 1.4rem;">
                                <i class="fas fa-copy"></i> Copiar
                            </button>
                        @endif
                    </div>
                </div>

                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">Puerto</h4>
                    <div style="display: flex; align-items: center; gap: 1rem;">
                        <p style="font-size: 1.6rem; color: #333; margin: 0; font-family: monospace; flex: 1; padding: 1rem; background: white; border-radius: 0.3rem;">
                            {{ $database['port'] ?? 'Pendiente' }}
                        </p>
                        @if(isset($database['port']) && !empty($database['port']))
                            <button onclick="copyToClipboard('{{ $database['port'] }}')" style="padding: 1rem 1.5rem; background: #17a2b8; color: white; border: none; border-radius: 0.3rem; cursor: pointer; font-size: 1.4rem;">
                                <i class="fas fa-copy"></i> Copiar
                            </button>
                        @endif
                    </div>
                </div>

                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">Usuario</h4>
                    <div style="display: flex; align-items: center; gap: 1rem;">
                        <p style="font-size: 1.6rem; color: #333; margin: 0; font-family: monospace; flex: 1; padding: 1rem; background: white; border-radius: 0.3rem;">
                            {{ $database['username'] ?? 'Pendiente' }}
                        </p>
                        @if(isset($database['username']) && !empty($database['username']))
                            <button onclick="copyToClipboard('{{ $database['username'] }}')" style="padding: 1rem 1.5rem; background: #17a2b8; color: white; border: none; border-radius: 0.3rem; cursor: pointer; font-size: 1.4rem;">
                                <i class="fas fa-copy"></i> Copiar
                            </button>
                        @endif
                    </div>
                </div>

                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">Contraseña</h4>
                    <div style="display: flex; align-items: center; gap: 1rem;">
                        <p style="font-size: 1.6rem; color: #333; margin: 0; font-family: monospace; flex: 1; padding: 1rem; background: white; border-radius: 0.3rem;">
                            {{ $database['password'] ?? 'Pendiente' }}
                        </p>
                        @if(isset($database['password']) && !empty($database['password']))
                            <button onclick="copyToClipboard('{{ $database['password'] }}')" style="padding: 1rem 1.5rem; background: #17a2b8; color: white; border: none; border-radius: 0.3rem; cursor: pointer; font-size: 1.4rem;">
                                <i class="fas fa-copy"></i> Copiar
                            </button>
                        @endif
                    </div>
                </div>

                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">Nombre de Base de Datos</h4>
                    <div style="display: flex; align-items: center; gap: 1rem;">
                        <p style="font-size: 1.6rem; color: #333; margin: 0; font-family: monospace; flex: 1; padding: 1rem; background: white; border-radius: 0.3rem;">
                            {{ $database['dbname'] ?? 'defaultdb' }}
                        </p>
                        @if(isset($database['dbname']) && !empty($database['dbname']))
                            <button onclick="copyToClipboard('{{ $database['dbname'] }}')" style="padding: 1rem 1.5rem; background: #17a2b8; color: white; border: none; border-radius: 0.3rem; cursor: pointer; font-size: 1.4rem;">
                                <i class="fas fa-copy"></i> Copiar
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Database Information -->
        <div style="background: #f8f9fa; padding: 2rem; border-radius: 0.5rem; border-left: 4px solid #07941e;">
            <h3 style="font-size: 1.8rem; color: #043d13; margin: 0 0 1.5rem 0;">
                <i class="fas fa-info-circle"></i> Información General
            </h3>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">Motor</h4>
                    <p style="font-size: 1.6rem; color: #333; margin: 0;">
                        @if(($database['database_engine'] ?? '') === 'mysql')
                            <i class="fas fa-database" style="color: #4479A1;"></i> MySQL
                        @elseif(($database['database_engine'] ?? '') === 'pg')
                            <i class="fas fa-database" style="color: #336791;"></i> PostgreSQL
                        @elseif(($database['database_engine'] ?? '') === 'valkey')
                            <i class="fas fa-database" style="color: #DC382D;"></i> Valkey
                        @elseif(($database['database_engine'] ?? '') === 'kafka')
                            <i class="fas fa-stream" style="color: #231F20;"></i> Kafka
                        @else
                            {{ $database['database_engine'] ?? 'N/A' }}
                        @endif
                    </p>
                </div>

                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">Versión</h4>
                    <p style="font-size: 1.6rem; color: #333; margin: 0;">{{ $database['database_engine_version'] ?? 'N/A' }}</p>
                </div>

                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">Región</h4>
                    <p style="font-size: 1.6rem; color: #333; margin: 0;">{{ $database['region'] ?? 'N/A' }}</p>
                </div>

                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">Plan</h4>
                    <p style="font-size: 1.6rem; color: #333; margin: 0;">{{ $database['plan'] ?? 'N/A' }}</p>
                </div>

                <div>
                    <h4 style="font-size: 1.4rem; color: #666; margin: 0 0 0.5rem 0;">ID</h4>
                    <p style="font-size: 1.4rem; color: #666; margin: 0; font-family: monospace;">{{ $database['id'] ?? 'N/A' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div style="background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
        <h3 style="font-size: 1.8rem; color: #043d13; margin: 0 0 1.5rem 0;">
            <i class="fas fa-cogs"></i> Acciones
        </h3>
        <div style="display: flex; gap: 1rem;">
            <form method="POST" action="{{ route('databases.destroy', $database['id']) }}" style="display: inline;" onsubmit="return confirm('¿Estás seguro de eliminar esta base de datos? Esta acción no se puede deshacer y se perderán todos los datos.');">
                @csrf
                @method('DELETE')
                <button type="submit" style="padding: 1.5rem 3rem; background: #dc3545; color: white; border: none; border-radius: 0.5rem; font-size: 1.6rem; cursor: pointer; font-weight: 600;">
                    <i class="fas fa-trash"></i> Eliminar Base de Datos
                </button>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        // Show success notification
        const notification = document.createElement('div');
        notification.textContent = 'Copiado al portapapeles';
        notification.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 1.5rem 2rem; border-radius: 0.5rem; font-size: 1.4rem; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.15);';
        document.body.appendChild(notification);

        setTimeout(() => {
            notification.remove();
        }, 2000);
    }).catch(function(err) {
        alert('Error al copiar: ' + err);
    });
}
</script>
@endsection