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-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">
            {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>

      {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">
            🏕️
          </div>
          <p className="mb-1 text-base font-bold text-neutral-800 sm:text-lg">
            Belum ada trip tersedia
          </p>
          <p className="mb-5 text-sm text-neutral-500 sm:mb-6">
            Jadilah yang pertama membuat open trip pendakian!
          </p>
          <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}
              price={trip.price}
              maxParticipants={trip.maxParticipants}
              participantCount={trip._count.participants}
              organizerName={trip.organizer.name}
              status={trip.status}
              coverImage={trip.images[0]?.url}
            />
          ))}
        </div>
      )}
    </div>
  );
}
