@extends('layouts.app')
@section('title', 'Data Export & API - Blackberry Farm Analytics')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>📡 Data Export & API Center</h1>
        <p>Export analytics data in multiple formats and integrate with external systems via API</p>
        <p class="subtitle">Enterprise-grade data integration and export capabilities</p>
    </div>
    
    <!-- Quick Navigation -->
    <div class="responsive-grid cols-4" style="margin-bottom: 30px;">
        <a href="/analytics" class="touch-btn touch-btn-primary">← Analytics Dashboard</a>
        <a href="/analytics/reports" class="touch-btn touch-btn-info">📄 Professional Reports</a>
        <a href="/analytics/interactive-dashboard" class="touch-btn touch-btn-purple">🎮 Interactive Dashboard</a>
        <a href="#api-documentation" class="touch-btn touch-btn-secondary">📖 API Documentation</a>
    </div>

    <!-- Export Center -->
    <div class="mobile-card">
        <h3>📤 Data Export Center</h3>
        <form id="exportForm" method="POST" action="/analytics/export/generate" style="margin: 20px 0;">
            @csrf
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                
                <div>
                    <label for="export_type" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📊 Export Type
                    </label>
                    <select name="export_type" id="export_type" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;"
                            onchange="updateExportOptions()">
                        <option value="analytics_summary">📈 Analytics Summary</option>
                        <option value="financial_data">💰 Financial Data</option>
                        <option value="plant_data">🌱 Plant Data</option>
                        <option value="harvest_data">🫐 Harvest Data</option>
                        <option value="operational_data">⚙️ Operational Data</option>
                        <option value="weather_data">🌡️ Weather Data</option>
                        <option value="complete_dataset">📋 Complete Dataset</option>
                        <option value="custom_query">🔧 Custom Query</option>
                    </select>
                </div>
                
                <div>
                    <label for="export_format" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📄 Export Format
                    </label>
                    <select name="export_format" id="export_format" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="json">📋 JSON</option>
                        <option value="csv">📊 CSV</option>
                        <option value="excel">📈 Excel (XLSX)</option>
                        <option value="xml">🏷️ XML</option>
                        <option value="api">📡 API Response</option>
                    </select>
                </div>
                
                <div>
                    <label for="date_range" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 Date Range
                    </label>
                    <select name="date_range" id="date_range" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;"
                            onchange="toggleCustomDateRange()">
                        <option value="last_30_days">Last 30 Days</option>
                        <option value="last_90_days">Last 90 Days</option>
                        <option value="this_year">This Year</option>
                        <option value="last_year">Last Year</option>
                        <option value="all_time">All Time</option>
                        <option value="custom">Custom Range</option>
                    </select>
                </div>
                
                <div>
                    <label for="data_granularity" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🔍 Data Granularity
                    </label>
                    <select name="data_granularity" id="data_granularity" class="form-control" 
                            style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="summary">Summary</option>
                        <option value="daily">Daily</option>
                        <option value="weekly">Weekly</option>
                        <option value="monthly">Monthly</option>
                        <option value="detailed">Detailed</option>
                    </select>
                </div>
            </div>
            
            <!-- Custom Date Range -->
            <div id="customDateRange" style="display: none; margin-top: 20px; padding: 20px; background: rgba(106, 27, 154, 0.05); border-radius: 8px;">
                <h4 style="color: var(--blackberry-purple); margin-bottom: 15px;">📅 Custom Date Range</h4>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <label for="start_date" style="display: block; margin-bottom: 5px; font-weight: 600;">Start Date</label>
                        <input type="date" name="start_date" id="start_date" class="form-control">
                    </div>
                    <div>
                        <label for="end_date" style="display: block; margin-bottom: 5px; font-weight: 600;">End Date</label>
                        <input type="date" name="end_date" id="end_date" class="form-control">
                    </div>
                </div>
            </div>
            
            <!-- Data Fields Selection -->
            <div style="margin-top: 20px;">
                <h4 style="color: var(--soil-brown); margin-bottom: 15px;">📋 Include Data Fields</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;" id="dataFields">
                    <!-- Fields will be populated by JavaScript based on export type -->
                </div>
            </div>
            
            <!-- Advanced Options -->
            <div style="margin-top: 20px;">
                <h4 style="color: var(--soil-brown); margin-bottom: 15px;">🔧 Advanced Options</h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
                    <label style="display: flex; align-items: center;">
                        <input type="checkbox" name="include_metadata" checked style="margin-right: 10px;">
                        <span>📊 Include Metadata</span>
                    </label>
                    <label style="display: flex; align-items: center;">
                        <input type="checkbox" name="include_calculations" checked style="margin-right: 10px;">
                        <span>🧮 Include Calculated Fields</span>
                    </label>
                    <label style="display: flex; align-items: center;">
                        <input type="checkbox" name="compress_output" style="margin-right: 10px;">
                        <span>🗜️ Compress Output (ZIP)</span>
                    </label>
                    <label style="display: flex; align-items: center;">
                        <input type="checkbox" name="schedule_export" style="margin-right: 10px;">
                        <span>⏰ Schedule Regular Export</span>
                    </label>
                </div>
            </div>
            
            <!-- Generate Button -->
            <div style="margin-top: 30px; text-align: center;">
                <button type="submit" class="touch-btn touch-btn-success" style="padding: 15px 30px; font-size: 1.1em;">
                    📤 Generate & Download Export
                </button>
                <div style="margin-top: 10px; color: var(--soil-brown); font-size: 0.9em;">
                    Large exports may take several minutes to process
                </div>
            </div>
        </form>
    </div>

    <!-- API Endpoints Dashboard -->
    <div class="mobile-card">
        <h3>📡 API Endpoints Dashboard</h3>
        <div style="margin: 20px 0;">
            
            <!-- API Status -->
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <div class="stat-card green">
                    <div class="stat-number">✅ Active</div>
                    <div class="stat-label">API Status</div>
                    <div class="stat-trend">All endpoints operational</div>
                </div>
                <div class="stat-card blue">
                    <div class="stat-number">15</div>
                    <div class="stat-label">Available Endpoints</div>
                    <div class="stat-trend">RESTful API</div>
                </div>
                <div class="stat-card orange">
                    <div class="stat-number">{{ $apiStats['daily_requests'] ?? 0 }}</div>
                    <div class="stat-label">Requests Today</div>
                    <div class="stat-trend">{{ $apiStats['requests_trend'] ?? '+0%' }} vs yesterday</div>
                </div>
                <div class="stat-card purple">
                    <div class="stat-number">{{ $apiStats['active_keys'] ?? 1 }}</div>
                    <div class="stat-label">Active API Keys</div>
                    <div class="stat-trend">Authentication tokens</div>
                </div>
            </div>

            <!-- Quick API Test -->
            <div style="background: rgba(76, 175, 80, 0.05); padding: 20px; border-radius: 8px; margin: 20px 0;">
                <h4 style="color: var(--leaf-green); margin-bottom: 15px;">🧪 Quick API Test</h4>
                <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 15px; align-items: end;">
                    <div>
                        <label for="api_endpoint" style="display: block; margin-bottom: 5px; font-weight: 600;">Test Endpoint</label>
                        <select id="api_endpoint" class="form-control">
                            <option value="/api/v1/analytics/summary">📊 Analytics Summary</option>
                            <option value="/api/v1/plants">🌱 Plants Data</option>
                            <option value="/api/v1/harvest">🫐 Harvest Data</option>
                            <option value="/api/v1/weather">🌡️ Weather Data</option>
                            <option value="/api/v1/financial/roi">💰 Financial ROI</option>
                        </select>
                    </div>
                    <div>
                        <button onclick="testAPIEndpoint()" class="touch-btn touch-btn-success" style="width: 100%;">
                            🧪 Test API Call
                        </button>
                    </div>
                </div>
                <div id="apiTestResult" style="margin-top: 15px; padding: 10px; background: rgba(255,255,255,0.7); border-radius: 6px; display: none;">
                    <pre style="margin: 0; font-size: 0.8em; white-space: pre-wrap;"></pre>
                </div>
            </div>
        </div>
    </div>

    <!-- API Documentation -->
    <div class="mobile-card" id="api-documentation">
        <h3>📖 API Documentation</h3>
        <div style="margin: 20px 0;">
            
            <!-- Authentication -->
            <div style="margin-bottom: 30px; padding: 20px; background: rgba(198, 40, 40, 0.05); border-left: 4px solid var(--berry-red); border-radius: 8px;">
                <h4 style="color: var(--berry-red);">🔐 Authentication</h4>
                <p style="margin: 10px 0;">All API requests require authentication via API key header:</p>
                <div style="background: #2d3748; color: #e2e8f0; padding: 15px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 0.9em;">
                    Authorization: Bearer YOUR_API_KEY<br>
                    Content-Type: application/json
                </div>
                <div style="margin-top: 10px;">
                    <strong>Your API Key:</strong>
                    <div style="background: #f7fafc; padding: 10px; border-radius: 6px; font-family: monospace; margin: 10px 0; border: 1px solid #e2e8f0;">
                        <span id="apiKey">{{ $apiKey ?? 'bb_farm_' . str_random(32) }}</span>
                        <button onclick="copyApiKey()" class="touch-btn touch-btn-info" style="padding: 5px 10px; margin-left: 10px; font-size: 0.8em;">📋 Copy</button>
                    </div>
                </div>
            </div>

            <!-- Endpoints Documentation -->
            <div style="display: grid; gap: 20px;">
                
                <!-- Analytics Endpoints -->
                <div style="padding: 20px; background: rgba(106, 27, 154, 0.05); border-radius: 12px; border-left: 4px solid var(--blackberry-purple);">
                    <h4 style="color: var(--blackberry-purple);">📊 Analytics Endpoints</h4>
                    <div style="margin: 15px 0;">
                        <div class="api-endpoint">
                            <div style="font-family: monospace; background: #2d3748; color: #e2e8f0; padding: 10px; border-radius: 6px; margin: 10px 0;">
                                <span style="color: #48bb78; font-weight: bold;">GET</span> /api/v1/analytics/summary
                            </div>
                            <p style="font-size: 0.9em; margin: 10px 0;">Returns comprehensive analytics summary including ROI, growth metrics, and key performance indicators.</p>
                        </div>
                        
                        <div class="api-endpoint">
                            <div style="font-family: monospace; background: #2d3748; color: #e2e8f0; padding: 10px; border-radius: 6px; margin: 10px 0;">
                                <span style="color: #48bb78; font-weight: bold;">GET</span> /api/v1/analytics/roi/{plant_count}
                            </div>
                            <p style="font-size: 0.9em; margin: 10px 0;">Calculate ROI analysis for specified plant count with detailed financial breakdown.</p>
                        </div>
                        
                        <div class="api-endpoint">
                            <div style="font-family: monospace; background: #2d3748; color: #e2e8f0; padding: 10px; border-radius: 6px; margin: 10px 0;">
                                <span style="color: #ed8936; font-weight: bold;">POST</span> /api/v1/analytics/scenario-comparison
                            </div>
                            <p style="font-size: 0.9em; margin: 10px 0;">Compare multiple scenarios with custom parameters for strategic planning.</p>
                        </div>
                    </div>
                </div>

                <!-- Plant Data Endpoints -->
                <div style="padding: 20px; background: rgba(76, 175, 80, 0.05); border-radius: 12px; border-left: 4px solid var(--leaf-green);">
                    <h4 style="color: var(--leaf-green);">🌱 Plant Data Endpoints</h4>
                    <div style="margin: 15px 0;">
                        <div class="api-endpoint">
                            <div style="font-family: monospace; background: #2d3748; color: #e2e8f0; padding: 10px; border-radius: 6px; margin: 10px 0;">
                                <span style="color: #48bb78; font-weight: bold;">GET</span> /api/v1/plants?limit=100&offset=0
                            </div>
                            <p style="font-size: 0.9em; margin: 10px 0;">Retrieve plant data with pagination support and filtering options.</p>
                        </div>
                        
                        <div class="api-endpoint">
                            <div style="font-family: monospace; background: #2d3748; color: #e2e8f0; padding: 10px; border-radius: 6px; margin: 10px 0;">
                                <span style="color: #48bb78; font-weight: bold;">GET</span> /api/v1/plants/{id}/measurements
                            </div>
                            <p style="font-size: 0.9em; margin: 10px 0;">Get historical measurements for specific plant including growth data and health metrics.</p>
                        </div>
                    </div>
                </div>

                <!-- Harvest Data Endpoints -->
                <div style="padding: 20px; background: rgba(255, 143, 0, 0.05); border-radius: 12px; border-left: 4px solid var(--warning);">
                    <h4 style="color: var(--warning);">🫐 Harvest Data Endpoints</h4>
                    <div style="margin: 15px 0;">
                        <div class="api-endpoint">
                            <div style="font-family: monospace; background: #2d3748; color: #e2e8f0; padding: 10px; border-radius: 6px; margin: 10px 0;">
                                <span style="color: #48bb78; font-weight: bold;">GET</span> /api/v1/harvest/summary?year=2024
                            </div>
                            <p style="font-size: 0.9em; margin: 10px 0;">Annual harvest summary with total weight, value, and seasonal breakdown.</p>
                        </div>
                        
                        <div class="api-endpoint">
                            <div style="font-family: monospace; background: #2d3748; color: #e2e8f0; padding: 10px; border-radius: 6px; margin: 10px 0;">
                                <span style="color: #ed8936; font-weight: bold;">POST</span> /api/v1/harvest/forecast
                            </div>
                            <p style="font-size: 0.9em; margin: 10px 0;">Generate harvest forecasts based on current plant data and historical patterns.</p>
                        </div>
                    </div>
                </div>

                <!-- Financial Data Endpoints -->
                <div style="padding: 20px; background: rgba(33, 150, 243, 0.05); border-radius: 12px; border-left: 4px solid var(--sky-blue);">
                    <h4 style="color: var(--sky-blue);">💰 Financial Data Endpoints</h4>
                    <div style="margin: 15px 0;">
                        <div class="api-endpoint">
                            <div style="font-family: monospace; background: #2d3748; color: #e2e8f0; padding: 10px; border-radius: 6px; margin: 10px 0;">
                                <span style="color: #48bb78; font-weight: bold;">GET</span> /api/v1/financial/cash-flow?years=3
                            </div>
                            <p style="font-size: 0.9em; margin: 10px 0;">Detailed cash flow analysis with monthly breakdown and seasonal patterns.</p>
                        </div>
                        
                        <div class="api-endpoint">
                            <div style="font-family: monospace; background: #2d3748; color: #e2e8f0; padding: 10px; border-radius: 6px; margin: 10px 0;">
                                <span style="color: #ed8936; font-weight: bold;">POST</span> /api/v1/financial/monte-carlo
                            </div>
                            <p style="font-size: 0.9em; margin: 10px 0;">Run Monte Carlo simulation for risk assessment with configurable parameters.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Response Format -->
            <div style="margin-top: 30px; padding: 20px; background: rgba(96, 125, 139, 0.05); border-left: 4px solid #607D8B; border-radius: 8px;">
                <h4 style="color: #607D8B;">📋 Standard Response Format</h4>
                <div style="background: #2d3748; color: #e2e8f0; padding: 15px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 0.9em;">
{<br>
&nbsp;&nbsp;"success": true,<br>
&nbsp;&nbsp;"message": "Data retrieved successfully",<br>
&nbsp;&nbsp;"data": { ... },<br>
&nbsp;&nbsp;"meta": {<br>
&nbsp;&nbsp;&nbsp;&nbsp;"timestamp": "2024-01-15T10:30:00Z",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"version": "v1",<br>
&nbsp;&nbsp;&nbsp;&nbsp;"total": 100,<br>
&nbsp;&nbsp;&nbsp;&nbsp;"pagination": { ... }<br>
&nbsp;&nbsp;}<br>
}
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Exports -->
    <div class="mobile-card">
        <h3>📁 Recent Exports & API Activity</h3>
        <div style="margin: 20px 0;">
            
            <!-- Export History -->
            <div style="margin-bottom: 30px;">
                <h4 style="color: var(--soil-brown); margin-bottom: 15px;">📤 Export History</h4>
                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden;">
                        <thead style="background: var(--blackberry-purple); color: white;">
                            <tr>
                                <th style="padding: 15px; text-align: left;">Export Name</th>
                                <th style="padding: 15px; text-align: left;">Type</th>
                                <th style="padding: 15px; text-align: left;">Format</th>
                                <th style="padding: 15px; text-align: left;">Generated</th>
                                <th style="padding: 15px; text-align: left;">Size</th>
                                <th style="padding: 15px; text-align: left;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="border-bottom: 1px solid #E0E0E0;">
                                <td style="padding: 15px; font-weight: bold; color: var(--blackberry-purple);">Analytics Summary Q4</td>
                                <td style="padding: 15px;">Analytics Summary</td>
                                <td style="padding: 15px;">Excel</td>
                                <td style="padding: 15px;">{{ date('M j, Y H:i', strtotime('-1 hour')) }}</td>
                                <td style="padding: 15px;">2.3 MB</td>
                                <td style="padding: 15px;">
                                    <a href="#" class="touch-btn touch-btn-success" style="padding: 5px 10px; font-size: 0.8em;">⬇️ Download</a>
                                </td>
                            </tr>
                            <tr style="border-bottom: 1px solid #E0E0E0;">
                                <td style="padding: 15px; font-weight: bold; color: var(--blackberry-purple);">Plant Data Complete</td>
                                <td style="padding: 15px;">Plant Data</td>
                                <td style="padding: 15px;">CSV</td>
                                <td style="padding: 15px;">{{ date('M j, Y H:i', strtotime('-3 hours')) }}</td>
                                <td style="padding: 15px;">856 KB</td>
                                <td style="padding: 15px;">
                                    <a href="#" class="touch-btn touch-btn-success" style="padding: 5px 10px; font-size: 0.8em;">⬇️ Download</a>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding: 15px; font-weight: bold; color: var(--blackberry-purple);">Financial Projections</td>
                                <td style="padding: 15px;">Financial Data</td>
                                <td style="padding: 15px;">JSON</td>
                                <td style="padding: 15px;">{{ date('M j, Y H:i', strtotime('-1 day')) }}</td>
                                <td style="padding: 15px;">124 KB</td>
                                <td style="padding: 15px;">
                                    <a href="#" class="touch-btn touch-btn-success" style="padding: 5px 10px; font-size: 0.8em;">⬇️ Download</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- API Activity Log -->
            <div>
                <h4 style="color: var(--soil-brown); margin-bottom: 15px;">📡 Recent API Activity</h4>
                <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
                    <div style="font-family: monospace; font-size: 0.9em; line-height: 1.6;">
                        <div style="color: var(--leaf-green);">{{ date('H:i:s') }} - GET /api/v1/analytics/summary - 200 OK (247ms)</div>
                        <div style="color: var(--sky-blue);">{{ date('H:i:s', strtotime('-2 minutes')) }} - GET /api/v1/plants?limit=50 - 200 OK (156ms)</div>
                        <div style="color: var(--leaf-green);">{{ date('H:i:s', strtotime('-5 minutes')) }} - POST /api/v1/analytics/roi - 200 OK (892ms)</div>
                        <div style="color: var(--warning);">{{ date('H:i:s', strtotime('-8 minutes')) }} - GET /api/v1/harvest/summary - 404 Not Found (23ms)</div>
                        <div style="color: var(--leaf-green);">{{ date('H:i:s', strtotime('-12 minutes')) }} - GET /api/v1/financial/cash-flow - 200 OK (1.2s)</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
