script.js

const commandPaletteData = {
  recent: [
    {
      id: "person-1",
      type: "person",
      name: "Segun Adebayo",
      email: "SegunAdebayo@acme.co",
      initials: "SA",
      color: "pink",
      count: 3
    },
    {
      id: "person-2",
      type: "person",
      name: "Julia Adams",
      email: "JuliaAdams@acme.co",
      initials: "JA",
      color: "purple",
      count: 5
    },
    {
      id: "person-3",
      type: "person",
      name: "Michael Igbokwe",
      email: "MichaelIgbokwe@acme.co",
      initials: "MI",
      color: "gray",
      count: 2
    },
    {
      id: "person-4",
      type: "person",
      name: "Kendra Eze",
      email: "KendraEze@acme.co",
      initials: "KE",
      color: "green",
      count: 4
    }
  ],

  people: [
    {
      id: "person-5",
      type: "person",
      name: "Liam Chen",
      email: "LiamChen@acme.co",
      initials: "LC",
      color: "blue",
      count: 7,
      tags: ["reviewer", "design systems", "qa"]
    },
    {
      id: "person-6",
      type: "person",
      name: "Zoe Patel",
      email: "ZoePatel@acme.co",
      initials: "ZP",
      color: "orange",
      count: 6,
      tags: ["research", "feedback", "customer insights"]
    },
    {
      id: "person-7",
      type: "person",
      name: "Marcus Lee",
      email: "MarcusLee@acme.co",
      initials: "ML",
      color: "green",
      count: 8,
      tags: ["development", "prototype", "launch"]
    },
    {
      id: "person-8",
      type: "person",
      name: "Aisha Bello",
      email: "AishaBello@acme.co",
      initials: "AB",
      color: "pink",
      count: 2,
      tags: ["marketing", "articles", "campaign"]
    }
  ],

  projects: [
    {
      id: "project-1",
      type: "project",
      title: "Design system review",
      category: "Assessment",
      meta: "Reviewed by Liam Chen",
      color: "blue"
    },
    {
      id: "project-2",
      type: "project",
      title: "User feedback analysis",
      category: "Research",
      meta: "Modified by Zoe Patel",
      color: "orange"
    },
    {
      id: "project-3",
      type: "project",
      title: "Prototype iteration",
      category: "Development",
      meta: "Created by Marcus Lee",
      color: "green"
    },
    {
      id: "project-4",
      type: "project",
      title: "Launch readiness tracker",
      category: "Operations",
      meta: "Updated yesterday by Kendra Eze",
      color: "blue",
      tags: ["launch", "checklist", "go-to-market"]
    },
    {
      id: "project-5",
      type: "project",
      title: "Billing flow redesign",
      category: "Product",
      meta: "Reviewed by Segun Adebayo",
      color: "orange",
      tags: ["pricing", "checkout", "conversion"]
    },
    {
      id: "project-6",
      type: "project",
      title: "Mobile onboarding refresh",
      category: "Growth",
      meta: "Assigned to Julia Adams",
      color: "green",
      tags: ["mobile", "onboarding", "activation"]
    }
  ],

  files: [
    {
      id: "file-1",
      type: "file",
      title: "Q3 roadmap.fig",
      category: "Figma file",
      meta: "Edited 12 minutes ago",
      icon: "file-text",
      tags: ["roadmap", "planning", "strategy"]
    },
    {
      id: "file-2",
      type: "file",
      title: "Pricing model.xlsx",
      category: "Spreadsheet",
      meta: "Shared by Finance",
      icon: "file-text",
      tags: ["pricing", "billing", "forecast"]
    },
    {
      id: "file-3",
      type: "file",
      title: "Brand refresh brief.pdf",
      category: "PDF",
      meta: "Pinned in Marketing",
      icon: "file-text",
      tags: ["brand", "campaign", "identity"]
    }
  ],

  docs: [
    {
      id: "doc-1",
      type: "doc",
      title: "API handoff notes",
      category: "Documentation",
      meta: "Updated by Marcus Lee",
      icon: "scan-text",
      tags: ["api", "handoff", "engineering"]
    },
    {
      id: "doc-2",
      type: "doc",
      title: "Onboarding checklist",
      category: "Playbook",
      meta: "Used by Growth",
      icon: "scan-text",
      tags: ["onboarding", "activation", "mobile"]
    },
    {
      id: "doc-3",
      type: "doc",
      title: "Research synthesis",
      category: "Research doc",
      meta: "Compiled by Zoe Patel",
      icon: "scan-text",
      tags: ["research", "feedback", "interviews"]
    }
  ],

  videos: [
    {
      id: "video-1",
      type: "video",
      title: "Prototype walkthrough",
      category: "Video",
      meta: "4 min watch",
      icon: "videotape",
      tags: ["prototype", "demo", "iteration"]
    },
    {
      id: "video-2",
      type: "video",
      title: "Sprint demo recording",
      category: "Video",
      meta: "Uploaded by Engineering",
      icon: "videotape",
      tags: ["sprint", "demo", "release"]
    },
    {
      id: "video-3",
      type: "video",
      title: "Customer interview clips",
      category: "Video",
      meta: "Tagged by Research",
      icon: "videotape",
      tags: ["customer", "interview", "research"]
    }
  ],

  messages: [
    {
      id: "message-1",
      type: "message",
      title: "Zoe Patel mentioned feedback tags",
      category: "Message",
      meta: "Design review channel",
      icon: "message-circle",
      tags: ["feedback", "research", "tags"]
    },
    {
      id: "message-2",
      type: "message",
      title: "Marcus Lee shared API status",
      category: "Message",
      meta: "Launch channel",
      icon: "message-circle",
      tags: ["api", "launch", "engineering"]
    },
    {
      id: "message-3",
      type: "message",
      title: "Kendra Eze requested invite copy",
      category: "Message",
      meta: "Growth channel",
      icon: "message-circle",
      tags: ["invite", "copy", "growth"]
    }
  ],

  articles: [
    {
      id: "article-1",
      type: "article",
      title: "Design tokens migration guide",
      category: "Article",
      meta: "Saved in Library",
      icon: "letter-text",
      tags: ["tokens", "design system", "migration"]
    },
    {
      id: "article-2",
      type: "article",
      title: "Keyboard navigation patterns",
      category: "Article",
      meta: "Read by Product",
      icon: "letter-text",
      tags: ["keyboard", "accessibility", "command palette"]
    },
    {
      id: "article-3",
      type: "article",
      title: "Better empty states",
      category: "Article",
      meta: "Recommended for UX",
      icon: "letter-text",
      tags: ["empty states", "ux", "polish"]
    }
  ],

  podcasts: [
    {
      id: "podcast-1",
      type: "podcast",
      title: "Design Systems FM: Tokens",
      category: "Podcast",
      meta: "32 min episode",
      icon: "option",
      tags: ["tokens", "design systems", "audio"]
    },
    {
      id: "podcast-2",
      type: "podcast",
      title: "Product teardown: onboarding",
      category: "Podcast",
      meta: "Saved for later",
      icon: "option",
      tags: ["product", "onboarding", "growth"]
    },
    {
      id: "podcast-3",
      type: "podcast",
      title: "Research Ops Weekly",
      category: "Podcast",
      meta: "New episode today",
      icon: "option",
      tags: ["research", "operations", "interviews"]
    }
  ],

  actions: [
    {
      id: "action-1",
      type: "action",
      title: "Create new project",
      shortcut: "⌘ N",
      shortcutKey: "n",
      icon: "plus"
    },
    {
      id: "action-2",
      type: "action",
      title: "Project library",
      shortcut: "⌘ J",
      shortcutKey: "j",
      icon: "library"
    },
    {
      id: "action-3",
      type: "action",
      title: "Invite friends",
      shortcut: "⌘ K",
      shortcutKey: "k",
      icon: "user-plus"
    },
    {
      id: "action-4",
      type: "action",
      title: "Open settings",
      shortcut: "⌘ ,",
      shortcutKey: ",",
      icon: "settings"
    },
    {
      id: "action-5",
      type: "action",
      title: "Copy current page",
      shortcut: "⌘ ⇧ C",
      shortcutKey: "c",
      icon: "copy"
    },
    {
      id: "action-6",
      type: "action",
      title: "Toggle quiet mode",
      shortcut: "⌘ ⇧ M",
      shortcutKey: "m",
      icon: "moon"
    }
  ]
};

