import {
  countFollowers,
  countFollowing,
  countStatuses,
  getAdminUser,
  getStatus,
  getUserById,
  getUserByIdOrUsername,
  listMediaForStatus,
  listProfileFields
} from "./db";
import { html } from "./http";
import type { Media, Status, User } from "./types";
import {
  actorUrl,
  baseUrl,
  escapeHtml,
  hostFromBaseUrl,
  mediaUrl,
  objectUrl,
  profileUrl,
  statusUrl
} from "./util";

type FeedEntry = {
  status: Status;
  user: User;
  media: Media[];
};

type ProfileStats = {
  followersCount: number;
  followingCount: number;
  statusesCount: number;
  fields: { name: string; value: string }[];
};

export async function homePage(env: Env): Promise<Response> {
  const admin = await getAdminUser(env);
  const [stats, feed] = await Promise.all([
    loadProfileStats(env, admin.id),
    loadRecentFeed(env, 20)
  ]);

  return html(renderPage({
    title: env.INSTANCE_NAME,
    description: `Recent public posts on ${hostFromBaseUrl(env)}`,
    canonical: baseUrl(env),
    alternate: `${baseUrl(env)}/nodeinfo/2.0`,
    alternateType: "application/json",
    ogType: "website",
    body: renderHomeBody(env, admin, stats, feed)
  }));
}

export async function profilePage(env: Env, key: string): Promise<Response> {
  const user = await getUserByIdOrUsername(env, key);
  if (!user) return html(renderNotFoundPage(env, key), 404);

  const [stats, feed] = await Promise.all([
    loadProfileStats(env, user.id),
    loadFeedForUser(env, user.id, 20)
  ]);

  return html(renderPage({
    title: `${user.display_name || user.username} (@${user.username})`,
    description: plainText(user.note) || `Account for @${user.username}@${hostFromBaseUrl(env)}`,
    canonical: profileUrl(env, user),
    alternate: actorUrl(env, user),
    ogType: "profile",
    body: renderProfileBody(env, user, stats, feed)
  }));
}

export async function statusPage(env: Env, username: string, statusId: string): Promise<Response> {
  const user = await getUserByIdOrUsername(env, username);
  if (!user) return html(renderNotFoundPage(env, `${username}/${statusId}`), 404);

  const status = await getStatus(env, statusId);
  if (!status || status.user_id !== user.id || !isVisibleStatus(status)) {
    const tomb = await env.DB.prepare("SELECT id FROM deleted_statuses WHERE id = ? AND user_id = ?")
      .bind(statusId, user.id).first<{ id: string }>();
    if (tomb) return html(renderDeletedStatusPage(env, statusId), 410);
    return html(renderNotFoundPage(env, `${username}/${statusId}`), 404);
  }

  const media = await listMediaForStatus(env, status.id);
  return html(renderPage({
    title: statusTitle(user, status),
    description: plainText(status.summary || status.content).slice(0, 180),
    canonical: statusUrl(env, user, status.id),
    alternate: objectUrl(env, status.id),
    body: renderStatusBody(env, user, status, media, { includeProfile: true })
  }));
}

export async function objectPage(env: Env, objectId: string): Promise<Response> {
  const status = await getStatus(env, objectId);
  if (!status || !isVisibleStatus(status)) {
    const tomb = await env.DB.prepare("SELECT deleted_at FROM deleted_statuses WHERE id = ?").bind(objectId).first<{ deleted_at: string }>();
    if (tomb) return html(renderDeletedStatusPage(env, objectId), 410);
    return html(renderNotFoundPage(env, objectId), 404);
  }

  const user = await getUserById(env, status.user_id);
  if (!user) return html(renderNotFoundPage(env, objectId), 404);
  const media = await listMediaForStatus(env, status.id);

  return html(renderPage({
    title: statusTitle(user, status),
    description: plainText(status.summary || status.content).slice(0, 180),
    canonical: statusUrl(env, user, status.id),
    alternate: objectUrl(env, status.id),
    body: renderStatusBody(env, user, status, media, { includeProfile: true })
  }));
}

async function loadProfileStats(env: Env, userId: string): Promise<ProfileStats> {
  const [followersCount, followingCount, statusesCount, fields] = await Promise.all([
    countFollowers(env, userId),
    countFollowing(env, userId),
    countStatuses(env, userId),
    listProfileFields(env, userId)
  ]);
  return { followersCount, followingCount, statusesCount, fields };
}

