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

<!-- Page Header -->
<div class="page-header">
    <h1>📊 Growth Scenario Comparison</h1>
    <p>Compare different growth strategies and their projected outcomes</p>
    <p class="subtitle">Conservative vs. Moderate vs. Aggressive expansion scenarios</p>
</div>

<!-- Quick Navigation -->
<div class="responsive-grid cols-3" style="margin-bottom: 30px;">
    <a href="/admin/projection-config" class="touch-btn touch-btn-primary">← Configuration</a>
    <a href="/analytics" class="touch-btn touch-btn-success">📈 Analytics Dashboard</a>
    <a href="/analytics/roi-analysis" class="touch-btn touch-btn-warning">💰 ROI Analysis</a>
</div>

<!-- Scenario Parameters -->
<div class="mobile-card">
    <h3>🎯 Scenario Parameters</h3>
    <form method="GET" action="{{ route('admin.scenario-comparison') }}">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px;">
            <div>
                <label for="current_plants">Current Plant Count</label>
                <input type="number" id="current_plants" name="current_plants" 
                       value="{{ $currentPlants }}" min="1" class="form-control">
            </div>
            <div>
                <label for="years">Projection Years</label>
                <input type="number" id="years" name="years" 
                       value="{{ $projectionYears }}" min="1" max="20" class="form-control">
            </div>
            <div style="align-self: end;">
                <button type="submit" class="touch-btn touch-btn-success">🔄 Update Projections</button>
            </div>
        </div>
    </form>
</div>

@if(isset($scenarios))
<!-- Scenario Comparison Overview -->
<div class="mobile-card">
    <h3>📈 Scenario Summary ({{ $projectionYears }} Years)</h3>
    <div class="stats-grid">
        @foreach($scenarios as $scenarioName => $scenario)
        <div class="stat-card {{ $scenarioName === 'conservative' ? 'blue' : ($scenarioName === 'moderate' ? 'green' : 'orange') }}">
            <div class="stat-number">{{ number_format(end($scenario['projections'])['total_plants']) }}</div>
            <div class="stat-label">{{ ucfirst($scenarioName) }} Scenario</div>
            <div class="stat-trend">Final Plant Count</div>
        </div>
        @endforeach
    </div>
</div>

<!-- Detailed Scenario Comparison -->
@foreach($scenarios as $scenarioName => $scenario)
<div class="mobile-card" style="border-left: 4px solid {{ $scenarioName === 'conservative' ? '#007bff' : ($scenarioName === 'moderate' ? '#28a745' : '#fd7e14') }};">
    <h3 style="color: {{ $scenarioName === 'conservative' ? '#007bff' : ($scenarioName === 'moderate' ? '#28a745' : '#fd7e14') }};">
        {{ $scenarioName === 'conservative' ? '🐌' : ($scenarioName === 'moderate' ? '⚖️' : '🚀') }} 
        {{ ucfirst($scenarioName) }} Scenario
    </h3>
    
    <!-- Scenario Configuration -->
    <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
        <h5>Scenario Parameters:</h5>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
            <div><strong>Air Layering Rate:</strong> {{ $scenario['scenario_config']['air_layering_rate'] }}%</div>
            <div><strong>Mortality Rate:</strong> {{ $scenario['scenario_config']['mortality_rate'] }}%</div>
            <div><strong>Yield Multiplier:</strong> {{ $scenario['scenario_config']['yield_multiplier'] }}x</div>
            <div><strong>Price Assumption:</strong> ${{ $scenario['scenario_config']['price_assumption'] }}/lb</div>
        </div>
    </div>

    <!-- Summary Metrics -->
    <div class="stats-grid">
        <div class="stat-card today">
            <div class="stat-number">${{ number_format($scenario['summary']['total_revenue']) }}</div>
            <div class="stat-label">Total Revenue</div>
            <div class="stat-trend">{{ $projectionYears }} years</div>
        </div>
        <div class="stat-card week">
            <div class="stat-number">${{ number_format($scenario['summary']['total_profit']) }}</div>
            <div class="stat-label">Total Profit</div>
            <div class="stat-trend">{{ $projectionYears }} years</div>
        </div>
        <div class="stat-card green">
            <div class="stat-number">{{ $scenario['summary']['avg_roi'] }}%</div>
            <div class="stat-label">Average ROI</div>
            <div class="stat-trend">Annual average</div>
        </div>
        <div class="stat-card blue">
            <div class="stat-number">{{ number_format($scenario['summary']['final_plant_count']) }}</div>
            <div class="stat-label">Final Plant Count</div>
            <div class="stat-trend">Year {{ $projectionYears }}</div>
        </div>
    </div>

    <!-- Year-by-Year Breakdown -->
    <div style="margin-top: 20px;">
        <h5>Year-by-Year Projections:</h5>
        <div style="overflow-x: auto;">
            <table class="table" style="min-width: 800px;">
                <thead>
                    <tr>
                        <th>Year</th>
                        <th>Plants</th>
                        <th>New Plants</th>
                        <th>Revenue</th>
                        <th>Profit</th>
                        <th>ROI %</th>
                        <th>Acres</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($scenario['projections'] as $projection)
                    <tr>
                        <td>{{ $projection['calendar_year'] }}</td>
                        <td>{{ number_format($projection['total_plants']) }}</td>
                        <td>{{ number_format($projection['new_plants']) }}</td>
                        <td>${{ number_format($projection['projected_revenue']) }}</td>
                        <td>${{ number_format($projection['projected_profit']) }}</td>
                        <td>{{ $projection['roi_percentage'] }}%</td>
                        <td>{{ $projection['acres_needed'] }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endforeach

<!-- Scenario Comparison Analysis -->
<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);">🔍 Scenario Analysis</h3>
    <div style="margin: 15px 0;">
        <h5 style="color: var(--soil-brown); margin-bottom: 10px;">Key Insights:</h5>
        <ul style="margin: 15px 0; padding-left: 20px; color: var(--soil-brown);">
            <li style="margin-bottom: 8px;"><strong>Conservative Scenario:</strong> Lower risk, steady growth, guaranteed profitability</li>
            <li style="margin-bottom: 8px;"><strong>Moderate Scenario:</strong> Balanced approach, reasonable returns with manageable risk</li>
            <li style="margin-bottom: 8px;"><strong>Aggressive Scenario:</strong> Higher potential returns, but increased risk and resource requirements</li>
        </ul>
        
        <h5 style="color: var(--soil-brown); margin: 20px 0 10px;">Decision Factors:</h5>
        <ul style="margin: 15px 0; padding-left: 20px; color: var(--soil-brown);">
            <li style="margin-bottom: 8px;"><strong>Available Capital:</strong> Aggressive scenarios require more upfront investment</li>
            <li style="margin-bottom: 8px;"><strong>Risk Tolerance:</strong> Consider market volatility and weather risks</li>
            <li style="margin-bottom: 8px;"><strong>Labor Capacity:</strong> Ensure adequate workforce for chosen growth rate</li>
            <li style="margin-bottom: 8px;"><strong>Market Demand:</strong> Verify market can absorb increased production</li>
        </ul>
    </div>
</div>

@else
<div class="mobile-card">
    <div style="text-align: center; padding: 40px;">
        <h3>📊 Ready to Compare Scenarios</h3>
        <p>Set your current plant count and projection timeline above to generate scenario comparisons.</p>
    </div>
</div>
@endif

@endsection