{% extends "base.html" %}
{% block title %}AI Portfolio Coach{% endblock %}

{% block content %}
<div x-data="aiCoachApp()" x-init="init()" class="max-w-5xl mx-auto space-y-6">

    <!-- Header -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                <svg class="w-7 h-7 text-koin-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"/>
                </svg>
                AI Portfolio Coach
            </h1>
            <p class="mt-1 text-sm text-gray-400">AI-powered portfolio analysis with actionable recommendations, rebalancing suggestions, and risk assessment</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Updated: ' + lastRefresh : ''"></span>
            <button @click="fetchData()" :disabled="loading"
                    class="px-4 py-2 text-sm bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition disabled:opacity-50 font-medium">
                <span x-show="!loading">Refresh</span>
                <span x-show="loading" class="flex items-center gap-1">
                    <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    Analyzing
                </span>
            </button>
        </div>
    </div>

    <!-- Loading -->
    <div x-show="loading" x-cloak class="flex items-center justify-center py-16">
        <div class="text-center">
            <svg class="w-8 h-8 animate-spin text-koin-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
            </svg>
            <p class="text-sm text-gray-500">AI is analyzing your portfolio...</p>
        </div>
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="bg-red-900/20 border border-red-800 rounded-xl p-4">
        <p class="text-sm text-red-400" x-text="error"></p>
    </div>

    <!-- Content -->
    <div x-show="!loading && !error && data" x-cloak>

        <!-- Portfolio Score + Risk Level + Total Assets -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-6 mb-6">
            <div class="flex items-center justify-between flex-wrap gap-6">
                <!-- Circular Gauge -->
                <div class="flex items-center gap-6">
                    <div class="relative w-28 h-28 flex-shrink-0">
                        <svg class="w-28 h-28 -rotate-90" viewBox="0 0 120 120">
                            <circle cx="60" cy="60" r="50" fill="none" stroke="#1f2937" stroke-width="10"/>
                            <circle cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke-linecap="round"
                                    :stroke="(data.portfolio_score || 0) >= 70 ? '#10b981' : (data.portfolio_score || 0) >= 40 ? '#f59e0b' : '#ef4444'"
                                    :stroke-dasharray="314"
                                    :stroke-dashoffset="314 - (314 * Math.min(data.portfolio_score || 0, 100) / 100)"
                                    class="transition-all duration-1000"/>
                        </svg>
                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <span class="text-3xl font-extrabold tabular-nums"
                                  :class="(data.portfolio_score || 0) >= 70 ? 'text-emerald-400' : (data.portfolio_score || 0) >= 40 ? 'text-amber-400' : 'text-red-400'"
                                  x-text="data.portfolio_score || 0"></span>
                            <span class="text-[10px] text-gray-500">/ 100</span>
                        </div>
                    </div>
                    <div>
                        <p class="text-xs text-gray-400 uppercase tracking-wider">Portfolio Health</p>
                        <p class="text-lg font-bold text-white mt-1" x-text="data.health_label || 'Unknown'"></p>
                    </div>
                </div>
                <!-- Risk Level + Assets -->
                <div class="flex items-center gap-6">
                    <div class="text-center">
                        <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Risk Level</p>
                        <span class="px-3 py-1 text-sm font-bold rounded-full"
                              :class="riskLevelClass(data.risk_level)"
                              x-text="data.risk_level || '-'"></span>
                    </div>
                    <div class="text-center">
                        <p class="text-xs text-gray-400 uppercase tracking-wider mb-1">Total Assets</p>
                        <p class="text-2xl font-bold text-white" x-text="data.total_assets || 0"></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Items -->
        <template x-if="data.action_items && data.action_items.length">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4 flex items-center gap-2">
                    <svg class="w-4 h-4 text-koin-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Action Items
                </h3>
                <div class="space-y-2">
                    <template x-for="(action, ai) in data.action_items" :key="ai">
                        <div class="flex items-start gap-3 p-3 bg-gray-900/50 rounded-lg border border-gray-700/50 hover:border-gray-600 transition">
                            <span class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5"
                                  :class="action.impact === 'high' ? 'bg-red-900/50 text-red-400' :
                                          action.impact === 'medium' ? 'bg-amber-900/50 text-amber-400' : 'bg-gray-700 text-gray-400'"
                                  x-text="ai + 1"></span>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm text-gray-200" x-text="action.text"></p>
                                <p x-show="action.detail" class="text-xs text-gray-500 mt-0.5" x-text="action.detail"></p>
                            </div>
                            <span class="px-2 py-0.5 text-[10px] font-bold rounded-full flex-shrink-0 uppercase"
                                  :class="action.impact === 'high' ? 'bg-red-900/50 text-red-400' :
                                          action.impact === 'medium' ? 'bg-amber-900/50 text-amber-400' : 'bg-gray-700/50 text-gray-400'"
                                  x-text="action.impact || 'low'"></span>
                        </div>
                    </template>
                </div>
            </div>
        </template>

        <!-- Winners & Losers Side by Side -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <!-- Winners -->
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <h3 class="text-sm font-semibold text-emerald-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22"/>
                    </svg>
                    Winners
                </h3>
                <div class="space-y-2">
                    <template x-for="(w, wi) in data.winners || []" :key="wi">
                        <div class="flex items-center justify-between p-3 bg-emerald-900/10 border border-emerald-800/30 rounded-lg">
                            <div class="flex items-center gap-2 min-w-0">
                                <div class="w-7 h-7 rounded-full bg-emerald-900/40 flex items-center justify-center text-[10px] font-bold text-emerald-400 flex-shrink-0"
                                     x-text="(w.symbol || '?').substring(0, 2)"></div>
                                <div class="min-w-0">
                                    <p class="text-sm font-semibold text-white truncate" x-text="w.symbol"></p>
                                    <p class="text-[10px] text-gray-500" x-text="w.momentum || ''"></p>
                                </div>
                            </div>
                            <span class="px-2 py-0.5 text-[10px] font-bold rounded-full bg-emerald-900/40 text-emerald-400 flex-shrink-0"
                                  x-text="w.recommendation || 'Hold'"></span>
                        </div>
                    </template>
                    <p x-show="!data.winners || data.winners.length === 0" class="text-xs text-gray-600 text-center py-2">No winners found</p>
                </div>
            </div>

            <!-- Losers -->
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <h3 class="text-sm font-semibold text-red-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6L9 12.75l4.306-4.306a11.95 11.95 0 015.814 5.518l2.74 1.22"/>
                    </svg>
                    Losers
                </h3>
                <div class="space-y-2">
                    <template x-for="(l, li) in data.losers || []" :key="li">
                        <div class="flex items-center justify-between p-3 bg-red-900/10 border border-red-800/30 rounded-lg">
                            <div class="flex items-center gap-2 min-w-0">
                                <div class="w-7 h-7 rounded-full bg-red-900/40 flex items-center justify-center text-[10px] font-bold text-red-400 flex-shrink-0"
                                     x-text="(l.symbol || '?').substring(0, 2)"></div>
                                <div class="min-w-0">
                                    <p class="text-sm font-semibold text-white truncate" x-text="l.symbol"></p>
                                    <p class="text-[10px] text-gray-500" x-text="l.momentum || ''"></p>
                                </div>
                            </div>
                            <span class="px-2 py-0.5 text-[10px] font-bold rounded-full bg-red-900/40 text-red-400 flex-shrink-0"
                                  x-text="l.recommendation || 'Review'"></span>
                        </div>
                    </template>
                    <p x-show="!data.losers || data.losers.length === 0" class="text-xs text-gray-600 text-center py-2">No losers found</p>
                </div>
            </div>
        </div>

        <!-- Rebalance Suggestions -->
        <template x-if="data.rebalance && data.rebalance.length">
            <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden mb-6">
                <div class="p-5 pb-3">
                    <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider">Rebalance Suggestions</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-900">
                            <tr>
                                <th class="text-left text-xs text-gray-500 font-medium px-5 py-2">Symbol</th>
                                <th class="text-right text-xs text-gray-500 font-medium px-3 py-2">Current</th>
                                <th class="text-right text-xs text-gray-500 font-medium px-3 py-2">Suggested</th>
                                <th class="text-center text-xs text-gray-500 font-medium px-3 py-2">Action</th>
                                <th class="text-right text-xs text-gray-500 font-medium px-5 py-2">Delta</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700/50">
                            <template x-for="(rb, ri) in data.rebalance" :key="ri">
                                <tr class="hover:bg-gray-700/30 transition">
                                    <td class="px-5 py-2.5 font-semibold text-white" x-text="rb.symbol"></td>
                                    <td class="px-3 py-2.5 text-right text-gray-300 tabular-nums" x-text="fmt(rb.current_weight, 1) + '%'"></td>
                                    <td class="px-3 py-2.5 text-right text-gray-300 tabular-nums" x-text="fmt(rb.suggested_weight, 1) + '%'"></td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="px-2 py-0.5 text-[10px] font-bold rounded-full"
                                              :class="rb.action === 'increase' ? 'bg-emerald-900/50 text-emerald-400' :
                                                      rb.action === 'reduce' ? 'bg-red-900/50 text-red-400' : 'bg-gray-700/50 text-gray-400'"
                                              x-text="rb.action || '-'"></span>
                                    </td>
                                    <td class="px-5 py-2.5 text-right tabular-nums"
                                        :class="(rb.delta || 0) > 0 ? 'text-emerald-400' : (rb.delta || 0) < 0 ? 'text-red-400' : 'text-gray-400'"
                                        x-text="fmtPct(rb.delta)"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </template>

        <!-- Correlation Risk -->
        <template x-if="data.correlation_risk">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">Correlation Risk</h3>
                <div class="flex items-center justify-between mb-4">
                    <span class="text-xs text-gray-400">Diversification Score</span>
                    <span class="text-lg font-bold tabular-nums"
                          :class="(data.correlation_risk.diversification_score || 0) >= 70 ? 'text-emerald-400' :
                                  (data.correlation_risk.diversification_score || 0) >= 40 ? 'text-amber-400' : 'text-red-400'"
                          x-text="(data.correlation_risk.diversification_score || 0) + '/100'"></span>
                </div>
                <div class="w-full h-2 bg-gray-900 rounded-full overflow-hidden mb-4">
                    <div class="h-full rounded-full transition-all duration-500"
                         :class="(data.correlation_risk.diversification_score || 0) >= 70 ? 'bg-emerald-500' :
                                 (data.correlation_risk.diversification_score || 0) >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                         :style="'width: ' + Math.min(data.correlation_risk.diversification_score || 0, 100) + '%'"></div>
                </div>
                <template x-if="data.correlation_risk.high_pairs && data.correlation_risk.high_pairs.length">
                    <div class="space-y-2">
                        <p class="text-xs text-gray-500 mb-1">High Correlation Pairs (Risk)</p>
                        <template x-for="(pair, pi) in data.correlation_risk.high_pairs" :key="pi">
                            <div class="flex items-center justify-between p-2 bg-amber-900/10 border border-amber-800/30 rounded-lg">
                                <span class="text-xs text-amber-300 font-medium" x-text="pair.pair"></span>
                                <span class="text-xs text-amber-400 font-bold tabular-nums" x-text="fmt(pair.correlation)"></span>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </template>

        <!-- New Positions to Consider -->
        <template x-if="data.new_positions && data.new_positions.length">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">New Positions to Consider</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <template x-for="(np, ni) in data.new_positions" :key="ni">
                        <div class="p-4 bg-gray-900/50 border border-gray-700/50 rounded-lg hover:border-gray-600 transition">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-bold text-white" x-text="np.symbol"></span>
                                <span class="text-xs text-koin-400 font-medium" x-text="np.suggested_weight ? np.suggested_weight + '%' : ''"></span>
                            </div>
                            <p class="text-xs text-gray-400" x-text="np.reason || ''"></p>
                        </div>
                    </template>
                </div>
            </div>
        </template>

        <!-- Insights -->
        <template x-if="data.insights && data.insights.length">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <svg class="w-4 h-4 text-koin-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/>
                    </svg>
                    AI Insights
                </h3>
                <div class="space-y-2">
                    <template x-for="(insight, ii) in data.insights" :key="ii">
                        <div class="flex items-start gap-3 p-3 bg-koin-900/10 border border-koin-700/30 rounded-lg">
                            <svg class="w-4 h-4 text-koin-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
                            </svg>
                            <p class="text-sm text-gray-300" x-text="insight"></p>
                        </div>
                    </template>
                </div>
            </div>
        </template>

        <!-- Empty State -->
        <div x-show="!data.action_items && !data.winners && !data.rebalance" class="text-center py-16 bg-gray-800 rounded-xl border border-gray-700">
            <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/>
            </svg>
            <h3 class="mt-4 text-lg font-medium text-gray-400">No Coach Data Available</h3>
            <p class="mt-2 text-sm text-gray-600">Add assets to your portfolio and run a scan for AI coaching insights.</p>
        </div>
    </div>
