---
import { getFilteredWebmentions, type Mention } from "@/lib/webmentions";

interface Props {
  url: string;
}

const { url } = Astro.props;

// Build-time fetch for instant initial render
let mentions: Mention[] = [];
try {
  mentions = await getFilteredWebmentions(url);
} catch {
  // Unavailable at build time — client-side will handle it
}

const likes = mentions.filter((m) => m["wm-property"] === "like-of");
const reposts = mentions.filter((m) => m["wm-property"] === "repost-of");
const replies = mentions.filter(
  (m) =>
    m["wm-property"] === "in-reply-to" || m["wm-property"] === "mention-of",
);
---

{mentions.length > 0 && (
  <section class="webmentions">
    <h2 class="webmentions__heading">Webmentions</h2>

    {(likes.length > 0 || reposts.length > 0) && (
      <div class="webmentions__reactions">
        {likes.length > 0 && (
          <div class="webmentions__group">
            <span class="webmentions__label">{likes.length} {likes.length === 1 ? "Like" : "Likes"}</span>
            <div class="webmentions__avatars">
              {likes.map((m) => (
                <a href={m.author?.url ?? m.url} target="_blank" rel="noopener noreferrer"
                  title={m.author?.name ?? "Anonymous"} class="webmentions__avatar-link">
                  {m.author?.photo ? (
                    <img src={m.author.photo} alt={m.author.name ?? ""} width="32" height="32"
                      class="webmentions__avatar" loading="lazy" />
                  ) : (
                    <span class="webmentions__avatar webmentions__avatar--fallback" aria-hidden="true">
                      {(m.author?.name ?? "?")[0]?.toUpperCase()}
                    </span>
                  )}
                </a>
              ))}
            </div>
          </div>
        )}
        {reposts.length > 0 && (
          <div class="webmentions__group">
            <span class="webmentions__label">{reposts.length} {reposts.length === 1 ? "Repost" : "Reposts"}</span>
            <div class="webmentions__avatars">
              {reposts.map((m) => (
                <a href={m.author?.url ?? m.url} target="_blank" rel="noopener noreferrer"
                  title={m.author?.name ?? "Anonymous"} class="webmentions__avatar-link">
                  {m.author?.photo ? (
                    <img src={m.author.photo} alt={m.author.name ?? ""} width="32" height="32"
                      class="webmentions__avatar" loading="lazy" />
                  ) : (
                    <span class="webmentions__avatar webmentions__avatar--fallback" aria-hidden="true">
                      {(m.author?.name ?? "?")[0]?.toUpperCase()}
                    </span>
                  )}
                </a>
              ))}
            </div>
          </div>
        )}
      </div>
    )}

    {replies.length > 0 && (
      <div class="webmentions__replies">
        <span class="webmentions__label">{replies.length} {replies.length === 1 ? "Reply" : "Replies"}</span>
        {replies.map((m) => (
          <article class="webmentions__reply">
            <header class="webmentions__reply-header">
              {m.author?.photo && (
                <img src={m.author.photo} alt={m.author.name ?? ""} width="36" height="36"
                  class="webmentions__avatar" loading="lazy" />
              )}
              <div class="webmentions__reply-meta">
                <a href={m.author?.url ?? m.url} target="_blank" rel="noopener noreferrer"
                  class="webmentions__reply-author">{m.author?.name ?? "Anonymous"}</a>
                {m.published && (
                  <time class="webmentions__reply-date" datetime={m.published}>
                    {new Date(m.published).toLocaleDateString("en-US", {
                      year: "numeric", month: "short", day: "numeric",
                    })}
                  </time>
                )}
              </div>
            </header>
            {m.content?.text && <p class="webmentions__reply-content">{m.content.text}</p>}
            <a href={m.url} target="_blank" rel="noopener noreferrer"
              class="webmentions__reply-source">View original</a>
          </article>
        ))}
      </div>
    )}
  </section>
)}

{mentions.length === 0 && (
  <section class="webmentions" data-empty></section>
)}

<style is:global>
  .webmentions {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0de;
  }

  .webmentions:empty,
  .webmentions[data-empty] {
    display: none;
  }

  .webmentions__heading {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1.25rem;
  }

  .webmentions__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .webmentions__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .webmentions__label {
    font-size: 0.75rem;
    color: #888;
  }

  .webmentions__avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .webmentions__avatar-link {
    display: block;
    line-height: 0;
  }

  .webmentions__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .webmentions__avatar--fallback {
    background: #e0e0de;
    color: #555;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .webmentions__replies {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .webmentions__reply {
    padding: 0.875rem 0;
    border-bottom: 1px solid #e0e0de;
  }

  .webmentions__reply:first-of-type {
    border-top: 1px solid #e0e0de;
    margin-top: 0.5rem;
  }

  .webmentions__reply-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .webmentions__reply-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .webmentions__reply-author {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111;
    text-decoration: none;
  }

  .webmentions__reply-author:hover {
    color: var(--accent);
  }

  .webmentions__reply-date {
    font-size: 0.75rem;
    color: #999;
  }

  .webmentions__reply-content {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
    margin: 0 0 0.5rem;
  }

  .webmentions__reply-source {
    font-size: 0.75rem;
    color: #999;
    text-decoration: none;
  }

  .webmentions__reply-source:hover {
    color: var(--accent);
  }
</style>
