const assets = {
  "openvla-7b": "/assets/openvla-tabletop.png",
  "octo-small-1.5": "/assets/octo-bridge.jpg",
  "ltx-video-0.9.5": "/assets/ltx-prediction.png",
  "groot-n1-5-3b": "/assets/groot-n1-5-3b.png",
  "pi0-5-base": "/assets/pi0-5-base.png",
  "pi0-base": "/assets/pi0-base.png",
  "smolvla-base": "/assets/smolvla-base.png",
  "ecot-openvla-7b-bridge": "/assets/ecot-openvla-7b-bridge.png",
  "droid-1-0-1": "/assets/droid-1-0-1.png",
  "modified-libero-rlds": "/assets/modified-libero-rlds.png",
  pusht: "/assets/pusht.png",
  "aloha-transfer-cube-human": "/assets/aloha-transfer-cube-human.png",
  "metaworld-mt50": "/assets/metaworld-mt50.png",
  "xarm-lift-medium": "/assets/xarm-lift-medium.png",
};

const taskLabels = { vla: "VLA", world: "World", state_world: "State space" };
const categoryLabels = {
  generalist: "Generalist",
  manipulation: "Manipulation",
  simulation: "Simulation",
};
const modelFilters = [
  ["all", "All"],
  ["vla", "VLA"],
  ["world", "World"],
  ["state_world", "State space"],
];
const datasetFilters = [
  ["all", "All"],
  ["generalist", "Generalist"],
  ["manipulation", "Manipulation"],
  ["simulation", "Simulation"],
];
const state = {
  models: [],
  datasets: [],
  view: "models",
  filter: "all",
  verifiedOnly: false,
  query: "",
  sort: "verified",
  current: null,
};

const $ = (id) => document.getElementById(id);
const grid = $("modelGrid");
const dialog = $("modelDialog");
const submissionDialog = $("submissionDialog");

function escapeHtml(value) {
  return String(value ?? "").replace(/[&<>'"]/g, (char) => ({
    "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;",
  })[char]);
}

async function api(path, options = {}) {
  const response = await fetch(path, {
    ...options,
    headers: { Accept: "application/json", ...(options.headers || {}) },
  });
  if (!response.ok) {
    let message = `Request failed (${response.status})`;
    try {
      const body = await response.json();
      if (typeof body.detail === "string") message = body.detail;
      else if (Array.isArray(body.detail)) message = body.detail.map((item) => item.msg).join("; ");
    } catch (_) {
      // Keep the status-based message when the response is not JSON.
    }
    throw new Error(message);
  }
  return response.json();
}

function imageFor(item) {
  return assets[item.slug] || "/assets/openvla-tabletop.png";
}

function badge(label, className = "") {
  return `<span class="badge ${className}">${escapeHtml(label)}</span>`;
}

function compactNumber(value) {
  return new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(value || 0);
}

function storageLabel(value) {
  if (value >= 100) return `${Math.round(value)} GB`;
  if (value >= 10) return `${value.toFixed(1)} GB`;
  if (value >= 1) return `${value.toFixed(2)} GB`;
  return `${Math.round(value * 1000)} MB`;
}

function commandFor(item, kind) {
  if (kind === "dataset") {
    return `hf download ${item.source.repo_id} --repo-type dataset --revision ${item.source.revision} --local-dir .cache/datasets/${item.slug}`;
  }
  if (item.verification.status !== "verified") {
    return `hf download ${item.source.repo_id} --revision ${item.source.revision} --local-dir .cache/models/${item.slug}`;
  }
  const path = `.cache/models/${item.slug}`;
  const dtype = item.runtime.dtype ? ` --dtype ${item.runtime.dtype}` : "";
  return `airgpt pull ${item.slug} --local-dir ${path}\nairgpt serve --model ${item.runtime.registry_model} --model-path ${path} --device ${item.runtime.device}${dtype}`;
}

function currentItems() {
  return state.view === "models" ? state.models : state.datasets;
}

