import type { Metadata } from "next";
import { PageHeader, Tag } from "@/components/status";
import { Card, CardContent } from "@/components/ui/card";
import { api, unwrap } from "@/lib/api";

export const metadata: Metadata = { title: "Rooms" };

export default async function Rooms() {
  const { rooms } = await api.rooms.get().then(unwrap);
  return (
    <>
      <PageHeader title="Rooms">Public IMVU rooms of T5DE users.</PageHeader>
      {rooms.length === 0 ? (
        <Card>
          <CardContent>
            <p className="py-6 text-sm text-muted-foreground">No rooms listed yet.</p>
          </CardContent>
        </Card>
      ) : (
        <ul className="grid gap-4 sm:grid-cols-2">
          {rooms.map((r) => (
            <li key={r.instanceId}>
              <Card className="h-full overflow-hidden py-0">
                {r.imageURL && (
                  // IMVU's own image of the room, from IMVU.
                  <img src={r.imageURL} alt="" className="aspect-[332/281] w-full bg-muted object-cover" loading="lazy" />
                )}
                <CardContent className="space-y-3 pb-6">
                  <div className="flex flex-wrap items-center gap-2">
                    <a href={r.url} className="font-medium underline-offset-4 hover:underline" rel="noreferrer">
                      {r.name}
                    </a>
                    {r.adult && <Tag tone="adult">AP</Tag>}
                    {r.t5de.length > 0 && (
                      <Tag tone="online" dot>
                        {r.t5de.length} on T5DE
                      </Tag>
                    )}
                  </div>
                  <p className="text-xs text-muted-foreground">
                    {r.owner.username} · {r.occupancy}/{r.capacity}
                  </p>
                  {r.description && <p className="line-clamp-3 text-sm whitespace-pre-line">{r.description}</p>}
                  {r.t5de.length > 0 && (
                    <p className="text-xs text-muted-foreground">Here now: {r.t5de.map((u) => u.username).join(", ")}</p>
                  )}
                </CardContent>
              </Card>
            </li>
          ))}
        </ul>
      )}
    </>
  );
}