<layout name="admin" />

<x-breadcrumbs items='[
    {"label": "Admin", "url": "/admin"},
    {"label": "ML Dashboard", "url": "/admin/ml/dashboard"}
]' />

<div class="admin-page">
    <div class="admin-page__header">
        <div class="admin-page__header-content">
            <h1 class="admin-page__title">{{ $page_title }}</h1>
            <p class="admin-page__subtitle">Monitor machine learning model performance and health metrics</p>
        </div>
        <div class="admin-page__actions">
            <a href="{{ $api_dashboard_url }}" class="admin-button admin-button--secondary" target="_blank">
                <svg class="admin-icon" width="16" height="16" fill="currentColor">
                    <path d="M8 2a6 6 0 100 12A6 6 0 008 2zm0 10a4 4 0 110-8 4 4 0 010 8z"/>
                </svg>
                View API
            </a>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="admin-grid admin-grid--3-col">
        <!-- System Health Card -->
        <div class="admin-card">
            <div class="admin-card__header">
                <h3 class="admin-card__title">System Health</h3>
            </div>
            <div class="admin-card__content">
                <div class="admin-stat-list">
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Overall Status</span>
                        <span class="admin-stat-item__value">
                            <span class="admin-badge admin-badge--{{ $overall_badge }}">{{ $overall_status }}</span>
                        </span>
                    </div>
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Health Percentage</span>
                        <span class="admin-stat-item__value">{{ $health_percentage }}%</span>
                    </div>
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Average Accuracy</span>
                        <span class="admin-stat-item__value">{{ $average_accuracy }}%</span>
                    </div>
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Time Window</span>
                        <span class="admin-stat-item__value">{{ $time_window_hours }} hours</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Model Statistics Card -->
        <div class="admin-card">
            <div class="admin-card__header">
                <h3 class="admin-card__title">Model Statistics</h3>
            </div>
            <div class="admin-card__content">
                <div class="admin-stat-list">
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Total Models</span>
                        <span class="admin-stat-item__value">{{ $total_models }}</span>
                    </div>
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Healthy</span>
                        <span class="admin-stat-item__value">
                            <span class="admin-badge admin-badge--success">{{ $healthy_models }}</span>
                        </span>
                    </div>
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Degraded</span>
                        <span class="admin-stat-item__value">
                            <span class="admin-badge admin-badge--warning">{{ $degraded_models }}</span>
                        </span>
                    </div>
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Critical</span>
                        <span class="admin-stat-item__value">
                            <span class="admin-badge admin-badge--danger">{{ $critical_models }}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Performance Metrics Card -->
        <div class="admin-card">
            <div class="admin-card__header">
                <h3 class="admin-card__title">Performance Metrics</h3>
            </div>
            <div class="admin-card__content">
                <div class="admin-stat-list">
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Total Predictions</span>
                        <span class="admin-stat-item__value">{{ $total_predictions }}</span>
                    </div>
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Supervised Models</span>
                        <span class="admin-stat-item__value">{{ $supervised_count }}</span>
                    </div>
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Unsupervised Models</span>
                        <span class="admin-stat-item__value">{{ $unsupervised_count }}</span>
                    </div>
                    <div class="admin-stat-item">
                        <span class="admin-stat-item__label">Reinforcement Models</span>
                        <span class="admin-stat-item__value">{{ $reinforcement_count }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Degradation Alerts Section -->
    <div class="admin-card" if="{{ $has_alerts }}">
        <div class="admin-card__header">
            <h3 class="admin-card__title">
                Degradation Alerts
                <span class="admin-badge admin-badge--danger">{{ $alert_count }}</span>
            </h3>
        </div>
        <div class="admin-card__content">
            <div class="admin-table-container">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Model</th>
                            <th>Version</th>
                            <th>Current Accuracy</th>
                            <th>Threshold</th>
                            <th>Severity</th>
                            <th>Recommendation</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr foreach="$alerts as $alert">
                            <td>
                                <strong>{{ $alert['model_name'] }}</strong>
                            </td>
                            <td>
                                <code>{{ $alert['version'] }}</code>
                            </td>
                            <td>
                                <span class="admin-badge admin-badge--{{ $alert['severity_badge'] }}">
                                    {{ $alert['current_accuracy'] }}%
                                </span>
                            </td>
                            <td>{{ $alert['threshold'] }}%</td>
                            <td>
                                <span class="admin-badge admin-badge--{{ $alert['severity_badge'] }}">
                                    {{ $alert['severity'] }}
                                </span>
                            </td>
                            <td>{{ $alert['recommendation'] }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Models Overview Section -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h3 class="admin-card__title">Models Overview</h3>
        </div>
        <div class="admin-card__content">
            <div class="admin-table-container">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Model Name</th>
                            <th>Version</th>
                            <th>Type</th>
                            <th>Accuracy</th>
                            <th>Precision</th>
                            <th>Recall</th>
                            <th>F1 Score</th>
                            <th>Predictions</th>
                            <th>Avg Confidence</th>
                            <th>Threshold</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr foreach="$models as $model">
                            <td>
                                <strong>{{ $model['model_name'] }}</strong>
                            </td>
                            <td>
                                <code>{{ $model['version'] }}</code>
                            </td>
                            <td>
                                <span class="admin-badge admin-badge--info">
                                    {{ $model['type'] }}
                                </span>
                            </td>
                            <td>{{ $model['accuracy'] }}%</td>
                            <td>
                                <span if="!{{ $model['precision'] }}">-</span>
                                <span if="{{ $model['precision'] }}">{{ $model['precision'] }}%</span>
                            </td>
                            <td>
                                <span if="!{{ $model['recall'] }}">-</span>
                                <span if="{{ $model['recall'] }}">{{ $model['recall'] }}%</span>
                            </td>
                            <td>
                                <span if="!{{ $model['f1_score'] }}">-</span>
                                <span if="{{ $model['f1_score'] }}">{{ $model['f1_score'] }}%</span>
                            </td>
                            <td>{{ $model['total_predictions'] }}</td>
                            <td>
                                <span if="!{{ $model['average_confidence'] }}">-</span>
                                <span if="{{ $model['average_confidence'] }}">{{ $model['average_confidence'] }}%</span>
                            </td>
                            <td>{{ $model['threshold'] }}</td>
                            <td>
                                <span class="admin-badge admin-badge--{{ $model['status_badge'] }}">
                                    {{ $model['status'] }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Confusion Matrices Section -->
    <div class="admin-card" if="{{ $has_confusion_matrices }}">
        <div class="admin-card__header">
            <h3 class="admin-card__title">Classification Performance (Confusion Matrices)</h3>
        </div>
        <div class="admin-card__content">
            <div class="admin-grid admin-grid--2-col">
                <div foreach="$confusion_matrices as $matrix" class="confusion-matrix-card">
                    <h4 class="confusion-matrix-card__title">{{ $matrix['model_name'] }} v{{ $matrix['version'] }}</h4>

                    <div class="confusion-matrix">
                        <div class="confusion-matrix__grid">
                            <!-- True Positive -->
                            <div class="confusion-matrix__cell confusion-matrix__cell--tp">
                                <div class="confusion-matrix__cell-label">True Positive</div>
                                <div class="confusion-matrix__cell-value">{{ $matrix['true_positives'] }}</div>
                            </div>

                            <!-- False Positive -->
                            <div class="confusion-matrix__cell confusion-matrix__cell--fp">
                                <div class="confusion-matrix__cell-label">False Positive</div>
                                <div class="confusion-matrix__cell-value">{{ $matrix['false_positives'] }}</div>
                            </div>

                            <!-- False Negative -->
                            <div class="confusion-matrix__cell confusion-matrix__cell--fn">
                                <div class="confusion-matrix__cell-label">False Negative</div>
                                <div class="confusion-matrix__cell-value">{{ $matrix['false_negatives'] }}</div>
                            </div>

                            <!-- True Negative -->
                            <div class="confusion-matrix__cell confusion-matrix__cell--tn">
                                <div class="confusion-matrix__cell-label">True Negative</div>
                                <div class="confusion-matrix__cell-value">{{ $matrix['true_negatives'] }}</div>
                            </div>
                        </div>

                        <div class="confusion-matrix__rates">
                            <div class="admin-stat-item">
                                <span class="admin-stat-item__label">False Positive Rate</span>
                                <span class="admin-stat-item__value">
                                    <span class="admin-badge admin-badge--{{ $matrix['fp_rate_badge'] }}">
                                        {{ $matrix['fp_rate_percent'] }}%
                                    </span>
                                </span>
                            </div>
                            <div class="admin-stat-item">
                                <span class="admin-stat-item__label">False Negative Rate</span>
                                <span class="admin-stat-item__value">
                                    <span class="admin-badge admin-badge--{{ $matrix['fn_rate_badge'] }}">
                                        {{ $matrix['fn_rate_percent'] }}%
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Model Registry Summary -->
    <div class="admin-card" if="{{ $has_registry_summary }}">
        <div class="admin-card__header">
            <h3 class="admin-card__title">Model Registry Summary</h3>
        </div>
        <div class="admin-card__content">
            <div class="admin-grid admin-grid--3-col">
                <div class="admin-stat-item">
                    <span class="admin-stat-item__label">Total Versions</span>
                    <span class="admin-stat-item__value">{{ $registry_total_versions }}</span>
                </div>
                <div class="admin-stat-item">
                    <span class="admin-stat-item__label">Production Models</span>
                    <span class="admin-stat-item__value">
                        <span class="admin-badge admin-badge--success">{{ $registry_production_count }}</span>
                    </span>
                </div>
                <div class="admin-stat-item">
                    <span class="admin-stat-item__label">Development Models</span>
                    <span class="admin-stat-item__value">
                        <span class="admin-badge admin-badge--info">{{ $registry_development_count }}</span>
                    </span>
                </div>
            </div>

            <div class="admin-table-container">
                <table class="admin-table admin-table--compact">
                    <thead>
                        <tr>
                            <th>Model Name</th>
                            <th>Total Versions</th>
                            <th>Type</th>
                            <th>Latest Version</th>
                            <th>Environment</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr foreach="$registry_models as $regModel">
                            <td><strong>{{ $regModel['model_name'] }}</strong></td>
                            <td>{{ $regModel['version_count'] }}</td>
                            <td>
                                <span class="admin-badge admin-badge--info">{{ $regModel['type'] }}</span>
                            </td>
                            <td><code>{{ $regModel['latest_version'] }}</code></td>
                            <td>
                                <span class="admin-badge admin-badge--{{ $regModel['environment'] === 'production' ? 'success' : 'info' }}">
                                    {{ $regModel['environment'] }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- API Information Card -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h3 class="admin-card__title">API Endpoints</h3>
        </div>
        <div class="admin-card__content">
            <div class="admin-stat-list">
                <div class="admin-stat-item">
                    <span class="admin-stat-item__label">Dashboard Data</span>
                    <span class="admin-stat-item__value">
                        <code>GET {{ $api_dashboard_url }}</code>
                    </span>
                </div>
                <div class="admin-stat-item">
                    <span class="admin-stat-item__label">Health Check</span>
                    <span class="admin-stat-item__value">
                        <code>GET {{ $api_health_url }}</code>
                    </span>
                </div>
                <div class="admin-stat-item">
                    <span class="admin-stat-item__label">Confusion Matrices</span>
                    <span class="admin-stat-item__value">
                        <code>GET /api/ml/dashboard/confusion-matrices</code>
                    </span>
                </div>
                <div class="admin-stat-item">
                    <span class="admin-stat-item__label">Registry Summary</span>
                    <span class="admin-stat-item__value">
                        <code>GET /api/ml/dashboard/registry-summary</code>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
