{% extends "base.html" %}

{% block title %}Portfolio Optimizer - Augur{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
{% endblock %}

{% block content %}
<div class="page-content content-max" aria-label="Portfolio optimizer">
    <header class="page-header">
        <div class="page-header__text">
            <h1 class="page-title" data-i18n="optimizer-title">Portfolio Optimizer</h1>
            <p class="page-lead" data-i18n="optimizer-desc">Markowitz Mean-Variance Optimization — find optimal portfolio weights</p>
        </div>
    </header>

    <div class="card" style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;" role="form" aria-label="Optimization parameters">
        <h3 style="margin-bottom: 1rem; color: var(--text-primary);">Input Assets</h3>
        <div style="margin-bottom: 1rem;">
            <label for="opt-tickers" style="display: block; color: var(--text-secondary); margin-bottom: 0.5rem;">Tickers (comma-separated, max 10)</label>
            <input type="text" id="opt-tickers" placeholder="AAPL, NVDA, MSFT, GOOGL, TSLA"
                style="width: 100%; padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: 1rem; box-sizing: border-box;"
                aria-describedby="tickers-help" maxlength="200"
            >
            <span id="tickers-help" style="font-size: 0.8rem; color: var(--text-secondary);">Enter up to 10 stock ticker symbols</span>
        </div>
        <div style="margin-bottom: 1rem;">
            <label for="opt-rfr" style="display: block; color: var(--text-secondary); margin-bottom: 0.5rem;">Risk-Free Rate (%)</label>
            <input type="number" id="opt-rfr" value="2.0" step="0.1" min="0" max="20"
                style="width: 120px; padding: 0.75rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary);"
                aria-label="Risk-free rate percentage"
            >
        </div>
        <button class="btn btn-primary" onclick="runOptimize()" id="opt-btn"
            style="padding: 0.75rem 2rem; border-radius: 8px; font-weight: 600;" aria-label="Run portfolio optimization">
            Optimize Portfolio
        </button>
    </div>

    <div id="opt-results" style="display: none;" role="region" aria-label="Optimization results" aria-live="polite">

        <!-- Efficient Frontier Chart -->
        <div class="card" style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
            <h3 style="margin-bottom: 1rem; color: var(--text-primary);">Efficient Frontier</h3>
            <div style="position: relative; height: 340px;">
                <canvas id="frontier-chart" aria-label="Efficient frontier chart" role="img"></canvas>
            </div>
        </div>

        <div class="card" style="background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
            <h3 style="margin-bottom: 1rem; color: var(--text-primary);">Optimal Portfolio</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
                <div class="stat-box" style="text-align: center; padding: 1rem; background: var(--bg-primary); border-radius: 8px;">
                    <div style="font-size: 0.8rem; color: var(--text-secondary);">Expected Return</div>
                    <div id="opt-return" style="font-size: 1.4rem; font-weight: 700; color: var(--signal-buy);" aria-label="Expected return value">--</div>
                </div>
                <div class="stat-box" style="text-align: center; padding: 1rem; background: var(--bg-primary); border-radius: 8px;">
                    <div style="font-size: 0.8rem; color: var(--text-secondary);">Volatility</div>
                    <div id="opt-vol" style="font-size: 1.4rem; font-weight: 700; color: var(--accent-orange);" aria-label="Volatility value">--</div>
                </div>
                <div class="stat-box" style="text-align: center; padding: 1rem; background: var(--bg-primary); border-radius: 8px;">
                    <div style="font-size: 0.8rem; color: var(--text-secondary);">Sharpe Ratio</div>
                    <div id="opt-sharpe" style="font-size: 1.4rem; font-weight: 700; color: var(--amber);" aria-label="Sharpe ratio value">--</div>
                </div>
            </div>
            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem;">
                <h4 style="margin:0; color: var(--text-primary);">Allocation Weights</h4>
                <button type="button" class="btn btn-sm btn-ghost" onclick="exportOptimizerCSV()" id="opt-export-btn" style="display:none;">Export CSV</button>
            </div>
            <div id="opt-weights" style="display: grid; gap: 0.5rem;" role="list" aria-label="Portfolio allocation weights"></div>
        </div>
    </div>

    <div id="opt-error" style="display: none; color: var(--signal-sell); padding: 1rem; background: rgba(var(--signal-sell-rgb, 255,59,48),0.1); border-radius: 8px; margin-top: 1rem;" role="alert"></div>
</div>

<style>
@media (max-width: 768px) {
    .page-content { padding: 1rem !important; }
    .page-content h1 { font-size: 1.4rem !important; }
    .stat-box { padding: 0.75rem !important; }
    #opt-return, #opt-vol, #opt-sharpe { font-size: 1.1rem !important; }
}
@media (max-width: 375px) {
    .page-content { padding: 0.5rem !important; }
    .card { padding: 1rem !important; }
    .page-content h1 { font-size: 1.2rem !important; }
    #opt-tickers { font-size: 0.9rem; }
}
</style>
{% endblock %}

{% block extra_scripts %}
<script>
var _frontierChart = null;
var _optWeights = null;
var _optMeta = {};

function _getCSSVar(name) {
    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
}

function renderFrontierChart(frontierPoints, optPoint, assetPoints) {
    var canvas = document.getElementById('frontier-chart');
    if (!canvas) return;

    // Destroy previous chart instance if exists
    if (_frontierChart) {
        _frontierChart.destroy();
        _frontierChart = null;
    }

    var bgCard    = _getCSSVar('--bg-primary') || '#0a0a0f';
    var borderCol = _getCSSVar('--border-color') || '#1e1e2e';
    var textSec   = _getCSSVar('--text-secondary') || '#8888a0';
    var textPrim  = _getCSSVar('--text-primary') || '#e8e8f0';
    var accentBlue = '#4fc3f7';
    var accentGold = '#d4a017';
    var accentGreen = '#66bb6a';

    // Frontier curve dataset
    var curveData = frontierPoints.map(function(p) {
        return { x: p.risk, y: p['return'] };
    });

    // Individual asset dots
    var assetData = (assetPoints || []).map(function(p) {
        return { x: p.risk, y: p['return'], label: p.ticker };
    });

    // Optimal portfolio point
    var optData = optPoint ? [{ x: optPoint.risk, y: optPoint['return'] }] : [];

    var datasets = [
        {
            label: 'Efficient Frontier',
            data: curveData,
            type: 'line',
            borderColor: accentBlue,
            backgroundColor: 'rgba(79,195,247,0.08)',
            borderWidth: 2,
            pointRadius: 0,
            pointHoverRadius: 4,
            fill: false,
            tension: 0.35,
            order: 3,
        },
        {
            label: 'Assets',
            data: assetData,
            type: 'scatter',
            borderColor: accentGreen,
            backgroundColor: 'rgba(102,187,106,0.75)',
            pointRadius: 6,
            pointHoverRadius: 8,
            pointStyle: 'circle',
            order: 2,
        },
        {
            label: 'Optimal Portfolio',
            data: optData,
            type: 'scatter',
            borderColor: accentGold,
            backgroundColor: accentGold,
            pointRadius: 10,
            pointHoverRadius: 13,
            pointStyle: 'star',
            order: 1,
        },
    ];

    // Remove assets dataset if empty
    if (!assetData.length) datasets.splice(1, 1);

    _frontierChart = new Chart(canvas, {
        type: 'scatter',
        data: { datasets: datasets },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: { duration: 500 },
            plugins: {
                legend: {
                    labels: {
                        color: textSec,
                        usePointStyle: true,
                        padding: 16,
                        font: { size: 12 },
                    },
                },
                tooltip: {
                    backgroundColor: '#14141f',
                    borderColor: borderCol,
                    borderWidth: 1,
                    titleColor: textPrim,
                    bodyColor: textSec,
                    callbacks: {
                        label: function(ctx) {
                            var d = ctx.raw;
                            var base = 'Risk: ' + Number(d.x).toFixed(2) + '%  Return: ' + Number(d.y).toFixed(2) + '%';
                            if (d.label) base = d.label + '  |  ' + base;
                            return base;
                        }
                    }
                },
            },
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Portfolio Risk — Annualized Std Dev (%)',
                        color: textSec,
                        font: { size: 12 },
                    },
                    ticks: { color: textSec, font: { size: 11 } },
                    grid: { color: 'rgba(255,255,255,0.04)' },
                },
                y: {
                    title: {
                        display: true,
                        text: 'Expected Return — Annualized (%)',
                        color: textSec,
                        font: { size: 12 },
                    },
                    ticks: { color: textSec, font: { size: 11 } },
                    grid: { color: 'rgba(255,255,255,0.04)' },
                },
            },
        },
    });

    // Set canvas background color
    canvas.style.background = bgCard;
    canvas.style.borderRadius = '8px';
}

