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

    <!-- Page Header -->
    <div class="page-header">
        <h1>🎯 Scenario Comparison Tool</h1>
        <p>Compare different expansion scenarios side-by-side with customizable parameters</p>
        <p class="subtitle">Strategic planning with visual ROI analysis and risk assessment</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/break-even" class="touch-btn touch-btn-success">⚖️ Break-Even Analysis</a>
        <a href="/analytics/sensitivity" class="touch-btn touch-btn-warning">📊 Sensitivity Analysis</a>
        <a href="/analytics/monte-carlo" class="touch-btn touch-btn-info">🎲 Monte Carlo</a>
    </div>

    <!-- Scenario Configuration -->
    <div class="mobile-card">
        <h3>⚙️ Scenario Parameters</h3>
        <form method="GET" action="/analytics/scenario-comparison" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
                <div>
                    <label for="years" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 Projection Years
                    </label>
                    <select name="years" id="years" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="3" {{ $years == 3 ? 'selected' : '' }}>3 Years</option>
                        <option value="5" {{ $years == 5 ? 'selected' : '' }}>5 Years</option>
                        <option value="10" {{ $years == 10 ? 'selected' : '' }}>10 Years</option>
                    </select>
                </div>
                
                <div>
                    <label for="plant_counts" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🌱 Plant Counts to Compare
                    </label>
                    <input type="text" name="plant_counts" id="plant_counts" 
                           value="{{ implode(',', $plantCounts) }}" 
                           placeholder="1000,5000,10000"
                           class="form-control" 
                           style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                    <small class="text-muted">Comma-separated values</small>
                </div>
                
                <div style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-success" style="width: 100%;">
                        🔄 Update Scenarios
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Standard Scenarios Comparison -->
    <div class="mobile-card">
        <h3>📊 Standard Growth Scenarios</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            @foreach($scenarios as $key => $scenario)
            <div class="stat-card {{ $key === 'conservative' ? 'blue' : ($key === 'moderate' ? 'green' : 'orange') }}">
                <h4 style="text-transform: capitalize;">{{ $key }} Scenario</h4>
                <div style="margin: 15px 0;">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                        <div>
                            <div class="stat-number" style="font-size: 1.2em;">{{ $scenario['summary']['avg_roi'] }}%</div>
                            <div class="stat-label" style="font-size: 0.8em;">Average ROI</div>
                        </div>
                        <div>
                            <div class="stat-number" style="font-size: 1.2em;">{{ number_format($scenario['summary']['final_plant_count']) }}</div>
                            <div class="stat-label" style="font-size: 0.8em;">Final Plants</div>
                        </div>
                        <div>
                            <div class="stat-number" style="font-size: 1.0em;">${{ number_format($scenario['summary']['total_revenue']) }}</div>
                            <div class="stat-label" style="font-size: 0.8em;">Total Revenue</div>
                        </div>
                        <div>
                            <div class="stat-number" style="font-size: 1.0em;">${{ number_format($scenario['summary']['total_profit']) }}</div>
                            <div class="stat-label" style="font-size: 0.8em;">Total Profit</div>
                        </div>
                    </div>
                    <div style="margin-top: 15px; padding: 10px; background: rgba(255,255,255,0.5); border-radius: 6px;">
                        <small>
                            <strong>Parameters:</strong><br>
                            Air Layering: {{ $scenario['scenario_config']['air_layering_rate'] }}% | 
                            Mortality: {{ $scenario['scenario_config']['mortality_rate'] }}% | 
                            Yield: {{ $scenario['scenario_config']['yield_multiplier'] }}x
                        </small>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Custom Plant Count Scenarios -->
    <div class="mobile-card">
        <h3>🎯 Custom Plant Count Analysis</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            @foreach($customScenarios as $key => $scenario)
            <div class="stat-card today">
                <h4>{{ $scenario['name'] }}</h4>
                <div style="margin: 15px 0;">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                        <div>
                            <div class="stat-number" style="font-size: 1.2em;">{{ number_format($scenario['roi']['roi_percentage'], 1) }}%</div>
                            <div class="stat-label" style="font-size: 0.8em;">ROI</div>
                        </div>
                        <div>
                            <div class="stat-number" style="font-size: 1.2em;">${{ number_format($scenario['roi']['revenue_per_plant'], 0) }}</div>
                            <div class="stat-label" style="font-size: 0.8em;">Revenue/Plant</div>
                        </div>
                        <div>
                            <div class="stat-number" style="font-size: 1.0em;">${{ number_format($scenario['roi']['annual_revenue']) }}</div>
                            <div class="stat-label" style="font-size: 0.8em;">Annual Revenue</div>
                        </div>
                        <div>
                            <div class="stat-number" style="font-size: 1.0em;">${{ number_format($scenario['roi']['annual_profit']) }}</div>
                            <div class="stat-label" style="font-size: 0.8em;">Annual Profit</div>
                        </div>
                    </div>
                    <div style="margin-top: 15px; padding: 10px; background: rgba(106, 27, 154, 0.1); border-radius: 6px;">
                        <small>
                            <strong>Breakdown:</strong><br>
                            Operating: ${{ number_format($scenario['roi']['operating_costs']) }} | 
                            Labor: ${{ number_format($scenario['roi']['labor_costs']) }} | 
                            Cost/Plant: ${{ number_format($scenario['roi']['cost_per_plant']) }}
                        </small>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- ROI Comparison Chart -->
    <div class="mobile-card">
        <h3>📈 ROI Comparison Visualization</h3>
        <div style="margin: 30px 0;">
            <div style="position: relative; height: 400px;">
                <canvas id="roiComparisonChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Plant Count vs ROI Chart -->
    <div class="mobile-card">
        <h3>🌱 Plant Count vs ROI Analysis</h3>
        <div style="margin: 30px 0;">
            <div style="position: relative; height: 400px;">
                <canvas id="plantCountROIChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Revenue and Profit Comparison -->
    <div class="mobile-card">
        <h3>💰 Revenue & Profit Comparison</h3>
        <div style="margin: 30px 0;">
            <div style="position: relative; height: 400px;">
                <canvas id="revenueProfitChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Current Configuration Display -->
    <div class="mobile-card" style="background: rgba(56, 142, 60, 0.05); border-left: 4px solid var(--leaf-green);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
            <h3 style="color: var(--leaf-green); margin: 0;">⚙️ Current Configuration</h3>
            <a href="/config/projections" class="touch-btn touch-btn-info" style="font-size: 0.9em; padding: 8px 16px;">
                🔧 Modify Parameters
            </a>
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
            <div>
                <h5 style="color: var(--soil-brown);">Revenue Parameters:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>Yield: {{ $config['revenue']['yield_per_plant_lbs'] }} lbs/plant</li>
                    <li>Price: ${{ number_format($config['revenue']['market_price_per_lb'], 2) }}/lb</li>
                    <li>Harvest: {{ $config['revenue']['harvest_season_weeks'] }} weeks</li>
                </ul>
            </div>
            <div>
                <h5 style="color: var(--soil-brown);">Cost Parameters:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>Operating: ${{ number_format($config['operating_costs']['current_scale_per_plant']) }}/plant</li>
                    <li>Labor: {{ $config['labor']['hours_per_plant_per_year'] }}h @ ${{ number_format($config['labor']['hourly_rate']) }}/h</li>
                    <li>Setup: ${{ number_format($config['setup_costs']['small_expansion_per_plant']) }}/plant</li>
                </ul>
            </div>
            <div>
                <h5 style="color: var(--soil-brown);">Growth Parameters:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>Air Layering: {{ $config['growth']['air_layering_success_rate'] }}%</li>
                    <li>Mortality: {{ $config['growth']['plant_mortality_rate'] }}%</li>
                    <li>Density: {{ $config['growth']['plants_per_acre'] }}/acre</li>
                </ul>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js Configuration