function visibleItems() {
  const needle = state.query.trim().toLowerCase();
  const items = currentItems().filter((item) => {
    const extra = state.view === "models"
      ? [item.task, item.runtime.backend]
      : [item.category, item.robot, item.format, ...item.tasks];
    const haystack = [item.slug, item.display_name, item.summary, item.source.repo_id, ...item.tags, ...extra].join(" ").toLowerCase();
    const filterValue = state.view === "models" ? item.task : item.category;
    return (!needle || haystack.includes(needle))
      && (state.filter === "all" || filterValue === state.filter)
      && (state.view !== "models" || !state.verifiedOnly || item.verification.status === "verified");
  });
  items.sort((a, b) => {
    if (state.sort === "name") return a.display_name.localeCompare(b.display_name);
    if (state.sort === "vram") return a.hardware.recommended_vram_gb - b.hardware.recommended_vram_gb;
    if (state.sort === "size") return a.storage_gb - b.storage_gb;
    if (state.sort === "popular") return (b.upstream?.downloads || 0) - (a.upstream?.downloads || 0) || a.slug.localeCompare(b.slug);
    return Number(b.verification.status === "verified") - Number(a.verification.status === "verified") || a.slug.localeCompare(b.slug);
  });
  return items;
}

function modelCardTemplate(model) {
  const repositoryThumb = model.verification.status !== "verified" ? " repository-thumb" : "";
  const mediaClass = model.slug === "openvla-7b" ? "card-media synthetic" : `card-media${repositoryThumb}`;
  const tags = model.tags.slice(0, 4).map((tag) => `<span class="tag">${escapeHtml(tag)}</span>`).join("");
  const statusClass = model.verification.status === "verified" ? "verified" : "community";
  return `
    <div class="${mediaClass}">
      <img src="${imageFor(model)}" alt="${escapeHtml(model.display_name)} catalog preview" loading="lazy" width="640" height="360">
      <div class="card-badges">
        ${badge(model.verification.status, statusClass)}
        ${badge(taskLabels[model.task], model.task === "world" ? "world" : "")}
      </div>
    </div>
    <div class="card-body">
      <p class="repo-name">${escapeHtml(model.source.repo_id)}</p>
      <h2>${escapeHtml(model.display_name)}</h2>
      <p class="card-summary">${escapeHtml(model.summary)}</p>
      <div class="card-specs">
        <div class="card-spec"><small>VRAM</small><strong>${model.hardware.recommended_vram_gb} GB</strong></div>
        <div class="card-spec"><small>Backend</small><strong>${escapeHtml(model.runtime.backend)}</strong></div>
        <div class="card-spec"><small>License</small><strong>${escapeHtml(model.source.license)}</strong></div>
      </div>
      <div class="tag-list">${tags}</div>
    </div>`;
}

function datasetCardTemplate(dataset) {
  const tags = dataset.tags.slice(0, 4).map((tag) => `<span class="tag">${escapeHtml(tag)}</span>`).join("");
  return `
    <div class="card-media repository-thumb">
      <img src="${imageFor(dataset)}" alt="${escapeHtml(dataset.display_name)} repository preview" loading="lazy" width="640" height="360">
      <div class="card-badges">
        ${badge("curated", "verified")}
        ${badge(categoryLabels[dataset.category], dataset.category === "simulation" ? "world" : "")}
      </div>
    </div>
    <div class="card-body">
      <p class="repo-name">${escapeHtml(dataset.source.repo_id)}</p>
      <h2>${escapeHtml(dataset.display_name)}</h2>
      <p class="card-summary">${escapeHtml(dataset.summary)}</p>
      <div class="card-specs">
        <div class="card-spec"><small>Storage</small><strong>${storageLabel(dataset.storage_gb)}</strong></div>
        <div class="card-spec"><small>Format</small><strong>${escapeHtml(dataset.format.split(" / ")[0])}</strong></div>
        <div class="card-spec"><small>License</small><strong>${escapeHtml(dataset.source.license)}</strong></div>
      </div>
      <div class="tag-list">${tags}</div>
    </div>`;
}

function renderFilters() {
  const filters = state.view === "models" ? modelFilters : datasetFilters;
  $("taskTabs").setAttribute("aria-label", state.view === "models" ? "Model task" : "Dataset category");
  $("taskTabs").innerHTML = filters.map(([value, label]) => `
    <button type="button" class="${state.filter === value ? "active" : ""}" data-filter="${value}" role="tab" aria-selected="${state.filter === value}">${label}</button>`).join("");
}

