<?php
require_once 'includes/init.php';

// Check if user is authenticated
if (!isAuthenticated()) {
    redirect(APP_URL . '/login.php');
}

$pageTitle = 'Icon Creator';
$activePage = 'icon-creator';

include 'includes/header.php';
?>

<div class="min-h-screen bg-background-light dark:bg-background-dark">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <header class="bg-white dark:bg-slate-800 shadow-sm border-b border-slate-200 dark:border-slate-800">
            <div class="px-4 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-xl font-bold text-slate-900 dark:text-slate-100">Icon Creator</h1>
                        <p class="text-sm text-slate-600 dark:text-slate-400">Create custom icons for your app</p>
                    </div>
                    <a href="chats.php" class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        <span class="material-symbols-outlined text-sm">arrow_back</span>
                        Back to Chats
                    </a>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="p-6">
            <!-- Icon Preview -->
            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6 mb-6">
                <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Icon Preview</h2>
                <div class="flex justify-center mb-6">
                    <div id="icon-preview" class="w-32 h-32 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white text-4xl font-bold shadow-lg">
                        <span id="preview-text">QR</span>
                    </div>
                </div>
                
                <!-- Icon Settings -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Icon Text</label>
                        <input type="text" id="icon-text" value="QR" maxlength="3" 
                               class="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:focus:ring-offset-0 dark:bg-slate-700 dark:text-white"
                               placeholder="Enter 1-3 characters">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Background Color</label>
                        <div class="flex gap-2">
                            <input type="color" id="bg-color" value="#1162d4" 
                                   class="h-10 w-20 rounded-lg border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-slate-700">
                            <input type="color" id="bg-color-2" value="#0d4fa8" 
                                   class="h-10 w-20 rounded-lg border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-slate-700">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Text Color</label>
                        <input type="color" id="text-color" value="#ffffff" 
                               class="h-10 w-20 rounded-lg border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-slate-700">
                    </div>
                    
                    <div>
                        <label class="label block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Icon Size</label>
                        <select id="icon-size" class="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-slate-700 dark:text-white">
                            <option value="32">32x32</option>
                            <option value="64">64x64</option>
                            <option value="128">128x128</option>
                            <option value="256">256x256</option>
                            <option value="512">512x512</option>
                        </select>
                    </div>
                </div>
                
                <!-- Download Buttons -->
                <div class="flex flex-wrap gap-3 justify-center">
                    <button onclick="downloadIcon('png')" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
                        <span class="material-symbols-outlined text-sm align-middle me-1">download</span>
                        Download PNG
                    </button>
                    <button onclick="downloadIcon('svg')" class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium">
                        <span class="material-symbols-outlined text-sm align-middle me-1">code</span>
                        Download SVG
                    </button>
                    <button onclick="downloadIcon('ico')" class="px-6 py-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors font-medium">
                        <span class="material-symbols-outlined text-sm align-middle me-1">settings_applications</span>
                        Download ICO
                    </button>
                </div>
            </div>

            <!-- Size Presets -->
            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
                <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Quick Presets</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                    <button onclick="applyPreset('android')" class="p-4 bg-slate-100 dark:bg-slate-700 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        <div class="text-2xl mb-2">🤖️️</div>
                        <div class="text-sm font-medium">Android</div>
                        <div class="text-xs text-slate-500">32x32</div>
                    </button>
                    <button onclick="applyPreset('ios')" class="p-4 bg-slate-100 dark:bg-slate-700 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        <div class="text-2xl mb-2">🍏️️</div>
                        <div class="text-sm font-medium">iOS</div>
                        <div class="text-xs text-slate-500">60x60</div>
                    </button>
                    <button onclick="applyPreset('web')" class="p-4 bg-slate-100 dark:bg-slate-700 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        <div class="text-2xl mb-2">🌐</div>
                        <div class="text-sm font-medium">Web</div>
                        <div class="text-xs text-slate-500">256x256</div>
                    </button>
                    <button onclick="applyPreset('favicon')" class="p-4 bg-slate-100 dark:bg-slate-700 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        <div class="text-2xl mb-2">🌟</div>
                        <div class="text-sm font-medium">Favicon</div>
                        <div class="text-xs text-slate-500">32x32</div>
                    </button>
                </div>
            </div>

            <!-- Recent Icons -->
            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
                <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Recent Icons</h2>
                <div id="recent-icons" class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <!-- Recent icons will be added here -->
                </div>
            </div>
        </main>
    </div>
</div>

<script>
// Update preview in real-time
function updatePreview() {
    const text = document.getElementById('icon-text').value || 'QR';
    const bgColor = document.getElementById('bg-color').value;
    const bgColor2 = document.getElementById('bg-color-2').value;
    const textColor = document.getElementById('text-color').value;
    const size = parseInt(document.getElementById('icon-size').value);
    
    const preview = document.getElementById('icon-preview');
    preview.style.width = size + 'px';
    preview.style.height = size + 'px';
    preview.style.background = `linear-gradient(135deg, ${bgColor} 0%, ${bgColor2} 100%)`;
    preview.style.fontSize = (size * 0.4) + 'px';
    preview.textContent = text.toUpperCase();
    preview.style.color = textColor;
    
    document.getElementById('preview-text').textContent = text.toUpperCase();
}

