<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slot Machine Input Settings</title>
    <!-- Google Fonts -->
    <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=Orbitron:wght@500;700;900&family=Outfit:wght@300;400;600;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            font-family: var(--font-primary);
            scale: 1;
        }

        .input-container {
            width: 100%;
            max-width: 500px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }

        .input-container h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-family: var(--font-display);
            font-size: 28px;
        }

        .nav-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .nav-buttons a, .nav-buttons button {
            flex: 1;
            min-width: 120px;
            padding: 10px 15px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            text-decoration: none;
            text-align: center;
            transition: all 0.3s ease;
        }

        .nav-buttons a.btn-index {
            background: #667eea;
            color: white;
        }

        .nav-buttons a.btn-index:hover {
            background: #5568d3;
            transform: translateY(-2px);
        }

        .nav-buttons button.btn-save {
            background: #48bb78;
            color: white;
            font-weight: bold;
        }

        .nav-buttons button.btn-save:hover {
            background: #38a169;
            transform: translateY(-2px);
        }

        .control-section {
            margin-bottom: 20px;
            padding: 15px;
            background: #f7fafc;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .control-section label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2d3748;
            font-size: 14px;
        }

        .control-section label span:first-child {
            display: block;
            margin-bottom: 4px;
        }

        .count-badge {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }

        textarea {
            width: 100%;
            height: 120px;
            padding: 10px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            resize: vertical;
            transition: border-color 0.3s;
        }

        textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .button-row {
            display: flex;
            gap: 8px;
            margin-top: 10px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 8px 14px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }

        .btn-secondary {
            background: #e2e8f0;
            color: #2d3748;
        }

        .btn-secondary:hover {
            background: #cbd5e0;
        }

        .setting-item {
            margin-bottom: 15px;
        }

        .setting-item label {
            margin-bottom: 6px;
        }

        select, input[type="range"] {
            width: 100%;
            padding: 8px;
            border: 2px solid #e2e8f0;
            border-radius: 6px;
            font-family: var(--font-primary);
            font-size: 14px;
            transition: border-color 0.3s;
        }

        select:focus, input[type="range"]:focus {
            outline: none;
            border-color: #667eea;
        }

        .range-wrapper {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .range-wrapper input[type="range"] {
            flex: 1;
            width: auto;
        }

        .badge {
            background: #667eea;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-weight: bold;
            font-size: 12px;
            white-space: nowrap;
        }

        .setting-item-row {
            margin-bottom: 12px;
        }

        .checkbox-container {
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
            gap: 8px;
            color: #2d3748;
            font-size: 14px;
            font-weight: 500;
        }

        .checkbox-container input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #667eea;
        }

        .checkmark {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid #e2e8f0;
            border-radius: 4px;
            background: white;
        }

        .checkbox-container input[type="checkbox"]:checked ~ .checkmark {
            background: #667eea;
            border-color: #667eea;
            position: relative;
        }

        .dropdown {
            position: relative;
            display: inline-block;
            flex: 1;
            min-width: 100px;
        }

        .dropdown > button {
            width: 100%;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 200px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            padding: 12px 0;
            z-index: 1;
            border-radius: 6px;
            top: 100%;
            left: 0;
        }

        .dropdown-content a {
            color: #2d3748;
            padding: 10px 20px;
            text-decoration: none;
            display: block;
            transition: background 0.3s;
            cursor: pointer;
        }

        .dropdown-content a:hover {
            background-color: #f7fafc;
            color: #667eea;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .theme-selector {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .theme-btn {
            padding: 8px 12px;
            border: 2px solid #e2e8f0;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
            color: #2d3748;
        }

        .theme-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .theme-btn:hover {
            border-color: #667eea;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .section-header h3 {
            margin: 0;
            color: #2d3748;
            font-size: 16px;
        }

        .btn-link {
            background: none;
            border: none;
            color: #667eea;
            cursor: pointer;
            font-size: 12px;
            text-decoration: underline;
            padding: 0;
        }

        .btn-link:hover {
            color: #5568d3;
        }

        .history-list {
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            background: white;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
        }

        .empty-history {
            text-align: center;
            color: #a0aec0;
            font-size: 13px;
            padding: 20px 10px;
        }

        .history-item {
            padding: 8px;
            background: #f7fafc;
            border-radius: 4px;
            margin-bottom: 6px;
            font-size: 13px;
            color: #2d3748;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .history-item-remove {
            background: none;
            border: none;
            color: #cbd5e0;
            cursor: pointer;
            font-size: 14px;
        }

        .history-item-remove:hover {
            color: #e53e3e;
        }

        .success-message {
            background: #c6f6d5;
            color: #22543d;
            padding: 12px 15px;
            border-radius: 6px;
            margin-bottom: 15px;
            display: none;
            animation: slideDown 0.3s ease;
        }

        .success-message.show {
            display: block;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="input-container">
        <h1>🎰 Settings & Names</h1>
        
        <div class="nav-buttons">
            <a href="index.php" class="btn-index">← Back to Slot Machine</a>
            <button class="btn-save" id="btn-save-settings">💾 Save Settings</button>
        </div>

        <div class="success-message" id="success-message">
            ✓ Settings saved successfully!
        </div>

        <!-- Names Input Section -->
        <div class="control-section">
            <label for="names-input">
                <span>Names List</span>
                <span class="count-badge" id="name-count">0 Names</span>
            </label>
            <textarea id="names-input" placeholder="Enter one name per line..."></textarea>
            
            <div class="button-row">
                <button id="btn-shuffle" class="btn btn-secondary btn-sm" title="Shuffle current list">🔀 Shuffle</button>
                <button id="btn-clear" class="btn btn-secondary btn-sm" title="Clear list">🗑️ Clear</button>
                
                <div class="dropdown">
                    <button id="btn-presets" class="btn btn-secondary btn-sm">🎁 Presets</button>
                    
                    <div class="dropdown-content">
                        <a href="#" data-preset="numbers">🔢 Numbers (001-150)</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Machine Settings Section -->
        <div class="control-section">
            <h3>Machine Settings</h3>
            
            <div class="setting-item">
                <label for="reel-count">Active Reels</label>
                <select id="reel-count">
                    <option value="1" selected>1 Reel (1 Winner)</option>
                    <option value="2">2 Reels (2 Winners)</option>
                    <option value="3">3 Reels (3 Winners)</option>
                </select>
            </div>
            
            <div class="setting-item">
                <label for="spin-duration">Spin Duration</label>
                
                <div class="range-wrapper">
                    <input type="range" id="spin-duration" min="10" max="30" value="15" step="0.5">
                    <span id="duration-val" class="badge">15.0s</span>
                </div>
            </div>

            <div class="setting-item-row">
                <label class="checkbox-container">
                    <input type="checkbox" id="remove-winner" checked>
                    <span class="checkmark"></span>
                    Remove winner after picking
                </label>
            </div>

            <div class="setting-item-row">
                <label class="checkbox-container">
                    <input type="checkbox" id="sound-toggle" checked>
                    <span class="checkmark"></span>
                    Enable Sound Effects
                </label>
            </div>

            <div class="setting-item">
                <label>Theme</label>
                
                <div class="theme-selector">
                    <button class="theme-btn active" data-theme="classic-blue" title="Classic Blue White Black">Blue/White</button>
                </div>
            </div>
        </div>

        <!-- History Panel -->
        <div class="control-section flex-grow">
            
            <div class="section-header">
                <h3>Winning History</h3>
                <button id="btn-clear-history" class="btn-link" title="Clear History">Clear</button>
            </div>
            
            <div id="history-list" class="history-list">
                
                <div class="empty-history">No winners yet. Spin the reels!</div>
            </div>
        </div>
    </div>

    <script>
        // Input page script - handles saving data to localStorage
        const inputApp = {
            presets: {
                numbers: Array.from({ length: 150 }, (_, i) => String(i + 1).padStart(3, '0')),
            },

            el: {
                namesInput: document.getElementById('names-input'),
                nameCount: document.getElementById('name-count'),
                btnShuffle: document.getElementById('btn-shuffle'),
                btnClear: document.getElementById('btn-clear'),
                presetOptions: document.querySelectorAll('.dropdown-content a'),
                reelCount: document.getElementById('reel-count'),
                spinDuration: document.getElementById('spin-duration'),
                durationVal: document.getElementById('duration-val'),
                removeWinner: document.getElementById('remove-winner'),
                soundToggle: document.getElementById('sound-toggle'),
                themeBtns: document.querySelectorAll('.theme-btn'),
                btnClearHistory: document.getElementById('btn-clear-history'),
                historyList: document.getElementById('history-list'),
                btnSaveSettings: document.getElementById('btn-save-settings'),
                successMessage: document.getElementById('success-message'),
            },

            init() {
                this.loadLocalStorage();
                this.bindEvents();
                this.updateHistoryDisplay();
            },

            loadLocalStorage() {
                // Load names
                const savedNames = localStorage.getItem('slot-names');
                if (savedNames) {
                    this.el.namesInput.value = savedNames;
                } else {
                    this.el.namesInput.value = '';
                }
                this.updateNameCount();

                // Load settings
                const soundPref = localStorage.getItem('slot-sound-enabled');
                if (soundPref !== null) {
                    this.el.soundToggle.checked = soundPref === 'true';
                }

                const removePref = localStorage.getItem('slot-remove-winner');
                if (removePref !== null) {
                    this.el.removeWinner.checked = removePref === 'true';
                }

                const durationPref = localStorage.getItem('slot-spin-duration');
                if (durationPref !== null) {
                    let val = parseFloat(durationPref);
                    if (isNaN(val) || val < 10.0 || val > 30.0) {
                        val = 10.0;
                    }
                    this.el.spinDuration.value = val;
                } else {
                    this.el.spinDuration.value = 15.0;
                }
                this.el.durationVal.textContent = parseFloat(this.el.spinDuration.value).toFixed(1) + 's';

                const reelPref = localStorage.getItem('slot-reel-count');
                if (reelPref !== null) {
                    this.el.reelCount.value = reelPref;
                }

                const themePref = localStorage.getItem('slot-theme');
                if (themePref) {
                    this.el.themeBtns.forEach(btn => {
                        btn.classList.toggle('active', btn.dataset.theme === themePref);
                    });
                }
            },

            bindEvents() {
                // Names input
                this.el.namesInput.addEventListener('input', (e) => this.handleInputChange());
                this.el.btnShuffle.addEventListener('click', () => this.shuffleNames());
                this.el.btnClear.addEventListener('click', () => this.clearNames());

                // Presets
                this.el.presetOptions.forEach(option => {
                    option.addEventListener('click', (e) => {
                        e.preventDefault();
                        const presetKey = e.target.dataset.preset;
                        this.loadPreset(presetKey);
                    });
                });

                // Settings
                this.el.reelCount.addEventListener('change', (e) => {
                    localStorage.setItem('slot-reel-count', e.target.value);
                });

                this.el.spinDuration.addEventListener('input', (e) => {
                    const val = parseFloat(e.target.value);
                    this.el.durationVal.textContent = val.toFixed(1) + 's';
                    localStorage.setItem('slot-spin-duration', val.toString());
                });

                this.el.removeWinner.addEventListener('change', (e) => {
                    localStorage.setItem('slot-remove-winner', e.target.checked.toString());
                });

                this.el.soundToggle.addEventListener('change', (e) => {
                    localStorage.setItem('slot-sound-enabled', e.target.checked.toString());
                });

                this.el.themeBtns.forEach(btn => {
                    btn.addEventListener('click', () => {
                        const theme = btn.dataset.theme;
                        localStorage.setItem('slot-theme', theme);
                        this.el.themeBtns.forEach(b => b.classList.remove('active'));
                        btn.classList.add('active');
                    });
                });

                this.el.btnClearHistory.addEventListener('click', () => {
                    if (confirm('Are you sure you want to clear all history?')) {
                        localStorage.removeItem('slot-history');
                        this.updateHistoryDisplay();
                    }
                });

                // Save button
                this.el.btnSaveSettings.addEventListener('click', () => this.saveAllSettings());
            },

            handleInputChange() {
                const names = this.el.namesInput.value.trim().split('\n').filter(n => n.trim());
                localStorage.setItem('slot-names', this.el.namesInput.value);
                this.updateNameCount();
            },

            updateNameCount() {
                const names = this.el.namesInput.value.trim().split('\n').filter(n => n.trim());
                this.el.nameCount.textContent = names.length + ' Names';
            },

            shuffleNames() {
                const names = this.el.namesInput.value.trim().split('\n').filter(n => n.trim());
                for (let i = names.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [names[i], names[j]] = [names[j], names[i]];
                }
                this.el.namesInput.value = names.join('\n');
                this.handleInputChange();
            },

            clearNames() {
                if (confirm('Are you sure you want to clear all names?')) {
                    this.el.namesInput.value = '';
                    this.handleInputChange();
                }
            },

            loadPreset(presetKey) {
                const preset = this.presets[presetKey];
                if (preset) {
                    this.el.namesInput.value = preset.join('\n');
                    this.handleInputChange();
                }
            },

            updateHistoryDisplay() {
                const historyJson = localStorage.getItem('slot-history');
                const history = historyJson ? JSON.parse(historyJson) : [];

                if (history.length === 0) {
                    this.el.historyList.innerHTML = '<div class="empty-history">No winners yet. Spin the reels!</div>';
                    return;
                }

                this.el.historyList.innerHTML = history.map((item, index) => `
                    <div class="history-item">
                        <div>
                            <strong>${typeof item === 'object' ? item.name : item}</strong>
                            ${typeof item === 'object' && item.time ? `<br><small>${item.time}</small>` : ''}
                        </div>
                        <button class="history-item-remove" data-index="${index}">✕</button>
                    </div>
                `).join('');

                // Add remove handlers
                this.el.historyList.querySelectorAll('.history-item-remove').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const index = parseInt(e.target.dataset.index);
                        history.splice(index, 1);
                        localStorage.setItem('slot-history', JSON.stringify(history));
                        this.updateHistoryDisplay();
                    });
                });
            },

            saveAllSettings() {
                this.handleInputChange();
                
                // Show success message
                this.el.successMessage.classList.add('show');
                setTimeout(() => {
                    this.el.successMessage.classList.remove('show');
                }, 3000);
            }
        };

        // Initialize when DOM is ready
        document.addEventListener('DOMContentLoaded', () => inputApp.init());

        // Update history display periodically (in case it changes from another tab/window)
        setInterval(() => inputApp.updateHistoryDisplay(), 1000);
    </script>
</body>
</html>
