<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instalador Loco - Sistema de Ajuste</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #6366f1;
            --primary-glow: rgba(99, 102, 241, 0.5);
            --bg: #0f172a;
            --card-bg: rgba(30, 41, 59, 0.7);
            --text: #f8fafc;
            --success: #22c55e;
            --error: #ef4444;
            --accent: #f59e0b;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Outfit', sans-serif;
        }

        body {
            background-color: var(--bg);
            background-image:
                radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.1) 0px, transparent 50%);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            overflow-x: hidden;
        }

        .container {
            width: 100%;
            max-width: 900px;
            z-index: 10;
        }

        .glass-card {
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 3rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            position: relative;
            overflow: hidden;
        }

        .glass-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, transparent, var(--primary), transparent 30%);
            animation: rotate 10s linear infinite;
            opacity: 0.1;
            z-index: -1;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        h1 {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            background: linear-gradient(to right, #fff, var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        p.subtitle {
            color: #94a3b8;
            font-size: 1.1rem;
            margin-bottom: 2.5rem;
        }

        .steps-container {
            display: grid;
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .step-row {
            display: flex;
            align-items: center;
            background: rgba(15, 23, 42, 0.5);
            padding: 1.25rem 1.5rem;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        .step-row.active {
            border-color: var(--primary);
            box-shadow: 0 0 20px var(--primary-glow);
            transform: scale(1.02);
        }

        .step-info {
            flex-grow: 1;
        }

        .step-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
        }

        .step-desc {
            font-size: 0.9rem;
            color: #64748b;
        }

        .status-badge {
            padding: 0.5rem 1rem;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: rgba(255, 255, 255, 0.05);
        }

        .status-pending {
            color: #64748b;
        }

        .status-running {
            color: var(--accent);
            animation: pulse 1.5s infinite;
        }

        .status-success {
            color: var(--success);
            background: rgba(34, 197, 94, 0.1);
        }

        .status-error {
            color: var(--error);
            background: rgba(239, 68, 68, 0.1);
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }

        .terminal-window {
            background: #020617;
            border-radius: 16px;
            padding: 1.5rem;
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.9rem;
            height: 250px;
            overflow-y: auto;
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 2rem;
            scrollbar-width: thin;
            scrollbar-color: var(--primary) transparent;
        }

        .terminal-window::-webkit-scrollbar {
            width: 6px;
        }

        .terminal-window::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }

        .log-entry {
            margin-bottom: 0.5rem;
            line-height: 1.4;
            color: #a5b4fc;
        }

        .log-entry.command {
            color: #fff;
            font-weight: bold;
        }

        .log-entry.error {
            color: var(--error);
        }

        .log-entry.success {
            color: var(--success);
        }

        .btn-install {
            width: 100%;
            padding: 1.25rem;
            border-radius: 16px;
            border: none;
            background: linear-gradient(135deg, var(--primary), #4f46e5);
            color: white;
            font-size: 1.25rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 10px 25px -5px var(--primary-glow);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }

        .btn-install:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 30px -10px var(--primary-glow);
            filter: brightness(1.1);
        }

        .btn-install:active {
            transform: translateY(0);
        }

        .btn-install:disabled {
            background: #334155;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .loader {
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
            display: none;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background: var(--primary);
            border-radius: 50%;
            z-index: 100;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="glass-card" id="card">
            <h1>Instalador Loco</h1>
            <p class="subtitle">Sistema de Ajuste de Siniestros &mdash; Deployment Automático</p>

            <div class="steps-container">
                <div class="step-row" id="step-migrate">
                    <div class="step-info">
                        <div class="step-title">Migraciones de Base de Datos</div>
                        <div class="step-desc">Actualizando esquemas a la última versión</div>
                    </div>
                    <div class="status-badge status-pending" id="badge-migrate">Pendiente</div>
                </div>

                <div class="step-row" id="step-seed">
                    <div class="step-info">
                        <div class="step-title">Seeders de Datos</div>
                        <div class="step-desc">Poblando tablas con información requerida</div>
                    </div>
                    <div class="status-badge status-pending" id="badge-seed">Pendiente</div>
                </div>

                <div class="step-row" id="step-link">
                    <div class="step-info">
                        <div class="step-title">Storage Link</div>
                        <div class="step-desc">Vinculando archivos públicos y almacenamiento</div>
                    </div>
                    <div class="status-badge status-pending" id="badge-link">Pendiente</div>
                </div>

                <div class="step-row" id="step-clear">
                    <div class="step-info">
                        <div class="step-title">Limpieza de Optimización</div>
                        <div class="step-desc">Refrescando rutas, configuración y caché</div>
                    </div>
                    <div class="status-badge status-pending" id="badge-clear">Pendiente</div>
                </div>
            </div>

            <div class="terminal-window" id="terminal">
                <div class="log-entry">Esperando inicio de instalación...</div>
            </div>

            <button class="btn-install" id="installBtn">
                <span class="loader" id="loader"></span>
                <span id="btnText">INICIAR INSTALACIÓN</span>
            </button>
        </div>
    </div>

    <script>
        const STEPS = [
            { id: 'migrate', title: 'Migraciones' },
            { id: 'seed', title: 'Seeders' },
            { id: 'link', title: 'Storage Link' },
            { id: 'clear', title: 'Caché' }
        ];

        const token = new URLSearchParams(window.location.search).get('token');
        const installBtn = document.getElementById('installBtn');
        const terminal = document.getElementById('terminal');
        const loader = document.getElementById('loader');
        const btnText = document.getElementById('btnText');

        function addLog(text, type = 'default') {
            const div = document.createElement('div');
            div.className = `log-entry ${type}`;
            div.innerText = text;
            terminal.appendChild(div);
            terminal.scrollTop = terminal.scrollHeight;
        }

        async function runStep(stepId) {
            const row = document.getElementById(`step-${stepId}`);
            const badge = document.getElementById(`badge-${stepId}`);

            row.classList.add('active');
            badge.className = 'status-badge status-running';
            badge.innerText = 'Ejecutando...';
            addLog(`> Ejecutando: ${stepId}...`, 'command');

            try {
                const response = await fetch('/admin/instalador/ejecutar', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ step: stepId })
                });

                const data = await response.json();

                if (data.status === 'success') {
                    badge.className = 'status-badge status-success';
                    badge.innerText = 'Completado';
                    addLog(data.output, 'success');
                    row.classList.remove('active');
                    return true;
                } else {
                    throw new Error(data.message || 'Error desconocido');
                }
            } catch (error) {
                badge.className = 'status-badge status-error';
                badge.innerText = 'Falló';
                addLog(`ERROR: ${error.message}`, 'error');
                row.classList.remove('active');
                return false;
            }
        }

        installBtn.onclick = async () => {
            installBtn.disabled = true;
            loader.style.display = 'block';
            btnText.innerText = 'INSTALANDO...';
            addLog('Iniciando proceso completo de instalación...', 'command');

            for (const step of STEPS) {
                const success = await runStep(step.id);
                if (!success) {
                    btnText.innerText = 'INSTALACIÓN FALLIDA';
                    loader.style.display = 'none';
                    return;
                }
            }

            btnText.innerText = 'INSTALACIÓN COMPLETADA';
            loader.style.display = 'none';
            addLog('==========================================', 'success');
            addLog('¡SISTEMA LISTO PARA USAR!', 'success');
            addLog('==========================================', 'success');

            createConfetti();
        };

        function createConfetti() {
            for (let i = 0; i < 100; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.top = Math.random() * 100 + 'vh';
                confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 60%)`;
                confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
                document.body.appendChild(confetti);

                setTimeout(() => confetti.remove(), 3000);
            }
        }
    </script>
</body>

</html>