@extends('layouts.app')
@section('title', 'Monte Carlo Simulation - Blackberry Farm Analytics')
@section('content')

    <!-- Page Header -->
    <div class="page-header">
        <h1>🎲 Monte Carlo Risk Simulation</h1>
        <p>Advanced probabilistic analysis using thousands of scenarios to assess investment risk</p>
        <p class="subtitle">Statistical modeling for uncertainty and risk management</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/scenario-comparison" class="touch-btn touch-btn-info">🎯 Scenario Comparison</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>
    </div>

    <!-- Simulation Parameters -->
    <div class="mobile-card">
        <h3>⚙️ Simulation Parameters</h3>
        <form method="GET" action="/analytics/monte-carlo" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
                <div>
                    <label for="plant_count" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🌱 Plant Count
                    </label>
                    <input type="number" name="plant_count" id="plant_count" 
                           value="{{ $plantCount }}" 
                           min="100" max="50000" step="100"
                           class="form-control" 
                           style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                </div>
                
                <div>
                    <label for="years" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📅 Years to Simulate
                    </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="iterations" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🔄 Iterations
                    </label>
                    <select name="iterations" id="iterations" class="form-control" style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                        <option value="500" {{ $iterations == 500 ? 'selected' : '' }}>500 (Fast)</option>
                        <option value="1000" {{ $iterations == 1000 ? 'selected' : '' }}>1,000 (Standard)</option>
                        <option value="5000" {{ $iterations == 5000 ? 'selected' : '' }}>5,000 (Detailed)</option>
                        <option value="10000" {{ $iterations == 10000 ? 'selected' : '' }}>10,000 (Comprehensive)</option>
                    </select>
                </div>
                
                <div style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-purple" style="width: 100%;">
                        🎲 Run Simulation
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Simulation Results Overview -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ number_format($simulationData['iterations']) }}</div>
            <div class="stat-label">Scenarios Tested</div>
            <div class="stat-trend">Monte Carlo runs</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ number_format($simulationData['statistics']['mean_roi'], 1) }}%</div>
            <div class="stat-label">Average ROI</div>
            <div class="stat-trend">Expected outcome</div>
        </div>
        <div class="stat-card blue">
            <div class="stat-number">{{ number_format($simulationData['statistics']['median_roi'], 1) }}%</div>
            <div class="stat-label">Median ROI</div>
            <div class="stat-trend">50th percentile</div>
        </div>
        <div class="stat-card {{ $simulationData['statistics']['probability_positive'] >= 80 ? 'green' : ($simulationData['statistics']['probability_positive'] >= 60 ? 'orange' : 'purple') }}">
            <div class="stat-number">{{ number_format($simulationData['statistics']['probability_positive'], 1) }}%</div>
            <div class="stat-label">Success Probability</div>
            <div class="stat-trend">Positive ROI chance</div>
        </div>
    </div>

    <!-- Risk Assessment Summary -->
    <div class="mobile-card">
        <h3>📊 Risk Assessment Summary</h3>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
            
            <!-- Best Case Scenario -->
            <div class="stat-card green">
                <h4>🎯 Best Case (95th Percentile)</h4>
                <div style="margin: 15px 0;">
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>ROI:</span>
                        <strong style="color: var(--leaf-green);">{{ number_format($simulationData['statistics']['percentile_95'], 1) }}%</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Probability:</span>
                        <strong>5% chance of exceeding</strong>
                    </div>
                </div>
                <div style="background: rgba(255,255,255,0.5); padding: 10px; border-radius: 6px; margin-top: 15px;">
                    <small><strong>Scenario:</strong> Optimal conditions with high yields, premium pricing, and low costs</small>
                </div>
            </div>

            <!-- Expected Case -->
            <div class="stat-card blue">
                <h4>📈 Expected Case (Average)</h4>
                <div style="margin: 15px 0;">
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>ROI:</span>
                        <strong style="color: var(--sky-blue);">{{ number_format($simulationData['statistics']['mean_roi'], 1) }}%</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Std Deviation:</span>
                        <strong>±{{ number_format($simulationData['statistics']['std_dev'], 1) }}%</strong>
                    </div>
                </div>
                <div style="background: rgba(255,255,255,0.5); padding: 10px; border-radius: 6px; margin-top: 15px;">
                    <small><strong>Scenario:</strong> Most likely outcome based on current assumptions and typical variations</small>
                </div>
            </div>

            <!-- Worst Case Scenario -->
            <div class="stat-card orange">
                <h4>⚠️ Worst Case (5th Percentile)</h4>
                <div style="margin: 15px 0;">
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>ROI:</span>
                        <strong style="color: var(--warning);">{{ number_format($simulationData['statistics']['percentile_5'], 1) }}%</strong>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin: 10px 0;">
                        <span>Probability:</span>
                        <strong>5% chance of falling below</strong>
                    </div>
                </div>
                <div style="background: rgba(255,255,255,0.5); padding: 10px; border-radius: 6px; margin-top: 15px;">
                    <small><strong>Scenario:</strong> Adverse conditions with low yields, poor pricing, and high costs</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistical Distribution -->
    <div class="mobile-card">
        <h3>📊 ROI Distribution Analysis</h3>
        <div style="margin: 30px 0;">
            <div style="position: relative; height: 400px;">
                <canvas id="distributionChart"></canvas>
            </div>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;">
            <div style="text-align: center; padding: 15px; background: rgba(76, 175, 80, 0.1); border-radius: 8px;">
                <div style="font-size: 1.2em; font-weight: bold; color: var(--leaf-green);">{{ number_format($simulationData['statistics']['max_roi'], 1) }}%</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">Maximum ROI</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(106, 27, 154, 0.1); border-radius: 8px;">
                <div style="font-size: 1.2em; font-weight: bold; color: var(--blackberry-purple);">{{ number_format($simulationData['statistics']['median_roi'], 1) }}%</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">Median ROI</div>
            </div>
            <div style="text-align: center; padding: 15px; background: rgba(255, 143, 0, 0.1); border-radius: 8px;">
                <div style="font-size: 1.2em; font-weight: bold; color: var(--warning);">{{ number_format($simulationData['statistics']['min_roi'], 1) }}%</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">Minimum ROI</div>
            </div>
        </div>
    </div>

    <!-- Risk Categories -->
    <div class="mobile-card">
        <h3>🎯 Probability Analysis</h3>
        
        @php
            $results = collect($simulationData['results']);
            $profitable = $results->where('roi', '>', 0)->count();
            $highReturn = $results->where('roi', '>', 15)->count();
            $veryHighReturn = $results->where('roi', '>', 25)->count();
            $losses = $results->where('roi', '<', 0)->count();
            $total = $results->count();
        @endphp
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0;">
            <div style="padding: 20px; background: rgba(76, 175, 80, 0.1); border-radius: 12px; border-left: 4px solid var(--leaf-green);">
                <h4 style="color: var(--leaf-green); margin-bottom: 10px;">💚 Profitable Scenarios</h4>
                <div style="font-size: 2em; font-weight: bold; color: var(--leaf-green);">{{ number_format(($profitable / $total) * 100, 1) }}%</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">{{ number_format($profitable) }} out of {{ number_format($total) }} scenarios</div>
                <div style="margin-top: 10px; font-size: 0.9em;">ROI > 0%</div>
            </div>

            <div style="padding: 20px; background: rgba(106, 27, 154, 0.1); border-radius: 12px; border-left: 4px solid var(--blackberry-purple);">
                <h4 style="color: var(--blackberry-purple); margin-bottom: 10px;">💜 High Return Scenarios</h4>
                <div style="font-size: 2em; font-weight: bold; color: var(--blackberry-purple);">{{ number_format(($highReturn / $total) * 100, 1) }}%</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">{{ number_format($highReturn) }} out of {{ number_format($total) }} scenarios</div>
                <div style="margin-top: 10px; font-size: 0.9em;">ROI > 15%</div>
            </div>

            <div style="padding: 20px; background: rgba(255, 143, 0, 0.1); border-radius: 12px; border-left: 4px solid var(--warning);">
                <h4 style="color: var(--warning); margin-bottom: 10px;">🧡 Exceptional Returns</h4>
                <div style="font-size: 2em; font-weight: bold; color: var(--warning);">{{ number_format(($veryHighReturn / $total) * 100, 1) }}%</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">{{ number_format($veryHighReturn) }} out of {{ number_format($total) }} scenarios</div>
                <div style="margin-top: 10px; font-size: 0.9em;">ROI > 25%</div>
            </div>

            <div style="padding: 20px; background: rgba(198, 40, 40, 0.1); border-radius: 12px; border-left: 4px solid var(--berry-red);">
                <h4 style="color: var(--berry-red); margin-bottom: 10px;">❤️ Loss Scenarios</h4>
                <div style="font-size: 2em; font-weight: bold; color: var(--berry-red);">{{ number_format(($losses / $total) * 100, 1) }}%</div>
                <div style="font-size: 0.9em; color: var(--soil-brown);">{{ number_format($losses) }} out of {{ number_format($total) }} scenarios</div>
                <div style="margin-top: 10px; font-size: 0.9em;">ROI < 0%</div>
            </div>
        </div>
    </div>

    <!-- Investment Recommendation -->
    <div class="mobile-card" style="background: {{ $simulationData['statistics']['probability_positive'] >= 80 ? 'rgba(76, 175, 80, 0.05)' : ($simulationData['statistics']['probability_positive'] >= 60 ? 'rgba(255, 143, 0, 0.05)' : 'rgba(198, 40, 40, 0.05)') }}; border-left: 4px solid {{ $simulationData['statistics']['probability_positive'] >= 80 ? 'var(--leaf-green)' : ($simulationData['statistics']['probability_positive'] >= 60 ? 'var(--warning)' : 'var(--berry-red)') }};">
        <h3 style="color: {{ $simulationData['statistics']['probability_positive'] >= 80 ? 'var(--leaf-green)' : ($simulationData['statistics']['probability_positive'] >= 60 ? 'var(--warning)' : 'var(--berry-red)') }};">
            {{ $simulationData['statistics']['probability_positive'] >= 80 ? '✅' : ($simulationData['statistics']['probability_positive'] >= 60 ? '⚠️' : '❌') }} 
            Investment Recommendation
        </h3>
        <div style="margin: 15px 0;">
            @if($simulationData['statistics']['probability_positive'] >= 80)
                <h4 style="color: var(--leaf-green);">RECOMMENDED INVESTMENT</h4>
                <p>This scenario shows strong probability of success with {{ number_format($simulationData['statistics']['probability_positive'], 1) }}% chance of positive returns. The expected ROI of {{ number_format($simulationData['statistics']['mean_roi'], 1) }}% indicates a solid investment opportunity.</p>
            @elseif($simulationData['statistics']['probability_positive'] >= 60)
                <h4 style="color: var(--warning);">MODERATE RISK INVESTMENT</h4>
                <p>This scenario shows moderate risk with {{ number_format($simulationData['statistics']['probability_positive'], 1) }}% chance of positive returns. Consider risk mitigation strategies and ensure you're comfortable with the {{ number_format(100 - $simulationData['statistics']['probability_positive'], 1) }}% chance of losses.</p>
            @else
                <h4 style="color: var(--berry-red);">HIGH RISK INVESTMENT</h4>
                <p>This scenario shows high risk with only {{ number_format($simulationData['statistics']['probability_positive'], 1) }}% chance of positive returns. Consider reducing plant count, improving efficiency, or reconsidering the investment timing.</p>
            @endif
            
            <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin-top: 15px;">
                <strong>Key Risk Factors:</strong>
                <ul style="margin: 10px 0; padding-left: 15px;">
                    <li>Yield variation: ±15% (weather, pests, management)</li>
                    <li>Price variation: ±20% (market conditions, competition)</li>
                    <li>Cost variation: ±10% (input prices, labor costs)</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Simulation Configuration -->
    <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;">⚙️ Simulation Assumptions</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);">Base Parameters:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>{{ number_format($plantCount) }} plants analyzed</li>
                    <li>{{ $years }} year projection</li>
                    <li>{{ number_format($iterations) }} Monte Carlo iterations</li>
                </ul>
            </div>
            <div>
                <h5 style="color: var(--soil-brown);">Variation Assumptions:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>Yield: ±15% normal distribution</li>
                    <li>Price: ±20% normal distribution</li>
                    <li>Costs: ±10% normal distribution</li>
                </ul>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Monte Carlo simulation data