const icons = {
  search: '<circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path>',
  "search-x": '<path d="m13.5 8.5-5 5"></path><path d="m8.5 8.5 5 5"></path><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path>',
  "arrow-big-up": '<path d="M12 3 22 13h-5.35v7.2h-9.3V13H2L12 3Z"></path>',
  "circle-user-round": '<path d="M18 20a6 6 0 0 0-12 0"></path><circle cx="12" cy="10" r="4"></circle><circle cx="12" cy="12" r="10"></circle>',
  box: '<path d="m21 8-9-5-9 5 9 5 9-5Z"></path><path d="M3 8v8l9 5 9-5V8"></path><path d="M12 13v8"></path>',
  "file-text": '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"></path><path d="M14 2v6h6"></path><path d="M16 13H8"></path><path d="M16 17H8"></path><path d="M10 9H8"></path>',
  "scan-text": '<path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2"></path><path d="M7 8h8"></path><path d="M7 12h10"></path><path d="M7 16h6"></path>',
  videotape: '<rect width="20" height="14" x="2" y="5" rx="2"></rect><circle cx="8" cy="12" r="2"></circle><path d="M8 12h8"></path><circle cx="16" cy="12" r="2"></circle>',
  "message-circle": '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>',
  "letter-text": '<path d="M15 12H9"></path><path d="M15 8H9"></path><path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h7l5 5v9a2 2 0 0 0 2 2Z"></path><path d="M12 4v5h5"></path>',
  "scroll-text": '<path d="M15 12h-5"></path><path d="M15 8h-5"></path><path d="M19 17V5a2 2 0 0 0-2-2H4"></path><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"></path>',
  "file-box": '<path d="M14.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="m3 13.1 4-2a1 1 0 0 1 .9 0l4 2a1 1 0 0 1 0 1.8l-4 2a1 1 0 0 1-.9 0l-4-2a1 1 0 0 1 0-1.8Z"></path><path d="M3 14v4.9a1 1 0 0 0 .6.9l4 2a1 1 0 0 0 .9 0l4-2a1 1 0 0 0 .5-.9V14"></path>',
  "arrow-up-right": '<path d="M7 7h10v10"></path><path d="M7 17 17 7"></path>',
  plus: '<path d="M5 12h14"></path><path d="M12 5v14"></path>',
  library: '<path d="m16 6 4 14"></path><path d="M12 6v14"></path><path d="M8 8v12"></path><path d="M4 4v16"></path>',
  "user-plus": '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M19 8v6"></path><path d="M22 11h-6"></path>',
  command: '<path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0 0-6"></path>',
  "arrow-down-up": '<path d="m3 16 4 4 4-4"></path><path d="M7 20V4"></path><path d="m21 8-4-4-4 4"></path><path d="M17 4v16"></path>',
  "corner-down-left": '<path d="m9 10-5 5 5 5"></path><path d="M20 4v7a4 4 0 0 1-4 4H4"></path>',
  option: '<path d="M3 3h6l6 18h6"></path><path d="M14 3h7"></path>',
  x: '<path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>',
  settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.73l.15-.1a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z"></path><circle cx="12" cy="12" r="3"></circle>',
  copy: '<rect width="14" height="14" x="8" y="8" rx="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>',
  moon: '<path d="M12 3a6 6 0 0 0 9 7.7A9 9 0 1 1 12 3Z"></path>',
  check: '<path d="M20 6 9 17l-5-5"></path>'
};

