import { auth } from "@/lib/auth";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
import { postShout } from "@/actions/radio-shouts";

export const dynamic = "force-dynamic";

function formatDate(d: Date | null | undefined): string {
  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "";
}

export default async function RadioShoutsPage() {
  const [shouts, imagerBase, session] = await Promise.all([
    prisma.radioShouts
      .findMany({
        orderBy: { createdAt: "desc" },
        take: 50,
      })
      .catch(() => []),
    siteSettings.get(
      "habbo_imaging_url",
      "https://www.habbo.com/habbo-imaging/avatarimage",
    ),
    auth(),
  ]);

  const isLoggedIn = Boolean(session?.user?.id);

  // Resolve author usernames/looks. shout.userId is BigInt; User.id is Int.
  const authorIds = Array.from(new Set(shouts.map((s) => Number(s.userId))));
  const authors = authorIds.length
    ? await prisma.user
        .findMany({
          where: { id: { in: authorIds } },
          select: { id: true, username: true, look: true },
        })
        .catch(() => [])
    : [];
  const authorById = new Map(authors.map((a) => [a.id, a]));

  return (
    <main>
      <h1>Radio Shouts</h1>
      <p className="muted" style={{ marginTop: 0 }}>
        Shout-outs and requests from the community.
      </p>

      {isLoggedIn ? (
        <form action={postShout} className="card" style={{ marginBottom: "1.5rem" }}>
          {/* The author is taken from the session inside the action, never from
              this form — no user id is submitted. */}
          <label htmlFor="shout-message" className="muted">
            Post a shout
          </label>
          <textarea
            id="shout-message"
            name="message"
            required
            maxLength={255}
            rows={3}
            placeholder="Send a shout to the DJ…"
            style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
          />
          <button type="submit" className="btn btn-primary">
            Shout
          </button>
        </form>
      ) : (
        <p className="muted">Log in to post a shout.</p>
      )}

      {shouts.length === 0 ? (
        <p className="muted">No shouts yet. Be the first!</p>
      ) : (
        <div className="grid">
          {shouts.map((s) => {
            const author = authorById.get(Number(s.userId));
            const authorAvatar = author
              ? avatarImageUrl(imagerBase ?? "", author.look, {
                  size: "s",
                  headOnly: true,
                })
              : null;
            return (
              <div
                key={String(s.id)}
                className="card"
                style={{ display: "flex", gap: "0.75rem", alignItems: "flex-start" }}
              >
                {authorAvatar ? (
                  /* eslint-disable-next-line @next/next/no-img-element */
                  <img
                    className="avatar"
                    src={authorAvatar}
                    alt={author?.username ?? "author"}
                    width={40}
                    height={40}
                  />
                ) : null}
                <div style={{ flex: 1 }}>
                  <p style={{ margin: "0 0 0.25rem" }}>
                    <strong>{author?.username ?? `User #${s.userId}`}</strong>{" "}
                    <span className="muted">{formatDate(s.createdAt)}</span>
                  </p>
                  <p style={{ margin: 0 }}>{s.message}</p>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </main>
  );
}