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

{% block title %}Data Analyzer - Quantum Tasks AI{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
<style>
/* Data Analyzer Specific Styles */
.file-upload-area {
    border: 2px dashed var(--outline-variant);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    text-align: center;
    background: var(--surface);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.file-upload-area:hover,
.file-upload-area.dragover {
    border-color: var(--primary);
    background: var(--surface-variant);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.file-upload-area.file-selected {
    border-color: var(--success);
    background: #f0fdf4;
    color: #16a34a;
}


.upload-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.7;
}

.upload-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--on-surface-variant);
}

.upload-text > div:first-child {
    font-weight: 500;
    color: var(--on-surface);
}

.radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.radio-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 2px solid var(--outline-variant);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--surface);
    position: relative;
}

.radio-card:hover {
    border-color: var(--primary);
    background: var(--surface-variant);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.radio-card.selected {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.02);
}

.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-button {
    width: 20px;
    height: 20px;
    border: 2px solid var(--outline);
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.radio-card.selected .radio-button {
    border-color: var(--primary);
}

.radio-card.selected .radio-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.radio-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Responsive Design */
@media (max-width: 768px) {
    .radio-grid {
        grid-template-columns: 1fr;
    }
    
    .file-upload-area {
        padding: var(--spacing-lg);
    }
}
</style>
{% endblock %}

{% block content %}
<script>
// Set data attributes for JavaScript access
document.body.setAttribute('data-user-authenticated', '{{ user.is_authenticated|yesno:"true,false" }}');
document.body.setAttribute('data-agent-price', '{{ agent_config.price }}');
</script>

<div class="agent-container">
    <!-- Agent Header Component -->
    {% include "workflows/components/agent_header.html" with agent_title="Data Analyzer" agent_subtitle="AI-powered analysis of your data files with comprehensive insights" %}

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

    <!-- Main Agent Grid -->
    <div class="agent-grid">
        <!-- Data Analysis 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>
                    Data Analysis Configuration
                </h3>
            </div>
            <div class="widget-content">
                <form id="agentForm" method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    <!-- File Upload Section -->
                    <div class="form-group">
                        <label class="form-label">📁 Upload Data File *</label>
                        <div class="file-upload-area" onclick="document.getElementById('dataFile').click()"
                             role="button" tabindex="0" aria-label="Click to upload data file or drag and drop"
                             onkeydown="if(event.key==='Enter'||event.key===' '){document.getElementById('dataFile').click()}">
                            <div class="upload-text">
                                <div class="upload-icon">📁</div>
                                <div><strong>Click to upload</strong> or drag and drop</div>
                                <div>PDF files only</div>
                            </div>
                        </div>
                        <input type="file" id="dataFile" name="file" accept=".pdf" style="display: none;" required>
                        
                        <!-- File Display Elements -->
                        <div id="fileName" style="margin-top: var(--spacing-sm); color: var(--success); font-weight: 500; display: none;"></div>
                        <div id="fileSize" style="margin-top: var(--spacing-xs); color: var(--on-surface-variant); font-size: 12px; display: none;"></div>
                        
                        <div class="form-help">Supported format: PDF files only. Max size: 10MB</div>
                        <div id="dataFile-error" class="form-error" style="display: none;"></div>
                    </div>
                    
                    <!-- Analysis Type Selection -->
                    <div class="form-group">
                        <label class="form-label">📈 Analysis Type *</label>
                        <div class="radio-grid">
                            <div class="radio-card selected" onclick="selectRadio('summary')">
                                <input type="radio" id="summary" name="analysisType" value="summary" checked>
                                <div class="radio-button"></div>
                                <label for="summary" class="radio-label">📋 Summary</label>
                            </div>
                            <div class="radio-card" onclick="selectRadio('detailed')">
                                <input type="radio" id="detailed" name="analysisType" value="detailed">
                                <div class="radio-button"></div>
                                <label for="detailed" class="radio-label">📈 Detailed</label>
                            </div>
                            <div class="radio-card" onclick="selectRadio('statistical')">
                                <input type="radio" id="statistical" name="analysisType" value="statistical">
                                <div class="radio-button"></div>
                                <label for="statistical" class="radio-label">🔢 Statistical</label>
                            </div>
                        </div>
                        <div class="form-help">Choose the type of analysis for your data file</div>
                        <div id="analysisType-error" class="form-error" style="display: none;"></div>
                    </div>

                    <!-- Submit Button -->
                    <div style="margin-top: var(--spacing-lg);">
                        {% if user.is_authenticated %}
                            {% if user.wallet_balance >= agent_config.price %}
                                <button type="submit" class="btn btn-primary btn-full" id="generateBtn">
                                    🚀 Analyze Data ({{ agent_config.price }} 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 {{ agent_config.price }} AED.
                                </div>
                                <a href="{% url 'wallet: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 -->
        <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>Upload your PDF file</li>
                    <li>Choose analysis type and preferences</li>
                    <li>Our AI analyzes your data</li>
                    <li>Get comprehensive insights and 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>

    <!-- Processing Status Component -->
    {% include "workflows/components/processing_status.html" with status_title="Analyzing Your Data..." status_text="Please wait while our AI processes your file..." %}
    
    <!-- Results Component -->
    {% include "workflows/components/results_container.html" with results_title="Analysis Results" %}
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/workflows-core.js' %}?v={{ timestamp }}"></script>
<script src="{% static 'js/data-analyzer.js' %}?v={{ timestamp }}"></script>
{% endblock %}