const filterDefinitions = [
  { key: "people", label: "People", icon: "circle-user-round" },
  { key: "projects", label: "Projects", icon: "box" },
  { key: "files", label: "Files", icon: "file-text" },
  { key: "docs", label: "Docs", icon: "scan-text" },
  { key: "videos", label: "Videos", icon: "videotape" },
  { key: "messages", label: "Messages", icon: "message-circle" },
  { key: "articles", label: "Articles", icon: "letter-text" },
  { key: "podcasts", label: "Podcasts", icon: "option" }
];

const state = {
  query: "",
  activeFilter: null,
  selectedIndex: 0,
  visibleItems: [],
  closed: false,
  highlightVisible: false,
  toastTimer: null,
  paletteAnimation: null
};

const resultsEl = document.querySelector("#results");
const searchEl = document.querySelector("#command-search");
const clearSearchEl = document.querySelector("#clear-search");
const paletteEl = document.querySelector(".palette");
const closedTriggerEl = document.querySelector("#closed-trigger");
const toastRegionEl = document.querySelector("#toast-region");

function svgIcon(name) {
  const paths = icons[name] ?? icons.search;
  return `
    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
      ${paths}
    </svg>
  `;
}

function hydrateStaticIcons() {
  document.querySelectorAll("[data-icon]").forEach((node) => {
    node.innerHTML = svgIcon(node.dataset.icon);
  });
}

