{% extends 'base.html' %}
{% load static %}

{% block title %}Job Posting Generator Agent - Quantum Tasks AI{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
<!-- Security: Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' fonts.googleapis.com; font-src 'self' fonts.gstatic.com; img-src 'self' data:; connect-src 'self';">
{% endblock %}

{% block content %}
<script>
    // Set user authentication status for JavaScript access
    document.addEventListener('DOMContentLoaded', function() {
        document.body.setAttribute('data-user-authenticated', '{{ user.is_authenticated|yesno:"true,false" }}');
        document.body.setAttribute('data-login-url', '{% url "authentication:login" %}');
        document.body.setAttribute('data-wallet-url', '{% url "wallet:wallet" %}');
        
        // Initialize agent configuration
        window.AGENT_PRICE = parseFloat('{{ agent.price }}');
    });
</script>
<script>
        // Agent Frontend Template - Common JavaScript Utilities

        // Quick Agent Access Panel Functions
        function toggleQuickAgents() {
            const panel = document.getElementById('quickAgentsPanel');
            const overlay = document.getElementById('quickAgentsOverlay');
            const toggle = document.querySelector('.quick-agent-toggle');
            
            const isActive = panel.classList.contains('active');
            
            if (isActive) {
                // Close panel
                panel.classList.remove('active');
                overlay.classList.remove('active');
                toggle.classList.remove('active');
                toggle.setAttribute('aria-expanded', 'false');
                panel.setAttribute('aria-hidden', 'true');
                overlay.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = 'auto';
            } else {
                // Open panel
                panel.classList.add('active');
                overlay.classList.add('active');
                toggle.classList.add('active');
                toggle.setAttribute('aria-expanded', 'true');
                panel.setAttribute('aria-hidden', 'false');
                overlay.setAttribute('aria-hidden', 'false');
                document.body.style.overflow = 'hidden';
            }
        }

        function closeQuickAgents() {
            const panel = document.getElementById('quickAgentsPanel');
            const overlay = document.getElementById('quickAgentsOverlay');
            const toggle = document.querySelector('.quick-agent-toggle');
            
            if (panel && overlay && toggle) {
                panel.classList.remove('active');
                overlay.classList.remove('active');
                toggle.classList.remove('active');
                toggle.setAttribute('aria-expanded', 'false');
                panel.setAttribute('aria-hidden', 'true');
                overlay.setAttribute('aria-hidden', 'true');
                document.body.style.overflow = 'auto';
            }
        }

        // Toast Notification Function
        function showToast(message, type = 'info') {
            // Remove existing toasts
            document.querySelectorAll('.toast').forEach(toast => toast.remove());
            
            // Create new toast
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            toast.textContent = message;
            
            // Add to page
            document.body.appendChild(toast);
            
            // Show toast with animation
            setTimeout(() => toast.classList.add('show'), 100);
            
            // Auto remove after 3 seconds
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }

        // Processing Status Functions
        function showProcessing() {
            const processingStatus = document.getElementById('processingStatus');
            const resultsContainer = document.getElementById('resultsContainer');
            
            if (processingStatus) {
                processingStatus.style.display = 'block';
                processingStatus.classList.add('active');
                
                // Smooth scroll to processing section
                processingStatus.scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'center' 
                });
            }
            if (resultsContainer) resultsContainer.style.display = 'none';
        }

        function hideProcessing() {
            const processingStatus = document.getElementById('processingStatus');
            processingStatus.style.display = 'none';
            processingStatus.classList.remove('active');
        }

        // Wallet Balance Update Function
        function updateWalletBalance(newBalance) {
            if (newBalance !== undefined) {
                const walletBalance = document.getElementById('walletBalance');
                if (walletBalance) {
                    walletBalance.textContent = newBalance.toFixed(2);
                }
            }
        }

        // Copy to Clipboard Utility
        function copyToClipboard(text, successMessage = 'Copied to clipboard!') {
            navigator.clipboard.writeText(text).then(() => {
                showToast(`📋 ${successMessage}`, 'success');
            }).catch(() => {
                showToast('Failed to copy to clipboard', 'error');
            });
        }

        // Download as File Utility
        function downloadAsFile(text, filename, successMessage = 'File downloaded!') {
            const blob = new Blob([text], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename || `content-${Date.now()}.txt`;
            a.click();
            URL.revokeObjectURL(url);
            showToast(`💾 ${successMessage}`, 'success');
        }

        // Close panel on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeQuickAgents();
            }
        });

        // Security: HTML escaping function
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // Security: Safe DOM content creation
        function createSecureElement(tagName, className, textContent) {
            const element = document.createElement(tagName);
            if (className) element.className = className;
            if (textContent) element.textContent = textContent;
            return element;
        }

        // Initialize accessibility features
        document.addEventListener('DOMContentLoaded', function() {
            // Set initial ARIA states
            const quickAgentsButton = document.querySelector('.quick-agent-toggle');
            if (quickAgentsButton) {
                quickAgentsButton.setAttribute('aria-expanded', 'false');
            }
            
            const panel = document.getElementById('quickAgentsPanel');
            const overlay = document.getElementById('quickAgentsOverlay');
            if (panel) panel.setAttribute('aria-hidden', 'true');
            if (overlay) overlay.setAttribute('aria-hidden', 'true');
        });

        // Job Posting specific utilities
        const JobPostingUtils = {
            renderSecureContent(container, content) {
                // Secure rendering without innerHTML
                const wrapper = document.createElement('div');
                wrapper.className = 'results-content';
                
                // Basic text processing for job postings
                const lines = content.split('\n');
                lines.forEach(line => {
                    if (line.trim()) {
                        const p = document.createElement('p');
                        p.textContent = line.trim();
                        wrapper.appendChild(p);
                    }
                });
                
                container.appendChild(wrapper);
            },

            copyJobPosting() {
                const content = document.getElementById('jobContent');
                if (content) {
                    const text = content.textContent || content.innerText || '';
                    copyToClipboard(text, 'Job posting copied to clipboard!');
                }
            },

            downloadJobPosting() {
                const content = document.getElementById('jobContent');
                if (content) {
                    const text = content.textContent || content.innerText || '';
                    downloadAsFile(text, `job-posting-${Date.now()}.txt`, 'Job posting downloaded!');
                }
            }
        };
