app.js

const listings = [
  {
    id: "bag-101",
    title: "Hall Closet Clear-Out",
    seller: "Maya in Fremont",
    image: "./assets/hall-closet.jpg",
    sponsored: false,
    bagType: "paper",
    status: "Live",
    offerType: "minimum",
    price: 24,
    distance: 3,
    zipCode: "98103",
    pickupWindow: "Today 5-8 PM",
    pickupNotes: "Front porch pickup near Fremont library.",
    contentsLine: "Includes winter accessories, a scarf, gloves, and one decor piece.",
    summary:
      "Winter accessories and one decor item in a clean paper bag, photographed before packing for a quick neighborhood pickup.",
    rationale:
      "Good example of an everyday bag listing with mixed cold-weather items and one decor piece.",
    tags: ["gloves", "hat", "scarf", "ornament"],
    photos: [
      "Photo 1: knit gloves laid flat beside the hat",
      "Photo 2: ornament close-up before bagging",
      "Photo 3: all items grouped together for the proof shot",
    ],
  },
  {
    id: "bag-102",
    title: "Garage Items",
    seller: "Derek in Ballard",
    image: "./assets/garage.jpg",
    sponsored: false,
    bagType: "plastic",
    status: "In Review",
    offerType: "best-offer",
    price: 18,
    distance: 6,
    zipCode: "98117",
    pickupWindow: "Tomorrow 9-11 AM",
    pickupNotes: "Meet at driveway. Cash or Venmo on pickup.",
    contentsLine: "Includes garage extras, a shirt, a mug, a book, and a small tool.",
    summary:
      "A practical mixed bag with garage and closet overflow, built for bargain hunters who do not mind a rougher assortment.",
    rationale:
      "Shows a lower-price best-offer bag with casual household items and a clear pickup instruction.",
    tags: ["book", "mug", "shirt", "tool"],
    photos: [
      "Photo 1: paperback and mug on the garage workbench",
      "Photo 2: shirt folded next to a small hand tool",
      "Photo 3: full item inventory shot before bagging",
    ],
  },
  {
    id: "bag-103",
    title: "Closet Bag",
    seller: "Ana in Capitol Hill",
    image: "./assets/closet-reset.jpg",
    sponsored: false,
    bagType: "paper",
    status: "Needs Edits",
    offerType: "minimum",
    price: 35,
    distance: 2,
    zipCode: "98102",
    pickupWindow: "Saturday 1-4 PM",
    pickupNotes: "Apartment lobby exchange, message on arrival.",
    contentsLine: "Includes shoes, apparel basics, a belt, and a hat.",
    summary:
      "Closet cleanout bag with apparel and accessories that needs one more documentation pass before going fully live.",
    rationale:
      "Useful for moderation because it mixes apparel tags and shows how a listing can be flagged for missing photo coverage.",
    tags: ["shoes", "shirt", "belt", "hat"],
    photos: [
      "Photo 1: shoes from above with size visible",
      "Photo 2: shirt and belt laid out separately",
      "Photo 3: missing one full-group photo so moderation flagged it",
    ],
  },
  {
    id: "bag-104",
    title: "Holiday Bag",
    seller: "Jo in West Seattle",
    image: "./assets/holiday-leftovers.jpg",
    sponsored: true,
    bagType: "plastic",
    status: "Live",
    offerType: "best-offer",
    price: 14,
    distance: 9,
    zipCode: "98116",
    pickupWindow: "Sunday 10 AM-1 PM",
    pickupNotes: "Curbside pickup. Exact address shared after reserve.",
    contentsLine: "Includes ornaments, ribbon, candles, and framed holiday extras.",
    summary:
      "Seasonal decor-focused bag with ornaments and extras, promoted as this week's featured sponsored pickup listing.",
    rationale:
      "This one demonstrates ornament-heavy search and a lower-entry seasonal listing.",
    tags: ["ornament", "ribbon", "candle", "frame"],
    photos: [
      "Photo 1: ornaments photographed individually",
      "Photo 2: ribbon and candle side-by-side",
      "Photo 3: grouped final inventory photo",
    ],
  },
  {
    id: "bag-105",
    title: "Kids Bag",
    seller: "Lena in Greenwood",
    image: "./assets/kids-room.jpg",
    sponsored: false,
    bagType: "paper",
    status: "Live",
    offerType: "minimum",
    price: 28,
    distance: 11,
    zipCode: "98103",
    pickupWindow: "Tonight 6-9 PM",
    pickupNotes: "Pickup from side gate. Please bring exact change.",
    contentsLine: "Includes toys, books, gloves, and soft kids clothing.",
    summary:
      "A family-oriented bag with toys, books, and soft goods that reads clearly in both the marketplace and seller console.",
    rationale:
      "Rounds out the catalog with family-oriented tags and a slightly longer pickup distance.",
    tags: ["toy", "book", "gloves", "shirt"],
    photos: [
      "Photo 1: toys and shirts sorted by category",
      "Photo 2: gloves and books documented separately",
      "Photo 3: all contents visible before being sealed in the bag",
    ],
  },
];