function normalizeText(value) {
  return String(value ?? "")
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase()
    .replace(/[^a-z0-9+,\s-]/g, " ")
    .replace(/\s+/g, " ")
    .trim();
}

function compactText(value) {
  return normalizeText(value).replace(/[\s-]+/g, "");
}

function getPrimaryText(item) {
  return item.name ?? item.title ?? "";
}

function getSearchText(item) {
  return normalizeText([
    item.name,
    item.email,
    item.title,
    item.category,
    item.meta,
    item.shortcut,
    item.type,
    ...(item.tags ?? [])
  ].filter(Boolean).join(" "));
}

function getAcronym(value) {
  return normalizeText(value)
    .split(" ")
    .filter(Boolean)
    .map((word) => word[0])
    .join("");
}

function scoreItem(item, rawQuery) {
  const query = normalizeText(rawQuery);
  if (!query) return 1;

  const primary = normalizeText(getPrimaryText(item));
  const searchText = getSearchText(item);
  const compactQuery = compactText(query);
  const compactPrimary = compactText(primary);
  const acronym = getAcronym(getPrimaryText(item));
  const tokens = query.split(" ").filter(Boolean);

  let score = 0;

  if (primary === query) score += 500;
  if (primary.startsWith(query)) score += 260;
  if (searchText.includes(query)) score += 150;
  if (compactPrimary.startsWith(compactQuery)) score += 120;
  if (acronym.startsWith(compactQuery)) score += 110;

  for (const token of tokens) {
    const compactToken = compactText(token);

    if (primary.split(" ").some((word) => word.startsWith(token))) {
      score += 85;
      continue;
    }

    if (searchText.includes(token)) {
      score += 55;
      continue;
    }

    if (acronym.startsWith(compactToken)) {
      score += 42;
      continue;
    }

    return 0;
  }

  return score;
}

function rankItems(items, query) {
  return items
    .map((item, order) => ({ item, order, score: scoreItem(item, query) }))
    .filter((result) => result.score > 0)
    .sort((a, b) => b.score - a.score || a.order - b.order)
    .map((result) => result.item);
}

function getSearchGroups(query = state.query) {
  const people = [...commandPaletteData.recent, ...commandPaletteData.people];

  return [
    { key: "people", label: "People", items: people },
    { key: "projects", label: "Projects", items: commandPaletteData.projects },
    { key: "files", label: "Files", items: commandPaletteData.files },
    { key: "docs", label: "Docs", items: commandPaletteData.docs },
    { key: "videos", label: "Videos", items: commandPaletteData.videos },
    { key: "messages", label: "Messages", items: commandPaletteData.messages },
    { key: "articles", label: "Articles", items: commandPaletteData.articles },
    { key: "podcasts", label: "Podcasts", items: commandPaletteData.podcasts },
    { key: "actions", label: "Quick actions", items: commandPaletteData.actions }
  ].map((group) => ({
    ...group,
    items: rankItems(group.items, query)
  }));
}