</script>
<div class="agent-container">
    <!-- Agent Header -->
    {% include "components/agent_header.html" with agent_title="Job Posting Generator" agent_subtitle="Create professional job postings with AI-powered content generation" %}

    <!-- Quick Agent Access Panel -->
    {% include "components/quick_agents_panel.html" %}

        <!-- Messages -->
        {% if messages %}
            {% for message in messages %}
                <div class="{% if message.tags == 'error' %}alert alert-error{% else %}alert{% endif %}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}

        <!-- Agent Grid -->
        <div class="agent-grid">
            <div class="agent-widget widget-large" style="flex: 1; margin-right: var(--spacing-lg);">
                <div class="widget-header">
                    <h3 class="widget-title">
                        <span class="widget-icon">📝</span>
                        Job Posting Form
                    </h3>
                </div>
                <div class="widget-content">
                
                    <form method="POST" id="jobPostingForm">
                        {% csrf_token %}
                        
                        <div class="form-group">
                            <label class="form-label" for="job_title">Job Title *</label>
                            <input type="text" name="job_title" id="job_title" class="form-input" placeholder="e.g., Senior Software Engineer" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="company_name">Company Name *</label>
                            <input type="text" name="company_name" id="company_name" class="form-input" placeholder="e.g., TechCorp Inc." required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="job_description">Job Description *</label>
                            <textarea name="job_description" id="job_description" class="form-textarea" placeholder="Describe the role, requirements, and company culture" rows="4" required></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="seniority_level">Seniority Level *</label>
                            <select name="seniority_level" id="seniority_level" class="form-input" required>
                                <option value="">Select level...</option>
                                <option value="entry">Entry Level</option>
                                <option value="mid">Mid Level</option>
                                <option value="senior">Senior Level</option>
                                <option value="lead">Lead/Principal</option>
                                <option value="executive">Executive</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="contract_type">Contract Type *</label>
                            <select name="contract_type" id="contract_type" class="form-input" required>
                                <option value="">Select type...</option>
                                <option value="full-time">Full-time</option>
                                <option value="part-time">Part-time</option>
                                <option value="contract">Contract</option>
                                <option value="freelance">Freelance</option>
                                <option value="internship">Internship</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="location">Location *</label>
                            <input type="text" name="location" id="location" class="form-input" placeholder="e.g., Dubai, UAE or Remote" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label" for="language">Language</label>
                            <select name="language" id="language" class="form-input">
                                <option value="English">English</option>
                                <option value="Arabic">Arabic</option>
                                <option value="Spanish">Spanish</option>
                                <option value="French">French</option>
                                <option value="German">German</option>
                            </select>
                        </div>
                        
                        {% if user.is_authenticated %}
                            {% if user.wallet_balance >= agent.price %}
                                <button type="submit" class="btn btn-primary btn-full" id="processButton">
                                    💼 Generate Job Posting ({{ agent.price }} AED)
                                </button>
                            {% else %}
                                <div class="alert alert-error">
                                    Insufficient balance! You need {{ agent.price }} AED.
                                </div>
                                <a href="{% url 'wallet:wallet' %}" class="btn btn-primary btn-full">
                                    💰 Top Up Wallet
                                </a>
                            {% endif %}
                        {% else %}
                            <a href="{% url 'authentication:login' %}" class="btn btn-primary btn-full">
                                🔑 Login to Continue
                            </a>
                        {% endif %}
                    </form>
                </div>
            </div>

            <!-- How It Works Widget -->
            <div class="agent-widget widget-small" style="min-width: min(280px, 100%); max-width: min(280px, 100%); margin-left: auto;">
                <div class="widget-header">
                    <h3 class="widget-title">
                        <span class="widget-icon">ℹ️</span>
                        How It Works
                    </h3>
                </div>
                <div class="widget-content">
                    <ol class="info-list">
                        <li>Enter job requirements</li>
                        <li>Configure position details</li>
                        <li>Process with AI</li>
                        <li>Get professional posting</li>
                    </ol>
                    
                    <!-- Quick Agents Toggle Button -->
                    <button class="quick-agent-toggle" onclick="toggleQuickAgents()" 
                            title="Quick access to other agents"
                            aria-label="Open quick access panel for other AI agents"
                            aria-expanded="false"
                            aria-controls="quickAgentsPanel"
                            style="margin-top: var(--spacing-md);">
                        <span class="toggle-icon" aria-hidden="true">🚀</span>
                        <span class="toggle-text">Explore Other Agents</span>
                    </button>
                </div>
            </div>
        </div>

    <!-- Processing Status -->
    <div class="agent-grid">
        {% include "components/processing_status.html" with status_title="Creating Job Posting..." status_text="Please wait while we generate your professional job posting..." %}
    </div>

    <!-- Results -->
    <div class="agent-grid">
        {% include "components/results_container.html" with results_title="Generated Job Posting" %}
    </div>
    </div>
{% endblock %}

