{% extends "settings/_layout.html" %}
{% block title %}Settings - System{% endblock %}

{% block settings_content %}
<div class="space-y-6" x-data="{ info: null, loading: true }" x-init="
    fetch('/api/v1/settings/system-info')
        .then(r => r.json())
        .then(d => { info = d; loading = false; })
        .catch(() => { loading = false; KKToast.error('Gagal memuat system info'); })
">
    <h1 class="text-2xl font-bold text-white">System Info</h1>

    <!-- Loading -->
    <div x-show="loading" class="text-center py-12">
        <svg class="animate-spin h-8 w-8 text-koin-400 mx-auto" 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>
        <p class="text-gray-500 mt-2 text-sm">Memuat system info...</p>
    </div>

    <template x-if="info && !loading">
        <div class="space-y-6">
            <!-- App Info -->
            <div class="glass rounded-xl border border-gray-800 p-6">
                <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Application</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="bg-gray-800/50 rounded-lg p-4">
                        <p class="text-xs text-gray-500 mb-1">App Version</p>
                        <p class="text-lg font-bold text-koin-400" x-text="'v' + info.app_version"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-4">
                        <p class="text-xs text-gray-500 mb-1">Python</p>
                        <p class="text-lg font-bold text-white" x-text="info.python_version"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-4">
                        <p class="text-xs text-gray-500 mb-1">Flask</p>
                        <p class="text-lg font-bold text-white" x-text="info.flask_version"></p>
                    </div>
                    <div class="bg-gray-800/50 rounded-lg p-4">
                        <p class="text-xs text-gray-500 mb-1">Uptime</p>
                        <p class="text-lg font-bold text-white" x-text="info.uptime"></p>
                    </div>
                </div>
            </div>

            <!-- Data Source -->
            <div class="glass rounded-xl border border-gray-800 p-6">
                <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Active Data Source</h3>
                <div class="flex items-center gap-3">
                    <span class="px-3 py-1.5 rounded-lg bg-emerald-900/50 text-emerald-400 border border-emerald-700/50 text-sm font-medium capitalize" x-text="info.active_source"></span>
                    <a href="/settings/data-source" class="text-xs text-koin-400 hover:text-koin-300 transition">Ubah →</a>
                </div>
            </div>

            <!-- Database Stats -->
            <div class="glass rounded-xl border border-gray-800 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-800 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Database Statistics</h3>
                    <span class="text-xs text-gray-500">
                        Total: <span class="text-white font-medium" x-text="info.db_size_mb + ' MB'"></span>
                    </span>
                </div>
                <table class="w-full text-sm">
                    <tbody class="divide-y divide-gray-800/50">
                        <tr class="hover:bg-gray-800/30">
                            <td class="px-6 py-3 text-gray-400">Coins (Active / Total)</td>
                            <td class="px-6 py-3 text-right text-white font-medium">
                                <span x-text="KK.fmtIdr(info.db_stats.coins_active)"></span>
                                <span class="text-gray-500">/ <span x-text="KK.fmtIdr(info.db_stats.coins)"></span></span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-800/30">
                            <td class="px-6 py-3 text-gray-400">Coin Profiles</td>
                            <td class="px-6 py-3 text-right text-white font-medium" x-text="KK.fmtIdr(info.db_stats.profiles)"></td>
                        </tr>
                        <tr class="hover:bg-gray-800/30">
                            <td class="px-6 py-3 text-gray-400">OHLCV Records</td>
                            <td class="px-6 py-3 text-right text-white font-medium" x-text="KK.fmtIdr(info.db_stats.ohlcv)"></td>
                        </tr>
                        <tr class="hover:bg-gray-800/30">
                            <td class="px-6 py-3 text-gray-400">Trading Signals (Active / Total)</td>
                            <td class="px-6 py-3 text-right text-white font-medium">
                                <span x-text="KK.fmtIdr(info.db_stats.signals_active)"></span>
                                <span class="text-gray-500">/ <span x-text="KK.fmtIdr(info.db_stats.signals)"></span></span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-800/30">
                            <td class="px-6 py-3 text-gray-400">Portfolio Entries</td>
                            <td class="px-6 py-3 text-right text-white font-medium" x-text="KK.fmtIdr(info.db_stats.portfolio)"></td>
                        </tr>
                        <tr class="hover:bg-gray-800/30">
                            <td class="px-6 py-3 text-gray-400">Trade History</td>
                            <td class="px-6 py-3 text-right text-white font-medium" x-text="KK.fmtIdr(info.db_stats.trades)"></td>
                        </tr>
                        <tr class="hover:bg-gray-800/30">
                            <td class="px-6 py-3 text-gray-400">Prediction Queue</td>
                            <td class="px-6 py-3 text-right text-white font-medium" x-text="KK.fmtIdr(info.db_stats.queue)"></td>
                        </tr>
                        <tr class="hover:bg-gray-800/30">
                            <td class="px-6 py-3 text-gray-400">Watchlist Items</td>
                            <td class="px-6 py-3 text-right text-white font-medium" x-text="KK.fmtIdr(info.db_stats.watchlist)"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- About -->
            <div class="glass rounded-xl border border-gray-800 p-6">
                <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">About {{ app_name }}</h3>
                <p class="text-sm text-gray-400 leading-relaxed">
                    {{ app_name }} adalah aplikasi analisis & prediksi trading {% if is_stock_mode %}saham Indonesia{% else %}crypto{% endif %} yang menggunakan
                    31 algoritma (8 teknikal, 2 pattern, 4 kuantitatif, 1 ML ensemble, 5 strategi,
                    4 behavioral, 3 velocity, 4 money management) untuk menghasilkan sinyal trading
                    yang optimal dengan validasi profit bersih setelah biaya transaksi.
                </p>
                <p class="text-xs text-gray-600 mt-3">
                    Stack: Flask + MySQL (MariaDB) + Tailwind CSS + Alpine.js + HTMX
                </p>
            </div>
        </div>
    </template>
</div>
{% endblock %}