import { getProfile, getSembleData, type SembleData } from "../data.ts";
import { PageNav } from "./page-nav.tsx";

function publicUrl(value: string): URL | undefined {
  try {
    const url = new URL(value);
    return ["https:", "http:"].includes(url.protocol) ? url : undefined;
  } catch {
    return undefined;
  }
}

function excerpt(description: string): string {
  const text = description.replace(/\s+/g, " ").trim();
  if (text.length <= 300) return text;
  const end = text.lastIndexOf(" ", 300);
  return `${text.slice(0, end > 0 ? end : 300)}…`;
}

// Read-only projection of Cameron's existing public Semble bookmarks, not contacts.
export function LinksContent({ data }: { data: SembleData }) {
  const cards = data.cards.filter((card) => card.type === "URL" && publicUrl(card.url));
  return (
    <main>
      <header class="other-index-header">
        <h1 class="page-title">Links</h1>
        <p class="page-subtitle">
          Saved reading and interesting things from my public{" "}
          <a href="https://semble.so/profile/cameron.stream">Semble collection</a>.
        </p>
      </header>
      {!data.available ? (
        <p role="status">The saved links could not be loaded right now. You can still browse them on Semble.</p>
      ) : cards.length === 0 ? (
        <p>No saved links yet.</p>
      ) : (
        <ul class="knowledge-page-list" aria-label="Saved links">
          {cards.map((card) => (
            <li key={card.id}>
              <a href={card.url}>
                <strong>{card.cardContent.title || publicUrl(card.url)!.hostname}</strong>
                <span>{excerpt(card.cardContent.description || publicUrl(card.url)!.hostname)}</span>
              </a>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}

export async function Links() {
  const [profile, data] = await Promise.all([getProfile(), getSembleData(100)]);
  return (
    <div>
      <PageNav profile={profile} active="other" />
      <LinksContent data={data} />
    </div>
  );
}