import { getProfile } from "../data.ts";
import {
  knowledgeHref,
  loadKnowledgeGraph,
  type KnowledgeEntry as KnowledgeEntryData,
} from "../knowledge.ts";
import { KnowledgeBody } from "../knowledge-charts/body.tsx";
import { KnowledgeContents } from "./knowledge-contents.tsx";
import { PageNav } from "./page-nav.tsx";
import { ProtocolLinks } from "./protocol-links.tsx";

export function knowledgeBrowserTitle(entry: Pick<KnowledgeEntryData, "slug" | "title">): string {
  return entry.slug === "now" ? "Now" : entry.title;
}

function EntryLink({ entry }: { entry: KnowledgeEntryData }) {
  return <a href={knowledgeHref(entry)}>{entry.title}</a>;
}

export function KnowledgeVideo({
  videoId,
  title,
}: {
  videoId: string;
  title: string;
}) {
  const watchUrl = `https://www.youtube.com/watch?v=${videoId}`;
  const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;

  return (
    <figure class="knowledge-video">
      <div class="knowledge-video-frame">
        <iframe
          src={embedUrl}
          title={title}
          loading="lazy"
          referrerPolicy="strict-origin-when-cross-origin"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen
        ></iframe>
      </div>
      <figcaption>
        <a href={watchUrl} target="_blank" rel="noopener">Watch on YouTube ↗</a>
      </figcaption>
    </figure>
  );
}

export async function getKnowledgeEntry(routeOrLegacySlug: string): Promise<KnowledgeEntryData | undefined> {
  const graph = await loadKnowledgeGraph();
  return graph.byRoute.get(routeOrLegacySlug) ?? graph.bySlug.get(routeOrLegacySlug);
}

export async function KnowledgeEntry({
  entry,
  atUri,
}: {
  entry: KnowledgeEntryData;
  atUri?: string;
}) {
  const [profile, graph] = await Promise.all([
    getProfile(),
    loadKnowledgeGraph(),
  ]);

  const related = entry.related
    .map((slug) => graph.bySlug.get(slug))
    .filter((item): item is KnowledgeEntryData => Boolean(item));
  const backlinks = entry.backlinks
    .map((slug) => graph.bySlug.get(slug))
    .filter((item): item is KnowledgeEntryData => Boolean(item));

  return (
    <div class="knowledge-shell">
      <PageNav profile={profile} active={entry.slug === "now" ? "other" : "knowledge"} />

      <main class="knowledge-entry">
        <a class="knowledge-back" href="/knowledge">← Knowledge</a>
        {entry.draft && <div class="knowledge-draft-banner">Draft preview. This entry is not publishable yet.</div>}

        <header>
          <h1 class="article-title knowledge-entry-title">{entry.title}</h1>
          <p class="knowledge-entry-summary">{entry.summary}</p>
        </header>

        {entry.youtubeVideoId && (
          <KnowledgeVideo videoId={entry.youtubeVideoId} title={entry.title} />
        )}

        <KnowledgeBody entry={entry} />

        {entry.sources.length > 0 && (
          <section class="knowledge-entry-section">
            <h2>Sources</h2>
            <ol class="knowledge-sources">
              {entry.sources.map((source) => (
                <li><a href={source.url} target="_blank" rel="noopener">{source.title}</a></li>
              ))}
            </ol>
          </section>
        )}

        {(related.length > 0 || backlinks.length > 0) && (
          <section class="knowledge-entry-section knowledge-connections">
            <h2>Connections</h2>
            {related.length > 0 && (
              <div><h3>Related</h3><ul>{related.map((item) => <li><EntryLink entry={item} /></li>)}</ul></div>
            )}
            {backlinks.length > 0 && (
              <div><h3>Linked here</h3><ul>{backlinks.map((item) => <li><EntryLink entry={item} /></li>)}</ul></div>
            )}
          </section>
        )}

        <p class="knowledge-correction">
          <a href="https://bsky.app/profile/did:plc:gfrmhdmjvxn2sjedzboeudef" target="_blank" rel="noopener">
            Suggest a correction ↗
          </a>
        </p>

        <footer class="page-footer">
          <ProtocolLinks
            atUri={atUri ?? "at://did:plc:gfrmhdmjvxn2sjedzboeudef"}
            leafletUrl="https://cameron.leaflet.pub"
            avatarUrl={profile?.avatar}
            ariaLabel="Cameron's publishing links"
          />
        </footer>
      </main>
      <KnowledgeContents />
      <script src="/public/knowledge.js"></script>
    </div>
  );
}