const state = {
  search: "",
  itemType: "all",
  zipCode: "",
  maxDistance: 15,
  maxPrice: 60,
  bagType: "all",
  offerType: "all",
  selectedId: listings[0].id,
  view: "marketplace",
};

const elements = {
  listingCount: document.querySelector("#listing-count"),
  averagePrice: document.querySelector("#average-price"),
  searchInput: document.querySelector("#search-input"),
  itemTypeFilter: document.querySelector("#item-type-filter"),
  zipFilter: document.querySelector("#zip-filter"),
  distanceFilter: document.querySelector("#distance-filter"),
  priceFilter: document.querySelector("#price-filter"),
  distanceValue: document.querySelector("#distance-value"),
  priceValue: document.querySelector("#price-value"),
  listingGrid: document.querySelector("#listing-grid"),
  resultsCount: document.querySelector("#results-count"),
  bagTypeFilter: document.querySelector("#bag-type-filter"),
  offerFilter: document.querySelector("#offer-filter"),
  consoleMetrics: document.querySelector("#console-metrics"),
  managementTable: document.querySelector("#management-table"),
  detailTitle: document.querySelector("#detail-title"),
  detailStatus: document.querySelector("#detail-status"),
  detailExteriorImage: document.querySelector("#detail-exterior-image"),
  detailContentsMockup: document.querySelector("#detail-contents-mockup"),
  detailTags: document.querySelector("#detail-tags"),
  detailPickup: document.querySelector("#detail-pickup"),
  detailSummary: document.querySelector("#detail-summary"),
  tabs: [...document.querySelectorAll(".view-tab")],
  panels: {
    marketplace: document.querySelector("#marketplace-view"),
    management: document.querySelector("#management-view"),
  },
};

function formatOfferType(offerType) {
  return offerType === "minimum" ? "Minimum price" : "Best offer";
}

function getFilteredListings() {
  return listings.filter((listing) => {
    const matchesSearch =
      !state.search ||
      listing.title.toLowerCase().includes(state.search) ||
      listing.tags.some((tag) => tag.includes(state.search));
    const matchesItemType =
      state.itemType === "all" || listing.tags.includes(state.itemType);
    const matchesZip =
      !state.zipCode || listing.zipCode.startsWith(state.zipCode);
    const matchesDistance = listing.distance <= state.maxDistance;
    const matchesPrice = listing.price <= state.maxPrice;
    const matchesBagType =
      state.bagType === "all" || listing.bagType === state.bagType;
    const matchesOfferType =
      state.offerType === "all" || listing.offerType === state.offerType;

    return (
      matchesSearch &&
      matchesItemType &&
      matchesZip &&
      matchesDistance &&
      matchesPrice &&
      matchesBagType &&
      matchesOfferType
    );
  });
}

