const views = Array.from(document.querySelectorAll(".view"));
const navItems = Array.from(document.querySelectorAll(".nav-item"));
const viewLinks = Array.from(document.querySelectorAll("[data-view-link]"));

function showView(name) {
  views.forEach((view) => {
    view.classList.toggle("is-active", view.id === `view-${name}`);
  });

  navItems.forEach((item) => {
    item.classList.toggle("is-active", item.dataset.view === name);
  });
}

navItems.forEach((item) => {
  item.addEventListener("click", () => showView(item.dataset.view));
});

viewLinks.forEach((link) => {
  link.addEventListener("click", () => showView(link.dataset.viewLink));
});

const appData = {
  atlas: {
    name: "Atlas Notes",
    icon: "AN",
    iconClass: "app-icon-atlas",
    subtitle: "com.example.atlas - owner mobile-platform",
    stable: "2.8.4",
    downloads: "14,283",
    platforms: "4",
  },
  forge: {
    name: "Forge Build",
    icon: "FB",
    iconClass: "app-icon-forge",
    subtitle: "io.example.forge - owner release-engineering",
    stable: "1.12.0",
    downloads: "7,421",
    platforms: "3",
  },
  field: {
    name: "FieldKit",
    icon: "FK",
    iconClass: "app-icon-field",
    subtitle: "com.example.fieldkit - owner field-ops",
    stable: "0.9.8",
    downloads: "2,906",
    platforms: "2",
  },
  ledger: {
    name: "LedgerWorks",
    icon: "LW",
    iconClass: "app-icon-ledger",
    subtitle: "net.example.ledger - owner finance-tools",
    stable: "5.4.1",
    downloads: "4,108",
    platforms: "2",
  },
};

const appRows = Array.from(document.querySelectorAll(".app-row"));
const detailIcon = document.getElementById("detail-icon");
const detailName = document.getElementById("detail-name");
const detailSubtitle = document.getElementById("detail-subtitle");
const metricStable = document.getElementById("metric-stable");
const metricDownloads = document.getElementById("metric-downloads");
const metricPlatforms = document.getElementById("metric-platforms");

function selectApp(key) {
  const data = appData[key];
  if (!data) return;

  appRows.forEach((row) => {
    row.classList.toggle("is-selected", row.dataset.app === key);
  });

  detailIcon.className = `app-icon app-icon-large ${data.iconClass}`;
  detailIcon.textContent = data.icon;
  detailName.textContent = data.name;
  detailSubtitle.textContent = data.subtitle;
  metricStable.textContent = data.stable;
  metricDownloads.textContent = data.downloads;
  metricPlatforms.textContent = data.platforms;
}

appRows.forEach((row) => {
  row.addEventListener("click", () => selectApp(row.dataset.app));
});

const methodButtons = Array.from(document.querySelectorAll("#ios-methods button"));
const methodDetails = Array.from(document.querySelectorAll(".method-detail"));

methodButtons.forEach((button) => {
  button.addEventListener("click", () => {
    methodButtons.forEach((item) => {
      item.classList.toggle("is-selected", item === button);
    });

    methodDetails.forEach((detail) => {
      detail.classList.toggle("is-hidden", detail.id !== `method-${button.dataset.method}`);
    });
  });
});