/**
 * Simple UI Components for KSTools License Manager
 */

class Components {
    
    // Modal system
    static createModal({ title, content, size = 'md' }) {
        console.log('🔨 Creating modal with title:', title);
        
        const modalHtml = `
            <div class="modal-overlay" onclick="Components.closeModal(this)">
                <div class="modal modal-${size}" onclick="event.stopPropagation()">
                    <div class="modal-header">
                        <h3 class="modal-title">${title}</h3>
                        <button class="modal-close" onclick="Components.closeModal(this.closest('.modal-overlay'))">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        ${content}
                    </div>
                </div>
            </div>
        `;
        
        const container = document.getElementById('modalContainer') || document.body;
        console.log('📍 Modal container:', container);
        
        container.insertAdjacentHTML('beforeend', modalHtml);
        const modal = container.lastElementChild;
        
        console.log('✅ Modal created:', modal);
        return modal;
    }
    
    static showModal(modal) {
        if (modal) {
            console.log('👁️ Showing modal...', modal);
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
            console.log('✅ Modal shown with active class');
        } else {
            console.error('❌ Cannot show modal: modal is null or undefined');
        }
    }
    
    static closeModal(modal) {
        if (modal) {
            modal.classList.remove('active');
            setTimeout(() => {
                modal.remove();
                document.body.style.overflow = '';
            }, 300);
        }
    }
    
    // Simple modal method for quick use
    static modal(title, content, size = 'md') {
        console.log('🎯 Components.modal called with title:', title);
        const modal = this.createModal({ title, content, size });
        this.showModal(modal);
        return modal;
    }
    
