{% extends "base.html" %}

{% block title %}Deploy to HuggingFace Spaces{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero bg-gradient-to-br from-primary via-secondary to-accent text-primary-content rounded-2xl mb-10 shadow-2xl">
    <div class="hero-content text-center py-20">
        <div class="max-w-2xl">
            <h1 class="text-6xl font-bold mb-6 flex items-center justify-center">
                <i data-lucide="rocket" class="w-16 h-16 mr-4 animate-pulse"></i>
                <span data-i18n="hero.title">One-Click Deploy</span>
            </h1>
            <p class="text-xl opacity-90 mb-8" data-i18n="hero.subtitle">
                Deploy to HuggingFace Spaces instantly
            </p>
            <div class="stats shadow-lg bg-base-100/20 backdrop-blur">
                <div class="stat">
                    <div class="stat-figure text-secondary">
                        <i data-lucide="zap" class="w-8 h-8"></i>
                    </div>
                    <div class="stat-title text-primary-content/80" data-i18n="hero.deployTime">Deploy Time</div>
                    <div class="stat-value" data-i18n="hero.minutes">2-5min</div>
                </div>
                <div class="stat">
                    <div class="stat-figure text-secondary">
                        <i data-lucide="server" class="w-8 h-8"></i>
                    </div>
                    <div class="stat-title text-primary-content/80" data-i18n="hero.freeHosting">Free Hosting</div>
                    <div class="stat-value" data-i18n="hero.percentage">100%</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
    <div class="card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow">
        <div class="card-body items-center text-center">
            <div class="w-16 h-16 bg-warning/20 rounded-full flex items-center justify-center mb-4">
                <i data-lucide="zap" class="w-8 h-8 text-warning"></i>
            </div>
            <h2 class="card-title" data-i18n="feature.fast.title">Lightning Fast</h2>
            <p data-i18n="feature.fast.desc">Deploy from Git in minutes</p>
        </div>
    </div>
    <div class="card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow">
        <div class="card-body items-center text-center">
            <div class="w-16 h-16 bg-success/20 rounded-full flex items-center justify-center mb-4">
                <i data-lucide="shield-check" class="w-8 h-8 text-success"></i>
            </div>
            <h2 class="card-title" data-i18n="feature.secure.title">Secure</h2>
            <p data-i18n="feature.secure.desc">Full control with your token</p>
        </div>
    </div>
    <div class="card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow">
        <div class="card-body items-center text-center">
            <div class="w-16 h-16 bg-info/20 rounded-full flex items-center justify-center mb-4">
                <i data-lucide="activity" class="w-8 h-8 text-info"></i>
            </div>
            <h2 class="card-title" data-i18n="feature.monitor.title">Real-time</h2>
            <p data-i18n="feature.monitor.desc">Live deployment status</p>
        </div>
    </div>
</div>

<!-- Deploy Form -->
<div class="card bg-base-100 shadow-2xl border border-base-300">
    <div class="card-body">
        <div class="flex items-center justify-between mb-8">
            <h2 class="card-title text-3xl flex items-center">
                <i data-lucide="settings" class="w-8 h-8 mr-3"></i>
                <span data-i18n="form.title">Configuration</span>
            </h2>
            <div class="flex gap-2">
                <button 
                    type="button"
                    onclick="showImportModal()"
                    class="btn btn-ghost btn-sm"
                    data-i18n-title="config.import"
                    title="Import Configuration"
                >
                    <i data-lucide="upload" class="w-4 h-4 mr-2"></i>
                    <span data-i18n="config.import">Import</span>
                </button>
                <button 
                    type="button"
                    onclick="showExportModal()"
                    class="btn btn-ghost btn-sm"
                    data-i18n-title="config.export"
                    title="Export Configuration"
                >
                    <i data-lucide="download" class="w-4 h-4 mr-2"></i>
                    <span data-i18n="config.export">Export</span>
                </button>
            </div>
        </div>
        
        <form 
            id="deploy-form"
            action="/web/deploy"
            method="POST"
            class="space-y-6"
            x-data="{ showAdvanced: false }"
        >
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Left Column -->
                <div class="space-y-6">
                    <!-- HuggingFace Token -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-semibold text-lg">
                                <i data-lucide="key" class="w-4 h-4 inline mr-2"></i>
                                <span data-i18n="form.token">HF Token</span>
                            </span>
                            <span class="label-text-alt">
                                <a href="https://huggingface.co/settings/tokens" target="_blank" class="link link-primary" data-i18n="form.token.get">
                                    Get Token
                                </a>
                            </span>
                        </label>
                        <div class="relative">
                            <input 
                                type="password" 
                                name="hf_token" 
                                data-i18n-placeholder="form.token.placeholder"
                                placeholder="hf_..." 
                                class="input input-bordered input-primary w-full pr-24" 
                                required
                                x-ref="tokenInput"
                            >
                            <div class="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1" style="z-index: 10;">
                                <button 
                                    type="button"
                                    class="btn btn-ghost btn-xs p-1"
                                    @click="$refs.tokenInput.type = $refs.tokenInput.type === 'password' ? 'text' : 'password'"
                                    data-i18n-title="form.token.toggle"
                                    title="Toggle visibility"
                                >
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                                <button 
                                    type="button"
                                    class="btn btn-ghost btn-xs p-1"
                                    onclick="clearCachedToken()"
                                    data-i18n-title="form.token.clear"
                                    title="Clear cached token"
                                    id="clear-token-btn"
                                    style="display: none;"
                                >
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>
                        <label class="label">
                            <span class="label-text-alt text-warning">
                                <i data-lucide="alert-circle" class="w-3 h-3 inline"></i>
                                <span data-i18n="form.token.hint">Write permission required</span>
                            </span>
                        </label>
                    </div>

                    <!-- Git Repository URL -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-semibold text-lg">
                                <i data-lucide="git-branch" class="w-4 h-4 inline mr-2"></i>
                                <span data-i18n="form.repo">Git Repository</span>
                            </span>
                        </label>
                        <input 
                            type="url" 
                            name="git_repo_url" 
                            data-i18n-placeholder="form.repo.placeholder"
                            placeholder="https://github.com/user/repo.git" 
                            class="input input-bordered input-primary w-full" 
                            required
                        >
                        <label class="label">
                            <span class="label-text-alt" data-i18n="form.repo.hint">GitHub, GitLab, etc.</span>
                        </label>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="space-y-6">
                    <!-- Space Name -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-semibold text-lg">
                                <i data-lucide="tag" class="w-4 h-4 inline mr-2"></i>
                                <span data-i18n="form.space">Space Name</span>
                            </span>
                        </label>
                        <input 
                            type="text" 
                            name="space_name" 
                            data-i18n-placeholder="form.space.placeholder"
                            placeholder="my-app" 
                            class="input input-bordered input-primary w-full" 
                            pattern="[a-zA-Z0-9_\-]+" 
                            required
                        >
                        <label class="label">
                            <span class="label-text-alt" data-i18n="form.space.hint">Letters, numbers, hyphens only</span>
                        </label>
                    </div>

                    <!-- Description -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-semibold text-lg">
                                <i data-lucide="file-text" class="w-4 h-4 inline mr-2"></i>
                                <span data-i18n="form.desc">Description</span>
                            </span>
                        </label>
                        <textarea 
                            name="description" 
                            data-i18n-placeholder="form.desc.placeholder"
                            placeholder="Brief description..." 
                            class="textarea textarea-bordered textarea-primary h-24"
                        ></textarea>
                    </div>
                </div>
            </div>

            <!-- Advanced Settings -->
            <div class="divider"></div>
            
            <div class="collapse collapse-plus bg-base-200 rounded-lg">
                <input type="checkbox" x-model="showAdvanced" />
                <div class="collapse-title text-lg font-medium flex items-center">
                    <i data-lucide="sliders" class="w-5 h-5 mr-2"></i>
                    <span data-i18n="form.advanced">Advanced</span>
                </div>
                <div class="collapse-content">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-4">
                        <!-- Deploy Path -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text font-semibold">
                                    <i data-lucide="folder-open" class="w-4 h-4 inline mr-2"></i>
                                    <span data-i18n="form.deployPath">Deploy Path</span>
                                </span>
                            </label>
                            <input 
                                type="text" 
                                name="deploy_path" 
                                value="/" 
                                data-i18n-placeholder="form.deployPath.placeholder"
                                placeholder="/" 
                                class="input input-bordered w-full" 
                                pattern="^\.?\/?([\w\-\.\/]*)?$" 
                            >
                            <label class="label">
                                <span class="label-text-alt" data-i18n="form.deployPath.hint">Subdirectory to deploy (default: root)</span>
                            </label>
                        </div>
                        
                        <!-- Port -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text font-semibold">
                                    <i data-lucide="wifi" class="w-4 h-4 inline mr-2"></i>
                                    <span data-i18n="form.port">Port</span>
                                </span>
                            </label>
                            <input 
                                type="number" 
                                name="space_port" 
                                value="7860" 
                                min="1" 
                                max="65535" 
                                class="input input-bordered w-full"
                            >
                        </div>

                        <!-- Privacy -->
                        <div class="form-control">
                            <label class="label cursor-pointer">
                                <span class="label-text font-semibold">
                                    <i data-lucide="lock" class="w-4 h-4 inline mr-2"></i>
                                    <span data-i18n="form.private">Private Space</span>
                                </span>
                                <input type="checkbox" name="private" class="toggle toggle-primary" />
                            </label>
                        </div>

                        <!-- Environment Variables -->
                        <div class="form-control lg:col-span-2">
                            <label class="label">
                                <span class="label-text font-semibold">
                                    <i data-lucide="terminal" class="w-4 h-4 inline mr-2"></i>
                                    <span data-i18n="form.env">Environment Variables</span>
                                </span>
                            </label>
                            <textarea 
                                name="env_vars_text" 
                                data-i18n-placeholder="form.env.placeholder"
                                placeholder="KEY=value" 
                                class="textarea textarea-bordered h-32 font-mono text-sm"
                            ></textarea>
                            <label class="label">
                                <span class="label-text-alt" data-i18n="form.env.hint">One per line</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="form-control mt-8">
                <button type="submit" class="btn btn-primary btn-lg w-full gap-3">
                    <i data-lucide="rocket" class="w-6 h-6"></i>
                    <span data-i18n="form.submit">Deploy</span>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loading-overlay" class="fixed inset-0 bg-base-100/80 backdrop-blur-sm z-50 flex items-center justify-center" style="display: none;">
    <div class="card bg-base-100 shadow-2xl">
        <div class="card-body">
            <div class="flex flex-col items-center space-y-4">
                <div class="loading loading-spinner loading-lg text-primary"></div>
                <h3 class="text-xl font-semibold" data-i18n="loading.title">Deploying...</h3>
                <p class="text-base-content/70" data-i18n="loading.desc">Please wait...</p>
            </div>
        </div>
    </div>
</div>

<!-- Instructions -->
<div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="card bg-info/10 border border-info/20">
        <div class="card-body">
            <h3 class="card-title text-info">
                <i data-lucide="info" class="w-5 h-5"></i>
                <span data-i18n="req.title">Requirements</span>
            </h3>
            <ul class="space-y-2 text-sm">
                <li class="flex items-start">
                    <i data-lucide="check" class="w-4 h-4 mr-2 text-info mt-0.5"></i>
                    <span data-i18n="req.dockerfile">Repository must contain Dockerfile</span>
                </li>
                <li class="flex items-start">
                    <i data-lucide="check" class="w-4 h-4 mr-2 text-info mt-0.5"></i>
                    <span data-i18n="req.token">Token needs write permissions</span>
                </li>
                <li class="flex items-start">
                    <i data-lucide="check" class="w-4 h-4 mr-2 text-info mt-0.5"></i>
                    <span data-i18n="req.time">Deployment takes 2-5 minutes</span>
                </li>
                <li class="flex items-start">
                    <i data-lucide="check" class="w-4 h-4 mr-2 text-info mt-0.5"></i>
                    <span data-i18n="req.docker">Supports Dockerized apps</span>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="card bg-warning/10 border border-warning/20">
        <div class="card-body">
            <h3 class="card-title text-warning">
                <i data-lucide="lightbulb" class="w-5 h-5"></i>
                <span data-i18n="tips.title">Tips</span>
            </h3>
            <ul class="space-y-2 text-sm">
                <li class="flex items-start">
                    <i data-lucide="arrow-right" class="w-4 h-4 mr-2 text-warning mt-0.5"></i>
                    <span data-i18n="tips.test">Test Dockerfile locally</span>
                </li>
                <li class="flex items-start">
                    <i data-lucide="arrow-right" class="w-4 h-4 mr-2 text-warning mt-0.5"></i>
                    <span data-i18n="tips.env">Use env vars for secrets</span>
                </li>
                <li class="flex items-start">
                    <i data-lucide="arrow-right" class="w-4 h-4 mr-2 text-warning mt-0.5"></i>
                    <span data-i18n="tips.size">Keep image size small</span>
                </li>
                <li class="flex items-start">
                    <i data-lucide="arrow-right" class="w-4 h-4 mr-2 text-warning mt-0.5"></i>
                    <span data-i18n="tips.limits">Check HF resource limits</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- Import Configuration Modal -->
<dialog id="import-modal" class="modal">
    <div class="modal-box max-w-2xl">
        <h3 class="font-bold text-lg mb-4">
            <i data-lucide="upload" class="w-5 h-5 inline mr-2"></i>
            <span data-i18n="config.import.title">Import Configuration</span>
        </h3>
        
        <div class="space-y-4">
            <div class="alert alert-info">
                <i data-lucide="info" class="w-4 h-4"></i>
                <span data-i18n="config.import.info">Paste your configuration JSON or share configuration URL</span>
            </div>
            
            <div class="form-control">
                <label class="label">
                    <span class="label-text" data-i18n="config.import.label">Configuration JSON</span>
                </label>
                <textarea 
                    id="import-config-text"
                    class="textarea textarea-bordered h-48 font-mono text-sm"
                    data-i18n-placeholder="config.import.placeholder"
                    placeholder='{"space_name": "my-app", "git_repo_url": "https://github.com/..."}'
                ></textarea>
            </div>
            
            <div class="modal-action">
                <button type="button" onclick="importConfig()" class="btn btn-primary">
                    <i data-lucide="check" class="w-4 h-4 mr-2"></i>
                    <span data-i18n="config.import.apply">Apply Configuration</span>
                </button>
                <form method="dialog">
                    <button class="btn btn-ghost" data-i18n="config.cancel">Cancel</button>
                </form>
            </div>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

<!-- Export Configuration Modal -->
<dialog id="export-modal" class="modal">
    <div class="modal-box max-w-2xl">
        <h3 class="font-bold text-lg mb-4">
            <i data-lucide="download" class="w-5 h-5 inline mr-2"></i>
            <span data-i18n="config.export.title">Export Configuration</span>
        </h3>
        
        <div class="space-y-4">
            <div class="alert alert-success">
                <i data-lucide="check-circle" class="w-4 h-4"></i>
                <span data-i18n="config.export.info">Configuration exported successfully</span>
            </div>
            
            <div class="form-control">
                <label class="label">
                    <span class="label-text" data-i18n="config.export.label">Configuration JSON</span>
                    <button 
                        type="button"
                        onclick="copyExportConfig()"
                        class="btn btn-ghost btn-xs"
                    >
                        <i data-lucide="copy" class="w-4 h-4 mr-1"></i>
                        <span data-i18n="config.copy">Copy</span>
                    </button>
                </label>
                <textarea 
                    id="export-config-text"
                    class="textarea textarea-bordered h-48 font-mono text-sm"
                    readonly
                ></textarea>
            </div>
            
            <div class="form-control">
                <label class="label">
                    <span class="label-text" data-i18n="config.export.url">Share URL</span>
                    <button 
                        type="button"
                        onclick="copyShareUrl()"
                        class="btn btn-ghost btn-xs"
                    >
                        <i data-lucide="copy" class="w-4 h-4 mr-1"></i>
                        <span data-i18n="config.copy">Copy</span>
                    </button>
                </label>
                <input 
                    id="share-url"
                    type="text"
                    class="input input-bordered font-mono text-sm"
                    readonly
                >
            </div>
            
            <div class="modal-action">
                <button type="button" onclick="saveConfigAsFile()" class="btn btn-primary">
                    <i data-lucide="save" class="w-4 h-4 mr-2"></i>
                    <span data-i18n="config.export.save">Save as File</span>
                </button>
                <form method="dialog">
                    <button class="btn btn-ghost" data-i18n="config.close">Close</button>
                </form>
            </div>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

<script>
    // Token cache management
    const TOKEN_CACHE_KEY = 'hf_deploy_token';
    
    // Load cached token on page load
    function loadCachedToken() {
        try {
            const cachedToken = localStorage.getItem(TOKEN_CACHE_KEY);
            if (cachedToken) {
                const tokenInput = document.querySelector('input[name="hf_token"]');
                if (tokenInput) {
                    tokenInput.value = cachedToken;
                    // Show clear button
                    const clearBtn = document.getElementById('clear-token-btn');
                    if (clearBtn) {
                        clearBtn.style.display = 'block';
                    }
                }
            }
        } catch (error) {
            console.error('Error loading cached token:', error);
        }
    }
    
    // Save token to cache
    function saveTokenToCache(token) {
        try {
            if (token && token.startsWith('hf_')) {
                localStorage.setItem(TOKEN_CACHE_KEY, token);
            }
        } catch (error) {
            console.error('Error saving token to cache:', error);
        }
    }
    
    // Clear cached token
    function clearCachedToken() {
        try {
            localStorage.removeItem(TOKEN_CACHE_KEY);
            const tokenInput = document.querySelector('input[name="hf_token"]');
            if (tokenInput) {
                tokenInput.value = '';
                tokenInput.focus();
            }
            // Hide clear button
            const clearBtn = document.getElementById('clear-token-btn');
            if (clearBtn) {
                clearBtn.style.display = 'none';
            }
            showToast(t('form.token.cleared') || 'Token cache cleared', 'success');
        } catch (error) {
            console.error('Error clearing cached token:', error);
        }
    }
    
    // Monitor token input changes
    function initTokenCacheHandler() {
        const tokenInput = document.querySelector('input[name="hf_token"]');
        if (tokenInput) {
            let saveTimeout;
            
            // Show/hide clear button and auto-save token
            tokenInput.addEventListener('input', function() {
                const clearBtn = document.getElementById('clear-token-btn');
                if (clearBtn) {
                    clearBtn.style.display = this.value ? 'block' : 'none';
                }
                
                // Clear previous timeout
                if (saveTimeout) {
                    clearTimeout(saveTimeout);
                }
                
                // Auto-save valid token with debounce (500ms delay)
                const token = this.value.trim();
                if (token && token.startsWith('hf_')) {
                    saveTimeout = setTimeout(() => {
                        saveTokenToCache(token);
                        // Optional: show a subtle indicator that token was saved
                        const originalBorder = this.style.borderColor;
                        this.style.borderColor = 'var(--success)';
                        setTimeout(() => {
                            this.style.borderColor = originalBorder;
                        }, 1000);
                    }, 500);
                }
            });
            
            // Also save on blur (when user leaves the field)
            tokenInput.addEventListener('blur', function() {
                const token = this.value.trim();
                if (token && token.startsWith('hf_')) {
                    saveTokenToCache(token);
                }
            });
        }
    }
    
    // Configuration management
    const CONFIG_FIELDS = {
        git_repo_url: 'input[name="git_repo_url"]',
        space_name: 'input[name="space_name"]',
        description: 'textarea[name="description"]',
        deploy_path: 'input[name="deploy_path"]',
        space_port: 'input[name="space_port"]',
        private: 'input[name="private"]',
        env_vars_text: 'textarea[name="env_vars_text"]'
    };
    
    // Check for config in URL on page load
    document.addEventListener('DOMContentLoaded', function() {
        checkUrlConfig();
        
        // Load cached token
        loadCachedToken();
        initTokenCacheHandler();
        
        // Re-initialize icons after DOM updates
        setTimeout(() => {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }, 100);
    });
    
    // Listen for hash changes (e.g., when user navigates to a URL with config)
    window.addEventListener('hashchange', function() {
        checkUrlConfig();
    });
    
    // Check URL for config parameter
    function checkUrlConfig() {
        // Check fragment instead of query parameters
        const hash = window.location.hash;
        
        if (hash && hash.startsWith('#config=')) {
            try {
                // Extract config from fragment
                const configParam = hash.substring(8); // Remove '#config='
                
                // Decode base64 and parse JSON
                const configJson = atob(configParam);
                const config = JSON.parse(configJson);
                applyConfiguration(config);
                
                // Show success toast
                showToast(t('config.import.success'), 'success');
                
                // Remove config from URL to clean up
                window.history.replaceState({}, document.title, window.location.pathname);
            } catch (error) {
                console.error('Failed to load config from URL:', error);
                showToast(t('config.import.error'), 'error');
            }
        }
    }
    
    // Show import modal
    function showImportModal() {
        document.getElementById('import-modal').showModal();
        // Re-initialize icons in modal
        setTimeout(() => lucide.createIcons(), 100);
    }
    
    // Show export modal
    function showExportModal() {
        const config = extractConfiguration();
        const configJson = JSON.stringify(config, null, 2);
        
        // Set export text
        document.getElementById('export-config-text').value = configJson;
        
        // Generate share URL using fragment instead of query parameter
        const encoded = btoa(configJson);
        const shareUrl = `${window.location.origin}${window.location.pathname}#config=${encoded}`;
        document.getElementById('share-url').value = shareUrl;
        
        document.getElementById('export-modal').showModal();
        // Re-initialize icons in modal
        setTimeout(() => lucide.createIcons(), 100);
    }
    
    // Extract current form configuration
    function extractConfiguration() {
        const config = {};
        
        for (const [field, selector] of Object.entries(CONFIG_FIELDS)) {
            const element = document.querySelector(selector);
            if (element) {
                if (element.type === 'checkbox') {
                    config[field] = element.checked;
                } else {
                    config[field] = element.value;
                }
            }
        }
        
        return config;
    }
    
    // Apply configuration to form
    function applyConfiguration(config) {
        for (const [field, selector] of Object.entries(CONFIG_FIELDS)) {
            const element = document.querySelector(selector);
            if (element && config.hasOwnProperty(field)) {
                if (element.type === 'checkbox') {
                    element.checked = config[field];
                } else {
                    element.value = config[field];
                }
                
                // Trigger change event for any listeners
                element.dispatchEvent(new Event('change', { bubbles: true }));
            }
        }
        
        // Expand advanced settings if any advanced field is set
        if (config.deploy_path || config.space_port !== 7860 || config.private || config.env_vars_text) {
            const advancedToggle = document.querySelector('.collapse input[type="checkbox"]');
            if (advancedToggle) {
                advancedToggle.checked = true;
            }
        }
    }
    
    // Import configuration from modal
    function importConfig() {
        const configText = document.getElementById('import-config-text').value.trim();
        
        if (!configText) {
            showToast(t('config.import.empty'), 'warning');
            return;
        }
        
        try {
            const config = JSON.parse(configText);
            applyConfiguration(config);
            
            // Close modal
            document.getElementById('import-modal').close();
            
            // Show success toast
            showToast(t('config.import.success'), 'success');
        } catch (error) {
            console.error('Invalid configuration JSON:', error);
            showToast(t('config.import.invalid'), 'error');
        }
    }
    
    // Copy export configuration
    function copyExportConfig() {
        const configText = document.getElementById('export-config-text');
        configText.select();
        navigator.clipboard.writeText(configText.value).then(() => {
            showToast(t('config.copied'), 'success');
        });
    }
    
    // Copy share URL
    function copyShareUrl() {
        const shareUrl = document.getElementById('share-url');
        shareUrl.select();
        navigator.clipboard.writeText(shareUrl.value).then(() => {
            showToast(t('config.url.copied'), 'success');
        });
    }
    
    // Save configuration as file
    function saveConfigAsFile() {
        const config = extractConfiguration();
        const configJson = JSON.stringify(config, null, 2);
        
        // Create blob and download
        const blob = new Blob([configJson], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `hf-deploy-config-${config.space_name || 'config'}.json`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        
        showToast(t('config.export.saved'), 'success');
    }
    
    // Form validation and enhancement
    document.getElementById('deploy-form').addEventListener('submit', function(e) {
        const submitBtn = e.target.querySelector('button[type="submit"]');
        submitBtn.disabled = true;
        
        // Show loading overlay
        document.getElementById('loading-overlay').style.display = 'flex';
    });
    
    // Initialize all interactive elements after page load
    document.addEventListener('DOMContentLoaded', function() {
        // Re-initialize Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
        
        // Make sure HTMX is initialized
        if (typeof htmx !== 'undefined') {
            htmx.process(document.body);
        }
        
        // Initialize eye toggle button for password visibility
        setTimeout(() => {
            lucide.createIcons();
        }, 100);
    });
</script>
{% endblock %}