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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScriptGPT - Make Your Scriptwriting Easier</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
        };
    </script>
</head>

<body class="bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center transition-colors duration-300">
    <div class="w-full max-w-4xl bg-white dark:bg-gray-800 dark:text-gray-100 shadow-lg rounded-xl p-8">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">
                ScriptGPT - Make Your Scriptwriting Easier
            </h1>
            <button id="toggleDarkMode"
                class="py-2 px-4 bg-gray-300 dark:bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-400 dark:hover:bg-gray-600 transition">
                Toggle Dark Mode
            </button>
        </div>

        <!-- Content Input -->
        <div class="mb-6">
            <label for="content" class="block text-lg font-semibold mb-2">Your Content:</label>
            <textarea id="content" class="w-full bg-gray-50 dark:bg-gray-700 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg p-4 h-32 resize-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 placeholder-gray-400"
                placeholder="Enter your content here..."></textarea>
        </div>

        <!-- Chunk Size Input -->
        <div class="mb-6">
            <label for="chunkSize" class="block text-lg font-semibold mb-2">Chunk Size:</label>
            <input id="chunkSize" type="number" value="14000"
                class="w-full bg-gray-50 dark:bg-gray-700 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg p-4 focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 placeholder-gray-400" />
        </div>

        <!-- Prompt Instructions -->
        <div class="mb-6">
            <label for="promptInstructions" class="block text-lg font-semibold mb-2">Your Prompt Instructions:</label>
            <textarea id="promptInstructions" class="w-full bg-gray-50 dark:bg-gray-700 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg p-4 h-32 resize-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 placeholder-gray-400"
                placeholder="Enter your prompt instructions here..."></textarea>
        </div>

        <!-- Generate Chunks Button -->
        <button id="generateChunks"
            class="w-full bg-blue-500 text-white font-semibold py-3 px-4 rounded-lg shadow-md hover:bg-blue-600 transition">
            Generate Chunks
        </button>

        <!-- Output Section -->
        <div id="output" class="mt-8 space-y-4">
            <!-- Chunks will appear here -->
        </div>

        <!-- Clipboard Status -->
        <div id="clipboardStatus" class="mt-4 text-center text-sm font-medium text-green-600"></div>
    </div>

    <script>
        const generateChunksBtn = document.getElementById('generateChunks');
        const outputDiv = document.getElementById('output');
        const toggleDarkModeBtn = document.getElementById('toggleDarkMode');
        const body = document.body;
        const clipboardStatus = document.getElementById('clipboardStatus');

        // Toggle Dark Mode
        toggleDarkModeBtn.addEventListener('click', () => {
            body.classList.toggle('dark');
        });

        generateChunksBtn.addEventListener('click', () => {
            const content = document.getElementById('content').value;
            const chunkSize = parseInt(document.getElementById('chunkSize').value, 10) || 14000;
            const promptInstructions = document.getElementById('promptInstructions').value;

            const chunks = [];
            let start = 0;

            while (start < content.length) {
                let end = start + chunkSize;

                if (end < content.length) {
                    let boundary = content.lastIndexOf('.', end);
                    if (boundary === -1 || boundary < start || end - boundary > 500) {
                        boundary = end; // Fallback to chunk size if no suitable full stop
                    } else {
                        boundary += 1; // Include the full stop
                    }
                    end = boundary;
                }

                const chunk = content.slice(start, end).trim();
                chunks.push(chunk);
                start = end;
            }

            // Render chunks to the output section
            outputDiv.innerHTML = '';
            chunks.forEach((chunk, index) => {
                // Create a heading for the chunk
                const headingDiv = document.createElement('div');
                headingDiv.className = 'text-lg font-semibold mb-2';
                headingDiv.textContent = `Chunk ${index + 1}:`;

                // Create a scrollable container for the chunk
                const chunkDiv = document.createElement('div');
                chunkDiv.className =
                    'p-4 bg-gray-50 dark:bg-gray-700 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition max-h-40 overflow-y-auto';
                chunkDiv.innerHTML = `${chunk}<br><hr>Prompt Instructions:<br>${promptInstructions}`;

                // Copy to clipboard on click
                chunkDiv.addEventListener('click', () => {
                    navigator.clipboard.writeText(chunk).then(() => {
                        clipboardStatus.textContent = `Chunk ${index + 1} copied to clipboard!`;
                        setTimeout(() => clipboardStatus.textContent = '', 3000);
                    }).catch(() => {
                        clipboardStatus.textContent = 'Failed to copy chunk!';
                        setTimeout(() => clipboardStatus.textContent = '', 3000);
                    });
                });

                // Append heading and chunk content to the output
                outputDiv.appendChild(headingDiv);
                outputDiv.appendChild(chunkDiv);
            });
        });
    </script>
</body>

</html>