import Link from "next/link";
import { Suspense } from "react";
import { tripService } from "@/server/services/trip.service";
import { TripCard } from "@/features/trip/components/trip-card";
import { TripFilter } from "@/features/trip/components/trip-filter";

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

export default async function TripsPage({ searchParams }: TripsPageProps) {
  const params = await searchParams;
  const hasFilters = params.q || params.from || params.to;
  const filters = {
    q: params.q,
    from: params.from,
    to: params.to,
  };

  const [trips, allTrips] = await Promise.all([
    tripService.getOpenTrips(filters),
    hasFilters ? tripService.getOpenTrips() : null,
  ]);
  const totalCount = hasFilters ? allTrips!.length : trips.length;

  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">
            Open Trip Pendakian
          </h1>
          <p className="mt-0.5 text-sm text-neutral-500">
            {hasFilters
              ? `${trips.length} dari ${totalCount} trip ditemukan`
              : `${trips.length} trip tersedia — pilih dan langsung join`}
          </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 pendakian!"}
          </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}
              mountain={trip.mountain}
              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}
            />
          ))}
        </div>
      )}
    </div>
  );
}