@extends('layouts.app')
@section('title', 'Interactive Analytics Dashboard - Blackberry Farm')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>🎮 Interactive Analytics Dashboard</h1>
        <p>Real-time, interactive data visualization with advanced charting capabilities</p>
        <p class="subtitle">Drill down into your farm's performance metrics</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/growth-projections" class="touch-btn touch-btn-success">📈 Growth Projections</a>
        <a href="/analytics/yield-forecasting" class="touch-btn touch-btn-warning">🫐 Yield Forecasting</a>
        <a href="/analytics/weather-correlation" class="touch-btn touch-btn-primary">🌡️ Weather Analysis</a>
    </div>

    <!-- Interactive Controls -->
    <div class="mobile-card">
        <h3>🎛️ Dashboard Controls</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 20px 0;">
            <div>
                <label for="timeRange" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                    📅 Time Range
                </label>
                <select id="timeRange" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                    <option value="7">Last 7 Days</option>
                    <option value="30" selected>Last 30 Days</option>
                    <option value="90">Last 3 Months</option>
                    <option value="365">Last Year</option>
                </select>
            </div>
            <div>
                <label for="chartType" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                    📊 Chart Type
                </label>
                <select id="chartType" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                    <option value="line">Line Chart</option>
                    <option value="bar">Bar Chart</option>
                    <option value="area">Area Chart</option>
                    <option value="scatter">Scatter Plot</option>
                </select>
            </div>
            <div>
                <label for="dataMetric" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                    📈 Data Metric
                </label>
                <select id="dataMetric" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                    <option value="yield">Plant Yield</option>
                    <option value="health">Plant Health</option>
                    <option value="growth">Growth Rate</option>
                    <option value="weather">Weather Impact</option>
                </select>
            </div>
            <div style="align-self: end;">
                <button id="updateCharts" class="touch-btn touch-btn-success" style="width: 100%;">
                    🔄 Update Charts
                </button>
            </div>
        </div>
    </div>

    <!-- Real-time Stats -->
    <div class="stats-grid" style="margin-bottom: 30px;">
        <div class="stat-card today">
            <div class="stat-number" id="liveStats1">---</div>
            <div class="stat-label">Active Plants</div>
            <div class="stat-trend">🔄 Live updating</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number" id="liveStats2">---</div>
            <div class="stat-label">Avg Health Score</div>
            <div class="stat-trend">🔄 Live updating</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number" id="liveStats3">---</div>
            <div class="stat-label">This Week's Yield</div>
            <div class="stat-trend">🔄 Live updating</div>
        </div>
        <div class="stat-card purple">
            <div class="stat-number" id="liveStats4">---</div>
            <div class="stat-label">Current Revenue</div>
            <div class="stat-trend">🔄 Live updating</div>
        </div>
    </div>

    <!-- Interactive Charts Grid -->
    <div class="mobile-card">
        <h3>📊 Interactive Charts</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 30px; margin: 30px 0;">
            
            <!-- Main Interactive Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px; min-height: 400px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h4 style="color: var(--soil-brown); margin: 0;">📈 Primary Metrics</h4>
                    <div style="display: flex; gap: 10px;">
                        <button class="chart-control-btn" data-zoom="in" title="Zoom In">🔍+</button>
                        <button class="chart-control-btn" data-zoom="out" title="Zoom Out">🔍-</button>
                        <button class="chart-control-btn" data-action="reset" title="Reset View">🔄</button>
                        <button class="chart-control-btn" data-action="export" title="Export Chart">💾</button>
                    </div>
                </div>
                <canvas id="interactiveMainChart" style="height: 350px;"></canvas>
            </div>
            
            <!-- Secondary Chart with Drill-down -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px; min-height: 400px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h4 style="color: var(--soil-brown); margin: 0;">🔍 Detailed Analysis</h4>
                    <select id="drilldownSelect" style="padding: 8px; border: 1px solid var(--medium-gray); border-radius: 4px;">
                        <option value="variety">By Variety</option>
                        <option value="field">By Field</option>
                        <option value="age">By Plant Age</option>
                        <option value="season">By Season</option>
                    </select>
                </div>
                <canvas id="interactiveSecondaryChart" style="height: 350px;"></canvas>
            </div>
            
            <!-- Heat Map Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px; min-height: 400px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">🔥 Performance Heat Map</h4>
                <canvas id="heatMapChart" style="height: 350px;"></canvas>
            </div>
            
            <!-- Real-time Monitoring -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px; min-height: 400px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h4 style="color: var(--soil-brown); margin: 0;">⚡ Real-time Monitoring</h4>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span style="color: #28a745; font-size: 12px;">● Live</span>
                        <button id="pauseRealtime" class="chart-control-btn" title="Pause Updates">⏸️</button>
                    </div>
                </div>
                <canvas id="realtimeChart" style="height: 350px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Data Export Options -->
    <div class="mobile-card" style="text-align: center;">
        <h3>💾 Export Options</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;">
            <button id="exportPNG" class="touch-btn touch-btn-primary">🖼️ Export as PNG</button>
            <button id="exportCSV" class="touch-btn touch-btn-success">📊 Export as CSV</button>
            <button id="exportPDF" class="touch-btn touch-btn-warning">📄 Export PDF Report</button>
            <button id="shareLink" class="touch-btn touch-btn-info">🔗 Share Dashboard</button>
        </div>
    </div>