// Data Export & API JavaScript
const exportTypes = {
    'analytics_summary': ['roi_analysis', 'growth_metrics', 'financial_summary', 'risk_assessment'],
    'financial_data': ['revenue', 'costs', 'profit', 'cash_flow', 'roi_calculations'],
    'plant_data': ['plant_id', 'variety', 'planting_date', 'location', 'health_score', 'measurements'],
    'harvest_data': ['harvest_date', 'weight', 'quality', 'plant_id', 'variety', 'value'],
    'operational_data': ['watering_logs', 'fertilizer_applications', 'soil_tests', 'pest_incidents'],
    'weather_data': ['date', 'temperature', 'humidity', 'rainfall', 'wind_speed', 'solar_radiation'],
    'complete_dataset': ['all_tables', 'relationships', 'calculated_fields', 'metadata'],
    'custom_query': ['custom_sql', 'table_selection', 'field_mapping']
};

function updateExportOptions() {
    const exportType = document.getElementById('export_type').value;
    const dataFieldsContainer = document.getElementById('dataFields');
    
    // Clear existing fields
    dataFieldsContainer.innerHTML = '';
    
    // Add fields based on export type
    const fields = exportTypes[exportType] || [];
    fields.forEach(field => {
        const label = document.createElement('label');
        label.style.cssText = 'display: flex; align-items: center; padding: 10px; background: rgba(76, 175, 80, 0.05); border-radius: 6px;';
        
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'fields[]';
        checkbox.value = field;
        checkbox.checked = true;
        checkbox.style.marginRight = '10px';
        
        const text = document.createElement('span');
        text.textContent = field.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
        
        label.appendChild(checkbox);
        label.appendChild(text);
        dataFieldsContainer.appendChild(label);
    });
}