function renderToolbar() {
  const datasets = state.view === "datasets";
  $("catalogTitle").textContent = datasets ? "Datasets" : "Models";
  $("catalogEyebrow").textContent = datasets ? "Robotics data" : "Embodied intelligence";
  $("searchInput").placeholder = datasets
    ? "Dataset, robot, task, format, or tag"
    : "Model, task, backend, or tag";
  $("verifiedFilter").classList.toggle("hidden", datasets);
  $("openSubmission").classList.toggle("hidden", datasets);
  const options = datasets
    ? [["popular", "Most downloaded"], ["name", "Name"], ["size", "Storage low to high"]]
    : [["verified", "Verified first"], ["popular", "Most downloaded"], ["name", "Name"], ["vram", "VRAM low to high"]];
  if (!options.some(([value]) => value === state.sort)) state.sort = datasets ? "popular" : "verified";
  $("sortSelect").innerHTML = options.map(([value, label]) => `<option value="${value}"${value === state.sort ? " selected" : ""}>${label}</option>`).join("");
  renderFilters();
}

function render() {
  const items = visibleItems();
  const singular = state.view === "models" ? "model" : "dataset";
  $("resultCount").textContent = `${items.length} ${singular}${items.length === 1 ? "" : "s"}`;
  grid.innerHTML = "";
  items.forEach((item) => {
    const card = document.createElement("article");
    card.className = "model-card";
    card.tabIndex = 0;
    card.dataset.slug = item.slug;
    card.setAttribute("aria-label", `Open ${item.display_name}`);
    card.innerHTML = state.view === "models" ? modelCardTemplate(item) : datasetCardTemplate(item);
    card.addEventListener("click", () => openItem(item, state.view === "models" ? "model" : "dataset", true));
    card.addEventListener("keydown", (event) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        openItem(item, state.view === "models" ? "model" : "dataset", true);
      }
    });
    grid.appendChild(card);
  });
  $("emptyState").classList.toggle("hidden", items.length !== 0);
}

function spec(label, value) {
  return `<div><dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd></div>`;
}

function openItem(item, kind, updateHistory = false) {
  state.current = { item, kind };
  const isDataset = kind === "dataset";
  const upstream = item.upstream;
  $("detailImage").src = imageFor(item);
  $("detailImage").alt = `${item.display_name} catalog preview`;
  $("detailRepo").textContent = item.source.repo_id;
  $("detailTitle").textContent = item.display_name;
  $("detailSummary").textContent = item.summary;
  $("modelCardLink").href = `https://huggingface.co/${isDataset ? "datasets/" : ""}${item.source.repo_id}`;
  $("modelCardLink").textContent = isDataset ? "Dataset card" : "Model card";
  $("detailImage").parentElement.classList.toggle("repository-thumb", isDataset || item.verification.status !== "verified");

  const updateBadge = upstream?.update_available ? badge("update available", "update") : "";
  const specs = [];
  if (isDataset) {
    $("detailBadges").innerHTML = badge("curated", "verified") + badge(categoryLabels[item.category], item.category === "simulation" ? "world" : "") + badge(item.source.license, "license") + updateBadge;
    specs.push(
      spec("Storage", storageLabel(item.storage_gb)),
      spec("Dataset size", item.size_label),
      spec("Format", item.format),
      spec("Robot", item.robot),
      spec("Revision", item.source.revision.slice(0, 12)),
      spec("Modalities", item.modalities.join(", ")),
    );
    if (upstream) specs.push(spec("Downloads", compactNumber(upstream.downloads)), spec("Likes", compactNumber(upstream.likes)));
    $("secondaryTabLabel").textContent = "Curation";
    $("quickstartLabel").textContent = "Pinned dataset download";
    $("verificationPanel").innerHTML = `
      <div class="verification-meta"><span>${escapeHtml(item.curation.status)}</span><span>${escapeHtml(item.robot)}</span><span>${escapeHtml(item.format)}</span></div>
      <p class="curation-note">${escapeHtml(item.curation.notes || "Curated catalog entry.")}</p>
      <ul class="check-list">${item.tasks.map((task) => `<li>${escapeHtml(task)}</li>`).join("")}</ul>`;
  } else {
    const statusClass = item.verification.status === "verified" ? "verified" : "community";
    $("detailBadges").innerHTML = badge(item.verification.status, statusClass) + badge(taskLabels[item.task], item.task === "world" ? "world" : "") + badge(item.source.license, "license") + updateBadge;
    specs.push(
      spec("Recommended VRAM", `${item.hardware.recommended_vram_gb} GB`),
      spec("Minimum VRAM", `${item.hardware.minimum_vram_gb} GB`),
      spec("Backend", item.runtime.backend),
      spec("Adapter", item.runtime.adapter),
      spec("Revision", item.source.revision.slice(0, 12)),
      spec("Device", item.runtime.device),
    );
    if (upstream) specs.push(
      spec("Downloads", compactNumber(upstream.downloads)),
      spec("Likes", compactNumber(upstream.likes)),
      spec("Latest revision", upstream.latest_revision.slice(0, 12)),
      spec("Upstream status", upstream.update_available ? "Update available" : "Pinned revision current"),
    );
    $("secondaryTabLabel").textContent = "Verification";
    $("quickstartLabel").textContent = item.verification.status === "verified" ? "AirGPT Runtime" : "Pinned model download";
    const checks = item.verification.checks.length
      ? item.verification.checks
      : ["Runtime adapter validation pending", item.hardware.notes || "Community hardware estimate"];
    $("verificationPanel").innerHTML = `
      <div class="verification-meta">
        <span>${item.verification.status === "verified" ? `Tested ${escapeHtml(item.verification.tested_at || "-")}` : "Community catalog entry"}</span>
        <span>${escapeHtml(item.verification.device || "Runtime adapter pending")}</span>
        <span>${item.verification.airgpt_version ? `Runtime ${escapeHtml(item.verification.airgpt_version)}` : "Not runtime verified"}</span>
      </div>
      <ul class="check-list">${checks.map((check) => `<li>${escapeHtml(check)}</li>`).join("")}</ul>`;
  }
  $("detailSpecs").innerHTML = specs.join("");
  $("commandOutput").textContent = commandFor(item, kind);
  $("manifestOutput").textContent = JSON.stringify(item, null, 2);
  switchDetailTab("quickstart");
  if (updateHistory) history.pushState({ slug: item.slug, kind }, "", `/?${kind}=${encodeURIComponent(item.slug)}`);
  if (!dialog.open) dialog.showModal();
}

