{% extends "base.html" %} {% block title %}Admin - Model Management{% endblock
%} {% block content %}
<div class="container mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold mb-6">Admin: Model Management</h1>

  <!-- Cache Status -->
  <div class="bg-gray-800 p-4 rounded-lg shadow-md mb-6">
    <h2 class="text-xl font-semibold mb-2">Cache Status</h2>
    <div id="cache-status" class="grid grid-cols-2 gap-4">
      <p>
        <strong>Last Updated:</strong> <span id="last-updated">Loading...</span>
      </p>
      <p>
        <strong>Model Count:</strong> <span id="model-count">Loading...</span>
      </p>
    </div>
    <button
      id="refresh-button"
      class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    >
      Refresh Cache
    </button>
    <p id="refresh-status" class="mt-2 text-sm"></p>
  </div>

  <!-- Model List -->
  <div class="bg-gray-800 p-4 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-2">Available Models</h2>
    <table id="models-table" class="min-w-full divide-y divide-gray-700">
      <thead class="bg-gray-700">
        <tr>
          <th
            scope="col"
            class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            Name
          </th>
          <th
            scope="col"
            class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            ID
          </th>
          <th
            scope="col"
            class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            Modality
          </th>
          <th
            scope="col"
            class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            Context Length
          </th>
        </tr>
      </thead>
      <tbody
        id="models-table-body"
        class="bg-gray-800 divide-y divide-gray-700"
      >
        <!-- Data will be populated by JavaScript -->
        <tr>
          <td colspan="4" class="text-center py-4">Loading models...</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const lastUpdatedEl = document.getElementById("last-updated");
    const modelCountEl = document.getElementById("model-count");
    const modelsTableBody = document.getElementById("models-table-body");
    const refreshButton = document.getElementById("refresh-button");
    const refreshStatus = document.getElementById("refresh-status");

    async function fetchCacheStatus() {
      try {
        const response = await fetch("/api/v1/admin/models/status");
        if (!response.ok) throw new Error("Failed to fetch status");
        const data = await response.json();
        lastUpdatedEl.textContent = data.last_updated
          ? new Date(data.last_updated).toLocaleString()
          : "Never";
        modelCountEl.textContent = data.model_count;
      } catch (error) {
        lastUpdatedEl.textContent = "Error";
        modelCountEl.textContent = "Error";
        console.error("Error fetching cache status:", error);
      }
    }

    async function fetchModels() {
      try {
        const response = await fetch("/api/v1/admin/models");
        if (!response.ok) throw new Error("Failed to fetch models");
        const models = await response.json();
        modelsTableBody.innerHTML = ""; // Clear loading message
        if (models.length === 0) {
          modelsTableBody.innerHTML =
            '<tr><td colspan="4" class="text-center py-4">No models found in cache.</td></tr>';
        } else {
          models.forEach((model) => {
            const row = `
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">${model.name}</td>
                                <td class="px-6 py-4 whitespace-nowrap font-mono text-sm">${model.id}</td>
                                <td class="px-6 py-4 whitespace-nowrap">${model.modality}</td>
                                <td class="px-6 py-4 whitespace-nowrap">${model.context_length || "N/A"}</td>
                            </tr>
                        `;
            modelsTableBody.innerHTML += row;
          });
        }
      } catch (error) {
        modelsTableBody.innerHTML =
          '<tr><td colspan="4" class="text-center py-4 text-red-500">Error loading models.</td></tr>';
        console.error("Error fetching models:", error);
      }
    }

    async function refreshCache() {
      refreshButton.disabled = true;
      refreshStatus.textContent = "Refreshing...";
      refreshStatus.classList.remove("text-red-500", "text-green-500");

      try {
        const response = await fetch("/api/v1/admin/models/refresh", {
          method: "POST",
        });
        const data = await response.json();
        if (!response.ok) {
          throw new Error(data.detail || "Failed to refresh cache");
        }
        refreshStatus.textContent = `Successfully refreshed ${data.refreshed} models. Total: ${data.total_models}.`;
        refreshStatus.classList.add("text-green-500");
        fetchCacheStatus();
        fetchModels();
      } catch (error) {
        refreshStatus.textContent = `Error: ${error.message}`;
        refreshStatus.classList.add("text-red-500");
      } finally {
        refreshButton.disabled = false;
      }
    }

    fetchCacheStatus();
    fetchModels();
    refreshButton.addEventListener("click", refreshCache);
  });
</script>
{% endblock %}