    // License creation modal
    static createLicenseModal() {
        // 防止重複創建
        const existingModal = document.querySelector('.modal-overlay');
        if (existingModal) {
            console.log('⚠️ License modal already exists, returning existing one');
            return existingModal;
        }
        
        const content = `
            <form id="licenseForm" class="license-form">
                <div class="form-group">
                    <label for="userName" class="form-label">
                        <i class="fas fa-user"></i>
                        用戶名稱 *
                    </label>
                    <input type="text" id="userName" name="userName" class="form-input" required 
                           placeholder="輸入使用者名稱">
                    <small class="form-help">此名稱將顯示在授權記錄中</small>
                </div>
                
                <div class="form-group">
                    <label for="email" class="form-label">
                        <i class="fas fa-envelope"></i>
                        電子郵件
                    </label>
                    <input type="email" id="email" name="email" class="form-input" 
                           placeholder="選填：用戶的電子郵件地址">
                    <small class="form-help">選填：用於聯繫和通知</small>
                </div>
                
                
                <div class="form-group">
                    <label for="validDays" class="form-label">
                        <i class="fas fa-calendar-alt"></i>
                        有效天數 *
                    </label>
                    <select id="validDays" name="validDays" class="form-select" required>
                        <option value="7">7 天 (試用)</option>
                        <option value="30">30 天</option>
                        <option value="90">90 天</option>
                        <option value="365" selected>1 年</option>
                        <option value="0">永久授權</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="notes" class="form-label">
                        <i class="fas fa-sticky-note"></i>
                        備註
                    </label>
                    <textarea id="notes" name="notes" class="form-textarea" rows="3" 
                              placeholder="選填：記錄此授權的用途、客戶資訊或其他相關資訊"></textarea>
                    <small class="form-help">選填：內部記錄使用</small>
                </div>
                
                <div class="info-box mt-3">
                    <div class="info-title">
                        <i class="fas fa-info-circle"></i>
                        硬體綁定機制說明
                    </div>
                    <div class="info-content">
                        <p>• 使用者首次輸入授權碼時會自動綁定硬體</p>
                        <p>• 系統會自動生成32位硬體指紋 (CPU ProcessorId + 主機板序號)</p>
                        <p>• 每個授權碼只能在一台設備上啟用使用</p>
                    </div>
                </div>
                
                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" onclick="Components.closeModal(this.closest('.modal-overlay'))">
                        取消
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-plus"></i>
                        建立授權
                    </button>
                </div>
            </form>
        `;
        
        const modal = this.createModal({
            title: '建立新授權',
            content: content,
            size: 'lg'
        });
        
        // Setup form handler
        const form = modal.querySelector('#licenseForm');
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            await this.handleLicenseCreation(form, modal);
        });
        
        this.showModal(modal);
        return modal;
    }
    
    static async handleLicenseCreation(form, modal) {
        const formData = new FormData(form);
        
        // 驗證必要欄位
        const userName = formData.get('userName')?.trim();
        const validDays = formData.get('validDays');
        
        if (!userName) {
            Utils.showError('驗證失敗', '請輸入用戶名稱');
            return;
        }
        
        if (!validDays) {
            Utils.showError('驗證失敗', '請選擇有效天數');
            return;
        }
        
        const licenseData = {
            user_name: userName,
            user_email: formData.get('email')?.trim() || null,
            expires_days: parseInt(validDays),
            notes: formData.get('notes')?.trim() || null
        };
        
        console.log('📝 License Creation Data:', licenseData);
        
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalContent = submitBtn.innerHTML;
        
        try {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 建立中...';
            
            console.log('🚀 Sending create license request...');
            const response = await api.createLicense(licenseData);
            console.log('✅ Create license response:', response);
            
            if (response && response.success) {
                Utils.showSuccess('授權建立成功');
                this.closeModal(modal);
                
                // Refresh current page if it has a refresh method
                if (window.currentPage && window.currentPage.refresh) {
                    window.currentPage.refresh();
                }
            } else {
                throw new Error(response?.message || '建立授權失敗');
            }
            
        } catch (error) {
            console.error('❌ Create license error:', error);
            Utils.handleError(error, '建立授權時');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalContent;
        }
    }
    
    // Chart creation helper
    static createChart(canvas, config) {
        if (!window.Chart) {
            console.error('Chart.js not loaded');
            return null;
        }
        
        const ctx = canvas.getContext('2d');
        
        // Default dark theme colors
        const defaultConfig = {
            plugins: {
                legend: {
                    labels: {
                        color: '#e6edf3',
                        font: { size: 12 }
                    }
                }
            },
            scales: config.type !== 'doughnut' && config.type !== 'pie' ? {
                x: {
                    ticks: { color: '#7d8590' },
                    grid: { color: '#30363d' }
                },
                y: {
                    ticks: { color: '#7d8590' },
                    grid: { color: '#30363d' }
                }
            } : undefined
        };
        
        // Merge configs
        const finalConfig = {
            ...config,
            options: {
                ...defaultConfig,
                ...config.options,
                responsive: true,
                maintainAspectRatio: false
            }
        };
        
        return new Chart(ctx, finalConfig);
    }
    
    // Confirmation dialog
    static confirm(title, message, onConfirm) {
        const confirmId = 'confirm_' + Date.now();
        
        const content = `
            <div class="confirm-dialog">
                <p>${message}</p>
                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" onclick="Components.closeModal(this.closest('.modal-overlay'))">
                        取消
                    </button>
                    <button type="button" class="btn btn-danger" id="${confirmId}">
                        確認
                    </button>
                </div>
            </div>
        `;
        
        const modal = this.createModal({ title, content });
        this.showModal(modal);
        
        // 添加確認按鈕事件監聽器
        setTimeout(() => {
            const confirmBtn = document.getElementById(confirmId);
            if (confirmBtn) {
                confirmBtn.addEventListener('click', () => {
                    this.closeModal(modal);
                    if (onConfirm && typeof onConfirm === 'function') {
                        onConfirm();
                    }
                });
            }
        }, 100);
        
        return modal;
    }
    
    static handleConfirm(button, callback) {
        const modal = button.closest('.modal-overlay');
        this.closeModal(modal);
        if (callback && typeof callback === 'function') {
            callback();
        }
    }
}

// Modal keyboard handling
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        const activeModal = document.querySelector('.modal-overlay.active');
        if (activeModal) {
            Components.closeModal(activeModal);
        }
    }
});