function getFilterCounts(query = state.query) {
  return Object.fromEntries(
    getSearchGroups(query)
      .filter((group) => group.key !== "actions")
      .map((group) => [group.key, group.items.length])
  );
}

function getFilteredGroups() {
  const query = state.query.trim();

  if (!query) {
    state.activeFilter = null;

    return [
      {
        key: "recent",
        label: "Recent",
        count: commandPaletteData.recent.length,
        items: commandPaletteData.recent
      },
      {
        key: "projects",
        label: "Projects",
        items: commandPaletteData.projects.slice(0, 3)
      },
      {
        key: "actions",
        label: "Quick actions",
        items: commandPaletteData.actions.slice(0, 3)
      }
    ];
  }

  const groups = getSearchGroups(query).filter((group) => group.items.length > 0);
  const activeFilterHasResults = groups.some((group) => group.key === state.activeFilter);

  if (state.activeFilter && !activeFilterHasResults) {
    state.activeFilter = null;
  }

  return groups.filter((group) => {
    if (!state.activeFilter) return true;
    return group.key === state.activeFilter;
  });
}

function getItemLabel(item) {
  if (item.type === "person") return item.name;
  if (item.type === "project") return item.title;
  return item.title;
}

function renderPerson(item, index) {
  return `
    <button class="row row--person" style="--row-index: ${Math.min(index, 12)}" type="button" role="option" id="${item.id}" aria-selected="${index === state.selectedIndex}" data-id="${item.id}" data-index="${index}" data-selected="${index === state.selectedIndex}">
      <span class="row__main">
        <span class="avatar avatar--${item.color}">${item.initials}</span>
        <span class="row__copy">
          <span class="row__line">
            <span class="row__title">${item.name}</span>
            <span class="dot" aria-hidden="true"></span>
            <span class="row__meta">${item.email}</span>
          </span>
        </span>
      </span>
      <span class="row__aside">
        <span class="icon" aria-hidden="true">${svgIcon("scroll-text")}</span>
        <span>${item.count}</span>
      </span>
    </button>
  `;
}

function renderProject(item, index) {
  return `
    <button class="row row--project" style="--row-index: ${Math.min(index, 12)}" type="button" role="option" id="${item.id}" aria-selected="${index === state.selectedIndex}" data-id="${item.id}" data-index="${index}" data-selected="${index === state.selectedIndex}">
      <span class="row__main">
        <span class="icon-button icon-button--project icon-button--${item.color}" aria-hidden="true">
          <span class="project-waves">
            <svg viewBox="0 0 56 36" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" focusable="false">
              <path d="M-8 12C2 7 10 7 20 12S36 17 50 11S66 5 72 11"></path>
              <path d="M-10 29C2 24 12 24 24 29S42 34 56 28S68 22 74 28"></path>
            </svg>
          </span>
          <span class="icon">${svgIcon("file-box")}</span>
        </span>
        <span class="row__copy">
          <span class="row__line">
            <span class="row__title">${item.title}</span>
            <span class="dot" aria-hidden="true"></span>
            <span class="row__meta">${item.category}</span>
          </span>
          <span class="row__support">${item.meta}</span>
        </span>
      </span>
      <span class="row__aside">
        <span class="icon" aria-hidden="true">${svgIcon("arrow-up-right")}</span>
      </span>
    </button>
  `;
}

function renderResource(item, index) {
  return `
    <button class="row row--resource" style="--row-index: ${Math.min(index, 12)}" type="button" role="option" id="${item.id}" aria-selected="${index === state.selectedIndex}" data-id="${item.id}" data-index="${index}" data-selected="${index === state.selectedIndex}">
      <span class="row__main">
        <span class="icon-button icon-button--action" aria-hidden="true">
          <span class="icon">${svgIcon(item.icon)}</span>
        </span>
        <span class="row__copy">
          <span class="row__line">
            <span class="row__title">${item.title}</span>
            <span class="dot" aria-hidden="true"></span>
            <span class="row__meta">${item.category}</span>
          </span>
          <span class="row__support">${item.meta}</span>
        </span>
      </span>
      <span class="row__aside">
        <span class="icon" aria-hidden="true">${svgIcon("arrow-up-right")}</span>
      </span>
    </button>
  `;
}