</div>

<script>
function aiCoachApp() {
    return {
        loading: false,
        error: null,
        lastRefresh: null,
        data: null,

        init() { this.fetchData(); },

        async fetchData() {
            this.loading = true;
            this.error = null;
            try {
                const params = new URLSearchParams({ asset_type: '{{ asset_mode }}' });
                const res = await fetch(`/api/v1/market/ai-coach?${params}`);
                const json = await res.json();
                if (json.status === 'success') {
                    this.data = json.data || json;
                } else if (json.portfolio_score != null || json.action_items || json.winners) {
                    this.data = json;
                } else {
                    this.error = json.message || 'Failed to load AI coach data';
                }
            } catch (e) {
                this.error = e.message;
            } finally {
                this.loading = false;
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            }
        },

        riskLevelClass(level) {
            if (!level) return 'bg-gray-700 text-gray-400';
            const l = level.toLowerCase();
            if (l === 'conservative') return 'bg-blue-900/50 text-blue-400';
            if (l === 'moderate') return 'bg-amber-900/50 text-amber-400';
            if (l === 'aggressive') return 'bg-red-900/50 text-red-400';
            return 'bg-gray-700 text-gray-400';
        },

        fmt(n, d=2) { return n != null ? Number(n).toFixed(d) : '-'; },
        fmtPct(n) { return n != null ? (n >= 0 ? '+' : '') + Number(n).toFixed(2) + '%' : '-'; },
        fmtPrice(n) { return n != null ? 'Rp ' + Number(n).toLocaleString('id-ID') : '-'; },
        fmtM(n) {
            if (!n) return '-';
            if (n >= 1e12) return 'Rp ' + (n/1e12).toFixed(1) + 'T';
            if (n >= 1e9) return 'Rp ' + (n/1e9).toFixed(1) + 'B';
            if (n >= 1e6) return 'Rp ' + (n/1e6).toFixed(1) + 'M';
            return 'Rp ' + Number(n).toLocaleString('id-ID');
        },
    };
}
</script>
{% endblock %}