<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cuaderno de Sueños y Nubes de Palabras</title>

    <!-- 1. Recursos y Bibliotecas (CDN) -->
    <!-- Font Awesome (Iconos) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Google Fonts (Poppins) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <!-- WordCloud2.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.1.1/wordcloud2.min.js" integrity="sha512-IfcMMSGnQagQltNFQg1yGkW9zsPEncfK/0i+Z+LqW/IID5PGuqvxzXvpb8R/XjDqT2wTFLg/zC+pAQfBvB/kwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- 2. Estilos CSS (Integrados) -->
    <style>
        :root {
            --primary-color: #8e44ad; /* Morado principal */
            --secondary-color: #3498db; /* Azul secundario */
            --background-color: #1a1a2e; /* Fondo oscuro azulado */
            --surface-color: #1f1f3a; /* Color de superficie ligeramente más claro */
            --text-color: #ffffff; /* Texto claro - cambiado a blanco puro para mejor contraste */
            --text-muted-color: #c0c0e0; /* Texto atenuado - aclarado para mejor contraste */
            --accent-color: #f39c12; /* Naranja para acentos */
            --success-color: #2ecc71; /* Verde para éxito */
            --error-color: #e74c3c; /* Rojo para error */

            --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            --gradient-background: radial-gradient(circle at top left, rgba(46, 49, 72, 0.8), transparent 60%),
                                   radial-gradient(circle at bottom right, rgba(142, 68, 173, 0.6), transparent 70%),
                                   var(--background-color);

            --font-family: 'Poppins', sans-serif;
            --border-radius: 12px;
            --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            --transition-speed: 0.3s ease;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-family);
            background: var(--gradient-background);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden; /* Prevenir scroll horizontal */
            display: flex;
            justify-content: center;
            align-items: flex-start; /* Alinear arriba para ver el contenido primero */
            min-height: 100vh;
            padding: 20px;
        }

        /* --- Pantalla de Carga --- */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--background-color);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 1;
            transition: opacity 0.8s ease-out;
            pointer-events: all; /* Asegura que sea clickeable mientras visible */
            animation: hideLoader 5s forwards; /* Ocultar automáticamente después de 5 segundos */
        }
        
        @keyframes hideLoader {
            0%, 80% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; pointer-events: none; }
        }

        #loading-screen.hidden {
            opacity: 0;
            pointer-events: none; /* Permite clickear a través cuando está oculto */
            visibility: hidden;
        }

        .spinner {
            width: 60px;
            height: 60px;
            border: 5px solid var(--text-muted-color);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }
        
        #loading-screen p {
            color: var(--text-muted-color);
            font-size: 1.1em;
            animation: pulse 1.5s infinite ease-in-out;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }

        /* --- Contenedor Principal --- */
        .app-container {
            background-color: var(--surface-color);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 30px 40px;
            max-width: 1200px;
            width: 100%;
            margin-top: 80px; /* Espacio para la cabecera fija */
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInSlideUp 0.8s ease-out forwards 0.5s; /* Delay para esperar carga */
            display: grid;
            grid-template-columns: 1fr; /* Una columna por defecto */
            gap: 30px;
        }
        
        @media (min-width: 992px) {
            .app-container {
                grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas grandes */
                grid-template-areas:
                    "header header"
                    "input cloud"
                    "list list"
                    "stats stats"
                    "footer footer";
            }
            #dream-input-section { grid-area: input; }
            #word-cloud-section { grid-area: cloud; }
            #dream-list-section { grid-area: list; }
            #stats-section { grid-area: stats; }
        }

        @keyframes fadeInSlideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* --- Cabecera --- */
        .app-header {
            grid-area: header;
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: relative; /* Para el fondo animado */
            overflow: hidden;
        }
        
        .app-header h1 {
            font-size: 2.8em;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 5px;
            animation: textShine 5s linear infinite;
        }
        
        @keyframes textShine {
             0% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
             100% { background-position: 0% 50%; }
         }
         .app-header h1 {
             background-size: 200% auto; /* Clave para el efecto shine */
         }

        .app-header p {
            color: var(--text-muted-color);
            font-size: 1.1em;
        }

        /* --- Secciones --- */
        .app-section {
            background: rgba(0, 0, 0, 0.1);
            border-radius: var(--border-radius);
            padding: 25px;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
        }
        
        .app-section:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }

        .app-section h2 {
            font-size: 1.8em;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .app-section h2 i {
            font-size: 0.9em;
        }

        /* --- Formulario de Entrada --- */
        #dream-input textarea {
            width: 100%;
            min-height: 150px;
            background-color: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 15px;
            color: var(--text-color);
            font-family: var(--font-family);
            font-size: 1em;
            resize: vertical;
            transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
            margin-bottom: 15px;
        }

        #dream-input textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 15px rgba(142, 68, 173, 0.5);
            background-color: rgba(0, 0, 0, 0.3); /* Fondo ligeramente más oscuro al enfocar */
        }

        .btn {
            background: var(--gradient-primary);
            color: #fff;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        .btn:active {
             transform: translateY(-1px);
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        
        .btn i {
            font-size: 1.1em;
        }
        
        .btn-secondary {
             background: var(--secondary-color);
        }
        .btn-secondary:hover {
             background: #2980b9; /* Un poco más oscuro */
        }
        
        .btn-danger {
            background: var(--error-color);
            padding: 5px 10px;
            font-size: 0.8em;
        }
        .btn-danger:hover {
            background: #c0392b;
        }
        
        .feedback-message {
            margin-top: 15px;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 0.9em;
            display: none; /* Oculto por defecto */
            animation: fadeSlideIn 0.5s ease-out;
        }
        
        .feedback-message.success {
            background-color: rgba(46, 204, 113, 0.2);
            color: var(--success-color);
            border: 1px solid var(--success-color);
        }
        
        .feedback-message.error {
            background-color: rgba(231, 76, 60, 0.2);
            color: var(--error-color);
            border: 1px solid var(--error-color);
        }
        
        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }


        /* --- Lista de Sueños --- */
        #dream-list ul {
            list-style: none;
            max-height: 400px;
            overflow-y: auto;
            padding-right: 10px; /* Espacio para scrollbar */
        }
        
         /* Custom Scrollbar */
        #dream-list ul::-webkit-scrollbar {
            width: 8px;
        }
        #dream-list ul::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.1);
            border-radius: 10px;
        }
        #dream-list ul::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 10px;
            transition: background var(--transition-speed);
        }
         #dream-list ul::-webkit-scrollbar-thumb:hover {
             background: var(--secondary-color);
         }


        #dream-list li {
            background-color: rgba(255, 255, 255, 0.07); /* Ligeramente más claro para mejor contraste */
            border-radius: 8px;
            padding: 15px 20px;
            margin-bottom: 15px;
            border-left: 5px solid var(--primary-color);
            transition: background-color var(--transition-speed), border-color var(--transition-speed);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            animation: listItemFadeIn 0.5s ease-out forwards;
            opacity: 0; /* Start hidden for animation */
        }
        
         @keyframes listItemFadeIn {
             to { opacity: 1; }
         }
         
         /* Delay animation for each item */
         #dream-list li:nth-child(1) { animation-delay: 0.1s; }
         #dream-list li:nth-child(2) { animation-delay: 0.2s; }
         #dream-list li:nth-child(3) { animation-delay: 0.3s; }
         /* ... add more if needed or handle dynamically with JS */


        #dream-list li:hover {
            background-color: rgba(255, 255, 255, 0.12); /* Más claro al pasar el ratón */
            border-left-color: var(--secondary-color);
        }
        
        #dream-list .dream-content {
            flex-grow: 1;
            margin-right: 15px;
        }

        #dream-list .dream-date {
            font-size: 0.85em;
            color: var(--text-muted-color);
            margin-bottom: 5px;
            display: block;
            font-weight: 500; /* Un poco más grueso para mejor visibilidad */
        }
        
        #dream-list .dream-text {
            color: var(--text-color);
            white-space: pre-wrap; /* Conservar saltos de línea */
            word-break: break-word; /* Evitar desbordamiento */
        }
        
        #dream-list .dream-actions button {
            margin-left: 5px;
        }
        
        #no-dreams-message {
            color: var(--text-muted-color);
            text-align: center;
            padding: 20px;
            font-style: italic;
        }

        /* --- Nube de Palabras --- */
        #word-cloud {
            position: relative; /* Para mensajes superpuestos */
            min-height: 350px; /* Altura mínima para el canvas */
            display: flex; /* Centrar contenido si no hay canvas */
            justify-content: center;
            align-items: center;
        }

        #wordCloudCanvas {
            width: 100%;
            height: 350px; /* Ajustar según sea necesario */
            max-width: 100%; /* Evitar desbordamiento */
            border-radius: 8px;
            background-color: rgba(0,0,0,0.1);
        }
        
        #word-cloud-placeholder {
            text-align: center;
            color: var(--text-muted-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            padding: 20px;
        }
        #word-cloud-placeholder i {
            font-size: 3em;
            margin-bottom: 15px;
            color: var(--primary-color);
            opacity: 0.5;
        }
        
        .controls {
            margin-top: 20px;
            text-align: center;
        }

        /* --- Estadísticas --- */
        #stats-section ul {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
        }

        #stats-section li {
            background-color: rgba(0, 0, 0, 0.2);
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border-left: 4px solid var(--accent-color);
            transition: transform var(--transition-speed);
        }
         #stats-section li:hover {
             transform: scale(1.05);
         }

        #stats-section .stat-value {
            display: block;
            font-size: 2em;
            font-weight: 700;
            color: var(--accent-color);
            margin-bottom: 5px;
            animation: countUpAnimation 1s ease-out; /* Animación de conteo */
        }
        
        @keyframes countUpAnimation {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        #stats-section .stat-label {
            font-size: 0.9em;
            color: var(--text-muted-color);
        }
        
        #top-words-list {
            margin-top: 10px;
            font-size: 0.9em;
            color: var(--text-muted-color);
            text-align: left;
            padding-left: 10px;
        }
         #top-words-list strong {
             color: var(--text-color);
         }

        /* --- Pie de Página --- */
        .app-footer {
            grid-area: footer;
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-muted-color);
            font-size: 0.9em;
        }
        .app-footer a {
            color: var(--secondary-color);
            text-decoration: none;
            transition: color var(--transition-speed);
        }
        .app-footer a:hover {
            color: var(--primary-color);
        }

        /* --- Utilidades --- */
        .hidden {
            display: none !important;
        }
        
        /* --- Responsividad --- */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            .app-container {
                padding: 20px;
                margin-top: 20px;
            }
            .app-header h1 {
                font-size: 2.2em;
            }
             .app-section h2 {
                font-size: 1.5em;
            }
            .btn {
                padding: 10px 20px;
                font-size: 0.9em;
            }
            #dream-list ul {
                max-height: 300px;
            }
            #stats-section ul {
                 grid-template-columns: 1fr; /* Una columna en móviles */
            }
        }
        
        @media (max-width: 991px) and (min-width: 769px) {
             /* Ajustes específicos para tablets si son necesarios */
             .app-container {
                 max-width: 90%;
             }
        }

        @keyframes fadeOut {
            0%, 80% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; pointer-events: none; }
        }

    </style>
