{# app/templates/admin/platform-health.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}

{% block title %}Platform Health{% endblock %}

{% block alpine_data %}adminPlatformHealth(){% endblock %}

{% block content %}
{% call page_header_flex(title='Platform Health', subtitle='System metrics, capacity monitoring, and scaling recommendations') %}
    {{ refresh_button(variant='primary') }}
{% endcall %}

{{ loading_state('Loading platform health...') }}

{{ error_state('Error loading platform health') }}

<!-- Main Content -->
<div x-show="!loading && !error" x-cloak class="space-y-6">
    <!-- Overall Status Banner -->
    <div
        :class="{
            'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800': health?.overall_status === 'healthy',
            'bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800': health?.overall_status === 'degraded',
            'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800': health?.overall_status === 'critical'
        }"
        class="px-4 py-3 rounded-lg border flex items-center justify-between"
    >
        <div class="flex items-center gap-3">
            <span
                :class="{
                    'text-green-600 dark:text-green-400': health?.overall_status === 'healthy',
                    'text-yellow-600 dark:text-yellow-400': health?.overall_status === 'degraded',
                    'text-red-600 dark:text-red-400': health?.overall_status === 'critical'
                }"
                x-html="health?.overall_status === 'healthy' ? $icon('check-circle', 'w-6 h-6') : (health?.overall_status === 'degraded' ? $icon('exclamation', 'w-6 h-6') : $icon('x-circle', 'w-6 h-6'))"
            ></span>
            <div>
                <span class="font-semibold capitalize" x-text="health?.overall_status || 'Unknown'"></span>
                <span class="text-sm text-gray-600 dark:text-gray-400 ml-2">
                    Infrastructure Tier: <span class="font-medium" x-text="health?.infrastructure_tier"></span>
                </span>
            </div>
        </div>
        <span class="text-xs text-gray-500 dark:text-gray-400" x-text="'Last updated: ' + formatTime(health?.timestamp)"></span>
    </div>

    <!-- Stats Cards -->
    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <!-- Products -->
        <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <div class="flex items-center">
                <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-400 dark:bg-blue-900/50">
                    <span x-html="$icon('cube', 'w-5 h-5')"></span>
                </div>
                <div>
                    <p class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-400">Products</p>
                    <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(health?.database?.products_count || 0)"></p>
                </div>
            </div>
        </div>

        <!-- Image Storage -->
        <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <div class="flex items-center">
                <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-400 dark:bg-purple-900/50">
                    <span x-html="$icon('photograph', 'w-5 h-5')"></span>
                </div>
                <div>
                    <p class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-400">Image Storage</p>
                    <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatStorage(health?.image_storage?.total_size_gb || 0)"></p>
                </div>
            </div>
        </div>

        <!-- Database Size -->
        <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <div class="flex items-center">
                <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-400 dark:bg-green-900/50">
                    <span x-html="$icon('database', 'w-5 h-5')"></span>
                </div>
                <div>
                    <p class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-400">Database</p>
                    <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(health?.database?.size_mb || 0) + ' MB'"></p>
                </div>
            </div>
        </div>

        <!-- Vendors -->
        <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <div class="flex items-center">
                <div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:text-orange-400 dark:bg-orange-900/50">
                    <span x-html="$icon('office-building', 'w-5 h-5')"></span>
                </div>
                <div>
                    <p class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-400">Vendors</p>
                    <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="formatNumber(health?.database?.vendors_count || 0)"></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Two Column Layout -->
    <div class="grid gap-6 lg:grid-cols-2">
        <!-- System Resources -->
        <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">System Resources</h3>
            <div class="space-y-4">
                <!-- CPU -->
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">CPU</span>
                        <span class="text-sm font-semibold" x-text="(health?.system?.cpu_percent || 0).toFixed(1) + '%'"></span>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                        <div
                            :class="{
                                'bg-green-500': (health?.system?.cpu_percent || 0) < 70,
                                'bg-yellow-500': (health?.system?.cpu_percent || 0) >= 70 && (health?.system?.cpu_percent || 0) < 85,
                                'bg-red-500': (health?.system?.cpu_percent || 0) >= 85
                            }"
                            class="h-2 rounded-full transition-all"
                            :style="'width: ' + Math.min(health?.system?.cpu_percent || 0, 100) + '%'"
                        ></div>
                    </div>
                </div>

                <!-- Memory -->
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Memory</span>
                        <span class="text-sm">
                            <span class="font-semibold" x-text="(health?.system?.memory_percent || 0).toFixed(1) + '%'"></span>
                            <span class="text-gray-500 dark:text-gray-400" x-text="' (' + (health?.system?.memory_used_gb || 0).toFixed(1) + ' / ' + (health?.system?.memory_total_gb || 0).toFixed(1) + ' GB)'"></span>
                        </span>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                        <div
                            :class="{
                                'bg-green-500': (health?.system?.memory_percent || 0) < 75,
                                'bg-yellow-500': (health?.system?.memory_percent || 0) >= 75 && (health?.system?.memory_percent || 0) < 90,
                                'bg-red-500': (health?.system?.memory_percent || 0) >= 90
                            }"
                            class="h-2 rounded-full transition-all"
                            :style="'width: ' + Math.min(health?.system?.memory_percent || 0, 100) + '%'"
                        ></div>
                    </div>
                </div>

                <!-- Disk -->
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Disk</span>
                        <span class="text-sm">
                            <span class="font-semibold" x-text="(health?.system?.disk_percent || 0).toFixed(1) + '%'"></span>
                            <span class="text-gray-500 dark:text-gray-400" x-text="' (' + (health?.system?.disk_used_gb || 0).toFixed(1) + ' / ' + (health?.system?.disk_total_gb || 0).toFixed(1) + ' GB)'"></span>
                        </span>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                        <div
                            :class="{
                                'bg-green-500': (health?.system?.disk_percent || 0) < 70,
                                'bg-yellow-500': (health?.system?.disk_percent || 0) >= 70 && (health?.system?.disk_percent || 0) < 85,
                                'bg-red-500': (health?.system?.disk_percent || 0) >= 85
                            }"
                            class="h-2 rounded-full transition-all"
                            :style="'width: ' + Math.min(health?.system?.disk_percent || 0, 100) + '%'"
                        ></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Capacity Thresholds -->
        <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Capacity Thresholds</h3>
            <div class="space-y-3">
                <template x-for="threshold in health?.thresholds || []" :key="threshold.name">
                    <div class="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-700 last:border-0">
                        <div class="flex items-center gap-2">
                            <span
                                :class="{
                                    'bg-green-100 text-green-600 dark:bg-green-900/50 dark:text-green-400': threshold.status === 'ok',
                                    'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/50 dark:text-yellow-400': threshold.status === 'warning',
                                    'bg-red-100 text-red-600 dark:bg-red-900/50 dark:text-red-400': threshold.status === 'critical'
                                }"
                                class="w-2 h-2 rounded-full"
                            ></span>
                            <span class="text-sm text-gray-700 dark:text-gray-300" x-text="threshold.name"></span>
                        </div>
                        <div class="text-right">
                            <span class="text-sm font-medium" x-text="formatNumber(threshold.current)"></span>
                            <span class="text-xs text-gray-500 dark:text-gray-400" x-text="' / ' + formatNumber(threshold.limit)"></span>
                            <span
                                :class="{
                                    'text-green-600 dark:text-green-400': threshold.status === 'ok',
                                    'text-yellow-600 dark:text-yellow-400': threshold.status === 'warning',
                                    'text-red-600 dark:text-red-400': threshold.status === 'critical'
                                }"
                                class="text-xs ml-1"
                                x-text="'(' + threshold.percent_used.toFixed(0) + '%)'"
                            ></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Recommendations -->
    <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Scaling Recommendations</h3>
        <div class="space-y-3">
            <template x-for="rec in health?.recommendations || []" :key="rec.title">
                <div
                    :class="{
                        'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20': rec.priority === 'info',
                        'border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-900/20': rec.priority === 'warning',
                        'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20': rec.priority === 'critical'
                    }"
                    class="p-4 rounded-lg border"
                >
                    <div class="flex items-start gap-3">
                        <span
                            :class="{
                                'text-blue-600 dark:text-blue-400': rec.priority === 'info',
                                'text-yellow-600 dark:text-yellow-400': rec.priority === 'warning',
                                'text-red-600 dark:text-red-400': rec.priority === 'critical'
                            }"
                            x-html="rec.priority === 'info' ? $icon('information-circle', 'w-5 h-5') : (rec.priority === 'warning' ? $icon('exclamation', 'w-5 h-5') : $icon('x-circle', 'w-5 h-5'))"
                        ></span>
                        <div class="flex-1">
                            <p class="font-medium text-gray-800 dark:text-gray-200" x-text="rec.title"></p>
                            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-text="rec.description"></p>
                            <p x-show="rec.action" class="text-sm font-medium mt-2" x-text="rec.action"></p>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- Quick Links -->
    <div class="px-4 py-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Related Resources</h3>
        <div class="grid gap-4 md:grid-cols-3">
            <a href="/admin/code-quality" class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                <span class="text-purple-600 dark:text-purple-400" x-html="$icon('code', 'w-5 h-5')"></span>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Code Quality Dashboard</span>
            </a>
            <a href="/admin/settings" class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                <span class="text-gray-600 dark:text-gray-400" x-html="$icon('cog', 'w-5 h-5')"></span>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Platform Settings</span>
            </a>
            <a href="https://docs.wizamart.com/architecture/capacity-planning/" target="_blank" class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                <span class="text-blue-600 dark:text-blue-400" x-html="$icon('book-open', 'w-5 h-5')"></span>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Capacity Planning Docs</span>
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='admin/js/platform-health.js') }}"></script>
{% endblock %}