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

    <!-- Page Header -->
    <div class="page-header">
        <h1>🫐 Yield Forecasting System</h1>
        <p>Data-driven yield predictions based on plant age, variety, and health metrics</p>
        <p class="subtitle">Advanced forecasting for harvest planning and market preparation</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/roi-analysis" class="touch-btn touch-btn-warning">💰 ROI Analysis</a>
        <a href="/analytics/weather-correlation" class="touch-btn touch-btn-primary">🌡️ Weather Analysis</a>
    </div>

    <!-- Forecasting Parameters -->
    <div class="mobile-card">
        <h3>⚙️ Forecasting Parameters</h3>
        <form method="GET" action="/analytics/yield-forecasting" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div>
                    <label for="year" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 Forecast Year
                    </label>
                    <select name="year" id="year" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        @for($y = date('Y'); $y <= date('Y') + 5; $y++)
                            <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                        @endfor
                    </select>
                </div>
                <div>
                    <label for="variety_id" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🫐 Filter by Variety
                    </label>
                    <select name="variety_id" id="variety_id" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="">All Varieties</option>
                        @foreach($forecasts['summary']['varieties_breakdown'] as $varietyName => $data)
                            <option value="{{ $varietyName }}" {{ $varietyId == $varietyName ? 'selected' : '' }}>{{ $varietyName }}</option>
                        @endforeach
                    </select>
                </div>
                <div style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-success" style="width: 100%;">
                        🔄 Update Forecast
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Forecast Summary -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ $forecasts['summary']['total_plants'] }}</div>
            <div class="stat-label">Plants Forecasted</div>
            <div class="stat-trend">Active production plants</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ number_format($forecasts['summary']['total_estimated_yield'], 1) }}lbs</div>
            <div class="stat-label">Total Estimated Yield</div>
            <div class="stat-trend">{{ number_format($forecasts['summary']['avg_yield_per_plant'], 1) }} lbs/plant avg</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">${{ number_format($forecasts['summary']['total_estimated_value'], 2) }}</div>
            <div class="stat-label">Estimated Market Value</div>
            <div class="stat-trend">$4.00/lb average price</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">{{ count($forecasts['summary']['varieties_breakdown']) }}</div>
            <div class="stat-label">Varieties in Production</div>
            <div class="stat-trend">Diversified harvest</div>
        </div>
    </div>

    <!-- Yield Forecasting Charts -->
    <div class="mobile-card">
        <h3>📊 Yield Forecasting Visualization</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin: 30px 0;">
            
            <!-- Yield by Variety Chart -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">🫐 Yield by Variety</h4>
                <canvas id="yieldByVarietyChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Plant Age Distribution -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">🌱 Plant Age Distribution</h4>
                <canvas id="plantAgeChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Health Score Impact -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">💚 Health Score Impact</h4>
                <canvas id="healthScoreChart" style="max-height: 300px;"></canvas>
            </div>
            
            <!-- Harvest Timeline -->
            <div style="background: #f8f9fa; padding: 25px; border-radius: 12px;">
                <h4 style="margin-bottom: 20px; color: var(--soil-brown);">📅 Harvest Timeline</h4>
                <canvas id="harvestTimelineChart" style="max-height: 300px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Variety Breakdown -->
    <div class="mobile-card">
        <h3>🫐 Variety-Specific Forecasts</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            @foreach($forecasts['summary']['varieties_breakdown'] as $varietyName => $varietyData)
            <div style="background: rgba(106, 27, 154, 0.05); padding: 20px; border-radius: 12px; border-left: 4px solid var(--blackberry-purple);">
                <h4 style="color: var(--blackberry-purple); margin-bottom: 15px;">{{ $varietyName }}</h4>
                <div style="display: grid; gap: 10px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="color: var(--soil-brown); font-weight: 600;">Plant Count:</span>
                        <span style="font-weight: bold; color: var(--blackberry-purple);">{{ $varietyData['count'] }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="color: var(--soil-brown); font-weight: 600;">Estimated Yield:</span>
                        <span style="font-weight: bold; color: var(--leaf-green);">{{ number_format($varietyData['total_yield'], 1) }}lbs</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="color: var(--soil-brown); font-weight: 600;">Estimated Value:</span>
                        <span style="font-weight: bold; color: var(--leaf-green);">${{ number_format($varietyData['total_value'], 2) }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="color: var(--soil-brown); font-weight: 600;">Avg Yield/Plant:</span>
                        <span style="font-weight: bold; color: var(--blackberry-purple);">{{ number_format($varietyData['total_yield'] / $varietyData['count'], 1) }}lbs</span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Individual Plant Forecasts -->
    <div class="mobile-card">
        <h3>📋 Individual Plant Forecasts</h3>
        
        <div style="overflow-x: auto; margin: 20px 0;">
            <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: 12px; text-align: left;">Plant ID</th>
                        <th style="padding: 12px; text-align: left;">Variety</th>
                        <th style="padding: 12px; text-align: left;">Plant Age</th>
                        <th style="padding: 12px; text-align: left;">Health Score</th>
                        <th style="padding: 12px; text-align: left;">Estimated Yield</th>
                        <th style="padding: 12px; text-align: left;">Estimated Value</th>
                        <th style="padding: 12px; text-align: left;">Harvest Window</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($forecasts['individual_forecasts'] as $forecast)
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--blackberry-purple);">{{ $forecast['plant_id'] }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600;">{{ $forecast['variety_name'] }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600;">{{ $forecast['plant_age'] }} years</div>
                            <div style="font-size: 0.85em; color: #6c757d;">
                                @if($forecast['plant_age'] < 1)
                                    Young plant
                                @elseif($forecast['plant_age'] < 2)
                                    Developing
                                @elseif($forecast['plant_age'] < 3)
                                    Mature
                                @else
                                    Fully established
                                @endif
                            </div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: {{ $forecast['health_score'] >= 8 ? 'var(--leaf-green)' : ($forecast['health_score'] >= 6 ? '#FF8F00' : 'var(--berry-red)') }};">
                                {{ $forecast['health_score'] }}/10
                            </div>
                            <div style="font-size: 0.85em; color: #6c757d;">
                                @if($forecast['health_score'] >= 8)
                                    Excellent
                                @elseif($forecast['health_score'] >= 6)
                                    Good
                                @else
                                    Needs attention
                                @endif
                            </div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--leaf-green); font-size: 1.1em;">{{ number_format($forecast['estimated_yield'], 1) }}lbs</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-weight: 600; color: var(--leaf-green); font-size: 1.1em;">${{ number_format($forecast['estimated_value'], 2) }}</div>
                        </td>
                        <td style="padding: 12px;">
                            <div style="font-size: 0.9em; color: var(--soil-brown);">{{ $forecast['harvest_window'] }}</div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination would go here if needed -->
        @if(count($forecasts['individual_forecasts']) > 50)
        <div style="text-align: center; margin: 20px 0;">
            <p style="color: #6c757d;">Showing first 50 plants. Use filters to narrow results.</p>
        </div>
        @endif
    </div>

    <!-- Forecasting Methodology -->
    <div class="mobile-card" style="background: rgba(56, 142, 60, 0.05); border-left: 4px solid var(--leaf-green);">
        <h3 style="color: var(--leaf-green);">🔬 Forecasting Methodology</h3>
        <div style="margin: 15px 0;">
            <h5 style="color: var(--soil-brown); margin-bottom: 10px;">Yield Calculation Factors:</h5>
            <ul style="margin: 15px 0; padding-left: 20px; color: var(--soil-brown);">
                <li style="margin-bottom: 8px;"><strong>Base Yield:</strong> Variety-specific expected yield (varies by cultivar)</li>
                <li style="margin-bottom: 8px;"><strong>Age Multiplier:</strong> 
                    <ul style="margin-top: 5px;">
                        <li>Year 1: 30% of mature yield</li>
                        <li>Year 2: 70% of mature yield</li>
                        <li>Year 3+: 100% mature yield</li>
                        <li>Year 4+: 120% enhanced yield</li>
                    </ul>
                </li>
                <li style="margin-bottom: 8px;"><strong>Health Score Impact:</strong> Linear scaling based on health score (1-10 scale)</li>
                <li style="margin-bottom: 8px;"><strong>Environmental Factors:</strong> Weather conditions, soil quality, pest pressure</li>
                <li style="margin-bottom: 8px;"><strong>Historical Performance:</strong> Previous yield data when available</li>
            </ul>
            
            <h5 style="color: var(--soil-brown); margin: 20px 0 10px;">Market Value Assumptions:</h5>
            <ul style="margin: 15px 0; padding-left: 20px; color: var(--soil-brown);">
                <li style="margin-bottom: 8px;"><strong>Base Price:</strong> $4.00 per pound (farm gate pricing)</li>
                <li style="margin-bottom: 8px;"><strong>Quality Premium:</strong> High-health plants may command premium pricing</li>
                <li style="margin-bottom: 8px;"><strong>Market Timing:</strong> Early/late season varieties may have price advantages</li>
                <li style="margin-bottom: 8px;"><strong>Organic Premium:</strong> Additional value for certified organic production</li>
            </ul>
        </div>
        
        <div style="background: rgba(255, 143, 0, 0.1); padding: 15px; border-radius: 8px; margin-top: 20px;">
            <p style="font-style: italic; color: var(--soil-brown); margin: 0;">
                <strong>Disclaimer:</strong> These forecasts are estimates based on current plant health, historical data, and industry averages. 
                Actual yields may vary significantly due to weather events, pest/disease pressure, market conditions, and other unforeseen factors. 
                Use these projections as planning guidelines rather than guaranteed outcomes.
            </p>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js Configuration for Yield Forecasting
const chartColors = {
    purple: '#6A1B9A',
    green: '#388E3C',
    orange: '#FF8F00',
    red: '#C62828',
    blue: '#1976D2'
};

// Yield by Variety Chart
const varietyData = @json($forecasts['summary']['varieties_breakdown']);
const varietyNames = Object.keys(varietyData);
const varietyYields = Object.values(varietyData).map(v => v.total_yield);
const varietyValues = Object.values(varietyData).map(v => v.total_value);

const yieldByVarietyCtx = document.getElementById('yieldByVarietyChart').getContext('2d');
new Chart(yieldByVarietyCtx, {
    type: 'doughnut',
    data: {
        labels: varietyNames,
        datasets: [{
            data: varietyYields,
            backgroundColor: [
                chartColors.purple,
                chartColors.green,
                chartColors.orange,
                chartColors.red,
                chartColors.blue,
                '#9C27B0',
                '#4CAF50',
                '#FF9800'
            ],
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: { size: 12 }
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                        const percentage = ((context.parsed / total) * 100).toFixed(1);
                        return `${context.label}: ${context.parsed.toFixed(1)}lbs (${percentage}%)`;
                    }
                }
            }
        }
    }
});

