// Margin annotations panel — renders at.margin.annotation records for a URL.
// Gated behind ENABLE_MARGIN=true env var.

import { getAnnotations, type MarginAnnotation } from "../data.ts";

function escapeHtml(str: string): string {
  return str
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

export async function MarginPanel({ pageUrl }: { pageUrl: string }) {
  if (process.env.ENABLE_MARGIN !== "true") return <></>;

  const annotations = await getAnnotations(pageUrl);
  if (annotations.length === 0) return <></>;

  return (
    <section class="margin-annotations">
      <h3 style="font-size:0.875rem;font-weight:600;margin-bottom:0.75em;color:var(--site-text-muted)">
        Margin annotations
      </h3>
      {annotations.map((a) => (
        <div class="margin-annotation" key={a.id}>
          {a.target?.selector?.exact && (
            <blockquote class="margin-highlight">
              {escapeHtml(a.target.selector.exact)}
            </blockquote>
          )}
          {a.body?.value && (
            <p class="margin-body">{escapeHtml(a.body.value)}</p>
          )}
          <div class="margin-meta">
            {a.creator?.name && (
              <span class="margin-author">
                {a.creator.id ? (
                  <a
                    href={`https://margin.at/user/${a.creator.id}`}
                    target="_blank"
                    rel="noopener"
                  >
                    {escapeHtml(a.creator.name)}
                  </a>
                ) : (
                  escapeHtml(a.creator.name)
                )}
              </span>
            )}
            {a.created && (
              <span class="margin-date">{formatDate(a.created)}</span>
            )}
          </div>
        </div>
      ))}
      <p style="font-size:0.75rem;color:var(--site-text-muted);margin-top:0.75em">
        Powered by{" "}
        <a
          href={`https://margin.at/page?url=${encodeURIComponent(pageUrl)}`}
          target="_blank"
          rel="noopener"
          style="color:var(--site-accent);text-decoration:none"
        >
          Margin
        </a>
      </p>
    </section>
  );
}