const simulationData = @json($simulationData);
const rois = simulationData.results.map(result => result.roi);

// Create histogram data
function createHistogram(data, bins = 30) {
    const min = Math.min(...data);
    const max = Math.max(...data);
    const binWidth = (max - min) / bins;
    
    const histogram = Array(bins).fill(0);
    const labels = [];
    
    for (let i = 0; i < bins; i++) {
        labels.push((min + i * binWidth).toFixed(1));
    }
    
    data.forEach(value => {
        const binIndex = Math.min(Math.floor((value - min) / binWidth), bins - 1);
        histogram[binIndex]++;
    });
    
    return { histogram, labels };
}

const { histogram, labels } = createHistogram(rois);

// ROI Distribution Chart
const distributionCtx = document.getElementById('distributionChart').getContext('2d');
new Chart(distributionCtx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Frequency',
            data: histogram,
            backgroundColor: 'rgba(106, 27, 154, 0.7)',
            borderColor: '#6A1B9A',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: `ROI Distribution from ${simulationData.iterations.toLocaleString()} Monte Carlo Simulations`,
                font: { size: 16, weight: 'bold' }
            },
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'ROI (%)'
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'Frequency'
                }
            }
        }
    }
});

// Add statistical lines
const meanROI = simulationData.statistics.mean_roi;
const medianROI = simulationData.statistics.median_roi;
const percentile5 = simulationData.statistics.percentile_5;
const percentile95 = simulationData.statistics.percentile_95;

// You could add vertical lines for key statistics here if needed
</script>
@endpush