{% extends "base.html" %}
{% block title %}Analysis - {{ coin.name }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="flex items-center gap-4">
        <a href="/analysis/" class="text-gray-400 hover:text-white">&larr; Analysis</a>
        <h1 class="text-2xl font-bold text-white">{{ coin.name }} <span class="text-gray-500 text-lg">{{ coin.symbol }}</span></h1>
        <div class="flex gap-2 ml-auto">
            {% for tf in ['1h', '4h', '1D'] %}
            <a href="/analysis/{{ coin.id }}?timeframe={{ tf }}"
               class="px-3 py-1 rounded-lg text-sm border transition
               {% if timeframe == tf %}border-koin-500 bg-koin-900/30 text-koin-300{% else %}border-gray-700 text-gray-400 hover:border-gray-600{% endif %}">
                {{ tf }}
            </a>
            {% endfor %}
        </div>
    </div>

    {% if ctx.errors %}
    <div class="bg-red-900/30 border border-red-800 rounded-xl p-4">
        <p class="text-red-400 text-sm">Errors:</p>
        {% for e in ctx.errors %}
        <p class="text-red-300 text-xs">{{ e.algorithm }}: {{ e.error }}</p>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Price & Signal Summary -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="glass rounded-xl border border-gray-800 p-4">
            <p class="text-xs text-gray-500">Harga</p>
            <p class="text-xl font-bold text-white font-mono">Rp {{ ctx.current_price|price }}</p>
        </div>
        <div class="glass rounded-xl border border-gray-800 p-4">
            <p class="text-xs text-gray-500">RSI (14)</p>
            {% set rsi = ctx.indicators.get('rsi_latest') %}
            {% if rsi %}
            <p class="text-xl font-bold font-mono {% if rsi < 30 %}text-emerald-400{% elif rsi > 70 %}text-red-400{% else %}text-white{% endif %}">
                {{ rsi|num1 }}
            </p>
            {% else %}<p class="text-gray-500">-</p>{% endif %}
        </div>
        <div class="glass rounded-xl border border-gray-800 p-4">
            <p class="text-xs text-gray-500">ATR</p>
            {% set atr = ctx.indicators.get('atr_latest') %}
            {% set atr_pct = ctx.indicators.get('atr_pct') %}
            {% if atr %}
            <p class="text-xl font-bold text-white font-mono">{{ atr|idr2 }}</p>
            <p class="text-xs text-gray-400">{{ atr_pct|pct2 if atr_pct else '' }} volatility</p>
            {% else %}<p class="text-gray-500">-</p>{% endif %}
        </div>
        <div class="glass rounded-xl border border-gray-800 p-4">
            <p class="text-xs text-gray-500">Bollinger Position</p>
            {% set bb_pos = ctx.indicators.get('bb_position_latest') %}
            <p class="text-xl font-bold {% if bb_pos == 'lower' %}text-emerald-400{% elif bb_pos == 'upper' %}text-red-400{% else %}text-white{% endif %}">
                {{ bb_pos|upper if bb_pos else '-' }}
            </p>
        </div>
    </div>

    <!-- Price Chart -->
    <div class="glass rounded-xl border border-gray-800 overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-800">
            <h3 class="text-lg font-semibold text-white">Price Chart ({{ timeframe }})</h3>
        </div>
        <div id="analysis-chart" style="height: 350px;" class="w-full"></div>
    </div>

    <!-- Signal Contributions -->
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-4">Signal Contributions</h3>
        {% if ctx.signal_contributions %}
        <div class="space-y-2">
            {% for algo_id, contrib in ctx.signal_contributions.items() %}
            <div class="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-900/50">
                <span class="w-3 h-3 rounded-full
                    {% if contrib.signal == 'BUY' %}bg-emerald-400{% elif contrib.signal == 'SELL' %}bg-red-400{% else %}bg-gray-500{% endif %}"></span>
                <span class="text-sm font-mono text-gray-300 w-40 truncate">{{ algo_id }}</span>
                <span class="text-sm font-bold
                    {% if contrib.signal == 'BUY' %}text-emerald-400{% elif contrib.signal == 'SELL' %}text-red-400{% else %}text-gray-400{% endif %}">
                    {{ contrib.signal }}
                </span>
                <span class="text-xs text-gray-500">weight {{ contrib.weight|num3 }}</span>
                <span class="text-xs text-gray-400 flex-1 truncate">{{ contrib.reason }}</span>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-500 text-sm">Tidak ada sinyal. Pastikan data OHLCV sudah di-sync.</p>
        {% endif %}
    </div>

    <!-- Technical Indicators Detail -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- EMA -->
        <div class="glass rounded-xl border border-gray-800 p-4">
            <h4 class="text-sm font-semibold text-gray-400 mb-2">Moving Averages</h4>
            <table class="w-full text-sm">
                {% for key in ['ema_9_latest', 'ema_20_latest', 'ema_50_latest', 'sma_20_latest', 'sma_50_latest', 'sma_200_latest'] %}
                {% set val = ctx.indicators.get(key) %}
                {% if val %}
                <tr class="border-b border-gray-800/50">
                    <td class="py-1 text-gray-400">{{ key.replace('_latest','').upper() }}</td>
                    <td class="py-1 text-right font-mono text-white">{{ val|idr2 }}</td>
                </tr>
                {% endif %}
                {% endfor %}
            </table>
        </div>

        <!-- Ichimoku -->
        <div class="glass rounded-xl border border-gray-800 p-4">
            <h4 class="text-sm font-semibold text-gray-400 mb-2">Ichimoku Cloud</h4>
            {% set cloud = ctx.indicators.get('ichimoku_cloud') %}
            <p class="text-sm mb-2">Cloud: <span class="font-bold {% if cloud == 'bullish' %}text-emerald-400{% else %}text-red-400{% endif %}">{{ cloud|upper if cloud else '-' }}</span></p>
            <table class="w-full text-sm">
                {% for key in ['ichimoku_tenkan_latest', 'ichimoku_kijun_latest', 'ichimoku_senkou_a_latest', 'ichimoku_senkou_b_latest'] %}
                {% set val = ctx.indicators.get(key) %}
                {% if val %}
                <tr class="border-b border-gray-800/50">
                    <td class="py-1 text-gray-400">{{ key.replace('ichimoku_','').replace('_latest','').title() }}</td>
                    <td class="py-1 text-right font-mono text-white">{{ val|idr2 }}</td>
                </tr>
                {% endif %}
                {% endfor %}
            </table>
        </div>

        <!-- S/R Levels -->
        <div class="glass rounded-xl border border-gray-800 p-4">
            <h4 class="text-sm font-semibold text-gray-400 mb-2">Support & Resistance</h4>
            <p class="text-xs text-gray-500 mb-2">
                S/R Flip: <span class="font-bold text-amber-400">{{ ctx.indicators.get('sr_flip') or 'None' }}</span>
            </p>
            <div class="grid grid-cols-2 gap-2">
                <div>
                    <p class="text-xs text-emerald-400 mb-1">Support</p>
                    {% set ns = ctx.indicators.get('nearest_support') %}
                    {% if ns %}<p class="font-mono text-sm text-white">{{ ns|idr2 }}</p>{% endif %}
                </div>
                <div>
                    <p class="text-xs text-red-400 mb-1">Resistance</p>
                    {% set nr = ctx.indicators.get('nearest_resistance') %}
                    {% if nr %}<p class="font-mono text-sm text-white">{{ nr|idr2 }}</p>{% endif %}
                </div>
            </div>
        </div>

        <!-- Patterns -->
        <div class="glass rounded-xl border border-gray-800 p-4">
            <h4 class="text-sm font-semibold text-gray-400 mb-2">Patterns</h4>
            {% set m = ctx.patterns.get('marubozu', {}) %}
            {% set cs = ctx.patterns.get('candlestick', {}) %}
            <p class="text-sm text-white">
                Marubozu: {% if m.get('latest_bullish') %}<span class="text-emerald-400">Bullish ({{ m.latest_aggression }}%)</span>
                {% elif m.get('latest_bearish') %}<span class="text-red-400">Bearish ({{ m.latest_aggression }}%)</span>
                {% else %}<span class="text-gray-500">None</span>{% endif %}
            </p>
            {% if cs.get('detected') %}
            <p class="text-sm text-gray-300 mt-1">Candlestick: {{ cs.detected|join(', ') }}</p>
            {% endif %}
        </div>
    </div>

    <!-- Quantitative -->
    {% set pp = ctx.quantitative.get('prorated_profit') %}
    {% if pp %}
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-2">Pro-rated Profit Target</h3>
        <p class="text-xs text-gray-500 mb-3">
            Capital: Rp {{ pp.capital_idr|idr }} |
            Breakeven: {{ pp.breakeven_pct|pct2 }} (Rp {{ pp.breakeven_price|price }}) |
            Fee roundtrip: {{ pp.total_fee_roundtrip_pct }}%
        </p>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="text-xs text-gray-500 uppercase bg-gray-900/50">
                    <tr>
                        <th class="px-3 py-2 text-left">Target</th>
                        <th class="px-3 py-2 text-right">Sell Price</th>
                        <th class="px-3 py-2 text-right">Net Profit</th>
                        <th class="px-3 py-2 text-right">Net %</th>
                        <th class="px-3 py-2 text-right">Fee</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800">
                    {% for t in pp.targets %}
                    <tr>
                        <td class="px-3 py-2 text-gray-300">+{{ t.target_pct }}%</td>
                        <td class="px-3 py-2 text-right font-mono text-white">{{ t.sell_price|price }}</td>
                        <td class="px-3 py-2 text-right font-mono {% if t.net_profit_idr > 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                            Rp {{ t.net_profit_idr|idr }}
                        </td>
                        <td class="px-3 py-2 text-right font-mono {% if t.net_profit_pct > 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                            {{ t.net_profit_pct|spct2 }}
                        </td>
                        <td class="px-3 py-2 text-right text-gray-500">{{ t.fee_total_idr|idr }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- ETA Projections -->
    {% set eta = ctx.quantitative.get('eta') %}
    {% if eta and eta.projections %}
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-2">Price Projections (ETA)</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            {% for period, proj in eta.projections.items() %}
            <div class="bg-gray-900/50 rounded-lg p-3">
                <p class="text-sm font-semibold text-gray-300 mb-2">{{ period }}</p>
                <div class="space-y-1 text-xs font-mono">
                    <div class="flex justify-between"><span class="text-red-400">Upper</span><span class="text-white">{{ proj.upper_conservative|idr }}</span></div>
                    <div class="flex justify-between"><span class="text-gray-400">Current</span><span class="text-white">{{ proj.current|idr }}</span></div>
                    <div class="flex justify-between"><span class="text-emerald-400">Lower</span><span class="text-white">{{ proj.lower_conservative|idr }}</span></div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- ML Predictions -->
    {% set ml_horizons = ctx.ml_predictions.get('horizons', {}) %}
    {% if ml_horizons %}
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-2">ML Predictions</h3>
        <p class="text-xs text-gray-500 mb-3">
            Ensemble: GradientBoosting + XGBoost + LightGBM |
            Trend: <span class="font-bold {% if ctx.ml_predictions.get('short_term_trend') == 'bullish' %}text-emerald-400{% else %}text-red-400{% endif %}">
                {{ ctx.ml_predictions.get('short_term_trend', 'unknown')|upper }}
            </span>
        </p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            {% for label, data in ml_horizons.items() %}
            <div class="bg-gray-900/50 rounded-lg p-3">
                <p class="text-sm font-semibold text-gray-300 mb-2">{{ label|title }} ({{ data.steps }} candles)</p>
                <p class="text-xl font-bold font-mono {% if data.pct_change > 0 %}text-emerald-400{% else %}text-red-400{% endif %}">
                    {{ data.pct_change|spct2 }}
                </p>
                <p class="text-xs text-gray-400 font-mono">Rp {{ data.predicted_price|price }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Strategy Recommendation -->
    {% set selector = ctx.strategy.get('selector', {}) %}
    {% if selector %}
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-4">Strategy Recommendation</h3>
        <div class="flex flex-wrap gap-4 items-center mb-4">
            <div>
                <p class="text-xs text-gray-500">Recommended</p>
                <p class="text-lg font-bold text-koin-400">{{ selector.get('recommended', '-')|upper }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-500">Safety Rating</p>
                {% set safety = selector.get('safety_rating', 'MODERATE') %}
                <p class="text-lg font-bold {% if safety == 'SAFE' %}text-emerald-400{% elif safety == 'RISKY' or safety == 'DANGEROUS' %}text-red-400{% else %}text-amber-400{% endif %}">
                    {{ safety }}
                </p>
            </div>
            <div>
                <p class="text-xs text-gray-500">Volatility</p>
                <p class="text-lg font-bold text-white">{{ selector.atr_pct|pct if selector.atr_pct else '-' }}</p>
            </div>
        </div>

        <!-- Scalping plan if available -->
        {% set scalp_plan = ctx.strategy.get('scalping', {}).get('plan') %}
        {% if scalp_plan %}
        <div class="bg-gray-900/50 rounded-lg p-4 mt-2">
            <p class="text-sm font-semibold text-gray-300 mb-2">Scalping Entry Plan</p>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-sm">
                <div>
                    <p class="text-xs text-gray-500">Entry</p>
                    <p class="font-mono text-white">Rp {{ scalp_plan.entry_price|price }}</p>
                </div>
                <div>
                    <p class="text-xs text-red-400">Stop Loss</p>
                    <p class="font-mono text-red-400">Rp {{ scalp_plan.stop_loss|price }}</p>
                </div>
                <div>
                    <p class="text-xs text-emerald-400">TP1</p>
                    <p class="font-mono text-emerald-400">Rp {{ scalp_plan.take_profit_1|price }}</p>
                </div>
                <div>
                    <p class="text-xs text-emerald-400">TP2</p>
                    <p class="font-mono text-emerald-400">Rp {{ scalp_plan.take_profit_2|price }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400">R:R</p>
                    <p class="font-mono text-white">{{ scalp_plan.risk_reward }}x</p>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Strategy scores comparison -->
        <div class="flex gap-3 mt-3">
            {% for strat_name, strat_data in selector.get('strategies', {}).items() %}
            <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs
                {% if strat_name == selector.get('recommended') %}bg-koin-900/40 border border-koin-700{% else %}bg-gray-900/50 border border-gray-800{% endif %}">
                <span class="text-gray-300">{{ strat_name|title }}</span>
                <span class="font-mono font-bold text-white">{{ strat_data.score }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Compounding Projections -->
    {% set comp = ctx.strategy.get('compounding', {}) %}
    {% if comp.get('simulations') %}
    <div class="glass rounded-xl border border-gray-800 p-6">
        <h3 class="text-lg font-semibold text-white mb-2">Compounding Projections</h3>
        <p class="text-xs text-gray-500 mb-3">
            Capital: Rp {{ comp.initial_capital|idr }} |
            Fee roundtrip: {{ comp.fee_roundtrip }}%
        </p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            {% for sim in comp.simulations %}
            <div class="bg-gray-900/50 rounded-lg p-3">
                <p class="text-sm font-semibold text-gray-300 mb-1">{{ sim.scenario }}</p>
                <p class="text-xs text-gray-500 mb-2">{{ sim.profit_per_trade }}% profit/trade, {{ sim.trades_per_day }}x/day (net {{ sim.net_per_trade }}%)</p>
                <div class="text-lg font-bold text-emerald-400 font-mono">
                    +Rp {{ sim.compound_30d.profit|idr }}
                </div>
                <p class="text-xs text-gray-400">30-day compound: {{ sim.compound_30d.profit_pct|spct }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Algorithm Versions -->
    <div class="glass rounded-xl border border-gray-800 p-4">
        <h4 class="text-sm font-semibold text-gray-400 mb-2">Algorithms Used</h4>
        <div class="flex flex-wrap gap-2">
            {% for aid, ver in ctx.algorithm_versions.items() %}
            <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">{{ aid }} v{{ ver }}</span>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(async function() {
    const container = document.getElementById('analysis-chart');
    if (!container || typeof LightweightCharts === 'undefined') return;

    try {
        const resp = await fetch('/api/v1/market/asset/{{ coin.id }}/ohlcv?timeframe={{ timeframe }}&limit=500');
        const data = await resp.json();
        if (!data || data.length === 0) {
            container.innerHTML = '<p class="text-gray-500 text-sm text-center py-8">No OHLCV data available</p>';
            return;
        }

        const chart = LightweightCharts.createChart(container, {
            layout: { background: { type: 'solid', color: 'transparent' }, textColor: '#9CA3AF' },
            grid: {
                vertLines: { color: 'rgba(55, 65, 81, 0.3)' },
                horzLines: { color: 'rgba(55, 65, 81, 0.3)' },
            },
            rightPriceScale: { borderColor: 'rgba(55, 65, 81, 0.5)' },
            timeScale: { borderColor: 'rgba(55, 65, 81, 0.5)', timeVisible: true, secondsVisible: false },
            handleScroll: { vertTouchDrag: false },
        });

        const candleSeries = chart.addCandlestickSeries({
            upColor: '#10B981', downColor: '#EF4444',
            borderDownColor: '#EF4444', borderUpColor: '#10B981',
            wickDownColor: '#EF4444', wickUpColor: '#10B981',
        });

        const volumeSeries = chart.addHistogramSeries({
            color: '#38BDF8', priceFormat: { type: 'volume' }, priceScaleId: '',
        });
        volumeSeries.priceScale().applyOptions({ scaleMargins: { top: 0.85, bottom: 0 } });

        candleSeries.setData(data.map(d => ({
            time: d.timestamp, open: d.open, high: d.high, low: d.low, close: d.close,
        })));
        volumeSeries.setData(data.map(d => ({
            time: d.timestamp, value: d.volume,
            color: d.close >= d.open ? 'rgba(16, 185, 129, 0.3)' : 'rgba(239, 68, 68, 0.3)',
        })));

        // Add S/R markers if available
        {% set ns = ctx.indicators.get('nearest_support') %}
        {% set nr = ctx.indicators.get('nearest_resistance') %}
        {% if ns %}
        candleSeries.createPriceLine({
            price: {{ ns }}, color: '#10B981', lineWidth: 1, lineStyle: 2,
            axisLabelVisible: true, title: 'Support',
        });
        {% endif %}
        {% if nr %}
        candleSeries.createPriceLine({
            price: {{ nr }}, color: '#EF4444', lineWidth: 1, lineStyle: 2,
            axisLabelVisible: true, title: 'Resistance',
        });
        {% endif %}

        chart.timeScale().fitContent();

        new ResizeObserver(entries => {
            chart.applyOptions({ width: entries[0].contentRect.width });
        }).observe(container);

    } catch (e) {
        console.error('Chart error:', e);
    }
})();
</script>
{% endblock %}