Advanced Details Endpoint

class VenueProfilePage {
  async loadFullVenueDetails(venueId: string) {
    try {
      const response = await fetch(`/v1/establishments/advanced/${venueId}`, {
        headers: { "Api-Key": `${process.env.API_KEY}` },
      });

      if (!response.ok) {
        throw new Error(`Failed to load venue: ${response.status}`);
      }

      const venue: AdvancedDetails = await response.json();
      this.renderVenueProfile(venue);
      this.setupImageGallery(venue.photos);
      this.displayAmenities(venue.establishmentFlags);
    } catch (error) {
      this.showError("Failed to load venue details");
    }
  }

  private renderVenueProfile(venue: AdvancedDetails) {
    const profileHTML = `
      <div class="venue-profile">
        <h1>${venue.name}</h1>
        <p class="description">${venue.description}</p>
        <div class="rating">
          <span class="stars">${"⭐".repeat(Math.floor(parseFloat(venue.ratings.rating)))}</span>
          <span class="score">${venue.ratings.rating} (${venue.ratings.userRatingCount} reviews)</span>
        </div>
        <div class="location">
          <p>${venue.formattedAddress}</p>
        </div>
        <div class="contact">
          <p>📞 ${venue.contactNumber}</p>
          <p>🌐 <a href="${venue.websiteUri}">${venue.websiteUri}</a></p>
        </div>
      </div>
    `;

    document.getElementById("venue-profile")!.innerHTML = profileHTML;
  }

  private setupImageGallery(photos: { url: string; caption: string | null }[]) {
    const gallery = document.getElementById("image-gallery")!;
    gallery.innerHTML = photos
      .map(
        (photo) => `
      <div class="gallery-item">
        <img src="${photo.url}" alt="${photo.caption || "Venue photo"}" />
        <p class="caption">${photo.caption || ""}</p>
      </div>
    `,
      )
      .join("");
  }
}

class RichVenueSearch {
  async enhanceSearchResults(searchResults: SearchResult[]) {
    const enhancedVenues = await Promise.all(
      searchResults.map(async (result) => {
        // Get basic info first
        const basicInfo = result;

        // Then enhance with advanced details
        try {
          const advancedResponse = await fetch(
            `/v1/establishments/advanced/${result.id}`,
            {
              headers: { "Api-Key": `${process.env.API_KEY}` },
            },
          );

          if (advancedResponse.ok) {
            const advancedInfo: AdvancedDetails = await advancedResponse.json();
            return { ...basicInfo, ...advancedInfo };
          }
        } catch (error) {
          console.warn(`Failed to load advanced details for ${result.id}`);
        }

        return basicInfo;
      }),
    );

    return enhancedVenues;
  }

  renderEnhancedVenueCard(venue: EnhancedVenueResult) {
    return `
      <div class="enhanced-venue-card">
        <img src="${venue.photos?.[0]?.url || venue.mainImageUrl}" alt="${venue.name}" />
        <div class="venue-info">
          <h3>${venue.name}</h3>
          <p>${venue.description}</p>
          <div class="amenities">
            ${
              venue.establishmentFlags
                ?.slice(0, 3)
                .map((flag) => `<span class="amenity">${flag}</span>`)
                .join("") || ""
            }
          </div>
          <div class="rating">
            ⭐ ${venue.ratings.rating} (${venue.ratings.userRatingCount})
          </div>
          <p class="location">${venue.formattedAddress}</p>
        </div>
      </div>
    `;
  }
}

class VenueComparison {
  async compareVenues(venueIds: string[]) {
    const venueDetails = await Promise.all(
      venueIds.map(async (id) => {
        const response = await fetch(`/v1/establishments/advanced/${id}`, {
          headers: { "Api-Key": `${process.env.API_KEY}` },
        });

        if (!response.ok) {
          throw new Error(`Failed to load venue ${id}`);
        }

        return (await response.json()) as AdvancedDetails;
      }),
    );

    this.renderComparisonTable(venueDetails);
  }

  private renderComparisonTable(venues: AdvancedDetails[]) {
    const table = document.getElementById("comparison-table")!;

    const headers = ["Feature", ...venues.map((v) => v.name)];
    const features = [
      "Rating",
      "Price Range",
      "Amenities",
      "Opening Hours",
      "Contact",
    ];

    const tableHTML = `
      <table class="comparison-table">
        <thead>
          <tr>${headers.map((h) => `<th>${h}</th>`).join("")}</tr>
        </thead>
        <tbody>
          ${features
            .map(
              (feature) => `
            <tr>
              <td><strong>${feature}</strong></td>
              ${venues.map((venue) => `<td>${this.getFeatureValue(venue, feature)}</td>`).join("")}
            </tr>
          `,
            )
            .join("")}
        </tbody>
      </table>
    `;

    table.innerHTML = tableHTML;
  }

  private getFeatureValue(venue: AdvancedDetails, feature: string): string {
    switch (feature) {
      case "Rating":
        return `${venue.ratings.rating} (${venue.ratings.userRatingCount})`;
      case "Price Range":
        return venue.avgPPH || "N/A";
      case "Amenities":
        return venue.establishmentFlags?.slice(0, 3).join(", ") || "N/A";
      case "Opening Hours":
        return venue.regularOpeningHours?.[0]?.timeSlots?.[0]?.isClosed
          ? "Closed"
          : "Open";
      case "Contact":
        return venue.contactNumber || "N/A";
      default:
        return "N/A";
    }
  }
}