setrip/app/trips/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { Suspense } from "react";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { tripService } from "@/server/services/trip.service";
import { profileRepo } from "@/server/repositories/profile.repo";
import { TripCard } from "@/features/trip/components/trip-card";
import { TripFilter } from "@/features/trip/components/trip-filter";
import { siteConfig } from "@/lib/site";
import { categoryLabel, isActivityCategory } from "@/lib/activity-category";
import { isVibe } from "@/lib/vibe";
import type { GroupSize } from "@/server/repositories/trip.repo";

const GROUP_SIZES: GroupSize[] = ["SMALL", "MEDIUM", "LARGE"];
function isGroupSize(value: unknown): value is GroupSize {
  return typeof value === "string" && (GROUP_SIZES as string[]).includes(value);
}

interface TripsPageProps {
  searchParams: Promise<{
    q?: string;
    from?: string;
    to?: string;
    category?: string;
    vibe?: string;
    groupSize?: string;
  }>;
}

export async function generateMetadata({
  searchParams,
}: TripsPageProps): Promise<Metadata> {
  const { q, category: categoryParam } = await searchParams;
  const category = isActivityCategory(categoryParam) ? categoryParam : undefined;
  const categoryName = category ? categoryLabel(category) : null;

  const title = q
    ? `Cari Teman Trip "${q}" — Gabung Bareng`
    : categoryName
      ? `Cari Teman ${categoryName} — Daftar Open Trip Aktif`
      : "Cari Teman Trip & Aktivitas — Daftar Open Trip Aktif";
  const description = q
    ? `Hasil pencarian "${q}" di ${siteConfig.name}. Temukan teman seperjalanan, lihat trip & organizer terverifikasi, langsung gabung.`
    : categoryName
      ? `Daftar open trip ${categoryName.toLowerCase()} di ${siteConfig.name}. Pilih trip, kenal calon teman seperjalanan, dan gabung bareng — grup kecil & organizer terverifikasi.`
      : `Daftar open trip aktif di ${siteConfig.name} — hiking, camping, snorkeling, city trip, dan aktivitas bareng lainnya. Pilih trip, kenal calon teman seperjalanan, dan gabung bareng — grup kecil & organizer terverifikasi.`;
  return {
    title,
    description,
    alternates: { canonical: "/trips" },
    openGraph: { title, description, url: "/trips" },
  };
}

export default async function TripsPage({ searchParams }: TripsPageProps) {
  const params = await searchParams;
  const category = isActivityCategory(params.category) ? params.category : undefined;
  const vibe = isVibe(params.vibe) ? params.vibe : undefined;
  const groupSize = isGroupSize(params.groupSize) ? params.groupSize : undefined;
  const hasFilters = Boolean(
    params.q || params.from || params.to || category || vibe || groupSize
  );
  const filters = {
    q: params.q,
    from: params.from,
    to: params.to,
    category,
    vibe,
    groupSize,
  };

  const session = await getServerSession(authOptions);
  const [trips, allTrips, viewerProfile] = await Promise.all([
    tripService.getOpenTrips(filters),
    hasFilters ? tripService.getOpenTrips() : null,
    session?.user?.id
      ? profileRepo.findByUserId(session.user.id)
      : Promise.resolve(null),
  ]);
  const totalCount = hasFilters ? allTrips!.length : trips.length;
  const viewerInterests = viewerProfile?.interests ?? [];

  return (
    <div className="mx-auto max-w-6xl px-4 py-6 sm:py-8">
      <div className="mb-6 flex flex-col gap-3 sm:mb-8 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-xl font-bold text-neutral-800 sm:text-2xl">
            {category
              ? `Cari Teman ${categoryLabel(category)}`
              : "Cari Teman Trip & Aktivitas"}
          </h1>
          <p className="mt-0.5 text-sm text-neutral-500">
            {hasFilters
              ? `${trips.length} dari ${totalCount} trip ditemukan`
              : `${trips.length} trip tersedia — pilih, kenalan, lalu gabung`}
          </p>
        </div>
        <Link
          href="/create-trip"
          className="w-full rounded-xl bg-primary-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700 sm:w-auto"
        >
          + Buat Trip
        </Link>
      </div>

      {/* Filter */}
      <div className="mb-6">
        <Suspense fallback={null}>
          <TripFilter />
        </Suspense>
      </div>

      {trips.length === 0 ? (
        <div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-8 text-center sm:p-14">
          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 text-2xl sm:h-16 sm:w-16 sm:text-3xl">
            {hasFilters ? "🔍" : "🏕️"}
          </div>
          <p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
            {hasFilters
              ? "Tidak ada trip yang cocok"
              : "Belum ada trip tersedia"}
          </p>
          <p className="mb-5 text-sm text-neutral-500 sm:mb-6">
            {hasFilters
              ? "Coba ubah kata kunci atau rentang tanggal pencarian"
              : "Jadilah yang pertama membuat open trip di sini!"}
          </p>
          {!hasFilters && (
            <Link
              href="/create-trip"
              className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-primary-600/25 hover:bg-primary-700"
            >
              Buat Trip Baru
            </Link>
          )}
        </div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {trips.map((trip) => (
            <TripCard
              key={trip.id}
              id={trip.id}
              title={trip.title}
              category={trip.category}
              vibe={trip.vibe}
              destination={trip.destination}
              location={trip.location}
              date={trip.date}
              endDate={trip.endDate}
              price={trip.price}
              maxParticipants={trip.maxParticipants}
              participantCount={trip._count.participants}
              organizerName={trip.organizer.name}
              status={trip.status}
              coverImage={trip.images[0]?.url}
              isVerifiedOrganizer={
                trip.organizer.organizerVerification?.status === "APPROVED"
              }
              participants={trip.participants.map((p) => ({
                id: p.id,
                name: p.user.name,
                image: p.user.image,
                interests: p.user.profile?.interests ?? [],
              }))}
              viewerInterests={viewerInterests}
            />
          ))}
        </div>
      )}
    </div>
  );
}