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

export const metadata = { title: "Logged In Now" };

const PER_PAGE = 48;

export default async function LoggedInNowPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const params = await searchParams;
  const page = Math.max(1, Number(params.page) || 1);

  const thirtyMinutesAgo = new Date(Date.now() - 30 * 60 * 1000);

  const where = {
    lastonline_at: { gte: thirtyMinutesAgo },
    active: true,
    banned_at: null,
  };

  const [membersRaw, total] = await Promise.all([
    prisma.user.findMany({
      where,
      include: {
        country: true,
        city: true,
      },
      orderBy: { lastonline_at: "desc" },
      skip: (page - 1) * PER_PAGE,
      take: PER_PAGE,
    }),
    prisma.user.count({ where }),
  ]);
  const members = await withAvatarUrls(membersRaw);

  const totalPages = Math.ceil(total / PER_PAGE);

  function pageUrl(p: number) {
    return p > 1
      ? `/search/logged-in-now?page=${p}`
      : "/search/logged-in-now";
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Logged In Now</h1>
        <p className="text-text-muted mt-1">
          {total} member{total !== 1 ? "s" : ""} online in the last 30 minutes
          {totalPages > 1 && ` — Page ${page} of ${totalPages}`}
        </p>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
        {members.map((member) => (
          <Link
            key={member.id}
            href={`/view/${member.id_aw ?? member.id}`}
            className="bg-surface rounded-lg overflow-hidden hover:ring-1 hover:ring-primary transition-all group"
          >
            <div className="aspect-[3/4] bg-surface-light relative">
              <MediaImage
                srcs={member.avatarMediaUrls.length > 0
                  ? member.avatarMediaUrls
                  : (member.profile_photo ? [avatarUrl(member.profile_photo, member.id_aw)] : [])}
                alt={member.username ?? ""}
                fill
                sizes="(max-width:640px) 50vw, (max-width:1024px) 33vw, 16vw"
                className="object-cover group-hover:scale-105 transition-transform"
              />
              <div className="absolute top-2 right-2">
                <span className="w-3 h-3 bg-green-500 rounded-full block shadow-sm" />
              </div>
            </div>
            <div className="p-3">
              <p className="font-semibold truncate">
                {member.username ?? "No name"}
              </p>
              <p className="text-text-muted text-xs truncate">
                {member.city?.name}
                {member.city && member.country ? ", " : ""}
                {member.country?.name}
              </p>
            </div>
          </Link>
        ))}
      </div>

      {members.length === 0 && (
        <div className="text-center py-16 text-text-muted">
          <p className="text-lg">No members online right now</p>
        </div>
      )}

      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 pt-4">
          {page > 1 && (
            <Link
              href={pageUrl(page - 1)}
              className="bg-surface-light hover:bg-surface text-text-muted px-3 py-2 rounded-lg text-sm transition-colors"
            >
              Previous
            </Link>
          )}
          {Array.from({ length: totalPages }, (_, i) => i + 1)
            .filter(
              (p) =>
                p === 1 ||
                p === totalPages ||
                (p >= page - 2 && p <= page + 2)
            )
            .reduce<number[]>((acc, p) => {
              const last = acc[acc.length - 1];
              if (last !== undefined && p - last > 1) acc.push(-1);
              acc.push(p);
              return acc;
            }, [])
            .map((p, i) =>
              p === -1 ? (
                <span key={`gap-${i}`} className="text-text-muted px-1">
                  ...
                </span>
              ) : (
                <Link
                  key={p}
                  href={pageUrl(p)}
                  className={`px-3 py-2 rounded-lg text-sm transition-colors ${
                    p === page
                      ? "bg-primary text-white"
                      : "bg-surface-light hover:bg-surface text-text-muted"
                  }`}
                >
                  {p}
                </Link>
              )
            )}
          {page < totalPages && (
            <Link
              href={pageUrl(page + 1)}
              className="bg-surface-light hover:bg-surface text-text-muted px-3 py-2 rounded-lg text-sm transition-colors"
            >
              Next
            </Link>
          )}
        </div>
      )}
    </div>
  );
}