"use client";

import { createContext, memo, useContext, type AnchorHTMLAttributes, type ReactNode } from "react";
import { Markdown } from "yt-dlp-transcript-common/components/Markdown";
import type { CitationView, ReportPageView } from "yt-dlp-transcript-common/lib/report/views";

// The article's text, as blocks the notes anchor to (`data-block`: title,
// subtitle, summary, method, each section by id). MEMOISED and never
// re-rendered once mounted: the reader wraps notes' quotes in <mark>s by
// editing this DOM directly (components/articles/anchorDom.ts), which is safe
// only because React has no reason to touch it again. Everything that changes
// -- which citation is open, which note is selected -- goes through the
// context below, whose value never changes.
//
// A citation is a button (its label, which is part of the text) and its
// number (which is not: `data-anchor-skip`). Clicking it opens the evidence
// panel; nothing here links out of umtool.

export type ArticleActions = {
  openCite: (id: string) => void;
  noteSection: (section: string, title: string) => void;
};

export const ArticleActionsContext = createContext<ArticleActions | null>(null);

const CitationsContext = createContext<Readonly<Record<string, CitationView>>>({});

const CITE_SCHEME = "cite:";

function CiteLink({ href, children }: AnchorHTMLAttributes<HTMLAnchorElement>) {
  const actions = useContext(ArticleActionsContext);
  const citations = useContext(CitationsContext);
  const id = href?.startsWith(CITE_SCHEME) ? href.slice(CITE_SCHEME.length).trim() : null;
  if (id === null) {
    return (
      <a href={href} target="_blank" rel="noopener noreferrer" className="text-[var(--color-sel)] underline decoration-[var(--color-sel)]/40">
        {children}
      </a>
    );
  }
  const c = citations[id];
  return (
    <>
      <button
        type="button"
        data-cite={id}
        onClick={() => actions?.openCite(id)}
        title={c ? `${c.quote}${c.speaker ? ` — ${c.speaker}` : ""}` : `citation ${id}`}
        className="cursor-pointer rounded-sm text-left text-[var(--color-text)] underline decoration-[var(--color-sel)] decoration-dotted underline-offset-2 hover:bg-[var(--color-panel-2)] data-[has-note=true]:bg-[color-mix(in_srgb,var(--color-dirty)_22%,transparent)]"
      >
        {children}
      </button>
      <sup data-anchor-skip className="ml-0.5 font-mono text-[10px] text-[var(--color-sel)]">
        {c?.number ?? "?"}
      </sup>
    </>
  );
}

// markdown-to-jsx's elements carry common's class names, which umtool's
// stylesheet does not have; these descendant rules are umtool's.
const MD =
  "text-[14px] leading-relaxed text-[var(--color-text)] [&_p]:my-2.5 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-1 [&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-[var(--color-line)] [&_blockquote]:pl-3 [&_blockquote]:text-[var(--color-dim)] [&_strong]:font-semibold [&_em]:italic [&_h3]:mt-4 [&_h3]:font-semibold [&_h4]:mt-3 [&_h4]:font-semibold [&_code]:font-mono [&_code]:text-[12px] [&_hr]:my-4 [&_hr]:border-[var(--color-line)]";

// The article's citation map, for markdown rendered outside the body (the
// slides): its numbers, and its quotes on hover.
export function ArticleCitations({ citations, children }: { citations: Readonly<Record<string, CitationView>>; children: ReactNode }) {
  return <CitationsContext.Provider value={citations}>{children}</CitationsContext.Provider>;
}

export function Md({ text }: { text: string }) {
  return (
    <Markdown className={MD} linkComponent={CiteLink}>
      {text}
    </Markdown>
  );
}

function NoteButton({ section, title }: { section: string; title: string }) {
  const actions = useContext(ArticleActionsContext);
  return (
    <button
      type="button"
      data-anchor-skip
      aria-label={`note on ${title}`}
      onClick={() => actions?.noteSection(section, title)}
      className="ml-2 align-middle text-[11px] font-normal text-[var(--color-dim)] opacity-60 hover:text-[var(--color-sel)] hover:opacity-100"
    >
      + note
    </button>
  );
}

function ArticleBodyInner({ view, video }: { view: ReportPageView; video?: ReactNode }) {
  return (
    <CitationsContext.Provider value={view.citations}>
      <div data-article-body className="space-y-5">
        <header className="space-y-1">
          {view.series && <div className="micro">{view.series}</div>}
          <h1 data-block="title" className="text-[22px] font-semibold leading-tight text-[var(--color-text)]">
            {view.title}
          </h1>
          {view.subtitle && (
            <p data-block="subtitle" className="text-[15px] text-[var(--color-dim)]">
              {view.subtitle}
            </p>
          )}
        </header>
        {/* The report's own video, under its title as the published page has
            it. Outside every data-block, so it is never part of a quote. */}
        {video}
        {view.summary && (
          <section data-block="summary" className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-4 py-2">
            <div className="micro pt-1" data-anchor-skip>
              summary
              <NoteButton section="summary" title="summary" />
            </div>
            <Md text={view.summary} />
          </section>
        )}
        {view.sections.map((s) => (
          <section key={s.id} id={`s-${s.id}`} data-block={s.id} className="scroll-mt-4">
            <h2 className="mt-2 text-[17px] font-semibold text-[var(--color-text)]">
              {s.title}
              <NoteButton section={s.id} title={s.title} />
            </h2>
            {s.body && <Md text={s.body} />}
            {s.claims.map((cl) => (
              <div key={cl.id} data-claim={cl.id} className="my-3 rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2">
                {cl.title && <div className="text-[13px] font-semibold text-[var(--color-text)]">{cl.title}</div>}
                <div className="flex items-start gap-2">
                  <div className="min-w-0 flex-1">
                    <Md text={cl.text} />
                  </div>
                  {cl.verdict && (
                    <span data-anchor-skip className="mt-2 shrink-0 rounded border border-[var(--color-line)] px-1.5 py-0.5 font-mono text-[10px] uppercase text-[var(--color-dim)]">
                      {view.verdicts?.[cl.verdict]?.label ?? cl.verdict}
                    </span>
                  )}
                </div>
                {cl.findings && <Md text={cl.findings} />}
                {cl.citations.length > 0 && (
                  <div data-anchor-skip className="mt-1 flex flex-wrap gap-1">
                    {cl.citations.map((id) => (
                      <CiteChip key={id} id={id} />
                    ))}
                  </div>
                )}
              </div>
            ))}
          </section>
        ))}
        {view.method && (
          <section data-block="method" className="border-t border-[var(--color-line)] pt-3">
            <div className="micro" data-anchor-skip>
              method
              <NoteButton section="method" title="method" />
            </div>
            <Md text={view.method} />
          </section>
        )}
      </div>
    </CitationsContext.Provider>
  );
}

function CiteChip({ id }: { id: string }) {
  const actions = useContext(ArticleActionsContext);
  const c = useContext(CitationsContext)[id];
  return (
    <button
      type="button"
      data-cite={id}
      onClick={() => actions?.openCite(id)}
      title={c?.quote ?? id}
      className="rounded border border-[var(--color-line)] px-1.5 py-0.5 font-mono text-[10px] text-[var(--color-sel)] hover:border-[var(--color-sel)] data-[has-note=true]:border-[var(--color-dirty)]"
    >
      {c?.number ?? "?"} {c?.label ?? c?.speaker ?? id}
    </button>
  );
}

const ArticleBody = memo(ArticleBodyInner, (a, b) => a.view === b.view && a.video === b.video);
export default ArticleBody;