{% extends 'base.html' %}
{% load static %}

{% block title %}CSP ROI Calculator{% endblock %}

{% block extra_head %}
<meta name="csrf-token" content="{{ csrf_token }}">
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" type="text/css" href='{% static "css/roi-calculator.css" %}'>
{% endblock %}

{% block extra_js %}
<script src="{% static "js/chart.umd.min.js" %}"></script>
<script src="{% static "js/jspdf.umd.min.js" %}"></script>
<!-- ROI Calculator Modules -->
<script src="{% static "js/roi-calculator/input-utils.js" %}"></script>
<script src="{% static "js/roi-calculator/calculator-core.js" %}"></script>
<script src="{% static "js/roi-calculator/chart-manager.js" %}"></script>
<script src="{% static "js/roi-calculator/ui-manager.js" %}"></script>
<script src="{% static "js/roi-calculator/export-manager.js" %}"></script>
<script src="{% static "js/roi-calculator/roi-calculator-app.js" %}"></script>
<script>
// Global function wrappers for HTML onclick handlers
function updateCalculations() { window.ROICalculatorApp?.updateCalculations(); }
function exportToPDF() { window.ROICalculatorApp?.exportToPDF(); }
function exportToCSV() { window.ROICalculatorApp?.exportToCSV(); }
function handleInvestmentAmountInput(input) { InputUtils.handleInvestmentAmountInput(input); }
function updateInvestmentAmount(value) { window.ROICalculatorApp?.updateInvestmentAmount(value); }
function updateRevenuePerInstance(value) { window.ROICalculatorApp?.updateRevenuePerInstance(value); }
function updateServalaShare(value) { window.ROICalculatorApp?.updateServalaShare(value); }
function updateGracePeriod(value) { window.ROICalculatorApp?.updateGracePeriod(value); }
function updateLoanRate(value) { window.ROICalculatorApp?.updateLoanRate(value); }
function updateScenarioChurn(scenarioKey, churnRate) { window.ROICalculatorApp?.updateScenarioChurn(scenarioKey, churnRate); }
function updateScenarioPhase(scenarioKey, phaseIndex, newInstancesPerMonth) { window.ROICalculatorApp?.updateScenarioPhase(scenarioKey, phaseIndex, newInstancesPerMonth); }
function resetAdvancedParameters() { window.ROICalculatorApp?.resetAdvancedParameters(); }
function toggleScenario(scenarioKey) { window.ROICalculatorApp?.toggleScenario(scenarioKey); }
function updateMonthlyBreakdownFilters() { window.ROICalculatorApp?.updateMonthlyBreakdownFilters(); }
function toggleCollapsible(elementId) { window.ROICalculatorApp?.toggleCollapsible(elementId); }
function resetCalculator() { window.ROICalculatorApp?.resetCalculator(); }
// toggleInvestmentModel function removed - both models calculated simultaneously
function logout() { window.ROICalculatorApp?.logout(); }

// Manual toggle functions for collapse elements
function toggleAdvancedControls() {
    const element = document.getElementById('advancedControls');
    const button = document.getElementById('advancedToggleBtn');
    
    console.log('Toggling advanced controls, current classes:', element.className);
    
    if (element.style.display === 'none' || element.style.display === '') {
        element.style.display = 'block';
        button.innerHTML = '<i class="bi bi-gear"></i> Less';
        console.log('Showing advanced controls');
    } else {
        element.style.display = 'none';
        button.innerHTML = '<i class="bi bi-gear"></i> More';
        console.log('Hiding advanced controls');
    }
}

function toggleDataCollapse() {
    const element = document.getElementById('dataCollapse');
    const button = document.getElementById('dataToggleBtn');
    
    console.log('Toggling data collapse, current style:', element.style.display);
    
    if (element.style.display === 'none' || element.style.display === '') {
        element.style.display = 'block';
        button.classList.remove('collapsed');
        button.setAttribute('aria-expanded', 'true');
        console.log('Showing data collapse');
    } else {
        element.style.display = 'none';
        button.classList.add('collapsed');
        button.setAttribute('aria-expanded', 'false');
        console.log('Hiding data collapse');
    }
}

// Initialize collapse states
document.addEventListener('DOMContentLoaded', function() {
    // Ensure both sections start collapsed
    const advancedControls = document.getElementById('advancedControls');
    const dataCollapse = document.getElementById('dataCollapse');
    
    if (advancedControls) {
        advancedControls.style.display = 'none';
    }
    if (dataCollapse) {
        dataCollapse.style.display = 'none';
    }
    
    console.log('Collapse elements initialized as hidden');
});
</script>
{% endblock %}

