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

{% block title %}Weather Reporter Agent - NetCop AI Hub{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
{% endblock %}

{% block content %}
<script>
// Consolidated DOMContentLoaded initialization
document.addEventListener('DOMContentLoaded', function() {
    // Set data for JavaScript access
    document.body.setAttribute('data-user-authenticated', '{{ user.is_authenticated|yesno:"true,false" }}');
    document.body.setAttribute('data-agent-price', '2.00');
    
    // Initialize form submission
    const form = document.getElementById('weatherForm');
    if (form) {
        form.addEventListener('submit', handleFormSubmission);
    }
    
    // Set initial radio selection
    const firstRadio = document.querySelector('.radio-card');
    if (firstRadio && !document.querySelector('.radio-card.selected')) {
        firstRadio.classList.add('selected');
        const input = firstRadio.querySelector('input[type="radio"]');
        if (input) input.checked = true;
    }
});

// Weather Reporter Utils
const WeatherUtils = {
    // Update wallet balance display
    updateWalletBalance(newBalance) {
        if (newBalance !== undefined) {
            // Update header balance
            const headerBalance = document.querySelector('a[data-wallet-balance]');
            if (headerBalance) {
                headerBalance.textContent = `💰 ${newBalance.toFixed(2)} AED`;
            }
            
            // Update page balance
            const pageBalance = document.getElementById('walletBalance');
            if (pageBalance) {
                pageBalance.textContent = newBalance.toFixed(2);
            }
            
            // Update all data attributes
            document.querySelectorAll('[data-wallet-balance]').forEach(element => {
                element.textContent = `${newBalance.toFixed(2)} AED`;
            });
            
            // Store current balance globally
            window.currentWalletBalance = newBalance;
        }
    },
    
    // Show toast notification
    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
        setTimeout(() => toast.classList.add('show'), 100);
        
        // Auto remove after 3 seconds
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    },
    
    // Display weather results (API-based immediate response)
    displayResults(result) {
        const resultsContainer = document.getElementById('resultsContainer');
        const resultsContent = document.getElementById('resultsContent');
        const processingStatus = document.getElementById('processingStatus');
        
        if (result.success) {
            // Hide processing status
            if (processingStatus) processingStatus.style.display = 'none';
            
            // Show results using API response fields
            const weatherReport = result.formatted_report || result.content || 'Weather data received successfully.';
            resultsContent.innerHTML = this.parseMarkdown(weatherReport);
            resultsContainer.style.display = 'block';
            
            // Update wallet balance if provided
            if (result.wallet_balance !== undefined) {
                this.updateWalletBalance(result.wallet_balance);
            }
            
            this.showToast('✅ Weather report generated successfully!', 'success');
        } else if (result.error) {
            if (processingStatus) processingStatus.style.display = 'none';
            this.showToast(`❌ Error: ${result.error}`, 'error');
        } else {
            if (processingStatus) processingStatus.style.display = 'none';
            this.showToast('❌ Failed to get weather data. Please try again.', 'error');
        }
    },
    
    // Simple text formatting
    parseMarkdown(text) {
        if (!text) return '';
        return text
            .replace(/\*\*/g, '') // Remove markdown bold syntax
            .replace(/\#{1,3}\s/g, '') // Remove header syntax
            .replace(/\n{3,}/g, '\n\n') // Reduce excessive line breaks
            .replace(/\n/g, '<br>') // Convert line breaks to HTML
            .trim();
    },
    
    // Weather Reporter uses immediate API response - no polling needed
};

// For backward compatibility
const AgentUtils = WeatherUtils;

// Modern Radio Selection
function selectRadio(value) {
    // Remove selected class from all cards
    document.querySelectorAll('.radio-card').forEach(card => {
        card.classList.remove('selected');
    });
    
    // Add selected class to clicked card
    const selectedCard = document.querySelector(`input[value="${value}"]`).closest('.radio-card');
    if (selectedCard) {
        selectedCard.classList.add('selected');
    }
    
    // Select the radio button
    const radioInput = document.getElementById(value);
    if (radioInput) {
        radioInput.checked = true;
    }
}

// Form validation
function isFormValid() {
    const location = document.getElementById('location')?.value?.trim();
    const reportType = document.querySelector('input[name="report_type"]:checked');
    
    return location && reportType;
}

// Copy weather report
function copyResults() {
    const content = document.getElementById('resultsContent');
    if (content) {
        const text = content.innerText || content.textContent || '';
        navigator.clipboard.writeText(text).then(() => {
            WeatherUtils.showToast('📋 Weather report copied to clipboard!', 'success');
        }).catch(() => {
            WeatherUtils.showToast('❌ Failed to copy to clipboard', 'error');
        });
    }
}

// Download weather report
function downloadResults() {
    const content = document.getElementById('resultsContent');
    if (content) {
        const text = content.innerText || content.textContent || '';
        const blob = new Blob([text], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'weather-report.txt';
        a.click();
        URL.revokeObjectURL(url);
        WeatherUtils.showToast('💾 Weather report downloaded!', 'success');
    }
}

// Reset form for new request
function resetForm() {
    const form = document.getElementById('weatherForm');
    if (form) {
        form.reset();
    }
    
    const resultsContainer = document.getElementById('resultsContainer');
    const processingStatus = document.getElementById('processingStatus');
    
    if (resultsContainer) resultsContainer.style.display = 'none';
    if (processingStatus) processingStatus.style.display = 'none';
    
    // Reset radio selection
    document.querySelectorAll('.radio-card').forEach(card => {
        card.classList.remove('selected');
    });
    const firstCard = document.querySelector('.radio-card');
    if (firstCard) {
        firstCard.classList.add('selected');
        const input = firstCard.querySelector('input[type="radio"]');
        if (input) input.checked = true;
    }
    
    WeatherUtils.showToast('🔄 Form reset - ready for new request', 'success');
}

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

function closeQuickAgents() {
    const panel = document.getElementById('quickAgentsPanel');
    const overlay = document.getElementById('quickAgentsOverlay');
    const toggle = document.querySelector('.quick-agent-toggle');
    
    if (panel) panel.classList.remove('active');
    if (overlay) overlay.classList.remove('active');
    if (toggle) toggle.classList.remove('active');
    
    // Update ARIA attributes
    if (toggle) toggle.setAttribute('aria-expanded', 'false');
    if (panel) panel.setAttribute('aria-hidden', 'true');
    if (overlay) overlay.setAttribute('aria-hidden', 'true');
}

// Form submission handler
function handleFormSubmission(e) {
    e.preventDefault();
    
    if (!isFormValid()) {
        WeatherUtils.showToast('Please fill in all required fields', 'error');
        return;
    }
    
    // Check authentication and balance
    const isAuthenticated = document.body.getAttribute('data-user-authenticated') === 'true';
    if (!isAuthenticated) {
        WeatherUtils.showToast('Please login to continue', 'error');
        window.location.href = "{% url 'authentication:login' %}";
        return;
    }
    
    const walletBalance = parseFloat(document.getElementById('walletBalance')?.textContent) || 0;
    if (walletBalance < 2.00) {
        WeatherUtils.showToast('Insufficient wallet balance', 'error');
        setTimeout(() => {
            window.location.href = "{% url 'core:wallet' %}";
        }, 2000);
        return;
    }
    
    // Show processing status
    const processingStatus = document.getElementById('processingStatus');
    const resultsContainer = document.getElementById('resultsContainer');
    
    if (processingStatus) processingStatus.style.display = 'block';
    if (resultsContainer) resultsContainer.style.display = 'none';
    
    // Submit form
    const formData = new FormData(e.target);
    
    fetch('/agents/weather-reporter/process/', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(result => {
        // Handle immediate response (API-based agent)
        processingStatus.style.display = 'none';
        
        if (result.error) {
            WeatherUtils.showToast(`❌ ${result.error}`, 'error');
        } else if (result.success) {
            WeatherUtils.displayResults(result);
        } else {
            WeatherUtils.showToast('❌ Failed to generate weather report', 'error');
        }
    })
    .catch(error => {
        console.error('Form submission error:', error);
        if (processingStatus) processingStatus.style.display = 'none';
        WeatherUtils.showToast('❌ Connection error. Please try again.', 'error');
    });
}
</script>

<div class="agent-container">
    <!-- Agent Header -->
    <div class="agent-header">
        <div>
            <h1 class="agent-title">Weather Reporter</h1>
            <p class="agent-subtitle">Get real-time weather data from any location worldwide</p>
        </div>
        <div class="header-controls">
            <div class="wallet-card widget-small" style="margin-bottom: 0;">
                <div class="wallet-header">
                    <h3 class="wallet-title">Your Wallet</h3>
                    <div class="wallet-icon">💳</div>
                </div>
                <div class="balance-display">
                    <div class="balance-amount">
                        <span id="walletBalance">{{ user.wallet_balance|floatformat:2 }}</span> AED
                    </div>
                    <div class="balance-label">Available Balance</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Agent Access Panel -->
    <div class="quick-agents-overlay" id="quickAgentsOverlay" onclick="closeQuickAgents()" aria-hidden="true"></div>
    <div class="quick-agents-panel" id="quickAgentsPanel" role="dialog" aria-labelledby="quickAgentsTitle" aria-hidden="true">
        <div class="quick-agents-header">
            <h3 id="quickAgentsTitle">Quick Access to Other Agents</h3>
            <button class="close-panel" onclick="toggleQuickAgents()" aria-label="Close quick agents panel">×</button>
        </div>
        <div class="quick-agents-grid">
            <a href="/agents/data-analyzer/" class="quick-agent-card">
                <div class="agent-icon">📊</div>
                <div class="agent-info">
                    <h4>Data Analyzer</h4>
                    <p>AI-powered data analysis</p>
                    <span class="agent-price">5.0 AED</span>
                </div>
            </a>
            
            <a href="/agents/job-posting-generator/" class="quick-agent-card">
                <div class="agent-icon">💼</div>
                <div class="agent-info">
                    <h4>Job Posting Generator</h4>
                    <p>Create professional job posts</p>
                    <span class="agent-price">4.0 AED</span>
                </div>
            </a>
            
            <a href="/agents/social-ads-generator/" class="quick-agent-card">
                <div class="agent-icon">📢</div>
                <div class="agent-info">
                    <h4>Social Ads Generator</h4>
                    <p>Create social media campaigns</p>
                    <span class="agent-price">7.0 AED</span>
                </div>
            </a>
            
            <a href="/agents/five-whys-analyzer/" class="quick-agent-card">
                <div class="agent-icon">🤔</div>
                <div class="agent-info">
                    <h4>Five Whys Analyzer</h4>
                    <p>Problem analysis method</p>
                    <span class="agent-price">3.0 AED</span>
                </div>
            </a>
        </div>
        <div class="quick-agents-footer">
            <a href="{% url 'core:marketplace' %}" class="view-all-agents">View All Agents →</a>
        </div>
    </div>

    <!-- Agent Grid -->
    <div class="agent-grid">
        <!-- Weather Form Widget -->
        <div class="agent-widget widget-large" style="flex: 1; margin-right: clamp(0px, var(--spacing-lg), 2vw);">
            <div class="widget-header">
                <h3 class="widget-title">
                    <span class="widget-icon">🌤️</span>
                    Weather Report Configuration
                </h3>
            </div>
            <div class="widget-content">
                <form id="weatherForm" method="POST">
                    {% csrf_token %}
                    
                    <!-- Location Input -->
                    <div class="form-group">
                        <label for="location" class="form-label">📍 Enter Location</label>
                        <input type="text" name="location" id="location" class="form-input" 
                               placeholder="Enter city name, address, or coordinates..." required>
                        <div class="form-help">Examples: "New York", "London, UK", "Tokyo, Japan", "37.7749,-122.4194"</div>
                    </div>
                    
                    <!-- Report Type Selection -->
                    <div class="form-group">
                        <label class="form-label">📊 Report Type</label>
                        <div class="radio-grid">
                            <div class="radio-card selected" onclick="selectRadio('current')">
                                <input type="radio" id="current" name="report_type" value="current" checked>
                                <div class="radio-button"></div>
                                <label for="current" class="radio-label">🌡️ Current Weather</label>
                            </div>
                            <div class="radio-card" onclick="selectRadio('forecast')">
                                <input type="radio" id="forecast" name="report_type" value="forecast">
                                <div class="radio-button"></div>
                                <label for="forecast" class="radio-label">📅 5-Day Forecast</label>
                            </div>
                            <div class="radio-card" onclick="selectRadio('detailed')">
                                <input type="radio" id="detailed" name="report_type" value="detailed">
                                <div class="radio-button"></div>
                                <label for="detailed" class="radio-label">📋 Detailed Report</label>
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button -->
                    <div style="margin-top: var(--spacing-lg);">
                        {% if user.is_authenticated %}
                            {% if user.wallet_balance >= 2.00 %}
                                <button type="submit" class="btn btn-primary btn-full" id="processButton">
                                    🌤️ Get Weather Report (2.00 AED)
                                </button>
                            {% else %}
                                <div style="background: #fef2f2; color: #dc2626; padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); font-size: 14px; font-weight: 500; text-align: center;">
                                    Insufficient balance! You need 2.00 AED.
                                </div>
                                <a href="{% url 'core:wallet' %}" class="btn btn-primary btn-full" style="text-decoration: none;">
                                    💰 Top Up Wallet
                                </a>
                            {% endif %}
                        {% else %}
                            <a href="{% url 'authentication:login' %}" class="btn btn-primary btn-full">
                                🔐 Login to Continue
                            </a>
                        {% endif %}
                    </div>
                </form>
            </div>
        </div>

        <!-- How It Works Widget - Positioned on the right -->
        <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 any city name worldwide</li>
                    <li>Choose your preferred report type</li>
                    <li>Get real-time weather data</li>
                    <li>Copy or download detailed reports</li>
                </ol>
                
                <!-- Other Agents Button -->
                <button class="quick-agent-toggle btn btn-secondary btn-full" 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>

    <!-- Main Content Grid -->
    <div class="agent-grid">
        <!-- Processing Status -->
        <div id="processingStatus" class="agent-widget widget-wide processing-status">
            <div class="widget-header">
                <h3 class="widget-title">
                    <span class="widget-icon">⏳</span>
                    Processing Status
                </h3>
            </div>
            <div class="widget-content" style="text-align: center;">
                <div class="status-icon">⏳</div>
                <div class="status-text">Getting Weather Data...</div>
                <div class="status-detail" id="statusText">Fetching real-time weather information...</div>
            </div>
        </div>
        
        <!-- Results Widget -->
        <div id="resultsContainer" class="agent-widget widget-wide results-container">
            <div class="widget-header">
                <h3 class="widget-title">
                    <span class="widget-icon">📊</span>
                    Weather Report
                </h3>
                <span class="status-badge" style="background: var(--success-color); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">Success</span>
            </div>
            <div class="widget-content">
                <div class="results-content" id="resultsContent">
                    <!-- Results will be populated here by JavaScript -->
                </div>
                
                <div class="action-buttons" style="margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--outline-variant);">
                    <button onclick="copyResults()" class="btn btn-primary">📋 Copy Report</button>
                    <button onclick="downloadResults()" class="btn btn-secondary">💾 Download</button>
                    <button onclick="resetForm()" class="btn btn-secondary">🔄 New Request</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}