function renderSummary() {
  const average =
    listings.reduce((total, listing) => total + listing.price, 0) / listings.length;
  elements.listingCount.textContent = String(listings.length);
  elements.averagePrice.textContent = `$${Math.round(average)}`;
}

function renderItemTypeOptions() {
  const tags = [...new Set(listings.flatMap((listing) => listing.tags))].sort();
  for (const tag of tags) {
    const option = document.createElement("option");
    option.value = tag;
    option.textContent = tag[0].toUpperCase() + tag.slice(1);
    elements.itemTypeFilter.append(option);
  }
}

function renderListings() {
  const filtered = getFilteredListings().sort((a, b) => {
    if (a.sponsored === b.sponsored) {
      return 0;
    }
    return a.sponsored ? -1 : 1;
  });
  elements.resultsCount.textContent = `${filtered.length} bag${
    filtered.length === 1 ? "" : "s"
  }`;
  elements.listingGrid.innerHTML = "";

  if (!filtered.length) {
    elements.listingGrid.innerHTML =
      '<div class="listing-card"><p class="listing-title">No bags match those filters yet.</p><p class="listing-subtitle">Try widening distance, cost, or item tags.</p></div>';
    return;
  }

  for (const listing of filtered) {
    const card = document.createElement("article");
    card.className = `listing-card ${
      listing.id === state.selectedId ? "selected" : ""
    }`;
    card.innerHTML = `
      <div class="listing-image-wrap">
        <img class="listing-image" src="${listing.image}" alt="${listing.title}" />
        <img class="listing-bag-mark" src="./assets/paper-bag.png" alt="" />
        ${
          listing.sponsored
            ? '<span class="listing-flag sponsored-flag">Sponsored</span>'
            : ""
        }
      </div>
      <div class="listing-header">
        <span class="bag-badge ${listing.bagType}">${listing.bagType} bag</span>
        <div>
          <p class="listing-title">${listing.title}</p>
          <p class="listing-subtitle">${listing.contentsLine}</p>
        </div>
      </div>
      <div class="listing-price-row">
        <div>
          <p class="listing-price">$${listing.price}</p>
          <p class="listing-meta">${formatOfferType(listing.offerType)}</p>
        </div>
      </div>
      <div class="tag-stack listing-tags">
        ${listing.tags.map((tag) => `<span class="tag">${tag}</span>`).join("")}
      </div>
      <div class="listing-footer">
        <span>${listing.distance} mi away · ${listing.zipCode}</span>
        <span>${listing.pickupWindow}</span>
      </div>
    `;
    card.addEventListener("click", () => selectListing(listing.id));
    elements.listingGrid.append(card);
  }
}

function renderManagement() {
  const totals = {
    live: listings.filter((listing) => listing.status === "Live").length,
    review: listings.filter((listing) => listing.status === "In Review").length,
    edits: listings.filter((listing) => listing.status === "Needs Edits").length,
  };

  elements.consoleMetrics.innerHTML = `
    <div class="metric-card">
      <span class="metric-icon">+</span>
      <span class="summary-label">Live now</span>
      <span class="metric-value">${totals.live}</span>
      <span class="summary-note">Visible in local search</span>
    </div>
    <div class="metric-card">
      <span class="metric-icon">+</span>
      <span class="summary-label">In review</span>
      <span class="metric-value">${totals.review}</span>
      <span class="summary-note">Awaiting moderation</span>
    </div>
    <div class="metric-card">
      <span class="metric-icon">+</span>
      <span class="summary-label">Needs edits</span>
      <span class="metric-value">${totals.edits}</span>
      <span class="summary-note">Missing photo or tag coverage</span>
    </div>
  `;

  elements.managementTable.innerHTML = listings
    .map(
      (listing) => `
        <tr class="management-row ${
          listing.id === state.selectedId ? "selected" : ""
        }" data-id="${listing.id}">
          <td>
            <strong>${listing.title}</strong><br />
            <span>${listing.bagType} bag by ${listing.seller}</span>
          </td>
          <td><span class="status-pill ${listing.status
            .toLowerCase()
            .replace(" ", "-")}">${listing.status}</span></td>
          <td>${listing.distance} mi · ${listing.zipCode}<br /><span>${listing.pickupWindow}</span></td>
          <td>$${listing.price}<br /><span>${formatOfferType(listing.offerType)}</span></td>
          <td>${listing.tags.join(", ")}</td>
        </tr>
      `
    )
    .join("");

  for (const row of elements.managementTable.querySelectorAll(".management-row")) {
    row.addEventListener("click", () => selectListing(row.dataset.id));
  }
}