async function loadRecentFeed(env: Env, limit: number): Promise<FeedEntry[]> {
  const rows = await env.DB.prepare(
    "SELECT * FROM statuses WHERE visibility IN ('public', 'unlisted') ORDER BY created_at DESC LIMIT ?"
  ).bind(limit).all<Status>();
  return loadFeedEntries(env, rows.results);
}

async function loadFeedForUser(env: Env, userId: string, limit: number): Promise<FeedEntry[]> {
  const rows = await env.DB.prepare(
    "SELECT * FROM statuses WHERE user_id = ? AND visibility IN ('public', 'unlisted') ORDER BY created_at DESC LIMIT ?"
  ).bind(userId, limit).all<Status>();
  return loadFeedEntries(env, rows.results);
}

async function loadFeedEntries(env: Env, statuses: Status[]): Promise<FeedEntry[]> {
  const entries = await Promise.all(statuses.map(async (status) => {
    const user = await getUserById(env, status.user_id);
    if (!user) return null;
    const media = await listMediaForStatus(env, status.id);
    return { status, user, media };
  }));
  return entries.filter((entry): entry is FeedEntry => Boolean(entry));
}

function renderPage(options: {
  title: string;
  description: string;
  canonical: string;
  alternate: string;
  alternateType?: string;
  ogType?: string;
  body: string;
}): string {
  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>${escapeHtml(options.title)}</title>
<meta name="description" content="${escapeHtml(options.description)}">
<meta property="og:title" content="${escapeHtml(options.title)}">
<meta property="og:description" content="${escapeHtml(options.description)}">
<meta property="og:type" content="${escapeHtml(options.ogType ?? "article")}">
<link rel="canonical" href="${escapeHtml(options.canonical)}">
<link rel="alternate" type="${escapeHtml(options.alternateType ?? "application/activity+json")}" href="${escapeHtml(options.alternate)}">
<style>${siteCss()}</style>
</head>
<body>
${options.body}
<div class="lightbox" data-lightbox-overlay hidden aria-hidden="true">
  <div class="lightbox-backdrop" data-lightbox-close></div>
  <figure class="lightbox-panel" role="dialog" aria-modal="true" aria-label="Image viewer">
    <button class="lightbox-close" type="button" data-lightbox-close aria-label="Close">X</button>
    <img data-lightbox-image alt="">
    <figcaption data-lightbox-caption></figcaption>
  </figure>
</div>
<script>${lightboxScript()}</script>
</body>
</html>`;
}

function renderHomeBody(env: Env, user: User, stats: ProfileStats, feed: FeedEntry[]): string {
  const avatar = user.avatar_r2_key ? mediaUrl(env, user.avatar_r2_key) : `${baseUrl(env)}/avatar.png`;
  const header = user.header_r2_key ? mediaUrl(env, user.header_r2_key) : `${baseUrl(env)}/header.png`;
  return `
<main class="shell shell-home">
  <header class="instance-bar">
    <div>
      <p class="eyebrow">Instance</p>
      <h1>${escapeHtml(env.INSTANCE_NAME)}</h1>
      <p class="subtle">${escapeHtml(hostFromBaseUrl(env))}</p>
    </div>
  </header>
  <section class="panel" aria-labelledby="home-profile">
    <div class="cover"><img src="${escapeHtml(header)}" alt=""></div>
    <div class="identity">
      <a class="avatar-link" href="${escapeHtml(profileUrl(env, user))}" aria-label="Open account">
        <img class="avatar" src="${escapeHtml(avatar)}" alt="">
      </a>
      <div class="name-block">
        <h2 id="home-profile">${escapeHtml(user.display_name || user.username)}</h2>
        <p class="handle">@${escapeHtml(user.username)}@${escapeHtml(hostFromBaseUrl(env))}</p>
      </div>
    </div>
    ${renderNote(user.note)}
    ${renderFields(stats.fields)}
    <dl class="stats" aria-label="Profile stats">
      ${renderStat(stats.statusesCount, "Posts")}
      ${renderStat(stats.followingCount, "Following")}
      ${renderStat(stats.followersCount, "Followers")}
    </dl>
  </section>
  ${renderFeedSection(env, feed, "Recent public posts")}
</main>`;
}

function renderProfileBody(env: Env, user: User, stats: ProfileStats, feed: FeedEntry[]): string {
  const avatar = user.avatar_r2_key ? mediaUrl(env, user.avatar_r2_key) : `${baseUrl(env)}/avatar.png`;
  const header = user.header_r2_key ? mediaUrl(env, user.header_r2_key) : `${baseUrl(env)}/header.png`;
  return `
<main class="shell shell-profile">
  <header class="crumbs">
    <a class="text-link" href="${escapeHtml(baseUrl(env))}">Home</a>
    <span>/</span>
    <a class="text-link" href="${escapeHtml(actorUrl(env, user))}">ActivityPub</a>
  </header>
  <section class="panel" aria-labelledby="profile-name">
    <div class="cover"><img src="${escapeHtml(header)}" alt=""></div>
    <div class="identity">
      <img class="avatar" src="${escapeHtml(avatar)}" alt="">
      <div class="name-block">
        <h1 id="profile-name">${escapeHtml(user.display_name || user.username)}</h1>
        <p class="handle">@${escapeHtml(user.username)}@${escapeHtml(hostFromBaseUrl(env))}</p>
      </div>
    </div>
    ${renderNote(user.note)}
    ${renderFields(stats.fields)}
    <dl class="stats" aria-label="Profile stats">
      ${renderStat(stats.statusesCount, "Posts")}
      ${renderStat(stats.followingCount, "Following")}
      ${renderStat(stats.followersCount, "Followers")}
    </dl>
  </section>
  ${renderFeedSection(env, feed, "Posts")}
</main>`;
}

function renderStatusBody(env: Env, user: User, status: Status, media: Media[], options: { includeProfile: boolean }): string {
  const avatar = user.avatar_r2_key ? mediaUrl(env, user.avatar_r2_key) : `${baseUrl(env)}/avatar.png`;
  const header = user.header_r2_key ? mediaUrl(env, user.header_r2_key) : `${baseUrl(env)}/header.png`;
  const permalink = statusUrl(env, user, status.id);
  return `
<main class="shell shell-status">
  <header class="crumbs">
    <a class="text-link" href="${escapeHtml(baseUrl(env))}">Home</a>
    <span>/</span>
    <a class="text-link" href="${escapeHtml(profileUrl(env, user))}">@${escapeHtml(user.username)}</a>
    <span>/</span>
    <a class="text-link" href="${escapeHtml(objectUrl(env, status.id))}">ActivityPub</a>
  </header>
  <section class="panel profile-compact">
    <div class="cover"><img src="${escapeHtml(header)}" alt=""></div>
    <div class="identity">
      <a class="avatar-link" href="${escapeHtml(profileUrl(env, user))}" aria-label="Open account">
        <img class="avatar" src="${escapeHtml(avatar)}" alt="">
      </a>
      <div class="name-block">
        <h1>${escapeHtml(user.display_name || user.username)}</h1>
        <p class="handle">@${escapeHtml(user.username)}@${escapeHtml(hostFromBaseUrl(env))}</p>
      </div>
    </div>
    ${status.summary ? `<p class="summary">${escapeHtml(status.summary)}</p>` : ""}
    ${options.includeProfile ? renderStatusContent(status) : ""}
    ${renderMediaGrid(env, media)}
    <footer class="status-footer">
      <time datetime="${escapeHtml(status.created_at)}">${escapeHtml(formatDate(status.created_at))}</time>
      <span>${escapeHtml(status.visibility)}</span>
      <a href="${escapeHtml(permalink)}">Permalink</a>
    </footer>
  </section>
</main>`;
}

function renderFeedSection(env: Env, feed: FeedEntry[], title: string): string {
  return `
  <section class="feed" aria-labelledby="feed-title">
    <div class="section-head">
      <h2 id="feed-title">${escapeHtml(title)}</h2>
      <p>${feed.length ? `${formatCount(feed.length)} items` : "No items"}</p>
    </div>
    ${feed.length ? feed.map((entry) => renderFeedEntry(env, entry)).join("") : `<p class="empty">No public posts yet.</p>`}
  </section>`;
}

function renderFeedEntry(env: Env, entry: FeedEntry): string {
  const { status, user, media } = entry;
  const permalink = statusUrl(env, user, status.id);
  const avatar = user.avatar_r2_key ? mediaUrl(env, user.avatar_r2_key) : `${baseUrl(env)}/avatar.png`;
  return `
  <article class="status-card" data-post-href="${escapeHtml(permalink)}" role="link" tabindex="0" aria-label="Open status">
    <header class="status-head">
      <a class="author" href="${escapeHtml(profileUrl(env, user))}">
        <img src="${escapeHtml(avatar)}" alt="">
        <span>
          <strong>${escapeHtml(user.display_name || user.username)}</strong>
          <small>@${escapeHtml(user.username)}@${escapeHtml(hostFromBaseUrl(env))}</small>
        </span>
      </a>
      <a class="time-link" href="${escapeHtml(permalink)}"><time datetime="${escapeHtml(status.created_at)}">${escapeHtml(formatDate(status.created_at))}</time></a>
    </header>
    ${status.summary ? `<p class="summary">${escapeHtml(status.summary)}</p>` : ""}
    ${renderStatusContent(status)}
    ${renderMediaGrid(env, media)}
  </article>`;
}

function renderStatusContent(status: Status): string {
  return `<div class="content">${sanitizeStatusHtml(status.content)}</div>`;
}

function renderNote(note: string): string {
  const text = plainText(note);
  if (!text) return "";
  return `<div class="note">${escapeHtml(text).replace(/\n/g, "<br>")}</div>`;
}

function renderFields(fields: { name: string; value: string }[]): string {
  const items = fields.filter((field) => field.name || field.value);
  if (items.length === 0) return "";
  return `<dl class="fields">${items.map((field) => `
    <div>
      <dt>${escapeHtml(field.name)}</dt>
      <dd>${escapeHtml(plainText(field.value))}</dd>
    </div>`).join("")}
  </dl>`;
}

function renderStat(value: number, label: string): string {
  return `<div><dt>${formatCount(value)}</dt><dd>${escapeHtml(label)}</dd></div>`;
}

function renderMediaGrid(env: Env, media: Media[]): string {
  if (media.length === 0) return "";
  return `<div class="media-grid">${media.map((item) => {
    const url = mediaUrl(env, item.r2_key);
    const alt = item.description?.trim() || "Image attachment";
    if (item.mime_type.startsWith("image/")) {
      return `
        <a class="media-tile" href="${escapeHtml(url)}" data-lightbox-trigger data-lightbox-src="${escapeHtml(url)}" data-lightbox-alt="${escapeHtml(alt)}" aria-label="${escapeHtml(`Open image: ${alt}`)}">
          <img src="${escapeHtml(url)}" alt="${escapeHtml(alt)}" loading="lazy">
        </a>`;
    }
    return `<a class="attachment" href="${escapeHtml(url)}">${escapeHtml(item.description || item.mime_type)}</a>`;
  }).join("")}</div>`;
}

function renderNotFoundPage(env: Env, key: string): string {
  return renderPage({
    title: "Not found",
    description: `${key} was not found on ${hostFromBaseUrl(env)}`,
    canonical: baseUrl(env),
    alternate: `${baseUrl(env)}/.well-known/webfinger`,
    body: `
<main class="shell shell-message">
  <section class="message-panel">
    <p class="eyebrow">404</p>
    <h1>Not found</h1>
    <p class="subtle">${escapeHtml(key)} on ${escapeHtml(hostFromBaseUrl(env))}</p>
  </section>
</main>`
  });
}

function renderDeletedStatusPage(env: Env, objectId: string): string {
  return renderPage({
    title: "Post removed",
    description: `This post has been removed.`,
    canonical: baseUrl(env),
    alternate: baseUrl(env),
    body: `
<main class="shell shell-message">
  <section class="message-panel">
    <p class="eyebrow">410</p>
    <h1>Post removed</h1>
    <p class="subtle">${escapeHtml(objectId)}</p>
  </section>
</main>`
  });
}

function statusTitle(user: User, status: Status): string {
  const content = plainText(status.summary || status.content).slice(0, 70);
  return content ? `${user.display_name || user.username} - ${content}` : `${user.display_name || user.username}`;
}

function formatDate(value: string): string {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat("en", {
    year: "numeric",
    month: "short",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit"
  }).format(date);
}

function formatCount(value: number): string {
  return new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(value);
}

function plainText(value: string): string {
  return value.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
}

function isVisibleStatus(status: Status): boolean {
  return status.visibility === "public" || status.visibility === "unlisted";
}

function sanitizeStatusHtml(html: string): string {
  return html
    .replace(/<\/?(script|style|iframe|object|embed|link|meta)[^>]*>/gi, "")
    .replace(/\sstyle\s*=\s*(".*?"|'.*?'|[^\s>]+)/gi, "")
    .replace(/\son[a-z-]+\s*=\s*(".*?"|'.*?'|[^\s>]+)/gi, "")
    .replace(/\s(href|src)\s*=\s*("|\')\s*javascript:[^"\']*\2/gi, " $1=\"#\"");
}

function siteCss(): string {
  return `
:root {
  color-scheme: light;
  --bg: #f5f7f9;
  --surface: #ffffff;
  --surface-alt: #eef2f5;
  --ink: #1f2429;
  --muted: #68727d;
  --line: #d7dee5;
  --accent: #0f766e;
  --accent-strong: #0b5d56;
  --link: #1d4ed8;
  --warn: #9a3412;
  --shadow: 0 14px 36px rgba(31, 36, 41, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
a {
  color: var(--link);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
a:hover { text-decoration-thickness: .12em; }
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(15, 118, 110, .35);
  outline-offset: 3px;
}
img { max-width: 100%; }
.shell {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 20px 16px 56px;
}
.shell-home,
.shell-profile,
.shell-status {
  display: grid;
  gap: 16px;
}
.instance-bar,
.crumbs,
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.instance-bar,
.crumbs {
  padding: 2px 2px 0;
}
.instance-bar h1,
.message-panel h1 {
  margin: 0;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: 0;
}
.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.subtle {
  margin: 6px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-weight: 650;
}
.panel,
.status-card,
.message-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cover {
  aspect-ratio: 3 / 1;
  background: #dce3e8;
  border-bottom: 1px solid var(--line);
}
.cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.identity {
  display: flex;
  align-items: end;
  gap: 16px;
  padding: 0 24px;
  transform: translateY(-34px);
  margin-bottom: -16px;
}
.avatar {
  width: 104px;
  height: 104px;
  border-radius: 8px;
  border: 5px solid var(--surface);
  background: var(--surface);
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(31, 36, 41, .16);
}
.avatar-link {
  display: block;
  flex: none;
  border-radius: 8px;
}
.name-block { min-width: 0; padding-bottom: 10px; }
.name-block h1,
.name-block h2 {
  margin: 0;
  font-size: 1.95rem;
  line-height: 1.05;
}
.handle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.note {
  padding: 0 24px 18px;
  overflow-wrap: anywhere;
}
.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 24px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--line);
}
.fields div {
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
}
.fields dt {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.fields dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid var(--line);
}
.stats div {
  padding: 16px 12px;
  text-align: center;
}
.stats div + div { border-left: 1px solid var(--line); }
.stats dt {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent-strong);
}
.stats dd {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .85rem;
}
.feed {
  display: grid;
  gap: 14px;
}
.section-head {
  padding: 0 2px;
}
.section-head h2 {
  margin: 0;
  font-size: 1.2rem;
}
.section-head p {
  margin: 0;
  color: var(--muted);
}
.empty {
  margin: 0;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.status-card {
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.status-card:hover {
  border-color: #b8c5cf;
  box-shadow: 0 18px 42px rgba(31, 36, 41, .11);
}
.status-card:active {
  transform: translateY(1px);
}
.status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.author img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
.author strong,
.author small {
  display: block;
  min-width: 0;
}
.author strong {
  font-size: .98rem;
  line-height: 1.1;
}
.author small {
  color: var(--muted);
  font-size: .8rem;
  overflow-wrap: anywhere;
}
.time-link {
  flex: none;
  color: var(--muted);
  font-size: .85rem;
}
.summary {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: #eef7f5;
  border-radius: 0 6px 6px 0;
  font-weight: 700;
}
.content {
  margin-top: 12px;
  overflow-wrap: anywhere;
}
.content p { margin: 0 0 12px; }
.content p:last-child { margin-bottom: 0; }
.content .mention,
.content .hashtag { font-weight: 650; }
.status-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.status-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85rem;
}
.profile-compact > .summary,
.profile-compact > .content,
.profile-compact > .media-grid {
  margin-left: 24px;
  margin-right: 24px;
}
.profile-compact > .content {
  margin-top: 0;
}
.profile-compact > .status-footer {
  margin: 16px 24px 0;
  padding: 14px 0 18px;
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.media-tile,
.attachment {
  display: block;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-alt);
}
.media-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.attachment {
  padding: 14px;
  overflow-wrap: anywhere;
  color: var(--ink);
  text-decoration: none;
}
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 24, .82);
}
.lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 1180px);
  margin: 0;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(12, 15, 18, .92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}