</head>
<body>

    <!-- Pantalla de Carga -->
    <div id="loading-screen">
        <div class="spinner"></div>
        <p>Cargando Universo Onírico...</p>
    </div>

    <!-- Contenido Principal de la Aplicación -->
    <div class="app-container">

        <!-- Cabecera -->
        <header class="app-header">
            <h1><i class="fas fa-cloud-moon"></i> Cuaderno de Sueños</h1>
            <p>Registra, visualiza y analiza tus viajes nocturnos</p>
        </header>

        <!-- Sección de Entrada de Sueños -->
        <section id="dream-input-section" class="app-section">
            <h2><i class="fas fa-pencil-alt"></i> Registra un Nuevo Sueño</h2>
            <form id="dream-input">
                <textarea id="dream-text" placeholder="Describe tu sueño aquí... ¿Qué viste? ¿Qué sentiste? ¿Quién estaba allí?" required></textarea>
                <button type="submit" class="btn">
                    <i class="fas fa-save"></i> Guardar Sueño
                </button>
                <div id="feedback-message" class="feedback-message"></div>
            </form>
        </section>

        <!-- Sección de Nube de Palabras -->
        <section id="word-cloud-section" class="app-section">
            <h2><i class="fas fa-cloud"></i> Nube de Palabras Oníricas</h2>
            <div id="word-cloud">
                 <canvas id="wordCloudCanvas" width="500" height="350"></canvas>
                 <div id="word-cloud-placeholder">
                     <i class="fas fa-bed"></i>
                     <p>Aquí aparecerá tu nube de palabras cuando generes una.</p>
                 </div>
            </div>
             <div class="controls">
                 <button id="generate-cloud-btn" class="btn btn-secondary">
                     <i class="fas fa-sync-alt"></i> Generar/Actualizar Nube
                 </button>
             </div>
        </section>

        <!-- Sección Lista de Sueños -->
        <section id="dream-list-section" class="app-section">
            <h2><i class="fas fa-list-ul"></i> Mis Sueños Registrados</h2>
            <div id="dream-list">
                <ul id="dreams-ul">
                    <!-- Los sueños se cargarán aquí dinámicamente -->
                </ul>
                 <p id="no-dreams-message" class="hidden">Aún no has registrado ningún sueño. ¡Empieza ahora!</p>
            </div>
        </section>

        <!-- Sección de Estadísticas -->
        <section id="stats-section" class="app-section">
            <h2><i class="fas fa-chart-bar"></i> Estadísticas Oníricas</h2>
            <ul>
                <li>
                    <span class="stat-value" id="stat-total-dreams">0</span>
                    <span class="stat-label">Sueños Registrados</span>
                </li>
                <li>
                    <span class="stat-value" id="stat-avg-length">0</span>
                    <span class="stat-label">Palabras Promedio / Sueño</span>
                </li>
                <li>
                     <span class="stat-value" id="stat-unique-words">0</span>
                     <span class="stat-label">Palabras Únicas (Total)</span>
                     <div id="top-words-list">
                         <strong>Top 5 Palabras:</strong> <span>-</span>
                     </div>
                </li>
            </ul>
        </section>
        
        <!-- Pie de Página -->
        <footer class="app-footer">
            <p>© 2024 Cuaderno de Sueños. Creado con <i class="fas fa-heart" style="color: var(--error-color);"></i> y código.</p>
            <p>Una herramienta para explorar tu subconsciente.</p>
        </footer>

    </div> <!-- Fin App Container -->

    <!-- 3. Lógica JavaScript (Integrada) -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // --- Elementos del DOM ---
            const loadingScreen = document.getElementById('loading-screen');
            
            // Ocultar pantalla de carga inmediatamente
            loadingScreen.classList.add('hidden');
            
            const dreamInputForm = document.getElementById('dream-input');
            const dreamTextArea = document.getElementById('dream-text');
            const feedbackMessage = document.getElementById('feedback-message');
            const dreamsUl = document.getElementById('dreams-ul');
            const noDreamsMessage = document.getElementById('no-dreams-message');
            const generateCloudBtn = document.getElementById('generate-cloud-btn');
            const wordCloudCanvas = document.getElementById('wordCloudCanvas');
            const wordCloudPlaceholder = document.getElementById('word-cloud-placeholder');
            const statTotalDreams = document.getElementById('stat-total-dreams');
            const statAvgLength = document.getElementById('stat-avg-length');
            const statUniqueWords = document.getElementById('stat-unique-words');
            const topWordsList = document.querySelector('#top-words-list span');
            
            // Temporizador de seguridad para ocultar pantalla de carga
            setTimeout(() => {
                if (loadingScreen && !loadingScreen.classList.contains('hidden')) {
                    loadingScreen.classList.add('hidden');
                    console.log('Pantalla de carga forzada a ocultar por temporizador de seguridad');
                }
            }, 3000);

            // --- Estado de la Aplicación ---
            let dreams = [];
            let wordCloudInstance = null; // Para mantener referencia a la instancia de WordCloud

            // --- Palabras Vacías (Stop Words) en Español ---
            // Lista básica, se puede expandir
            const stopWords = new Set([
                'a', 'al', 'algo', 'algunas', 'algunos', 'ante', 'antes', 'como', 'con', 'contra', 'cual', 'cuando', 'de', 'del', 'desde',
                'donde', 'durante', 'e', 'el', 'ella', 'ellas', 'ellos', 'en', 'entre', 'era', 'erais', 'eramos', 'eran', 'eras', 'eres',
                'es', 'esa', 'esas', 'ese', 'eso', 'esos', 'esta', 'estaba', 'estabais', 'estabamos', 'estaban', 'estabas', 'estad', 'estada',
                'estadas', 'estado', 'estados', 'estamos', 'estando', 'estar', 'estaremos', 'estara', 'estaran', 'estaras', 'estare',
                'estareis', 'estaria', 'estariais', 'estariamos', 'estarian', 'estarias', 'estas', 'este', 'estemos', 'esto', 'estos',
                'estoy', 'estuve', 'estuviera', 'estuvierais', 'estuvieramos', 'estuvieran', 'estuvieras', 'estuvieron', 'estuviese',
                'estuvieseis', 'estuviesemos', 'estuviesen', 'estuvieses', 'estuvimos', 'estuviste', 'estuvisteis', 'estuviéramos', 'estuviésemos',
                'estuvo', 'fue', 'fuera', 'fuerais', 'fueramos', 'fueran', 'fueras', 'fueron', 'fuese', 'fueseis', 'fuesemos', 'fuesen',
                'fueses', 'fui', 'fuimos', 'fuiste', 'fuisteis', 'ha', 'habeis', 'habemos', 'haber', 'habremos', 'habra', 'habran', 'habras',
                'habre', 'habreis', 'habria', 'habriais', 'habriamos', 'habrian', 'habrias', 'habéis', 'había', 'habíais', 'habíamos',
                'habían', 'habías', 'han', 'has', 'hasta', 'hay', 'haya', 'hayamos', 'hayan', 'hayas', 'he', 'hemos', 'hube', 'hubiera',
                'hubierais', 'hubieramos', 'hubieran', 'hubieras', 'hubieron', 'hubiese', 'hubieseis', 'hubiesemos', 'hubiesen', 'hubieses',
                'hubimos', 'hubiste', 'hubisteis', 'hubo', 'la', 'las', 'le', 'les', 'lo', 'los', 'mas', 'me', 'mi', 'mis', 'mucho', 'muchos',
                'muy', 'más', 'mí', 'mía', 'mías', 'mío', 'míos', 'nada', 'ni', 'no', 'nos', 'nosotras', 'nosotros', 'nuestra', 'nuestras',
                'nuestro', 'nuestros', 'o', 'os', 'otra', 'otras', 'otro', 'otros', 'para', 'pero', 'poco', 'por', 'porque', 'que', 'quien',
                'quienes', 'qué', 'se', 'sea', 'seamos', 'sean', 'seas', 'sentid', 'sentida', 'sentidas', 'sentido', 'sentidos', 'ser',
                'seremos', 'sera', 'seran', 'seras', 'sere', 'sereis', 'seria', 'seriais', 'seriamos', 'serian', 'serias', 'seréis', 'sería',
                'seríais', 'seríamos', 'serían', 'serías', 'si', 'siente', 'sin', 'sintiendo', 'sobre', 'sois', 'solamente', 'solo', 'somos',
                'soy', 'su', 'sus', 'suya', 'suyas', 'suyo', 'suyos', 'sí', 'también', 'tampoco', 'tan', 'tanta', 'tantas', 'tanto', 'tantos',
                'te', 'teneis', 'tenemos', 'tener', 'tendremos', 'tendra', 'tendran', 'tendras', 'tendre', 'tendreis', 'tendria', 'tendriais',
                'tendriamos', 'tendrian', 'tendrias', 'tened', 'tengo', 'tengáis', 'tenida', 'tenidas', 'tenido', 'tenidos', 'teniendo', 'tenéis',
                'tenía', 'teníais', 'teníamos', 'tenían', 'tenías', 'ti', 'tiene', 'tienen', 'tienes', 'todo', 'todos', 'tu', 'tus', 'tuve',
                'tuviera', 'tuvierais', 'tuvieramos', 'tuvieran', 'tuvieras', 'tuvieron', 'tuviese', 'tuvieseis', 'tuviesemos', 'tuviesen',
                'tuvieses', 'tuvimos', 'tuviste', 'tuvisteis', 'tuvo', 'tuya', 'tuyas', 'tuyo', 'tuyos', 'tú', 'un', 'una', 'unas', 'uno',
                'unos', 'usa', 'usais', 'usamos', 'usan', 'usar', 'usas', 'uso', 'usted', 'ustedes', 'va', 'vais', 'vamos', 'van', 'vas', 've',
                'vez', 'vosotras', 'vosotros', 'vuestra', 'vuestras', 'vuestro', 'vuestros', 'y', 'ya', 'yo', 'q', '...', '-', 'q'
            ]);


            // --- Funciones ---

            // Mostrar Feedback
            function showFeedback(message, type = 'success') {
                feedbackMessage.textContent = message;
                feedbackMessage.className = `feedback-message ${type}`; // Reset classes and add type
                feedbackMessage.style.display = 'block';
                // Ocultar después de unos segundos
                setTimeout(() => {
                    feedbackMessage.style.display = 'none';
                }, 4000);
            }

            // Guardar Sueños en localStorage
            function saveDreamsToLocal() {
                localStorage.setItem('dreamsAppDreams', JSON.stringify(dreams));
            }

            // Cargar Sueños desde localStorage
            function loadDreamsFromLocal() {
                const storedDreams = localStorage.getItem('dreamsAppDreams');
                if (storedDreams) {
                    dreams = JSON.parse(storedDreams);
                } else {
                    dreams = [];
                }
            }

            // Renderizar Lista de Sueños
            function renderDreams() {
                dreamsUl.innerHTML = ''; // Limpiar lista actual
                
                if (dreams.length === 0) {
                    noDreamsMessage.classList.remove('hidden');
                    return;
                }
                
                noDreamsMessage.classList.add('hidden');

                // Ordenar sueños por fecha (más reciente primero)
                 dreams.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));

                dreams.forEach((dream, index) => {
                    const li = document.createElement('li');
                    li.style.animationDelay = `${index * 0.05}s`; // Stagger animation
                    
                    // Formatear fecha
                    const date = new Date(dream.timestamp);
                    const formattedDate = date.toLocaleDateString('es-ES', {
                         year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' 
                    });

                    li.innerHTML = `
                        <div class="dream-content">
                            <span class="dream-date">${formattedDate}</span>
                            <p class="dream-text">${escapeHtml(dream.text)}</p>
                        </div>
                        <div class="dream-actions">
                            <button class="btn btn-danger delete-dream-btn" data-index="${index}" title="Eliminar sueño">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    `;
                    dreamsUl.appendChild(li);
                });
            }
            
            // Escapar HTML para prevenir XSS simple
            function escapeHtml(unsafe) {
                 if (!unsafe) return '';
                 return unsafe
                      .replace(/&/g, "&amp;")
                      .replace(/</g, "&lt;")
                      .replace(/>/g, "&gt;")
                      .replace(/"/g, "&quot;")
                      .replace(/'/g, "&#039;");
            }


            // Procesar Texto para Nube de Palabras
            function processTextForCloud(text) {
                 if (!text) return [];
                
                const words = text
                    .toLowerCase() // Convertir a minúsculas
                    .replace(/[^\w\sáéíóúñü]/g, '') // Eliminar puntuación excepto acentos y ñ/ü
                    .replace(/\d+/g, '') // Eliminar números
                    .split(/\s+/) // Dividir en palabras
                    .filter(word => word.length > 2 && !stopWords.has(word)); // Filtrar palabras cortas y vacías

                const frequencyMap = words.reduce((map, word) => {
                    map[word] = (map[word] || 0) + 1;
                    return map;
                }, {});

                // Convertir a formato de wordcloud2.js: [[word, count], ...]
                 // Ordenar por frecuencia descendente para visualización y estadísticas
                 return Object.entries(frequencyMap).sort(([, countA], [, countB]) => countB - countA);
            }

            // Generar Nube de Palabras
            function generateWordCloud() {
                 const allDreamsText = dreams.map(dream => dream.text).join(' ');
                 
                 if (!allDreamsText.trim()) {
                     wordCloudPlaceholder.classList.remove('hidden');
                     wordCloudCanvas.style.display = 'none';
                      showFeedback('No hay suficiente texto para generar la nube.', 'error');
                     return;
                 }

                const wordList = processTextForCloud(allDreamsText);

                if (wordList.length === 0) {
                     wordCloudPlaceholder.classList.remove('hidden');
                     wordCloudCanvas.style.display = 'none';
                     showFeedback('No se encontraron palabras significativas después de filtrar.', 'error');
                    return;
                }

                 wordCloudPlaceholder.classList.add('hidden');
                 wordCloudCanvas.style.display = 'block';

                 // Opciones para WordCloud2
                 const options = {
                     list: wordList.slice(0, 150), // Limitar a las 150 palabras más frecuentes
                     gridSize: Math.round(16 * wordCloudCanvas.width / 1024),
                     weightFactor: (size) => Math.pow(size, 1.3) * wordCloudCanvas.width / 800, // Ajustar tamaño relativo
                     fontFamily: 'Poppins, sans-serif',
                     color: (word, weight) => {
                         // Colores basados en frecuencia o aleatorios dentro de una paleta
                         const colors = [ '#8e44ad', '#3498db', '#f39c12', '#e0e0e0', '#a0a0c0', '#2ecc71'];
                         return colors[Math.floor(Math.random() * colors.length)];
                     },
                     //backgroundColor: 'rgba(0,0,0,0.05)', // Fondo sutil si se desea
                     backgroundColor: 'transparent', // Hacerlo transparente sobre el fondo de la sección
                     rotateRatio: 0.5, // 50% de las palabras rotadas
                     minSize: 5, // Tamaño mínimo de fuente
                     shape: 'circle', // 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
                     drawOutOfBound: false,
                     hover: (item, dimension, event) => {
                        if (item) {
                           wordCloudCanvas.title = `${item[0]}: ${item[1]} ${item[1] > 1 ? 'veces' : 'vez'}`;
                        } else {
                            wordCloudCanvas.title = '';
                        }
                     },
                    click: (item, dimension, event) => {
                        if (item) {
                             // Podrías implementar algo aquí, como filtrar sueños que contengan esa palabra
                            console.log(`Clicked on: ${item[0]}`);
                            highlightDreamsWithWord(item[0]); // Ejemplo de función a llamar
                        }
                    }
                 };

                 // Destruir instancia anterior si existe para evitar solapamientos
                /* if (wordCloudInstance) {
                     // wordcloud2.js no tiene un método destroy fácil, la forma más segura es
                     // limpiar el canvas y volver a llamar
                     const ctx = wordCloudCanvas.getContext('2d');
                     ctx.clearRect(0, 0, wordCloudCanvas.width, wordCloudCanvas.height);
                 }*/

                 // Crear la nube
                 WordCloud(wordCloudCanvas, options);
                 // wordCloudInstance = ??? // wordcloud2.js no devuelve la instancia fácilmente
                 
                 showFeedback('Nube de palabras generada.', 'success');
            }
            
            // Función ejemplo para resaltar sueños (no completamente implementada)
            function highlightDreamsWithWord(word) {
                console.log(`Resaltando sueños con la palabra: ${word}`);
                const dreamItems = dreamsUl.querySelectorAll('li');
                dreamItems.forEach(item => {
                    const textElement = item.querySelector('.dream-text');
                    if (textElement && textElement.textContent.toLowerCase().includes(word.toLowerCase())) {
                        item.style.transition = 'background-color 0.3s ease';
                        item.style.backgroundColor = 'rgba(243, 156, 18, 0.3)'; // Resaltado amarillo/naranja
                        setTimeout(() => {
                            item.style.backgroundColor = ''; // Volver al color original
                        }, 2500); // Resaltado temporal
                    }
                });
            }

             // Actualizar Estadísticas
             function updateStats() {
                 const totalDreams = dreams.length;
                 const allDreamsText = dreams.map(dream => dream.text).join(' ');
                 const wordList = processTextForCloud(allDreamsText); // [[word, count], ...]
                 
                 const totalWords = wordList.reduce((sum, [, count]) => sum + count, 0);
                 const avgLength = totalDreams > 0 ? Math.round(totalWords / totalDreams) : 0;
                 const uniqueWords = wordList.length;
                 
                 // Animar conteo (simple)
                 animateCounter(statTotalDreams, totalDreams);
                 animateCounter(statAvgLength, avgLength);
                 animateCounter(statUniqueWords, uniqueWords);
                 
                 // Top 5 palabras
                 const top5 = wordList.slice(0, 5).map(([word, count]) => `${escapeHtml(word)} (${count})`).join(', ');
                 topWordsList.textContent = top5 || '-';
             }
             
             // Animación simple de conteo
             function animateCounter(element, targetValue) {
                 let currentValue = 0;
                 const duration = 800; // ms
                 const stepTime = 50; // ms
                 const steps = duration / stepTime;
                 const increment = targetValue / steps;
                 
                 element.textContent = 0; // Empezar desde 0
                 
                 const counterInterval = setInterval(() => {
                     currentValue += increment;
                     if (currentValue >= targetValue) {
                         element.textContent = targetValue;
                         clearInterval(counterInterval);
                     } else {
                         element.textContent = Math.ceil(currentValue);
                     }
                 }, stepTime);
             }


             // Eliminar Sueño
             function deleteDream(index) {
                 // La lista se renderiza ordenada, pero el índice original de `dreams` puede no coincidir.
                 // Necesitamos encontrar el sueño correcto basado en algo único, como el timestamp.
                 // Primero, obtenemos los datos ordenados como se muestran:
                 const sortedDreams = [...dreams].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
                 const dreamToDeleteTimestamp = sortedDreams[index].timestamp;
                 
                 // Ahora encontramos el índice real en el array `dreams` original
                 const originalIndex = dreams.findIndex(dream => dream.timestamp === dreamToDeleteTimestamp);

                 if (originalIndex !== -1) {
                     dreams.splice(originalIndex, 1); // Eliminar del array
                     saveDreamsToLocal(); // Guardar cambios
                     renderDreams(); // Volver a renderizar la lista
                     updateStats(); // Actualizar estadísticas
                     showFeedback('Sueño eliminado correctamente.', 'success');
                     // Opcional: Regenerar nube si se elimina un sueño
                     // generateWordCloud();
                 } else {
                      showFeedback('Error al encontrar el sueño para eliminar.', 'error');
                 }
             }

            // --- Event Listeners ---

            // Envío del formulario de nuevo sueño
            dreamInputForm.addEventListener('submit', function(e) {
                e.preventDefault(); // Prevenir recarga de página
                
                const dreamText = dreamTextArea.value.trim();

                if (dreamText) {
                    const newDream = {
                        text: dreamText,
                        timestamp: new Date().toISOString() // Usar ISO para consistencia
                    };
                    dreams.push(newDream);
                    saveDreamsToLocal();
                    renderDreams();
                    updateStats();
                    dreamTextArea.value = ''; // Limpiar textarea
                    showFeedback('¡Sueño guardado en las estrellas!', 'success');
                    dreamTextArea.focus(); // Devolver foco para siguiente entrada
                    
                    // Intentar generar la nube si es el primer sueño
                    if (dreams.length === 1) {
                        generateWordCloud();
                    }
                } else {
                     showFeedback('El sueño no puede estar vacío.', 'error');
                }
                
                return false; // Asegurar que no se envíe el formulario
            });

            // Click en botones de eliminar (delegación de eventos)
            dreamsUl.addEventListener('click', (e) => {
                if (e.target.closest('.delete-dream-btn')) {
                    const button = e.target.closest('.delete-dream-btn');
                    const index = parseInt(button.dataset.index, 10);
                    // Confirmación antes de borrar
                    if (confirm('¿Estás seguro de que quieres borrar este sueño? Esta acción no se puede deshacer.')) {
                        deleteDream(index);
                    }
                }
            });

            // Generar nube de palabras
            generateCloudBtn.addEventListener('click', generateWordCloud);

             // Ocultar pantalla de carga cuando todo esté listo
             window.addEventListener('load', () => {
                // Asegurar que la pantalla de carga se oculte inmediatamente
                loadingScreen.classList.add('hidden');
             });

            // --- Inicialización ---
            loadDreamsFromLocal();
            renderDreams();
            updateStats();
             // Intenta generar la nube al cargar si hay sueños
            if (dreams.length > 0) {
                 generateWordCloud();
            } else {
                 wordCloudPlaceholder.classList.remove('hidden');
                 wordCloudCanvas.style.display = 'none';
            }

        }); // Fin DOMContentLoaded
    </script>

</body>
</html>