import { getProfile } from "../data.ts";
import {
  formatKnowledgeDate,
  knowledgeDocumentClassLabel,
  knowledgeHref,
  loadKnowledgeGraph,
  type KnowledgeEntry,
  type KnowledgeGraph,
} from "../knowledge.ts";
import { KnowledgeBody } from "../knowledge-charts/body.tsx";
import { KnowledgeContents } from "./knowledge-contents.tsx";
import { PageNav } from "./page-nav.tsx";

const KNOWLEDGE_PREVIEW_LENGTH = 820;

export function knowledgePreviewExcerpt(body: string, limit = KNOWLEDGE_PREVIEW_LENGTH): string {
  const plain = body
    .replace(/```[\s\S]*?```/g, " ")
    .replace(/~~~[\s\S]*?~~~/g, " ")
    .replace(/\{\{chart:[^}]+\}\}/g, " ")
    .replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1")
    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
    .replace(/<[^>]*>/g, " ")
    .replace(/^\s{0,3}#{1,6}\s+/gm, "")
    .replace(/^\s*(?:[-*+] |\d+\. )/gm, "")
    .replace(/[*_~`>|]/g, "")
    .replace(/\s+/g, " ")
    .replace(/\s+([.,;:!?])/g, "$1")
    .trim();

  if (plain.length <= limit) return plain;
  const candidate = plain.slice(0, limit + 1);
  const wordBoundary = candidate.lastIndexOf(" ");
  return `${candidate.slice(0, wordBoundary > limit * 0.75 ? wordBoundary : limit).trim()}…`;
}

function PageList({ entries, searchable = false }: { entries: KnowledgeEntry[]; searchable?: boolean }) {
  return (
    <ul class="knowledge-page-list" id={searchable ? "knowledge-list" : undefined}>
      {entries.map((entry) => (
        <li
          data-knowledge-entry={searchable ? "" : undefined}
          data-search={searchable
            ? `${entry.title} ${entry.summary} ${entry.kind} ${entry.topics.join(" ")}`.toLowerCase()
            : undefined}
        >
          <a href={knowledgeHref(entry)}>
            <strong>
              {entry.title}
              {knowledgeDocumentClassLabel(entry.kind) && (
                <small class="knowledge-page-class">{knowledgeDocumentClassLabel(entry.kind)}</small>
              )}
            </strong>
            <span>{entry.summary}</span>
          </a>
          <time datetime={entry.updated.toISOString()}>{formatKnowledgeDate(entry.updated)}</time>
        </li>
      ))}
    </ul>
  );
}

export function knowledgeLandingChartStylesheets(graph: KnowledgeGraph): string[] {
  const overview = graph.bySlug.get("overview");
  return overview && overview.chartReferences.length > 0
    ? ["/public/charts.css"]
    : [];
}

export async function KnowledgeIndex(
  options: {
    graph?: KnowledgeGraph;
    profile?: Awaited<ReturnType<typeof getProfile>>;
  } = {},
) {
  const profilePromise = Object.hasOwn(options, "profile")
    ? Promise.resolve(options.profile ?? null)
    : getProfile();
  const [profile, graph] = await Promise.all([
    profilePromise,
    options.graph ? Promise.resolve(options.graph) : loadKnowledgeGraph(),
  ]);
  const overview = graph.bySlug.get("overview");
  const pages = graph.entries
    .filter((entry) => entry.slug !== "overview" && entry.slug !== "now")
    .sort((a, b) => a.title.localeCompare(b.title));
  const recent = [...pages]
    .sort((a, b) => b.updated.getTime() - a.updated.getTime())
    .slice(0, 5);
  const previewEntries = pages;
  return (
    <div class="knowledge-shell">
      <PageNav profile={profile} active="knowledge" />

      <main class="knowledge-overview">
        <header>
          <h1 class="article-title">Knowledge</h1>
          {overview && (
            <p class="knowledge-overview-intro">
              An AI-maintained public wiki exploring Cameron’s interests in technology,
              science, and design. <a href="/knowledge/co">Co</a>, Cameron’s AI agent,
              writes and updates these guides using public sources. Entries can contain
              errors; follow their sources and use the correction links to flag problems.
            </p>
          )}
          <nav class="knowledge-jump-links" aria-label="Browse Knowledge">
            <a href="#knowledge-map">Topics</a>
            <a href="#start-here" data-knowledge-heading-link="" hidden>Start here</a>
            {pages.length > 5 && <a href="#knowledge-recent-title">Recent</a>}
            <a href="#knowledge-all-title">Search &amp; all pages</a>
          </nav>
        </header>

        {graph.errors.length > 0 && (
          <section class="knowledge-error" aria-live="polite">
            <strong>Some knowledge could not be loaded.</strong>
            <ul>{graph.errors.map((error) => <li>{error}</li>)}</ul>
          </section>
        )}

        {overview ? (
          <div id="knowledge-map">
            <KnowledgeBody entry={overview} className="knowledge-overview-body" />
          </div>
        ) : (
          <p class="knowledge-empty">No public knowledge has been published yet.</p>
        )}

        <section class="knowledge-corpus" aria-labelledby="knowledge-corpus-title">
          <h2 id="knowledge-corpus-title">Explore the collection</h2>
          {pages.length > 5 && (
            <section class="knowledge-index-section" aria-labelledby="knowledge-recent-title">
              <header>
                <h3 id="knowledge-recent-title">Recently updated</h3>
              </header>
              <PageList entries={recent} />
            </section>
          )}

          <section class="knowledge-index-section" aria-labelledby="knowledge-all-title">
            <header>
              <h3 id="knowledge-all-title" tabindex={-1}>All pages</h3>
              <span id="knowledge-count" aria-live="polite">{pages.length} pages</span>
            </header>
            <label class="knowledge-search">
              <span>Search the knowledge base</span>
              <input
                type="search"
                id="knowledge-search"
                placeholder="Search titles, summaries, and topics"
                autocomplete="off"
              />
            </label>
            <p id="knowledge-no-results" class="knowledge-no-results" hidden>
              No pages match. Try a broader topic or clear the search.
            </p>
            <PageList entries={pages} searchable />
          </section>
        </section>
      </main>

      <KnowledgeContents />

      <aside
        class="knowledge-preview"
        id="knowledge-preview"
        aria-label="Knowledge page preview"
        aria-live="polite"
        aria-hidden="true"
      >
        <h2 id="knowledge-preview-title"></h2>
        <p class="knowledge-preview-meta" id="knowledge-preview-meta"></p>
        <p class="knowledge-preview-summary" id="knowledge-preview-summary"></p>
        <p class="knowledge-preview-excerpt" id="knowledge-preview-excerpt"></p>
      </aside>

      <div id="knowledge-preview-sources" hidden>
        {previewEntries.map((entry) => (
          <span
            data-knowledge-preview-source=""
            data-preview-href={knowledgeHref(entry)}
            data-preview-title={entry.title}
            data-preview-meta={`${knowledgeDocumentClassLabel(entry.kind) ?? "Knowledge page"} · ${formatKnowledgeDate(entry.updated)}`}
            data-preview-summary={entry.summary}
            data-preview-excerpt={knowledgePreviewExcerpt(entry.body)}
          ></span>
        ))}
      </div>
      <script src="/public/knowledge.js"></script>
    </div>
  );
}