const chartColors = {
    conservative: '#2196F3',
    moderate: '#4CAF50', 
    aggressive: '#FF9800',
    custom1: '#9C27B0',
    custom2: '#607D8B',
    custom3: '#795548'
};

// Data preparation
const scenarios = @json($scenarios);
const customScenarios = @json($customScenarios);

// ROI Comparison Chart
const roiComparisonCtx = document.getElementById('roiComparisonChart').getContext('2d');
new Chart(roiComparisonCtx, {
    type: 'bar',
    data: {
        labels: [
            'Conservative', 'Moderate', 'Aggressive',
            ...Object.values(customScenarios).map(s => s.name)
        ],
        datasets: [{
            label: 'ROI (%)',
            data: [
                scenarios.conservative.summary.avg_roi,
                scenarios.moderate.summary.avg_roi,
                scenarios.aggressive.summary.avg_roi,
                ...Object.values(customScenarios).map(s => s.roi.roi_percentage)
            ],
            backgroundColor: [
                chartColors.conservative,
                chartColors.moderate,
                chartColors.aggressive,
                chartColors.custom1,
                chartColors.custom2,
                chartColors.custom3
            ].slice(0, 3 + Object.keys(customScenarios).length),
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'ROI Comparison Across All Scenarios',
                font: { size: 16, weight: 'bold' }
            },
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'ROI (%)'
                }
            }
        }
    }
});

// Plant Count vs ROI Chart
const plantCounts = Object.values(customScenarios).map(s => s.plant_count);
const rois = Object.values(customScenarios).map(s => s.roi.roi_percentage);

const plantCountROICtx = document.getElementById('plantCountROIChart').getContext('2d');
new Chart(plantCountROICtx, {
    type: 'line',
    data: {
        labels: plantCounts,
        datasets: [{
            label: 'ROI vs Plant Count',
            data: rois,
            borderColor: chartColors.moderate,
            backgroundColor: 'rgba(76, 175, 80, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: chartColors.moderate,
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'ROI Performance by Plant Count',
                font: { size: 16, weight: 'bold' }
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Number of Plants'
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'ROI (%)'
                }
            }
        }
    }
});

// Revenue and Profit Comparison Chart
const revenueProfitCtx = document.getElementById('revenueProfitChart').getContext('2d');
new Chart(revenueProfitCtx, {
    type: 'bar',
    data: {
        labels: Object.values(customScenarios).map(s => s.name),
        datasets: [{
            label: 'Annual Revenue',
            data: Object.values(customScenarios).map(s => s.roi.annual_revenue),
            backgroundColor: 'rgba(76, 175, 80, 0.7)',
            borderColor: chartColors.moderate,
            borderWidth: 2
        }, {
            label: 'Annual Profit',
            data: Object.values(customScenarios).map(s => s.roi.annual_profit),
            backgroundColor: 'rgba(156, 39, 176, 0.7)',
            borderColor: chartColors.custom1,
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'Revenue vs Profit by Scenario',
                font: { size: 16, weight: 'bold' }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Amount ($)'
                },
                ticks: {
                    callback: function(value) {
                        return '$' + value.toLocaleString();
                    }
                }
            }
        }
    }
});
</script>
@endpush