{% block extra_js %}
<script>
    // Form validation
    function isFormValid() {
        const required = ['job_title', 'company_name', 'job_description', 'seniority_level', 'contract_type', 'location'];
        return required.every(id => document.getElementById(id).value.trim());
    }

    // Display results with secure formatting
    function displayResults(result) {
        const resultsContainer = document.getElementById('resultsContainer');
        const contentElement = document.getElementById('resultsContent');
        const processingStatus = document.getElementById('processingStatus');
        
        if (result.success) {
            // Hide processing status
            hideProcessing();
            
            // Update wallet balance if provided
            if (result.wallet_balance !== undefined) {
                updateWalletBalance(result.wallet_balance);
            }
            
            // Get job posting content
            const jobContent = result.job_posting_content || result.content || 'Job posting generated successfully!';
            
            if (contentElement) {
                // Clear existing content safely
                contentElement.textContent = '';
                
                // Create secure container
                const jobContainer = createSecureElement('div', 'job-posting-content');
                
                // Parse content securely line by line
                const lines = jobContent.split('\n');
                let currentParagraph = null;
                let currentList = null;
                
                for (let i = 0; i < lines.length; i++) {
                    const line = lines[i].trim();
                    
                    if (!line) {
                        // Empty line - end current paragraph/list
                        if (currentParagraph) {
                            jobContainer.appendChild(currentParagraph);
                            currentParagraph = null;
                        }
                        if (currentList) {
                            jobContainer.appendChild(currentList);
                            currentList = null;
                        }
                        continue;
                    }
                    
                    // Check for headers (markdown style **text**)
                    const headerMatch = line.match(/^\*\*([^*]+)\*\*$/);
                    if (headerMatch) {
                        // End current elements
                        if (currentParagraph) {
                            jobContainer.appendChild(currentParagraph);
                            currentParagraph = null;
                        }
                        if (currentList) {
                            jobContainer.appendChild(currentList);
                            currentList = null;
                        }
                        
                        // Create secure header
                        const header = createSecureElement('h3', 'job-section-title', headerMatch[1]);
                        jobContainer.appendChild(header);
                        continue;
                    }
                    
                    // Check for bullet points
                    const bulletMatch = line.match(/^-\s+(.+)$/);
                    if (bulletMatch) {
                        // End current paragraph
                        if (currentParagraph) {
                            jobContainer.appendChild(currentParagraph);
                            currentParagraph = null;
                        }
                        
                        // Create or continue list
                        if (!currentList) {
                            currentList = createSecureElement('ul', 'job-list');
                        }
                        
                        const listItem = createSecureElement('li', null, bulletMatch[1]);
                        currentList.appendChild(listItem);
                        continue;
                    }
                    
                    // Regular text - add to paragraph
                    if (currentList) {
                        jobContainer.appendChild(currentList);
                        currentList = null;
                    }
                    
                    if (!currentParagraph) {
                        currentParagraph = createSecureElement('p', 'job-paragraph');
                    } else {
                        // Add line break for multi-line paragraphs
                        currentParagraph.appendChild(document.createElement('br'));
                    }
                    
                    currentParagraph.appendChild(document.createTextNode(line));
                }
                
                // Add any remaining elements
                if (currentParagraph) {
                    jobContainer.appendChild(currentParagraph);
                }
                if (currentList) {
                    jobContainer.appendChild(currentList);
                }
                
                // Safely append to DOM
                contentElement.appendChild(jobContainer);
            }
            
            // Show results container with animation
            if (resultsContainer) {
                resultsContainer.style.display = 'block';
                resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
            
            // No toast needed - results display is confirmation enough
            
        } else {
            // Handle error case
            hideProcessing();
            const errorMsg = result.error || result.error_message || 'Failed to generate job posting';
            showToast(`❌ ${escapeHtml(errorMsg)}`, 'error');
        }
    }

    // Poll for results
    function pollForResults(requestId) {
        let pollCount = 0;
        const maxPolls = 30; // 30 seconds max
        
        console.log(`Starting polling for request: ${requestId}`);
        
        const pollInterval = setInterval(() => {
            pollCount++;
            console.log(`Poll attempt ${pollCount}/${maxPolls} for request: ${requestId}`);
            
            fetch(`/agents/job-posting-generator/status/${requestId}/`)
                .then(response => {
                    console.log(`Status response: ${response.status}`);
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }
                    return response.json();
                })
                .then(result => {
                    console.log('Poll result:', result);
                    
                    if (result.status === 'completed') {
                        clearInterval(pollInterval);
                        hideProcessing();
                        document.getElementById('processButton').disabled = false;
                        displayResults(result);
                    } else if (result.status === 'failed') {
                        clearInterval(pollInterval);
                        hideProcessing();
                        document.getElementById('processButton').disabled = false;
                        showToast(`❌ Processing failed: ${result.error || 'Unknown error'}`, 'error');
                    } else if (pollCount >= maxPolls) {
                        clearInterval(pollInterval);
                        hideProcessing();
                        document.getElementById('processButton').disabled = false;
                        showToast('⏰ Processing is taking longer than expected. Please check back later.', 'error');
                    }
                    // Continue polling if status is 'processing' or 'pending'
                })
                .catch(error => {
                    console.error('Polling error:', error);
                    clearInterval(pollInterval);
                    hideProcessing();
                    document.getElementById('processButton').disabled = false;
                    showToast(`❌ Error checking status: ${error.message}`, 'error');
                });
        }, 1000);
    }

    // Handle form submission
    document.getElementById('jobPostingForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!isFormValid()) {
            showToast('Please fill in all required fields', 'error');
            return;
        }
        
        const processButton = document.getElementById('processButton');
        if (processButton.disabled) return;
        
        const isAuthenticated = document.body.getAttribute('data-user-authenticated') === 'true';
        if (!isAuthenticated) {
            window.location.href = document.body.getAttribute('data-login-url');
            return;
        }
        
        const currentBalance = parseFloat(document.getElementById('walletBalance').textContent) || 0;
        const requiredBalance = window.AGENT_PRICE || {{ agent.price }};
        if (currentBalance < requiredBalance) {
            showToast(`Insufficient balance! You need ${requiredBalance} AED.`, 'error');
            setTimeout(() => window.location.href = document.body.getAttribute('data-wallet-url'), 2000);
            return;
        }

        showProcessing();
        processButton.disabled = true;
        const resultsContainer = document.getElementById('resultsContainer');
        if (resultsContainer) resultsContainer.style.display = 'none';
        
        fetch(window.location.href, {
            method: 'POST',
            body: new FormData(this),
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(response => response.json())
        .then(result => {
            if (result.success && result.request_id) {
                pollForResults(result.request_id);
            } else {
                hideProcessing();
                processButton.disabled = false;
                displayResults(result);
            }
        })
        .catch(error => {
            hideProcessing();
            processButton.disabled = false;
            showToast('❌ Network error', 'error');
        });
    });

    // Enhanced copy and download functions
    function copyResults() {
        const content = document.getElementById('resultsContent');
        if (content) {
            // Get clean text content without HTML formatting
            const text = content.textContent || content.innerText || '';
            navigator.clipboard.writeText(text).then(() => {
                // No toast for successful copy - clipboard action is confirmation enough
            }).catch(() => {
                showToast('❌ Failed to copy to clipboard', 'error');
            });
        } else {
            showToast('❌ No job posting content to copy', 'error');
        }
    }

    function downloadResults() {
        const content = document.getElementById('resultsContent');
        if (content) {
            // Get clean text content without HTML formatting
            const text = content.textContent || content.innerText || '';
            
            // Create filename with current date and job title if available
            const jobTitle = document.getElementById('job_title')?.value || 'job-posting';
            const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
            const filename = `${jobTitle.toLowerCase().replace(/\s+/g, '-')}-${timestamp}.txt`;
            
            // Create and download file
            const blob = new Blob([text], { type: 'text/plain; charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            // No toast for download - file download is confirmation enough
        } else {
            showToast('❌ No job posting content to download', 'error');
        }
    }

    function resetForm() {
        document.getElementById('jobPostingForm').reset();
        const resultsContainer = document.getElementById('resultsContainer');
        if (resultsContainer) resultsContainer.style.display = 'none';
        document.getElementById('processButton').disabled = false;
        
        // Scroll back to form for new input
        const formSection = document.getElementById('jobPostingForm');
        if (formSection) {
            formSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
        
        // No toast for reset - visual feedback is enough
    }
</script>

<style>
/* Job Posting Results Styling */
.job-posting-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    max-width: none;
}

.job-section-title {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0 !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.job-section-title:first-child {
    margin-top: 0 !important;
}

.job-paragraph {
    margin: 1rem 0;
    text-align: justify;
    color: var(--text-primary);
}

.job-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.job-list li {
    margin: 0.5rem 0;
    line-height: 1.5;
    color: var(--text-primary);
}

.job-list li::marker {
    color: var(--primary-color);
}

/* Enhanced results container */
#resultsContainer .results-content {
    background: var(--background-subtle);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

/* Action buttons styling */
.results-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.results-actions .btn {
    flex: 1;
    min-width: 140px;
}

/* Responsive design */
@media (max-width: 768px) {
    .job-section-title {
        font-size: 1.1rem;
    }
    
    .results-actions {
        flex-direction: column;
    }
    
    .results-actions .btn {
        flex: none;
        width: 100%;
    }
}

/* Loading animation for smooth transitions */
#resultsContainer {
    transition: opacity 0.3s ease-in-out;
}

#resultsContainer[style*="display: none"] {
    opacity: 0;
}

#resultsContainer[style*="display: block"] {
    opacity: 1;
}
</style>
{% endblock %}