async function runOptimize() {
    var tickersInput = document.getElementById('opt-tickers').value.trim();
    if (!tickersInput) { showToast('Please enter at least one ticker', 'error'); return; }

    var tickers = tickersInput.split(',').map(function(t) { return t.trim().toUpperCase(); }).filter(Boolean);
    if (tickers.length === 0) { showToast('Please enter valid tickers', 'error'); return; }

    var rfr = parseFloat(document.getElementById('opt-rfr').value) / 100 || 0.02;

    document.getElementById('opt-btn').disabled = true;
    document.getElementById('opt-btn').textContent = 'Optimizing...';
    document.getElementById('opt-results').style.display = 'none';
    document.getElementById('opt-error').style.display = 'none';

    try {
        var resp = await fetch('/api/optimize', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ tickers: tickers, risk_free_rate: rfr })
        });
        var data = await resp.json();

        if (!resp.ok) {
            document.getElementById('opt-error').style.display = 'block';
            document.getElementById('opt-error').textContent = data.detail || 'Optimization failed';
            return;
        }

        var p = data.portfolio;

        // Use annualized stats if available, else scale raw daily values
        var retAnn = (p.expected_return_annual !== undefined)
            ? p.expected_return_annual
            : p.expected_return * 252;
        var volAnn = (p.volatility_annual !== undefined)
            ? p.volatility_annual
            : p.volatility * Math.sqrt(252);

        var sharpeAnn = (p.sharpe_ratio_annual !== undefined)
            ? p.sharpe_ratio_annual
            : p.sharpe_ratio * Math.sqrt(252);

        document.getElementById('opt-return').textContent = (retAnn * 100).toFixed(2) + '%';
        document.getElementById('opt-vol').textContent = (volAnn * 100).toFixed(2) + '%';
        document.getElementById('opt-sharpe').textContent = sharpeAnn.toFixed(4);

        _optWeights = p.weights;
        _optMeta = {
            return: (retAnn * 100).toFixed(2),
            volatility: (volAnn * 100).toFixed(2),
            sharpe: sharpeAnn.toFixed(4)
        };
        var exportBtn = document.getElementById('opt-export-btn');
        if (exportBtn) exportBtn.style.display = '';
        var weightsDiv = document.getElementById('opt-weights');
        weightsDiv.innerHTML = '';
        for (var ticker in p.weights) {
            var w = p.weights[ticker];
            var pct = (w * 100).toFixed(1);
            weightsDiv.innerHTML += '<div style="display:flex; align-items:center; gap:1rem; padding:0.5rem; background:var(--bg-primary); border-radius:6px;">' +
                '<span style="font-weight:600; width:60px; color:var(--text-primary);">' + ticker + '</span>' +
                '<div style="flex:1; height:8px; background:var(--border-color); border-radius:4px; overflow:hidden;">' +
                '<div style="height:100%; width:' + pct + '%; background: linear-gradient(90deg, var(--amber), var(--signal-buy)); border-radius:4px;"></div></div>' +
                '<span style="width:60px; text-align:right; color:var(--text-secondary);">' + pct + '%</span></div>';
        }

        // Render efficient frontier chart
        var optChartPoint = {
            risk: (volAnn * 100),
            'return': (retAnn * 100),
        };
        renderFrontierChart(
            data.frontier_points || [],
            optChartPoint,
            data.asset_points || []
        );

        document.getElementById('opt-results').style.display = 'block';
    } catch(e) {
        document.getElementById('opt-error').style.display = 'block';
        document.getElementById('opt-error').textContent = 'Request failed: ' + e.message;
    } finally {
        document.getElementById('opt-btn').disabled = false;
        document.getElementById('opt-btn').textContent = 'Optimize Portfolio';
    }
}

function exportOptimizerCSV() {
    if (!_optWeights) return;
    var rows = ['Ticker,Weight_%,Expected_Return_%,Volatility_%,Sharpe'];
    var first = true;
    for (var t in _optWeights) {
        var pct = (_optWeights[t] * 100).toFixed(2);
        rows.push([t, pct,
            first ? _optMeta.return : '',
            first ? _optMeta.volatility : '',
            first ? _optMeta.sharpe : ''
        ].join(','));
        first = false;
    }
    var blob = new Blob([rows.join('\n')], {type: 'text/csv'});
    var a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'augur-optimizer-' + new Date().toISOString().slice(0,10) + '.csv';
    a.click();
}
</script>
{% endblock %}