function renderAction(item, index) {
  return `
    <button class="row row--action" style="--row-index: ${Math.min(index, 12)}" type="button" role="option" id="${item.id}" aria-selected="${index === state.selectedIndex}" data-id="${item.id}" data-index="${index}" data-selected="${index === state.selectedIndex}">
      <span class="row__main">
        <span class="icon-button icon-button--action" aria-hidden="true">
          <span class="icon">${svgIcon(item.icon)}</span>
        </span>
        <span class="row__title">${item.title}</span>
      </span>
      <span class="shortcut" aria-hidden="true">
        <span class="icon">${svgIcon("command")}</span>
        <strong>${item.shortcut.replace("⌘ ", "")}</strong>
      </span>
    </button>
  `;
}

function renderRow(item, index) {
  if (item.type === "person") return renderPerson(item, index);
  if (item.type === "project") return renderProject(item, index);
  if (item.type === "action") return renderAction(item, index);
  return renderResource(item, index);
}

function renderFilterBar(counts) {
  if (!state.query.trim()) return "";

  const filters = filterDefinitions
    .filter((filter) => (counts[filter.key] ?? 0) > 0)
    .map((filter, index) => {
      const isActive = state.activeFilter === filter.key;

      return `
        <button
          class="filter-chip"
          style="--filter-index: ${index}"
          type="button"
          data-filter="${filter.key}"
          data-active="${isActive}"
          aria-pressed="${isActive}"
        >
          <span class="icon" aria-hidden="true">${svgIcon(filter.icon)}</span>
          <span>${filter.label}</span>
        </button>
      `;
    })
    .join("");

  if (!filters) return "";

  return `
    <div class="filter-bar" aria-label="Search filters">
      <div class="filter-strip">${filters}</div>
    </div>
  `;
}

function renderEmptyState() {
  return `
    <div class="empty-state">
      <span class="empty-state__icon">${svgIcon("search-x")}</span>
      <strong>No results found</strong>
      <span>Try a person, project, category, or quick action.</span>
    </div>
  `;
}

function render() {
  syncClearSearchButton();

  const groups = getFilteredGroups();
  let itemIndex = 0;
  const filterMarkup = renderFilterBar(getFilterCounts());

  state.visibleItems = groups.flatMap((group) => group.items);

  if (state.selectedIndex >= state.visibleItems.length) {
    state.selectedIndex = Math.max(0, state.visibleItems.length - 1);
  }

  if (state.visibleItems.length === 0) {
    state.selectedIndex = 0;
    resultsEl.classList.remove("has-highlight");
    resultsEl.innerHTML = filterMarkup + renderEmptyState();
    searchEl.removeAttribute("aria-activedescendant");
    return;
  }

  syncHighlightVisibility();
  resultsEl.innerHTML = `
    <div id="selection-highlight" class="selection-highlight" aria-hidden="true"></div>
  ` + filterMarkup + groups
    .map((group) => {
      const rows = group.items
        .map((item) => {
          const row = renderRow(item, itemIndex);
          itemIndex += 1;
          return row;
        })
        .join("");
      const countMarkup = group.key === "recent" ? `<span class="section__count">${group.count}</span>` : "";

      return `
        <section class="section" aria-label="${group.label}">
          <div class="section__label">${group.label}${countMarkup}</div>
          <div class="section__rows">${rows}</div>
        </section>
      `;
    })
    .join("");

  updateActiveDescendant();
  requestAnimationFrame(updateHighlightPosition);
}

