{% extends "base.html" %}
{% block title %}Chart Pattern Recognition{% endblock %}
{% block content %}
<div x-data="chartPatterns()" x-init="init()" class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-3">
                <div class="p-2 bg-koin-600/20 rounded-xl">
                    <svg class="w-6 h-6 text-koin-400" 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.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/></svg>
                </div>
                AI Chart Pattern Recognition
            </h1>
            <p class="text-gray-400 text-sm mt-1">Detect classic chart patterns with AI-powered reliability scoring</p>
        </div>
        <div class="flex items-center gap-2">
            <button @click="loadData()" class="px-4 py-2 bg-koin-600 hover:bg-koin-500 text-white text-sm font-medium rounded-lg transition 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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
                <span x-show="!loading">Scan Patterns</span>
                <span x-show="loading">Scanning...</span>
            </button>
        </div>
    </div>

    <!-- Loading -->
    <template x-if="loading">
        <div class="flex items-center justify-center py-20">
            <div class="flex items-center gap-3 text-gray-400">
                <svg class="w-5 h-5 animate-spin" 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>
                <span>Scanning for chart patterns...</span>
            </div>
        </div>
    </template>

    <!-- Content -->
    <template x-if="!loading && data">
        <div class="space-y-6">
            <!-- Summary Cards -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Patterns Found</div>
                    <div class="text-xl font-bold text-white mt-1" x-text="data.total_patterns || 0"></div>
                </div>
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Bullish Patterns</div>
                    <div class="text-xl font-bold text-emerald-400 mt-1" x-text="data.bullish_count || 0"></div>
                </div>
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Bearish Patterns</div>
                    <div class="text-xl font-bold text-red-400 mt-1" x-text="data.bearish_count || 0"></div>
                </div>
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Avg Reliability</div>
                    <div class="text-xl font-bold text-koin-400 mt-1" x-text="(data.avg_reliability || 0).toFixed(2) + '%'"></div>
                </div>
            </div>

            <!-- Main Table -->
            <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-white">Detected Patterns</h3>
                    <span class="text-xs text-gray-500" x-text="(data.patterns || []).length + ' patterns'"></span>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-900/50 text-gray-400 text-xs uppercase">
                            <tr>
                                <th class="px-4 py-3 text-left">Symbol</th>
                                <th class="px-4 py-3 text-left">Pattern Type</th>
                                <th class="px-4 py-3 text-center">Direction</th>
                                <th class="px-4 py-3 text-left">Reliability</th>
                                <th class="px-4 py-3 text-right">Target Price</th>
                                <th class="px-4 py-3 text-right">Entry Price</th>
                                <th class="px-4 py-3 text-right">Stop Loss</th>
                                <th class="px-4 py-3 text-right">Risk/Reward</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700/50">
                            <template x-for="item in (data.patterns || [])" :key="item.symbol + '-' + item.pattern_type">
                                <tr class="hover:bg-gray-700/30 transition">
                                    <td class="px-4 py-3">
                                        <span class="text-white font-medium" x-text="item.symbol"></span>
                                    </td>
                                    <!-- Pattern Type Badge -->
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="getPatternClass(item.pattern_type)"
                                              x-text="item.pattern_type"></span>
                                    </td>
                                    <!-- Direction -->
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="item.direction === 'Bullish' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="item.direction"></span>
                                    </td>
                                    <!-- Reliability Bar -->
                                    <td class="px-4 py-3">
                                        <div class="flex items-center gap-2">
                                            <div class="flex-1 h-2 bg-gray-700 rounded-full overflow-hidden max-w-[80px]">
                                                <div class="h-full rounded-full transition-all"
                                                     :class="item.reliability > 70 ? 'bg-emerald-500' : item.reliability >= 40 ? 'bg-yellow-500' : 'bg-red-500'"
                                                     :style="'width: ' + Math.min(item.reliability, 100) + '%'"></div>
                                            </div>
                                            <span class="text-xs font-mono w-8"
                                                  :class="item.reliability > 70 ? 'text-emerald-400' : item.reliability >= 40 ? 'text-yellow-400' : 'text-red-400'"
                                                  x-text="item.reliability.toFixed(0) + '%'"></span>
                                        </div>
                                    </td>
                                    <!-- Target Price -->
                                    <td class="px-4 py-3 text-right">
                                        <span class="font-mono text-xs text-emerald-400" x-text="'$' + (item.target_price || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                                    </td>
                                    <!-- Entry Price -->
                                    <td class="px-4 py-3 text-right">
                                        <span class="font-mono text-xs text-white" x-text="'$' + (item.entry_price || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                                    </td>
                                    <!-- Stop Loss -->
                                    <td class="px-4 py-3 text-right">
                                        <span class="font-mono text-xs text-red-400" x-text="'$' + (item.stop_loss || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                                    </td>
                                    <!-- Risk/Reward -->
                                    <td class="px-4 py-3 text-right">
                                        <span class="font-mono text-xs font-semibold"
                                              :class="calcRR(item) >= 2 ? 'text-emerald-400' : calcRR(item) >= 1 ? 'text-yellow-400' : 'text-red-400'"
                                              x-text="calcRR(item).toFixed(2) + 'x'"></span>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <template x-if="!data.patterns || data.patterns.length === 0">
                    <div class="px-4 py-8 text-center text-gray-500 text-sm">No chart patterns detected at this time.</div>
                </template>
            </div>
        </div>
    </template>
</div>
{% endblock %}

{% block scripts %}
<script>
function chartPatterns() {
    return {
        loading: true,
        data: null,
        asset_type: '{{ asset_mode }}',

        async init() {
            await this.loadData();
        },

        async loadData() {
            this.loading = true;
            try {
                const resp = await fetch(`/api/v1/market/chart-patterns?asset_type=${this.asset_type}`);
                if (resp.redirected) { window.location.href = '/auth/login'; return; }
                this.data = await resp.json();
            } catch(e) { console.error('chartPatterns loadData error:', e); }
            this.loading = false;
        },

        getPatternClass(type) {
            const bullish = ['Inv H&S', 'Inverse Head & Shoulders', 'Double Bottom', 'Asc Triangle', 'Ascending Triangle', 'Falling Wedge', 'Bull Flag'];
            const bearish = ['H&S', 'Head & Shoulders', 'Double Top', 'Desc Triangle', 'Descending Triangle', 'Rising Wedge', 'Bear Flag'];
            const neutral = ['Sym Triangle', 'Symmetrical Triangle'];

            if (bullish.some(p => type.includes(p))) return 'bg-emerald-900/50 text-emerald-400 border border-emerald-700/50';
            if (bearish.some(p => type.includes(p))) return 'bg-red-900/50 text-red-400 border border-red-700/50';
            if (neutral.some(p => type.includes(p))) return 'bg-yellow-900/50 text-yellow-400 border border-yellow-700/50';
            return 'bg-gray-700 text-gray-400';
        },

        calcRR(item) {
            if (!item.entry_price || !item.stop_loss || item.entry_price === item.stop_loss) return 0;
            const risk = Math.abs(item.entry_price - item.stop_loss);
            const reward = Math.abs(item.target_price - item.entry_price);
            return risk > 0 ? reward / risk : 0;
        }
    }
}
</script>
{% endblock %}