// Plant Age Distribution Chart
const forecasts = @json($forecasts['individual_forecasts']);
const ageGroups = {
    'Year 1 (0-1 years)': forecasts.filter(f => f.plant_age < 1).length,
    'Year 2 (1-2 years)': forecasts.filter(f => f.plant_age >= 1 && f.plant_age < 2).length,
    'Year 3 (2-3 years)': forecasts.filter(f => f.plant_age >= 2 && f.plant_age < 3).length,
    'Mature (3+ years)': forecasts.filter(f => f.plant_age >= 3).length
};

const plantAgeCtx = document.getElementById('plantAgeChart').getContext('2d');
new Chart(plantAgeCtx, {
    type: 'bar',
    data: {
        labels: Object.keys(ageGroups),
        datasets: [{
            label: 'Number of Plants',
            data: Object.values(ageGroups),
            backgroundColor: [
                'rgba(255, 143, 0, 0.7)',
                'rgba(106, 27, 154, 0.7)',
                'rgba(56, 142, 60, 0.7)',
                'rgba(25, 118, 210, 0.7)'
            ],
            borderColor: [
                chartColors.orange,
                chartColors.purple,
                chartColors.green,
                chartColors.blue
            ],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Number of Plants'
                }
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

// Health Score Impact Chart
const healthGroups = {
    'Excellent (8-10)': forecasts.filter(f => f.health_score >= 8).length,
    'Good (6-7.9)': forecasts.filter(f => f.health_score >= 6 && f.health_score < 8).length,
    'Fair (4-5.9)': forecasts.filter(f => f.health_score >= 4 && f.health_score < 6).length,
    'Poor (1-3.9)': forecasts.filter(f => f.health_score < 4).length
};

const healthScoreCtx = document.getElementById('healthScoreChart').getContext('2d');
new Chart(healthScoreCtx, {
    type: 'doughnut',
    data: {
        labels: Object.keys(healthGroups),
        datasets: [{
            data: Object.values(healthGroups),
            backgroundColor: [
                'rgba(56, 142, 60, 0.8)',
                'rgba(255, 143, 0, 0.8)',
                'rgba(255, 193, 7, 0.8)',
                'rgba(198, 40, 40, 0.8)'
            ],
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 15,
                    font: { size: 12 }
                }
            }
        }
    }
});

// Harvest Timeline Chart (Simplified)
const harvestMonths = ['June', 'July', 'August', 'September', 'October'];
const summerVarieties = varietyNames.filter(name => name.includes('Ark') || name.includes('Ouachita')).length;
const fallVarieties = varietyNames.filter(name => name.includes('Freedom') || name.includes('Traveler')).length;

const harvestTimelineCtx = document.getElementById('harvestTimelineChart').getContext('2d');
new Chart(harvestTimelineCtx, {
    type: 'line',
    data: {
        labels: harvestMonths,
        datasets: [{
            label: 'Summer Varieties',
            data: [summerVarieties * 20, summerVarieties * 60, summerVarieties * 80, summerVarieties * 40, summerVarieties * 10],
            backgroundColor: 'rgba(56, 142, 60, 0.1)',
            borderColor: chartColors.green,
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }, {
            label: 'Fall Varieties',
            data: [fallVarieties * 5, fallVarieties * 10, fallVarieties * 30, fallVarieties * 70, fallVarieties * 60],
            backgroundColor: 'rgba(106, 27, 154, 0.1)',
            borderColor: chartColors.purple,
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Estimated Yield (%)'
                }
            }
        },
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>
@endpush