// Apply preset configurations
function applyPreset(type) {
    const presets = {
        android: { text: 'A', bgColor: '#3DDC84', bgColor2: '#2196F3', textColor: '#FFFFFF', size: 32 },
        ios: { text: 'I', bgColor: '#007AFF', bgColor2: '#0051D5', textColor: '#FFFFFF', size: 60 },
        web: { text: 'W', bgColor: '#FF9800', bgColor2: '#F57C00', textColor: '#FFFFFF', size: 256 },
        favicon: { text: 'F', bgColor: '#FF5722', bgColor2: '#E91E63', textColor: '#FFFFFF', size: 32 }
    };
    
    const preset = presets[type];
    
    document.getElementById('icon-text').value = preset.text;
    document.getElementById('bg-color').value = preset.bgColor;
    document.getElementById('bg-color-2').value = preset.bgColor2;
    document.getElementById('text-color').value = preset.textColor;
    document.getElementById('icon-size').value = preset.size;
    
    updatePreview();
}

// Download icon as different formats
function downloadIcon(format) {
    const text = document.getElementById('icon-text').value || 'QR';
    const bgColor = document.getElementById('bg-color').value;
    const bgColor2 = document.getElementById('bg-color-2').value;
    const textColor = document.getElementById('text-color').value;
    const size = parseInt(document.getElementById('icon-size').value);
    
    // Validate inputs
    const params = new URLSearchParams({
        'text': text.substring(0, 3), // Max 3 characters
        'bg_color': bgColor,
        'bg_color_2': bgColor2,
        'text_color': textColor,
        'size': [32, 64, 128, 256, 512].includes(size) ? size : 128,
        'format': format
        const a = document.createElement('a');
        a.href = url;
        a.download = `icon-${size}x${size}.png`;
        a.click();
        URL.revokeObjectURL(url);
        
        // Add to recent icons
        addToRecentIcons(text, bgColor, size, 'png');
    });
}

// Download as SVG
function downloadSVG(text, bgColor, bgColor2, textColor, size) {
    const svg = `
        <svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:${bgColor}"/>
                    <stop offset="100%" style="stop-color:${bgColor2}"/>
                </linearGradient>
            </defs>
            <rect width="${size}" height="${size}" fill="url(#gradient)" rx="${size * 0.2}"/>
            <text x="50%" y="50%" text-anchor="middle" dy=".3em" 
                  font-family="Arial" font-size="${size * 0.4}" font-weight="bold" 
                  fill="${textColor}" text-anchor="middle">${text.toUpperCase()}</text>
        </svg>
    `;
    
    const blob = new Blob([svg], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = url;
    a.download = `icon-${size}x${size}.svg`;
    a.click();
    URL.revokeObjectURL(url);
    
    // Add to recent icons
    addToRecentIcons(text, bgColor, size, 'svg');
}

// Download as ICO
function downloadICO(text, bgColor, bgColor2, textColor, size) {
    // For simplicity, we'll create a PNG and suggest using online converters
    downloadPNG(text, bgColor, bgColor2, textColor, size);
    
    // Show message about ICO conversion
    const message = document.createElement('div');
    message.className = 'fixed top-4 right-4 bg-yellow-500 text-white px-4 py-2 rounded-lg shadow-lg z-50';
    message.innerHTML = `
        <div class="flex items-center gap-2">
            <span class="material-symbols-outlined">info</span>
            <span>ICO format requires online converter. PNG downloaded instead.</span>
        </div>
    `;
    document.body.appendChild(message);
    
    setTimeout(() => {
        message.remove();
    }, 3000);
}

// Add to recent icons
function addToRecentIcons(text, bgColor, size, format) {
    const recentIcons = document.getElementById('recent-icons');
    const iconDiv = document.createElement('div');
    iconDiv.className = 'p-4 bg-slate-100 dark:bg-slate-700 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors cursor-pointer';
    iconDiv.innerHTML = `
        <div class="text-2xl mb-2" style="background: linear-gradient(135deg, ${bgColor} 0%, ${bgColor2} 100%); width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: ${textColor}; font-weight: bold; font-family: Arial;">
            ${text.toUpperCase()}
        </div>
        <div class="text-xs text-slate-600 dark:text-slate-400">
            ${size}x${size} • ${format.toUpperCase()}
        </div>
    `;
    
    iconDiv.onclick = function() {
        document.getElementById('icon-text').value = text;
        document.getElementById('bg-color').value = bgColor;
        document.getElementById('bg-color-2').value = bgColor2;
        document.getElementById('text-color').value = textColor;
        document.getElementById('icon-size').value = size;
        updatePreview();
    };
    
    recentIcons.insertBefore(iconDiv, recentIcons.firstChild);
    
    // Keep only last 8 icons
    while (recentIcons.children.length > 8) {
        recentIcons.removeChild(recentIcons.lastChild);
    }
}

// Event listeners
document.getElementById('icon-text').addEventListener('input', updatePreview);
document.getElementById('bg-color').addEventListener('input', updatePreview);
document.getElementById('bg-color-2').addEventListener('input', updatePreview);
document.getElementById('text-color').addEventListener('input', updatePreview);
document.getElementById('icon-size').addEventListener('change', updatePreview);

// Initialize
updatePreview();
</script>

<?php include 'includes/footer.php'; ?>
