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

export default async function TripsPage() {
  const trips = await tripService.getOpenTrips();

  return (
    <div className="mx-auto max-w-6xl px-4 py-8">
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-neutral-800">
            Open Trip Pendakian
          </h1>
          <p className="mt-1 text-sm text-neutral-500">
            {trips.length} trip tersedia — pilih dan langsung join
          </p>
        </div>
        <Link
          href="/create-trip"
          className="rounded-xl bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-md shadow-primary-600/20 hover:bg-primary-700"
        >
          + Buat Trip
        </Link>
      </div>

      {trips.length === 0 ? (
        <div className="rounded-2xl border-2 border-dashed border-neutral-200 bg-white p-14 text-center">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-3xl">
            🏕️
          </div>
          <p className="mb-1 text-lg font-bold text-neutral-800">
            Belum ada trip tersedia
          </p>
          <p className="mb-6 text-sm text-neutral-500">
            Jadilah yang pertama membuat open trip pendakian!
          </p>
          <Link
            href="/create-trip"
            className="inline-block rounded-xl bg-primary-600 px-6 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}
              price={trip.price}
              maxParticipants={trip.maxParticipants}
              participantCount={trip._count.participants}
              organizerName={trip.organizer.name}
              status={trip.status}
            />
          ))}
        </div>
      )}
    </div>
  );
}