function renderDetail() {
  const selected = listings.find((listing) => listing.id === state.selectedId);
  if (!selected) {
    return;
  }

  elements.detailTitle.textContent = selected.title;
  elements.detailStatus.textContent = selected.status;
  elements.detailPickup.textContent = `${selected.pickupNotes} Pickup window: ${selected.pickupWindow}`;
  elements.detailSummary.textContent = selected.summary;
  elements.detailExteriorImage.src = selected.image;
  elements.detailExteriorImage.alt = `${selected.title} exterior`;
  elements.detailTags.innerHTML = selected.tags
    .map((tag) => `<span class="tag">${tag}</span>`)
    .join("");
  elements.detailContentsMockup.innerHTML = `
    <img class="detail-square-image" src="${selected.image}" alt="${selected.title} contents mockup" />
    <div class="detail-mockup-overlay">
      ${selected.tags
        .slice(0, 4)
        .map((tag) => `<span class="detail-mockup-tag">${tag}</span>`)
        .join("")}
    </div>
  `;
}

function selectListing(id) {
  state.selectedId = id;
  renderListings();
  renderManagement();
  renderDetail();
}

function switchView(nextView) {
  state.view = nextView;
  for (const tab of elements.tabs) {
    tab.classList.toggle("active", tab.dataset.view === nextView);
  }
  for (const [name, panel] of Object.entries(elements.panels)) {
    panel.classList.toggle("active", name === nextView);
  }
}

function bindEvents() {
  elements.searchInput.addEventListener("input", (event) => {
    state.search = event.target.value.trim().toLowerCase();
    renderListings();
  });

  elements.itemTypeFilter.addEventListener("change", (event) => {
    state.itemType = event.target.value;
    renderListings();
  });

  elements.zipFilter.addEventListener("input", (event) => {
    state.zipCode = event.target.value.replace(/\D/g, "").slice(0, 5);
    event.target.value = state.zipCode;
    renderListings();
  });

  elements.distanceFilter.addEventListener("input", (event) => {
    state.maxDistance = Number(event.target.value);
    elements.distanceValue.textContent = `${state.maxDistance} miles`;
    renderListings();
  });

  elements.priceFilter.addEventListener("input", (event) => {
    state.maxPrice = Number(event.target.value);
    elements.priceValue.textContent = `$${state.maxPrice}`;
    renderListings();
  });

  for (const chip of elements.bagTypeFilter.querySelectorAll(".chip")) {
    chip.addEventListener("click", () => {
      for (const current of elements.bagTypeFilter.querySelectorAll(".chip")) {
        current.classList.remove("active");
      }
      chip.classList.add("active");
      state.bagType = chip.dataset.bag;
      renderListings();
    });
  }

  for (const chip of elements.offerFilter.querySelectorAll(".chip")) {
    chip.addEventListener("click", () => {
      for (const current of elements.offerFilter.querySelectorAll(".chip")) {
        current.classList.remove("active");
      }
      chip.classList.add("active");
      state.offerType = chip.dataset.offer;
      renderListings();
    });
  }

  for (const tab of elements.tabs) {
    tab.addEventListener("click", () => switchView(tab.dataset.view));
  }
}

renderSummary();
renderItemTypeOptions();
bindEvents();
renderListings();
renderManagement();
renderDetail();