function updateSelectedIndex(nextIndex, shouldScroll = true) {
  if (!state.visibleItems.length) return;

  const itemCount = state.visibleItems.length;
  state.selectedIndex = ((nextIndex % itemCount) + itemCount) % itemCount;

  document.querySelectorAll(".row").forEach((row) => {
    const isSelected = Number(row.dataset.index) === state.selectedIndex;
    row.dataset.selected = String(isSelected);
    row.setAttribute("aria-selected", String(isSelected));
  });

  updateActiveDescendant();
  showHighlight();
  updateHighlightPosition();

  if (shouldScroll) {
    document
      .querySelector(`.row[data-index="${state.selectedIndex}"]`)
      ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
  }
}

function syncHighlightVisibility() {
  resultsEl.classList.toggle("has-highlight", state.highlightVisible && state.visibleItems.length > 0);
}

function syncClearSearchButton() {
  clearSearchEl.hidden = !state.query.trim();
}

function showHighlight() {
  state.highlightVisible = true;
  syncHighlightVisibility();
}

function hideHighlight() {
  state.highlightVisible = false;
  syncHighlightVisibility();
}

function updateHighlightPosition() {
  const highlight = document.querySelector("#selection-highlight");
  const row = document.querySelector(`.row[data-index="${state.selectedIndex}"]`);

  if (!highlight || !row || !state.visibleItems.length || !state.highlightVisible) return;

  const rowRect = row.getBoundingClientRect();
  const resultsRect = resultsEl.getBoundingClientRect();
  const y = rowRect.top - resultsRect.top + resultsEl.scrollTop;

  highlight.style.setProperty("--highlight-y", `${y}px`);
  highlight.style.height = `${rowRect.height}px`;
}

function updateActiveDescendant() {
  const selectedItem = state.visibleItems[state.selectedIndex];
  if (selectedItem) {
    searchEl.setAttribute("aria-activedescendant", selectedItem.id);
  }
}

function selectedItem() {
  return state.visibleItems[state.selectedIndex] ?? null;
}

function selectedItemLink(item) {
  return `https://acme.co/${item.type}/${item.id}`;
}

function showToast(message, iconName = "check") {
  window.clearTimeout(state.toastTimer);
  toastRegionEl.innerHTML = `
    <div class="toast">
      <span class="icon">${svgIcon(iconName)}</span>
      <span>${message}</span>
    </div>
  `;

  state.toastTimer = window.setTimeout(() => {
    const toast = toastRegionEl.querySelector(".toast");
    if (!toast) return;
    toast.dataset.exiting = "true";
    window.setTimeout(() => {
      toastRegionEl.innerHTML = "";
    }, 180);
  }, 1600);
}

function openSelected() {
  const item = selectedItem();
  if (!item) {
    showToast("Nothing to open", "search");
    return;
  }

  showToast(`Opened ${getItemLabel(item)}`);
}

async function copySelectedLink() {
  const item = selectedItem();
  if (!item) {
    showToast("Nothing selected", "search");
    return;
  }

  const url = selectedItemLink(item);

  try {
    await navigator.clipboard.writeText(url);
  } catch {
    const textarea = document.createElement("textarea");
    textarea.value = url;
    textarea.setAttribute("readonly", "");
    textarea.style.position = "fixed";
    textarea.style.left = "-9999px";
    document.body.append(textarea);
    textarea.select();
    document.execCommand("copy");
    textarea.remove();
  }

  showToast(`Copied link for ${getItemLabel(item)}`);
}

function triggerShortcut(key) {
  const action = commandPaletteData.actions.find((item) => item.shortcutKey === key.toLowerCase());
  if (!action) return false;

  const index = state.visibleItems.findIndex((item) => item.id === action.id);
  if (index >= 0) {
    updateSelectedIndex(index);
  }

  showToast(`Triggered ${action.title}`);
  return true;
}

function closePalette() {
  if (state.paletteAnimation) {
    state.paletteAnimation.cancel();
    state.paletteAnimation = null;
  }
  hideHighlight();
  state.closed = true;
  document.body.classList.add("palette-closed");
}