{% block content %}
<div class="container-fluid p-0" style="min-height: 100vh;">
    <!-- Minimal Header with Controls -->
    <div class="bg-light border-bottom sticky-top" style="z-index: 1030;">
        <div class="container-fluid">
            <!-- Title Row -->
            <div class="row py-2 border-bottom">
                <div class="col-md-6">
                    <h4 class="mb-0">CSP ROI Calculator</h4>
                    <small class="text-muted">Real-time investment analysis</small>
                </div>
                <div class="col-md-6 text-end">
                    <button type="button" class="btn btn-sm btn-outline-primary me-1" onclick="exportToPDF()">
                        <i class="bi bi-file-pdf"></i> PDF
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-success me-1" onclick="exportToCSV()">
                        <i class="bi bi-file-csv"></i> CSV
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary me-1" onclick="resetCalculator()">
                        <i class="bi bi-arrow-clockwise"></i> Reset
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="logout()">
                        <i class="bi bi-box-arrow-right"></i> Logout
                    </button>
                </div>
            </div>
            
            <!-- Organized Controls Section -->
            <div class="py-3">
                <!-- Primary Controls Row -->
                <div class="row align-items-end mb-3">
                    <!-- Investment Amount -->
                    <div class="col-lg-3 col-md-4 mb-2">
                        <label class="form-label small fw-semibold mb-1">Initial Investment</label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">CHF</span>
                            <input type="text" class="form-control" id="investment-amount" 
                                   data-value="500000" value="500,000" 
                                   oninput="handleInvestmentAmountInput(this)"
                                   onchange="updateCalculations()">
                        </div>
                        <input type="range" class="form-range mt-1" id="investment-slider" 
                               min="100000" max="2000000" step="50000" value="500000"
                               onchange="updateInvestmentAmount(this.value)">
                    </div>
                    
                    <!-- Time & Revenue -->
                    <div class="col-lg-3 col-md-4 mb-2">
                        <div class="row">
                            <div class="col-6">
                                <label class="form-label small fw-semibold mb-1">Years</label>
                                <select class="form-select form-select-sm" id="timeframe" onchange="updateCalculations()">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3" selected>3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="form-label small fw-semibold mb-1">Revenue/Instance</label>
                                <div class="input-group input-group-sm">
                                    <input type="number" class="form-control" id="revenue-per-instance" 
                                           min="20" max="200" step="5" value="50" onchange="updateCalculations()">
                                    <span class="input-group-text">CHF</span>
                                </div>
                                <input type="range" class="form-range mt-1" id="revenue-slider" 
                                       min="20" max="200" step="5" value="50"
                                       onchange="updateRevenuePerInstance(this.value)">
                            </div>
                        </div>
                    </div>
                    
                    
                    <!-- Actions -->
                    <div class="col-lg-2 col-md-4 mb-2">
                        <div class="d-flex justify-content-end gap-2">
                            <button class="btn btn-outline-info btn-sm" type="button" onclick="toggleAdvancedControls()" id="advancedToggleBtn">
                                <i class="bi bi-gear"></i> Advanced
                            </button>
                            <a href="{% url 'services:roi_calculator_help' %}" class="btn btn-outline-secondary btn-sm" target="_blank">
                                <i class="bi bi-question-circle"></i> Help
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Scenarios & Results Row -->
                <div class="row align-items-center">
                    <!-- Scenario Selection -->
                    <div class="col-lg-6 col-md-8 mb-2">
                        <label class="form-label small fw-semibold mb-2">Growth Scenarios</label>
                        <div class="d-flex gap-3 justify-content-center">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="conservative-enabled" checked onchange="toggleScenario('conservative')">
                                <label class="form-check-label small fw-medium" for="conservative-enabled" data-bs-toggle="tooltip" title="Conservative: 2% churn, steady growth">
                                    <span class="text-success">•</span> Conservative
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="moderate-enabled" checked onchange="toggleScenario('moderate')">
                                <label class="form-check-label small fw-medium" for="moderate-enabled" data-bs-toggle="tooltip" title="Moderate: 3% churn, balanced growth">
                                    <span class="text-warning">•</span> Moderate
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="aggressive-enabled" checked onchange="toggleScenario('aggressive')">
                                <label class="form-check-label small fw-medium" for="aggressive-enabled" data-bs-toggle="tooltip" title="Aggressive: 5% churn, rapid growth">
                                    <span class="text-danger">•</span> Aggressive
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Model Results -->
                    <div class="col-lg-6 col-md-4 mb-2">
                        <div class="row">
                            <div class="col-6">
                                <div class="text-center p-2 border rounded model-result-box">
                                    <div class="text-success fw-semibold small mb-1">Direct Investment</div>
                                    <div class="fw-bold" id="net-position-direct" style="font-size: 1.1rem; line-height: 1.2;">CHF 0</div>
                                    <div class="fw-bold text-primary" id="roi-percentage-direct" style="font-size: 0.9rem; line-height: 1.2;">0%</div>
                                    <div style="font-size: 0.7rem;" class="text-muted">Net Position / ROI</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-2 border rounded model-result-box">
                                    <div class="text-warning fw-semibold small mb-1">Loan Model</div>
                                    <div class="fw-bold" id="net-position-loan" style="font-size: 1.1rem; line-height: 1.2;">CHF 0</div>
                                    <div class="fw-bold text-primary" id="roi-percentage-loan" style="font-size: 0.9rem; line-height: 1.2;">0%</div>
                                    <div style="font-size: 0.7rem;" class="text-muted">Net Position / ROI</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Collapsible Advanced Controls -->
            <div class="collapse" id="advancedControls">
                <div class="row py-2 bg-white border-top">
                    <!-- Loan Rate (for loan model calculations) -->
                    <div class="col-md-2" id="loan-rate-section">
                        <label class="form-label small mb-1">Loan Rate (%)</label>
                        <input type="number" class="form-control form-control-sm" id="loan-interest-rate" 
                               min="3" max="8" step="0.1" value="5.0" onchange="updateCalculations()">
                        <input type="range" class="form-range mt-1" id="loan-rate-slider" 
                               min="3" max="8" step="0.1" value="5.0" onchange="updateLoanRate(this.value)">
                    </div>
                    
                    <!-- Servala Share -->
                    <div class="col-md-2">
                        <label class="form-label small mb-1">Servala Share (%)</label>
                        <input type="number" class="form-control form-control-sm" id="servala-share" 
                               min="10" max="40" step="1" value="25" onchange="updateCalculations()">
                        <input type="range" class="form-range mt-1" id="share-slider" 
                               min="10" max="40" step="1" value="25" onchange="updateServalaShare(this.value)">
                    </div>
                    
                    <!-- Grace Period -->
                    <div class="col-md-2">
                        <label class="form-label small mb-1">Grace Period (Mo)</label>
                        <input type="number" class="form-control form-control-sm" id="grace-period" 
                               min="0" max="24" step="1" value="6" onchange="updateCalculations()">
                        <input type="range" class="form-range mt-1" id="grace-slider" 
                               min="0" max="24" step="1" value="6" onchange="updateGracePeriod(this.value)">
                    </div>
                    
                    <!-- Scenario Tuning -->
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-4">
                                <label class="form-label small mb-1">Conservative Churn (%)</label>
                                <input type="number" class="form-control form-control-sm" id="conservative-churn" 
                                       min="0" max="10" step="0.1" value="2.0" onchange="updateScenarioChurn('conservative', this.value)">
                            </div>
                            <div class="col-4">
                                <label class="form-label small mb-1">Moderate Churn (%)</label>
                                <input type="number" class="form-control form-control-sm" id="moderate-churn" 
                                       min="0" max="10" step="0.1" value="3.0" onchange="updateScenarioChurn('moderate', this.value)">
                            </div>
                            <div class="col-4">
                                <label class="form-label small mb-1">Aggressive Churn (%)</label>
                                <input type="number" class="form-control form-control-sm" id="aggressive-churn" 
                                       min="0" max="15" step="0.1" value="5.0" onchange="updateScenarioChurn('aggressive', this.value)">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>

    <!-- CHARTS - Maximum Space -->
    <div class="container-fluid px-3 py-3" style="background: #f8f9fa;">
        <!-- Loading Spinner -->
        <div class="loading-spinner text-center py-5" id="loading-spinner" style="display: none;">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Calculating...</span>
            </div>
            <p class="mt-2">Calculating scenarios...</p>
        </div>


        <!-- PRIMARY CHART - Full Width, Large Height -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pb-0">
                        <h5 class="mb-1"><i class="bi bi-graph-up-arrow text-primary"></i> ROI Progression Over Time</h5>
                        <p class="small text-muted mb-0">Investment profitability timeline - when you'll break even and achieve target returns</p>
                    </div>
                    <div class="card-body pt-3">
                        <canvas id="instanceGrowthChart" style="height: 500px; width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- SECONDARY CHARTS - Side by Side, Large -->
        <div class="row mb-4">
            <div class="col-xl-6 mb-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pb-0">
                        <h5 class="mb-1"><i class="bi bi-cash-stack text-success"></i> Net Financial Position</h5>
                        <p class="small text-muted mb-0">Cumulative profit/loss over time</p>
                    </div>
                    <div class="card-body pt-3">
                        <canvas id="revenueChart" style="height: 400px; width: 100%;"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 mb-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pb-0">
                        <h5 class="mb-1"><i class="bi bi-bar-chart text-warning"></i> Performance Comparison</h5>
                        <p class="small text-muted mb-0">ROI performance across growth scenarios</p>
                    </div>
                    <div class="card-body pt-3">
                        <canvas id="cashFlowChart" style="height: 400px; width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- TERTIARY CHART - Full Width -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pb-0">
                        <h5 class="mb-1"><i class="bi bi-graph-up text-info"></i> Investment Model Comparison</h5>
                        <p class="small text-muted mb-0">Net profit comparison: Fixed loan returns vs. performance-based direct investment across scenarios</p>
                    </div>
                    <div class="card-body pt-3">
                        <canvas id="modelComparisonChart" style="height: 400px; width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- DATA TABLE - Collapsible to Save Space -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="accordion" id="dataAccordion">
                    <div class="accordion-item border-0 shadow-sm">
                        <h2 class="accordion-header" id="dataHeading">
                            <button class="accordion-button collapsed" type="button" onclick="toggleDataCollapse()" id="dataToggleBtn">
                                <i class="bi bi-table me-2"></i> Detailed Financial Analysis
                            </button>
                        </h2>
                        <div id="dataCollapse" class="accordion-collapse collapse" aria-labelledby="dataHeading" data-bs-parent="#dataAccordion">
                            <div class="accordion-body">
                                <!-- Improved Scenario Performance Summary -->
                                <h6 class="mb-3">Investment Model Comparison by Scenario</h6>
                                <div class="table-responsive mb-4">
                                    <table class="table table-sm table-hover" id="comparison-table">
                                        <thead class="table-dark">
                                            <tr>
                                                <th>Scenario</th>
                                                <th>Investment Model</th>
                                                <th>Final Scale</th>
                                                <th>Your Net Profit</th>
                                                <th>Total ROI</th>
                                                <th>Break-even Time</th>
                                                <th>Key Features</th>
                                            </tr>
                                        </thead>
                                        <tbody id="comparison-tbody">
                                            <!-- Dynamic content -->
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!-- Monthly Financial Flow -->
                                <h6 class="mb-3">Monthly Financial Breakdown</h6>
                                
                                <!-- Breakdown Filter Controls -->
                                <div class="row mb-3 breakdown-filters">
                                    <div class="col-md-6">
                                        <label class="form-label small fw-semibold mb-2">Investment Models</label>
                                        <div class="d-flex gap-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="breakdown-direct-enabled" checked onchange="updateMonthlyBreakdownFilters()">
                                                <label class="form-check-label small fw-medium text-success" for="breakdown-direct-enabled">
                                                    Direct Investment
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="breakdown-loan-enabled" checked onchange="updateMonthlyBreakdownFilters()">
                                                <label class="form-check-label small fw-medium text-warning" for="breakdown-loan-enabled">
                                                    Loan Model
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small fw-semibold mb-2">Growth Scenarios</label>
                                        <div class="d-flex gap-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="breakdown-conservative-enabled" checked onchange="updateMonthlyBreakdownFilters()">
                                                <label class="form-check-label small fw-medium" for="breakdown-conservative-enabled">
                                                    <span class="text-success">•</span> Conservative
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="breakdown-moderate-enabled" checked onchange="updateMonthlyBreakdownFilters()">
                                                <label class="form-check-label small fw-medium" for="breakdown-moderate-enabled">
                                                    <span class="text-warning">•</span> Moderate
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="breakdown-aggressive-enabled" checked onchange="updateMonthlyBreakdownFilters()">
                                                <label class="form-check-label small fw-medium" for="breakdown-aggressive-enabled">
                                                    <span class="text-danger">•</span> Aggressive
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                    <table class="table table-sm table-striped" id="monthly-table">
                                        <thead class="table-dark sticky-top">
                                            <tr>
                                                <th>Month</th>
                                                <th>Scenario</th>
                                                <th>Model</th>
                                                <th>Instances</th>
                                                <th>Monthly Revenue</th>
                                                <th>Your Share</th>
                                                <th>Servala Share</th>
                                                <th>Cumulative Net Position</th>
                                            </tr>
                                        </thead>
                                        <tbody id="monthly-tbody">
                                            <!-- Dynamic content -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}