@endsection

@push('scripts')
<script>
// Interactive Dashboard Implementation
let charts = {};
let realtimeInterval;
let isPaused = false;

// Sample data generator for demonstration
function generateSampleData(days = 30, metric = 'yield') {
    const data = [];
    const baseValue = metric === 'yield' ? 50 : metric === 'health' ? 80 : 30;
    const variance = metric === 'yield' ? 20 : metric === 'health' ? 15 : 10;
    
    for (let i = 0; i < days; i++) {
        const trend = Math.sin(i / 7) * 10; // Weekly cycle
        const noise = (Math.random() - 0.5) * variance;
        data.push(Math.max(0, baseValue + trend + noise));
    }
    return data;
}

// Initialize main interactive chart
function initMainChart() {
    const ctx = document.getElementById('interactiveMainChart').getContext('2d');
    
    charts.main = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ChartUtils.generateDateLabels(30),
            datasets: [{
                label: 'Plant Yield',
                data: generateSampleData(30, 'yield'),
                borderColor: ChartColors.purple,
                backgroundColor: ChartColors.lightPurple,
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointHoverRadius: 8
            }]
        },
        options: {
            ...ChartDefaults,
            scales: {
                x: {
                    ...ChartScales.linear,
                    title: {
                        display: true,
                        text: 'Date'
                    }
                },
                y: {
                    ...ChartScales.linear,
                    title: {
                        display: true,
                        text: 'Yield (lbs)'
                    }
                }
            },
            onClick: function(event, elements) {
                if (elements.length > 0) {
                    const index = elements[0].index;
                    const value = this.data.datasets[0].data[index];
                    const label = this.data.labels[index];
                    showDetailModal(label, value);
                }
            }
        }
    });
}

// Initialize secondary chart with drill-down capability
function initSecondaryChart() {
    const ctx = document.getElementById('interactiveSecondaryChart').getContext('2d');
    
    charts.secondary = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Variety A', 'Variety B', 'Variety C', 'Variety D'],
            datasets: [{
                label: 'Average Yield',
                data: [45, 62, 38, 55],
                backgroundColor: [
                    ChartColors.lightPurple,
                    ChartColors.lightGreen,
                    ChartColors.lightOrange,
                    ChartColors.lightBlue
                ],
                borderColor: [
                    ChartColors.purple,
                    ChartColors.green,
                    ChartColors.orange,
                    ChartColors.blue
                ],
                borderWidth: 2
            }]
        },
        options: {
            ...ChartDefaults,
            scales: {
                x: ChartScales.linear,
                y: {
                    ...ChartScales.linear,
                    title: {
                        display: true,
                        text: 'Average Yield (lbs)'
                    }
                }
            },
            onClick: function(event, elements) {
                if (elements.length > 0) {
                    const index = elements[0].index;
                    drillDown(this.data.labels[index]);
                }
            }
        }
    });
}

