import { escapeHtml, logTo, setText } from "../shared.js";

const features = [
  {
    name: "View Transitions API",
    available: () => "startViewTransition" in document,
    advice: "可作为体验增强；不支持时直接更新 DOM。",
  },
  {
    name: "Popover API",
    available: () => "popover" in HTMLElement.prototype,
    advice: "适合替代一部分自研浮层；保留 dialog/menu fallback。",
  },
  {
    name: "CSS Container Queries",
    available: () => CSS.supports("container-type", "inline-size"),
    advice: "适合组件级响应式；老环境使用传统 media query。",
  },
  {
    name: "Prompt API",
    available: () => "LanguageModel" in window,
    advice: "实验/受环境限制；必须做能力检测和 mock 或云端 fallback。",
  },
  {
    name: "WebMCP",
    available: () => "modelContext" in navigator,
    advice: "实验方向；适合演示 Agentic Web 的工具契约。",
  },
];

const table = document.querySelector("#feature-table");
const counts = { ready: 0, enhanced: 0, blocked: 0 };

table.innerHTML = features
  .map((feature) => {
    const ok = feature.available();
    const type = ok ? "ready" : feature.name.includes("API") ? "enhanced" : "blocked";
    counts[type] += 1;
    logTo("#log", "baseline.feature", {
      feature: feature.name,
      available: ok,
      advice: feature.advice,
    });
    return `<tr>
      <td><strong>${escapeHtml(feature.name)}</strong></td>
      <td><span class="pill ${ok ? "green" : "amber"}">${ok ? "available" : "not detected"}</span></td>
      <td>${escapeHtml(feature.advice)}</td>
    </tr>`;
  })
  .join("");

setText("#ready-count", String(counts.ready));
setText("#enhanced-count", String(counts.enhanced));
setText("#blocked-count", String(counts.blocked));