function switchDetailTab(tab) {
  document.querySelectorAll("[data-detail-tab]").forEach((button) => {
    const active = button.dataset.detailTab === tab;
    button.classList.toggle("active", active);
    button.setAttribute("aria-selected", String(active));
  });
  document.querySelectorAll("[data-detail-panel]").forEach((panel) => {
    panel.classList.toggle("hidden", panel.dataset.detailPanel !== tab);
  });
}

function closeItem(updateHistory = true) {
  if (dialog.open) dialog.close();
  state.current = null;
  const params = new URLSearchParams(location.search);
  if (updateHistory && (params.has("model") || params.has("dataset"))) history.pushState({}, "", "/");
}

function toast(message) {
  const node = $("toast");
  node.textContent = message;
  node.classList.add("visible");
  window.setTimeout(() => node.classList.remove("visible"), 1600);
}

function switchView(view) {
  state.view = view;
  state.filter = "all";
  state.query = "";
  $("searchInput").value = "";
  document.querySelectorAll("[data-view]").forEach((button) => {
    const active = button.dataset.view === view;
    button.classList.toggle("active", active);
    button.setAttribute("aria-selected", String(active));
  });
  renderToolbar();
  render();
}

function openSubmission() {
  $("submissionForm").classList.remove("hidden");
  $("submissionResult").classList.add("hidden");
  $("submissionError").classList.add("hidden");
  if (!submissionDialog.open) submissionDialog.showModal();
}

function closeSubmission() {
  if (submissionDialog.open) submissionDialog.close();
}

function submissionPayload(form) {
  const data = new FormData(form);
  const optional = (name) => String(data.get(name) || "").trim() || null;
  return {
    repo_id: String(data.get("repo_id") || "").trim(),
    slug: String(data.get("slug") || "").trim(),
    display_name: optional("display_name"),
    task: data.get("task"),
    registry_model: String(data.get("registry_model") || "").trim(),
    backend: String(data.get("backend") || "").trim(),
    adapter: String(data.get("adapter") || "").trim(),
    device: String(data.get("device") || "").trim(),
    dtype: optional("dtype"),
    minimum_vram_gb: Number(data.get("minimum_vram_gb")),
    recommended_vram_gb: Number(data.get("recommended_vram_gb")),
    summary: String(data.get("summary") || "").trim(),
    tags: String(data.get("tags") || "").split(",").map((tag) => tag.trim()).filter(Boolean),
  };
}

