import prisma from "@/lib/prisma";
import Link from "next/link";
import type { Metadata } from "next";
import { avatarUrl, withAvatarUrls } from "@/lib/media";
import MediaImage from "@/components/shared/media-image";

// Short ISR — availability flips fast, but a 60s window is far cheaper
// than the per-request scan that prior `force-dynamic` (default) caused.
export const revalidate = 60;

export const metadata: Metadata = {
  title: "Available Now - Escorts Ready to Meet",
  description:
    "Browse escorts who are available right now. Find someone ready to meet near you.",
};

export default async function AvailableNowPage() {
  // C.10: include `active: true` and `banned_at: null` so deactivated and
  // banned escorts whose status row still says "available" don't leak onto
  // the Available Now landing page.
  const escortsRaw = await prisma.user.findMany({
    where: {
      user_type: "escort",
      status: "available",
      active: true,
      banned_at: null,
    },
    orderBy: { lastonline_at: "desc" },
    take: 48,
    include: {
      city: { select: { name: true } },
      country: { select: { name: true } },
    },
  });
  const escorts = await withAvatarUrls(escortsRaw);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-text">Available Now</h1>
        <p className="text-text-muted mt-1">
          {escorts.length} escort{escorts.length !== 1 ? "s" : ""} available right now
        </p>
      </div>

      {escorts.length === 0 ? (
        <div className="bg-surface rounded-xl border border-surface-light p-12 text-center">
          <p className="text-text-muted">No escorts are available right now. Check back soon.</p>
          <Link href="/escorts" className="text-primary hover:underline text-sm mt-2 inline-block">
            Browse all escorts
          </Link>
        </div>
      ) : (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
          {escorts.map((escort) => (
            <Link
              key={escort.id}
              href={`/view/${escort.id_aw ?? escort.id}`}
              className="bg-surface rounded-xl border border-surface-light overflow-hidden hover:border-primary transition-colors group"
            >
              <div className="aspect-[3/4] bg-surface-light relative">
                <MediaImage
                  srcs={escort.avatarMediaUrls.length > 0
                    ? escort.avatarMediaUrls
                    : (escort.profile_photo ? [avatarUrl(escort.profile_photo, escort.id_aw)] : [])}
                  alt={escort.username ?? "Escort"}
                  fill
                  sizes="(max-width:640px) 50vw, (max-width:1024px) 33vw, 20vw"
                  className="object-cover group-hover:scale-105 transition-transform"
                />
                {/* Green available dot */}
                <span className="absolute top-2 right-2 w-3 h-3 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
              </div>
              <div className="p-3">
                <p className="font-medium text-text truncate">
                  {escort.username ?? "Anonymous"}
                </p>
                <p className="text-xs text-text-muted truncate">
                  {[escort.city?.name, escort.country?.name].filter(Boolean).join(", ") ||
                    "Location not set"}
                </p>
                {escort.is_verified && (
                  <span className="text-xs text-primary mt-1 inline-block">Verified</span>
                )}
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}