function playPaletteEntrance() {
  if (!paletteEl || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  if (state.paletteAnimation) {
    state.paletteAnimation.cancel();
  }

  state.paletteAnimation = paletteEl.animate(
    [
      { opacity: 0, transform: "translateY(14px) scale(0.94)", filter: "blur(4px)" },
      { opacity: 1, transform: "translateY(-3px) scale(1.012)", filter: "blur(0)" },
      { opacity: 1, transform: "translateY(0) scale(1)", filter: "blur(0)" }
    ],
    {
      duration: 460,
      easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
    }
  );

  state.paletteAnimation.addEventListener("finish", () => {
    state.paletteAnimation = null;
  });
}

function resetSearch() {
  state.query = "";
  state.selectedIndex = 0;
  state.activeFilter = null;
  state.highlightVisible = false;
  searchEl.value = "";
  render();
}

function playClearSearchAnimation() {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  searchEl.animate(
    [
      { opacity: 1, transform: "translateX(0)" },
      { opacity: 0.42, transform: "translateX(3px)" },
      { opacity: 1, transform: "translateX(0)" }
    ],
    {
      duration: 220,
      easing: "cubic-bezier(0.22, 1, 0.36, 1)"
    }
  );

  resultsEl.animate(
    [
      { opacity: 0.82, transform: "translateY(2px)" },
      { opacity: 1, transform: "translateY(0)" }
    ],
    {
      duration: 260,
      easing: "cubic-bezier(0.22, 1, 0.36, 1)"
    }
  );
}

function openPalette({ reset = false } = {}) {
  state.closed = false;
  if (reset) resetSearch();
  document.body.classList.remove("palette-closed");
  playPaletteEntrance();
  requestAnimationFrame(() => {
    searchEl.focus();
    updateHighlightPosition();
  });
}

function handleKeyboard(event) {
  const key = event.key.toLowerCase();

  if (state.closed) {
    if (event.shiftKey && key === "f") {
      event.preventDefault();
      openPalette({ reset: true });
    }
    return;
  }

  if (event.key === "ArrowDown") {
    event.preventDefault();
    updateSelectedIndex(state.selectedIndex + 1);
    return;
  }

  if (event.key === "ArrowUp") {
    event.preventDefault();
    updateSelectedIndex(state.selectedIndex - 1);
    return;
  }

  if (event.key === "Enter") {
    event.preventDefault();
    openSelected();
    return;
  }

  if (event.key === "Escape") {
    event.preventDefault();
    closePalette();
    return;
  }

  if (event.altKey && key === "l") {
    event.preventDefault();
    copySelectedLink();
    return;
  }

  if (event.metaKey || event.ctrlKey) {
    if (["n", "j", "k"].includes(key)) {
      event.preventDefault();
      triggerShortcut(key);
    }
  }
}

function bindEvents() {
  searchEl.addEventListener("input", () => {
    state.query = searchEl.value;
    state.selectedIndex = 0;
    hideHighlight();
    render();
  });

  clearSearchEl.addEventListener("click", () => {
    playClearSearchAnimation();
    resetSearch();
    searchEl.focus();
  });

  document.addEventListener("pointermove", (event) => {
    if (state.closed) return;

    const row = event.target.closest(".row");
    if (!row || !resultsEl.contains(row)) {
      hideHighlight();
      return;
    }

    updateSelectedIndex(Number(row.dataset.index), false);
  });

  resultsEl.addEventListener("click", (event) => {
    const filterChip = event.target.closest(".filter-chip");
    if (filterChip) {
      state.activeFilter = state.activeFilter === filterChip.dataset.filter ? null : filterChip.dataset.filter;
      state.selectedIndex = 0;
      hideHighlight();
      render();
      return;
    }

    const row = event.target.closest(".row");
    if (!row) return;
    updateSelectedIndex(Number(row.dataset.index), false);
    openSelected();
  });

  closedTriggerEl.addEventListener("click", () => openPalette({ reset: true }));
  resultsEl.addEventListener("scroll", updateHighlightPosition, { passive: true });
  window.addEventListener("resize", updateHighlightPosition);
  document.addEventListener("keydown", handleKeyboard);
}

hydrateStaticIcons();
render();
bindEvents();
searchEl.focus();
playPaletteEntrance();