// Initialize heat map chart
function initHeatMapChart() {
    const ctx = document.getElementById('heatMapChart').getContext('2d');
    
    // Create a simplified heat map using scatter plot
    const heatMapData = [];
    for (let x = 0; x < 10; x++) {
        for (let y = 0; y < 10; y++) {
            heatMapData.push({
                x: x,
                y: y,
                v: Math.random() * 100 // Performance value
            });
        }
    }
    
    charts.heatMap = new Chart(ctx, {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'Field Performance',
                data: heatMapData.map(point => ({
                    x: point.x,
                    y: point.y,
                    r: point.v / 5 // Scale radius based on performance
                })),
                backgroundColor: function(context) {
                    const value = heatMapData[context.dataIndex].v;
                    if (value > 75) return ChartColors.green;
                    if (value > 50) return ChartColors.orange;
                    return ChartColors.red;
                },
                borderColor: '#fff',
                borderWidth: 1
            }]
        },
        options: {
            ...ChartDefaults,
            scales: {
                x: {
                    ...ChartScales.linear,
                    title: {
                        display: true,
                        text: 'Field X Coordinate'
                    },
                    max: 10,
                    min: 0
                },
                y: {
                    ...ChartScales.linear,
                    title: {
                        display: true,
                        text: 'Field Y Coordinate'
                    },
                    max: 10,
                    min: 0
                }
            }
        }
    });
}

// Initialize real-time chart
function initRealtimeChart() {
    const ctx = document.getElementById('realtimeChart').getContext('2d');
    
    charts.realtime = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Live Health Score',
                data: [],
                borderColor: ChartColors.green,
                backgroundColor: ChartColors.lightGreen,
                borderWidth: 2,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            ...ChartDefaults,
            animation: false,
            scales: {
                x: {
                    ...ChartScales.linear,
                    title: {
                        display: true,
                        text: 'Time'
                    }
                },
                y: {
                    ...ChartScales.linear,
                    title: {
                        display: true,
                        text: 'Health Score'
                    },
                    min: 0,
                    max: 100
                }
            }
        }
    });
    
    startRealtimeUpdates();
}

// Start real-time updates
function startRealtimeUpdates() {
    realtimeInterval = setInterval(() => {
        if (!isPaused) {
            const now = new Date().toLocaleTimeString();
            const value = 70 + Math.random() * 20; // Random health score
            
            charts.realtime.data.labels.push(now);
            charts.realtime.data.datasets[0].data.push(value);
            
            // Keep only last 20 data points
            if (charts.realtime.data.labels.length > 20) {
                charts.realtime.data.labels.shift();
                charts.realtime.data.datasets[0].data.shift();
            }
            
            charts.realtime.update('none');
            updateLiveStats();
        }
    }, 2000);
}

// Update live statistics
function updateLiveStats() {
    document.getElementById('liveStats1').textContent = Math.floor(Math.random() * 50 + 200);
    document.getElementById('liveStats2').textContent = (Math.random() * 2 + 8).toFixed(1);
    document.getElementById('liveStats3').textContent = Math.floor(Math.random() * 100 + 300) + ' lbs';
    document.getElementById('liveStats4').textContent = '$' + ChartUtils.formatNumber(Math.random() * 10000 + 15000);
}

// Drill down functionality
function drillDown(category) {
    alert(`Drilling down into: ${category}\n\nThis would show detailed analytics for ${category}.`);
}

