import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { getBookingsAdmin } from "@/lib/actions/bookings";

export default async function AdminBookingsPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const { page: pageParam } = await searchParams;
  const page = Math.max(1, Number(pageParam) || 1);
  const { bookings, totalCount, totalPages, currentPage } = await getBookingsAdmin(page);

  return (
    <div>
      <div className="flex items-baseline justify-between">
        <h1 className="text-2xl font-bold text-charcoal-950">Bookings</h1>
        <span className="text-sm text-charcoal-400">{totalCount} total</span>
      </div>
      <div className="mt-8 overflow-x-auto rounded-2xl border border-charcoal-950/10 bg-white">
        <table className="w-full text-sm">
          <thead className="bg-charcoal-50 text-xs font-semibold uppercase tracking-wide text-charcoal-400">
            <tr>
              <th className="px-4 py-3 text-start">Name</th>
              <th className="px-4 py-3 text-start">Email</th>
              <th className="px-4 py-3 text-start">WhatsApp</th>
              <th className="px-4 py-3 text-start">Destination</th>
              <th className="px-4 py-3 text-start">Travelers</th>
              <th className="px-4 py-3 text-start">Arrival</th>
              <th className="px-4 py-3 text-start">Received</th>
            </tr>
          </thead>
          <tbody>
            {bookings.map((booking) => (
              <tr key={booking.id} className="border-t border-charcoal-950/5">
                <td className="px-4 py-3 font-medium text-charcoal-950">{booking.fullName}</td>
                <td className="px-4 py-3 text-charcoal-500">{booking.email}</td>
                <td className="px-4 py-3 text-charcoal-500">{booking.whatsapp}</td>
                <td className="px-4 py-3 text-charcoal-500">{booking.destination}</td>
                <td className="px-4 py-3 text-charcoal-500">{booking.travelers}</td>
                <td className="px-4 py-3 text-charcoal-500">
                  {booking.arrivalDate.toLocaleDateString()}
                </td>
                <td className="px-4 py-3 text-charcoal-500">
                  {booking.createdAt.toLocaleDateString()}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {bookings.length === 0 ? (
          <p className="p-8 text-center text-charcoal-400">No bookings yet.</p>
        ) : null}
      </div>

      {totalPages > 1 ? (
        <div className="mt-6 flex items-center justify-between">
          <Link
            href={`/admin/bookings?page=${currentPage - 1}`}
            aria-disabled={currentPage <= 1}
            className={`inline-flex items-center gap-1 rounded-full border border-charcoal-950/10 px-4 py-2 text-sm font-semibold ${
              currentPage <= 1
                ? "pointer-events-none opacity-40"
                : "text-charcoal-700 hover:bg-charcoal-50"
            }`}
          >
            <ChevronLeft size={16} /> Previous
          </Link>
          <span className="text-sm text-charcoal-400">
            Page {currentPage} of {totalPages}
          </span>
          <Link
            href={`/admin/bookings?page=${currentPage + 1}`}
            aria-disabled={currentPage >= totalPages}
            className={`inline-flex items-center gap-1 rounded-full border border-charcoal-950/10 px-4 py-2 text-sm font-semibold ${
              currentPage >= totalPages
                ? "pointer-events-none opacity-40"
                : "text-charcoal-700 hover:bg-charcoal-50"
            }`}
          >
            Next <ChevronRight size={16} />
          </Link>
        </div>
      ) : null}
    </div>
  );
}