.lightbox-panel img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  margin: 0 auto;
  object-fit: contain;
}
.lightbox-panel figcaption {
  color: rgba(255, 255, 255, .8);
  font-size: .9rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .18); }
.shell-message {
  width: min(100%, 620px);
  padding-top: 24px;
}
.message-panel {
  padding: 28px;
}
.profile-compact {
  display: grid;
}
@media (max-width: 640px) {
  .shell {
    padding: 14px 10px 42px;
  }
  .instance-bar,
  .crumbs,
  .section-head,
  .status-head {
    align-items: start;
  }
  .instance-bar,
  .crumbs {
    flex-direction: column;
  }
  .identity {
    gap: 12px;
    padding: 0 16px;
    transform: translateY(-26px);
    margin-bottom: -10px;
  }
  .avatar {
    width: 82px;
    height: 82px;
    border-width: 4px;
  }
  .name-block h1,
  .name-block h2,
  .instance-bar h1,
  .message-panel h1 {
    font-size: 1.7rem;
  }
  .note {
    padding: 0 16px 16px;
  }
  .fields {
    grid-template-columns: 1fr;
    margin: 0 16px 18px;
  }
  .stats dt {
    font-size: 1.05rem;
  }
  .stats dd {
    font-size: .78rem;
  }
  .status-card {
    padding: 16px 14px;
  }
  .profile-compact > .summary,
  .profile-compact > .content,
  .profile-compact > .media-grid {
    margin-left: 16px;
    margin-right: 16px;
  }
  .profile-compact > .status-footer {
    margin: 16px 16px 0;
  }
  .media-grid {
    grid-template-columns: 1fr;
  }
  .lightbox-panel {
    width: min(94vw, 1000px);
    padding: 10px;
  }
  .lightbox-close {
    top: 8px;
    right: 8px;
  }
}
`;
}

function lightboxScript(): string {
  return `(() => {
  const overlay = document.querySelector('[data-lightbox-overlay]');
  if (!overlay) return;
  const image = overlay.querySelector('[data-lightbox-image]');
  const caption = overlay.querySelector('[data-lightbox-caption]');
  const body = document.body;

  const open = (src, alt) => {
    if (!(image instanceof HTMLImageElement)) return;
    image.src = src;
    image.alt = alt || '';
    if (caption) caption.textContent = alt || '';
    overlay.hidden = false;
    body.style.overflow = 'hidden';
    const close = overlay.querySelector('[data-lightbox-close]');
    if (close instanceof HTMLElement) close.focus();
  };

  const close = () => {
    if (!(image instanceof HTMLImageElement)) return;
    overlay.hidden = true;
    image.removeAttribute('src');
    image.alt = '';
    if (caption) caption.textContent = '';
    body.style.overflow = '';
  };

  document.addEventListener('click', (event) => {
    const target = event.target;
    if (!(target instanceof Element)) return;
    const trigger = target.closest('[data-lightbox-trigger]');
    if (trigger instanceof HTMLElement) {
      event.preventDefault();
      open(trigger.dataset.lightboxSrc || '', trigger.dataset.lightboxAlt || '');
      return;
    }
    if (target.closest('[data-lightbox-close]') || target === overlay) {
      event.preventDefault();
      close();
      return;
    }
    if (target.closest('a, button, input, textarea, select')) return;
    const card = target.closest('[data-post-href]');
    if (card instanceof HTMLElement && card.dataset.postHref) {
      window.location.assign(card.dataset.postHref);
    }
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !overlay.hidden) close();
    if (event.key !== 'Enter' && event.key !== ' ') return;
    const target = event.target;
    if (!(target instanceof HTMLElement)) return;
    if (target.closest('a, button, input, textarea, select')) return;
    const card = target.closest('[data-post-href]');
    if (card instanceof HTMLElement && card.dataset.postHref) {
      event.preventDefault();
      window.location.assign(card.dataset.postHref);
    }
  });
})();`;
}