// Show detail modal
function showDetailModal(label, value) {
    alert(`Data Point Details:\n\nDate: ${label}\nValue: ${value.toFixed(2)}\n\nClick OK to continue.`);
}

// Update charts based on controls
function updateCharts() {
    const timeRange = document.getElementById('timeRange').value;
    const chartType = document.getElementById('chartType').value;
    const dataMetric = document.getElementById('dataMetric').value;
    
    // Update main chart
    charts.main.data.labels = ChartUtils.generateDateLabels(parseInt(timeRange));
    charts.main.data.datasets[0].data = generateSampleData(parseInt(timeRange), dataMetric);
    charts.main.data.datasets[0].label = dataMetric.charAt(0).toUpperCase() + dataMetric.slice(1);
    
    // Change chart type
    charts.main.config.type = chartType;
    if (chartType === 'area') {
        charts.main.config.type = 'line';
        charts.main.data.datasets[0].fill = true;
    }
    
    charts.main.update();
}

// Chart control handlers
function setupChartControls() {
    // Update button
    document.getElementById('updateCharts').addEventListener('click', updateCharts);
    
    // Drill-down selector
    document.getElementById('drilldownSelect').addEventListener('change', function() {
        const selectedDrilldown = this.value;
        // Update secondary chart based on selection
        const labels = {
            'variety': ['Variety A', 'Variety B', 'Variety C', 'Variety D'],
            'field': ['Field 1', 'Field 2', 'Field 3', 'Field 4'],
            'age': ['1-2 years', '2-3 years', '3-5 years', '5+ years'],
            'season': ['Spring', 'Summer', 'Fall', 'Winter']
        };
        
        charts.secondary.data.labels = labels[selectedDrilldown];
        charts.secondary.data.datasets[0].data = labels[selectedDrilldown].map(() => Math.random() * 50 + 25);
        charts.secondary.update();
    });
    
    // Pause/resume real-time updates
    document.getElementById('pauseRealtime').addEventListener('click', function() {
        isPaused = !isPaused;
        this.textContent = isPaused ? '▶️' : '⏸️';
        this.title = isPaused ? 'Resume Updates' : 'Pause Updates';
    });
    
    // Export functionality
    document.getElementById('exportPNG').addEventListener('click', function() {
        const link = document.createElement('a');
        link.download = 'blackberry-analytics.png';
        link.href = charts.main.toBase64Image();
        link.click();
    });
    
    document.getElementById('exportCSV').addEventListener('click', function() {
        const csv = convertChartsToCSV();
        downloadCSV(csv, 'blackberry-analytics.csv');
    });
    
    document.getElementById('shareLink').addEventListener('click', function() {
        const url = window.location.href;
        if (navigator.share) {
            navigator.share({
                title: 'Blackberry Farm Analytics',
                url: url
            });
        } else {
            navigator.clipboard.writeText(url).then(() => {
                alert('Dashboard link copied to clipboard!');
            });
        }
    });
}

// Utility functions
function convertChartsToCSV() {
    let csv = 'Date,Value\n';
    charts.main.data.labels.forEach((label, index) => {
        csv += `${label},${charts.main.data.datasets[0].data[index]}\n`;
    });
    return csv;
}

function downloadCSV(csv, filename) {
    const blob = new Blob([csv], { type: 'text/csv' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
}

// Initialize dashboard
document.addEventListener('DOMContentLoaded', function() {
    initMainChart();
    initSecondaryChart();
    initHeatMapChart();
    initRealtimeChart();
    setupChartControls();
    updateLiveStats();
});

// Cleanup on page unload
window.addEventListener('beforeunload', function() {
    if (realtimeInterval) {
        clearInterval(realtimeInterval);
    }
});
</script>

<style>
.chart-control-btn {
    background: var(--blackberry-purple);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.chart-control-btn:hover {
    background: var(--blackberry-purple-light);
    transform: translateY(-1px);
}

.chart-control-btn:active {
    transform: translateY(0);
}
</style>
@endpush