async function validateSubmission(event) {
  event.preventDefault();
  const form = event.currentTarget;
  const submit = $("validateSubmission");
  const error = $("submissionError");
  error.classList.add("hidden");
  submit.disabled = true;
  submit.textContent = "Validating...";
  try {
    const result = await api("/api/submissions/validate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(submissionPayload(form)),
    });
    $("candidateOutput").textContent = JSON.stringify(result.candidate, null, 2);
    $("submissionWarnings").innerHTML = result.warnings.map((warning) => `<li>${escapeHtml(warning)}</li>`).join("");
    $("submissionWarnings").classList.toggle("hidden", result.warnings.length === 0);
    $("submissionStatus").textContent = result.warnings.length
      ? `Validated with ${result.warnings.length} item${result.warnings.length === 1 ? "" : "s"} for maintainer review.`
      : "Validated against the current Hugging Face revision.";
    form.classList.add("hidden");
    $("submissionResult").classList.remove("hidden");
  } catch (requestError) {
    error.textContent = requestError.message;
    error.classList.remove("hidden");
  } finally {
    submit.disabled = false;
    submit.textContent = "Validate candidate";
  }
}

async function loadCatalog() {
  try {
    const [modelBody, datasetBody] = await Promise.all([api("/api/catalog"), api("/api/datasets")]);
    state.models = modelBody.models;
    state.datasets = datasetBody.datasets;
    $("catalogSource").textContent = `${state.models.length} models · ${state.datasets.length} datasets · Live Hugging Face metadata`;
    renderToolbar();
    render();
    const params = new URLSearchParams(location.search);
    const datasetSlug = params.get("dataset");
    const modelSlug = params.get("model");
    if (datasetSlug) {
      switchView("datasets");
      const dataset = state.datasets.find((item) => item.slug === datasetSlug);
      if (dataset) openItem(dataset, "dataset", false);
    } else if (modelSlug) {
      const model = state.models.find((item) => item.slug === modelSlug);
      if (model) openItem(model, "model", false);
    }
  } catch (error) {
    $("resultCount").textContent = "Unavailable";
    $("catalogSource").textContent = error.message;
    $("emptyState").classList.remove("hidden");
    $("emptyState").querySelector("strong").textContent = "Catalog unavailable";
    $("emptyState").querySelector("span").textContent = "The service could not load a valid catalog.";
  }
}

$("searchInput").addEventListener("input", (event) => { state.query = event.target.value; render(); });
$("sortSelect").addEventListener("change", (event) => { state.sort = event.target.value; render(); });
$("verifiedOnly").addEventListener("change", (event) => { state.verifiedOnly = event.target.checked; render(); });
$("taskTabs").addEventListener("click", (event) => {
  const button = event.target.closest("button[data-filter]");
  if (!button) return;
  state.filter = button.dataset.filter;
  renderFilters();
  render();
});
$("contentTabs").addEventListener("click", (event) => {
  const button = event.target.closest("button[data-view]");
  if (button) switchView(button.dataset.view);
});
document.querySelectorAll("[data-detail-tab]").forEach((button) => button.addEventListener("click", () => switchDetailTab(button.dataset.detailTab)));
$("closeDialog").addEventListener("click", () => closeItem());
dialog.addEventListener("click", (event) => { if (event.target === dialog) closeItem(); });
dialog.addEventListener("cancel", (event) => { event.preventDefault(); closeItem(); });
$("copyCommand").addEventListener("click", async () => {
  if (!state.current) return;
  await navigator.clipboard.writeText(commandFor(state.current.item, state.current.kind));
  toast("Command copied");
});
$("openSubmission").addEventListener("click", openSubmission);
$("closeSubmission").addEventListener("click", closeSubmission);
$("submissionForm").addEventListener("submit", validateSubmission);
$("editSubmission").addEventListener("click", () => {
  $("submissionResult").classList.add("hidden");
  $("submissionForm").classList.remove("hidden");
});
$("copyCandidate").addEventListener("click", async () => {
  await navigator.clipboard.writeText($("candidateOutput").textContent);
  toast("Candidate copied");
});
submissionDialog.addEventListener("click", (event) => { if (event.target === submissionDialog) closeSubmission(); });
window.addEventListener("popstate", () => {
  const params = new URLSearchParams(location.search);
  const dataset = state.datasets.find((item) => item.slug === params.get("dataset"));
  const model = state.models.find((item) => item.slug === params.get("model"));
  if (dataset) {
    switchView("datasets");
    openItem(dataset, "dataset", false);
  } else if (model) {
    switchView("models");
    openItem(model, "model", false);
  } else closeItem(false);
});

loadCatalog();