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

    <!-- Page Header -->
    <div class="page-header">
        <h1>📊 Sensitivity Analysis</h1>
        <p>Understand which variables have the greatest impact on your ROI and profitability</p>
        <p class="subtitle">Risk assessment and factor importance ranking</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/monte-carlo" class="touch-btn touch-btn-purple">🎲 Monte Carlo</a>
    </div>

    <!-- Analysis Parameters -->
    <div class="mobile-card">
        <h3>⚙️ Sensitivity Parameters</h3>
        <form method="GET" action="/analytics/sensitivity" style="margin: 20px 0;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                <div>
                    <label for="base_plants" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        🌱 Base Plant Count
                    </label>
                    <input type="number" name="base_plants" id="base_plants" 
                           value="{{ $baseScenario }}" 
                           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="variation" style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--soil-brown);">
                        📈 Variation Range (±%)
                    </label>
                    <input type="number" name="variation" id="variation" 
                           value="{{ $variationPercent }}" 
                           min="5" max="50" step="5"
                           class="form-control" 
                           style="width: 100%; padding: 12px; border: 2px solid var(--medium-gray); border-radius: 8px;">
                </div>
                
                <div style="align-self: end;">
                    <button type="submit" class="touch-btn touch-btn-success" style="width: 100%;">
                        🔄 Recalculate Analysis
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Analysis Overview -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">{{ number_format($baseScenario) }}</div>
            <div class="stat-label">Base Scenario</div>
            <div class="stat-trend">Plant count analyzed</div>
        </div>
        <div class="stat-card blue">
            <div class="stat-number">±{{ $variationPercent }}%</div>
            <div class="stat-label">Variation Range</div>
            <div class="stat-trend">Factor sensitivity</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ count($sensitivityData) }}</div>
            <div class="stat-label">Variables Tested</div>
            <div class="stat-trend">Impact factors</div>
        </div>
        <div class="stat-card orange">
            <div class="stat-number">{{ number_format(max(array_column($sensitivityData, 'impact_range')), 1) }}%</div>
            <div class="stat-label">Max ROI Impact</div>
            <div class="stat-trend">Highest variable</div>
        </div>
    </div>

    <!-- Sensitivity Rankings -->
    <div class="mobile-card">
        <h3>🏆 Variable Impact Rankings</h3>
        <p style="margin: 15px 0; color: var(--soil-brown);">
            Variables ranked by their impact on ROI when changed by ±{{ $variationPercent }}%. 
            Higher sensitivity means the variable has more influence on your profitability.
        </p>
        
        <div style="margin: 20px 0;">
            @foreach($sensitivityData as $key => $data)
            <div style="margin-bottom: 20px; padding: 20px; background: rgba(106, 27, 154, 0.05); border-radius: 12px; border-left: 4px solid {{ $loop->index < 2 ? 'var(--berry-red)' : ($loop->index < 4 ? 'var(--warning)' : 'var(--leaf-green)') }};">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <h4 style="margin: 0; color: var(--blackberry-purple);">
                        #{{ $loop->iteration }} {{ $data['label'] }}
                    </h4>
                    <div style="text-align: right;">
                        <div style="font-size: 1.2em; font-weight: bold; color: {{ $loop->index < 2 ? 'var(--berry-red)' : ($loop->index < 4 ? 'var(--warning)' : 'var(--leaf-green)') }};">
                            {{ number_format($data['sensitivity_index'], 1) }}
                        </div>
                        <div style="font-size: 0.8em; color: var(--soil-brown);">Sensitivity Index</div>
                    </div>
                </div>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin: 15px 0;">
                    <div>
                        <div style="font-size: 0.9em; color: var(--soil-brown);">Base Value:</div>
                        <div style="font-weight: bold;">{{ is_float($data['base_value']) ? number_format($data['base_value'], 2) : number_format($data['base_value']) }}</div>
                    </div>
                    <div>
                        <div style="font-size: 0.9em; color: var(--soil-brown);">Low Value ({{ $variationPercent }}%):</div>
                        <div style="font-weight: bold;">{{ is_float($data['low_value']) ? number_format($data['low_value'], 2) : number_format($data['low_value']) }}</div>
                    </div>
                    <div>
                        <div style="font-size: 0.9em; color: var(--soil-brown);">High Value (+{{ $variationPercent }}%):</div>
                        <div style="font-weight: bold;">{{ is_float($data['high_value']) ? number_format($data['high_value'], 2) : number_format($data['high_value']) }}</div>
                    </div>
                    <div>
                        <div style="font-size: 0.9em; color: var(--soil-brown);">ROI Range:</div>
                        <div style="font-weight: bold; color: {{ $data['impact_range'] > 10 ? 'var(--berry-red)' : ($data['impact_range'] > 5 ? 'var(--warning)' : 'var(--leaf-green)') }};">
                            {{ number_format($data['low_roi'], 1) }}% to {{ number_format($data['high_roi'], 1) }}%
                        </div>
                    </div>
                </div>
                
                <!-- ROI Impact Bar -->
                <div style="margin: 15px 0;">
                    <div style="font-size: 0.9em; color: var(--soil-brown); margin-bottom: 5px;">ROI Impact Range: {{ number_format($data['impact_range'], 1) }}%</div>
                    <div style="background: #E0E0E0; height: 8px; border-radius: 4px; overflow: hidden;">
                        <div style="background: linear-gradient(90deg, {{ $loop->index < 2 ? 'var(--berry-red)' : ($loop->index < 4 ? 'var(--warning)' : 'var(--leaf-green)') }}, {{ $loop->index < 2 ? '#FF6B6B' : ($loop->index < 4 ? '#FFD93D' : '#6BCF7F') }}); height: 100%; width: {{ min(100, ($data['impact_range'] / max(array_column($sensitivityData, 'impact_range'))) * 100) }}%; transition: width 0.5s ease;"></div>
                    </div>
                </div>
                
                <div style="background: rgba(255,255,255,0.7); padding: 10px; border-radius: 6px; margin-top: 15px;">
                    <strong style="color: {{ $loop->index < 2 ? 'var(--berry-red)' : ($loop->index < 4 ? 'var(--warning)' : 'var(--leaf-green)') }};">
                        {{ $loop->index < 2 ? 'HIGH IMPACT' : ($loop->index < 4 ? 'MEDIUM IMPACT' : 'LOW IMPACT') }}:
                    </strong>
                    <span style="font-size: 0.9em;">
                        @if($loop->index < 2)
                            Focus management attention here. Small changes have big effects.
                        @elseif($loop->index < 4)
                            Important factor. Monitor and optimize when possible.
                        @else
                            Lower priority. Changes have minimal ROI impact.
                        @endif
                    </span>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Tornado Chart -->
    <div class="mobile-card">
        <h3>🌪️ Tornado Chart - ROI Sensitivity</h3>
        <p style="margin: 15px 0; color: var(--soil-brown);">
            Visual representation of how each variable affects ROI. Longer bars indicate higher impact variables.
        </p>
        <div style="margin: 30px 0;">
            <div style="position: relative; height: 500px;">
                <canvas id="tornadoChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Sensitivity Matrix -->
    <div class="mobile-card">
        <h3>📋 Detailed Sensitivity Matrix</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: 15px; text-align: left;">Variable</th>
                        <th style="padding: 15px; text-align: left;">Base Value</th>
                        <th style="padding: 15px; text-align: left;">Low Scenario</th>
                        <th style="padding: 15px; text-align: left;">High Scenario</th>
                        <th style="padding: 15px; text-align: left;">Base ROI</th>
                        <th style="padding: 15px; text-align: left;">Low ROI</th>
                        <th style="padding: 15px; text-align: left;">High ROI</th>
                        <th style="padding: 15px; text-align: left;">Impact Range</th>
                        <th style="padding: 15px; text-align: left;">Sensitivity Index</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sensitivityData as $key => $data)
                    <tr style="border-bottom: 1px solid #E0E0E0;">
                        <td style="padding: 15px; font-weight: bold; color: var(--blackberry-purple);">{{ $data['label'] }}</td>
                        <td style="padding: 15px;">{{ is_float($data['base_value']) ? number_format($data['base_value'], 2) : number_format($data['base_value']) }}</td>
                        <td style="padding: 15px;">{{ is_float($data['low_value']) ? number_format($data['low_value'], 2) : number_format($data['low_value']) }}</td>
                        <td style="padding: 15px;">{{ is_float($data['high_value']) ? number_format($data['high_value'], 2) : number_format($data['high_value']) }}</td>
                        <td style="padding: 15px; color: var(--blackberry-purple); font-weight: bold;">{{ number_format($data['base_roi'], 1) }}%</td>
                        <td style="padding: 15px; color: var(--berry-red);">{{ number_format($data['low_roi'], 1) }}%</td>
                        <td style="padding: 15px; color: var(--leaf-green);">{{ number_format($data['high_roi'], 1) }}%</td>
                        <td style="padding: 15px;">
                            <span style="color: {{ $data['impact_range'] > 10 ? 'var(--berry-red)' : ($data['impact_range'] > 5 ? 'var(--warning)' : 'var(--leaf-green)') }}; font-weight: bold;">
                                {{ number_format($data['impact_range'], 1) }}%
                            </span>
                        </td>
                        <td style="padding: 15px;">
                            <span style="color: {{ $data['sensitivity_index'] > 2 ? 'var(--berry-red)' : ($data['sensitivity_index'] > 1 ? 'var(--warning)' : 'var(--leaf-green)') }}; font-weight: bold;">
                                {{ number_format($data['sensitivity_index'], 2) }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Risk Assessment -->
    <div class="mobile-card" style="background: rgba(198, 40, 40, 0.05); border-left: 4px solid var(--berry-red);">
        <h3 style="color: var(--berry-red);">⚠️ Risk Assessment</h3>
        <div style="margin: 15px 0;">
            @php
                $highImpactVars = array_filter($sensitivityData, fn($data) => $data['sensitivity_index'] > 2);
                $mediumImpactVars = array_filter($sensitivityData, fn($data) => $data['sensitivity_index'] > 1 && $data['sensitivity_index'] <= 2);
            @endphp
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                <div>
                    <h5 style="color: var(--berry-red);">🔴 High Risk Variables ({{ count($highImpactVars) }}):</h5>
                    <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                        @foreach($highImpactVars as $var)
                        <li>{{ $var['label'] }} - {{ number_format($var['sensitivity_index'], 1) }} impact</li>
                        @endforeach
                        @if(empty($highImpactVars))
                        <li style="color: var(--leaf-green);">None - Low risk profile</li>
                        @endif
                    </ul>
                </div>
                <div>
                    <h5 style="color: var(--warning);">🟡 Medium Risk Variables ({{ count($mediumImpactVars) }}):</h5>
                    <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                        @foreach($mediumImpactVars as $var)
                        <li>{{ $var['label'] }} - {{ number_format($var['sensitivity_index'], 1) }} impact</li>
                        @endforeach
                        @if(empty($mediumImpactVars))
                        <li style="color: var(--leaf-green);">None - Very stable scenario</li>
                        @endif
                    </ul>
                </div>
            </div>
            
            <div style="background: rgba(255,255,255,0.7); padding: 15px; border-radius: 8px; margin-top: 20px;">
                <p style="margin: 0; font-size: 0.9em;">
                    <strong>Recommendation:</strong> 
                    @if(count($highImpactVars) > 2)
                        Focus on controlling and optimizing your top {{ count($highImpactVars) }} variables. Consider developing contingency plans for market price and yield variations.
                    @elseif(count($highImpactVars) > 0)
                        Monitor your high-impact variables closely and develop strategies to optimize {{ array_keys($highImpactVars)[0] }}.
                    @else
                        Your operation shows good stability across all variables. Continue current management practices.
                    @endif
                </p>
            </div>
        </div>
    </div>

    <!-- Current 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;">⚙️ Analysis 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);">Base Scenario:</h5>
                <ul style="margin: 10px 0; padding-left: 15px; color: var(--soil-brown); font-size: 0.9em;">
                    <li>{{ number_format($baseScenario) }} plants analyzed</li>
                    <li>±{{ $variationPercent }}% variation range</li>
                    <li>{{ count($sensitivityData) }} variables tested</li>
                </ul>
            </div>
            <div>
                <h5 style="color: var(--soil-brown);">Current 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>Costs: ${{ number_format($config['operating_costs']['current_scale_per_plant']) }}/plant</li>
                </ul>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart.js Configuration for Tornado Chart
const sensitivityData = @json($sensitivityData);
const variationPercent = {{ $variationPercent }};

// Prepare data for tornado chart
const labels = Object.values(sensitivityData).map(item => item.label);
const lowImpacts = Object.values(sensitivityData).map(item => item.base_roi - item.low_roi);
const highImpacts = Object.values(sensitivityData).map(item => item.high_roi - item.base_roi);

// Tornado Chart
const tornadoCtx = document.getElementById('tornadoChart').getContext('2d');
new Chart(tornadoCtx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Negative Impact (Low Scenario)',
            data: lowImpacts.map(impact => -Math.abs(impact)), // Make negative for left side
            backgroundColor: 'rgba(198, 40, 40, 0.7)',
            borderColor: '#C62828',
            borderWidth: 1
        }, {
            label: 'Positive Impact (High Scenario)',
            data: highImpacts,
            backgroundColor: 'rgba(76, 175, 80, 0.7)',
            borderColor: '#4CAF50',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y', // Horizontal bars
        plugins: {
            title: {
                display: true,
                text: `ROI Sensitivity to ±${variationPercent}% Variable Changes`,
                font: { size: 16, weight: 'bold' }
            },
            legend: {
                position: 'top'
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const value = Math.abs(context.parsed.x);
                        const direction = context.parsed.x < 0 ? 'decrease' : 'increase';
                        return `${context.dataset.label}: ${value.toFixed(1)}% ROI ${direction}`;
                    }
                }
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'ROI Impact (%)'
                },
                ticks: {
                    callback: function(value) {
                        return Math.abs(value) + '%';
                    }
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'Variables'
                }
            }
        },
        elements: {
            bar: {
                borderRadius: 4
            }
        }
    }
});
</script>
@endpush