function toggleCustomDateRange() {
    const dateRange = document.getElementById('date_range').value;
    const customDiv = document.getElementById('customDateRange');
    
    if (dateRange === 'custom') {
        customDiv.style.display = 'block';
    } else {
        customDiv.style.display = 'none';
    }
}

// API Testing
async function testAPIEndpoint() {
    const endpoint = document.getElementById('api_endpoint').value;
    const resultDiv = document.getElementById('apiTestResult');
    const resultPre = resultDiv.querySelector('pre');
    
    try {
        resultPre.textContent = 'Testing API endpoint...';
        resultDiv.style.display = 'block';
        
        // Simulate API call (in production, make actual request)
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        const mockResponse = {
            success: true,
            message: 'Data retrieved successfully',
            data: {
                total_plants: 5247,
                annual_revenue: 180000,
                roi_percentage: 24.5,
                timestamp: new Date().toISOString()
            },
            meta: {
                endpoint: endpoint,
                version: 'v1',
                response_time: '247ms'
            }
        };
        
        resultPre.textContent = JSON.stringify(mockResponse, null, 2);
        
    } catch (error) {
        resultPre.textContent = `Error: ${error.message}`;
    }
}

function copyApiKey() {
    const apiKey = document.getElementById('apiKey').textContent;
    navigator.clipboard.writeText(apiKey).then(() => {
        alert('API Key copied to clipboard!');
    });
}

// Form validation
document.getElementById('exportForm').addEventListener('submit', function(e) {
    const checkedFields = document.querySelectorAll('input[name="fields[]"]:checked');
    if (checkedFields.length === 0) {
        e.preventDefault();
        alert('Please select at least one data field to export.');
        return false;
    }
    
    // Show loading indicator
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '⏳ Generating Export...';
    submitBtn.disabled = true;
    
    // Re-enable button after 30 seconds (in case of errors)
    setTimeout(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }, 30000);
});

// Initialize
updateExportOptions();
</script>
@endpush