import { Link, useNavigate, useParams } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { Live } from "../Live";
import { Capture, Windows, isCaptured } from "../Native";
import { all, chapters, search } from "../data";
import { Find, typing } from "../Find";
import { NotFound } from "./NotFound";

export function Story() {
  const { page, story } = useParams({ strict: false });
  const navigate = useNavigate();
  const [query, setQuery] = useState("");
  const chapter = chapters.find((c) => c.slug === page);
  const found = chapter?.stories.find((s) => s.slug === story);
  const at = all.findIndex((e) => e.story === found);
  const [prev, next] = at < 0 ? [] : [all[at - 1], all[at + 1]];

  useEffect(() => {
    if (chapter && found) document.title = `${found.title} · ${chapter.title} · Ely`;
  }, [chapter, found]);

  useEffect(() => {
    document.querySelector('.side [aria-current="page"]')?.scrollIntoView({ block: "nearest" });
  }, [page, story]);

  useEffect(() => {
    const step = (e: KeyboardEvent) => {
      if (e.metaKey || e.ctrlKey || e.altKey || typing(e)) return;
      const to = e.key === "ArrowLeft" ? prev : e.key === "ArrowRight" ? next : undefined;
      if (to) navigate({ to: "/components/$page/$story/", params: { page: to.chapter.slug, story: to.story.slug } });
    };
    addEventListener("keydown", step);
    return () => removeEventListener("keydown", step);
  }, [prev, next, navigate]);

  if (!chapter || !found) return <NotFound what={`No story at ${page}/${story}.`} />;
  const shown = search(query);
  const first = () => shown[0] && navigate({ to: "/components/$page/$story/", params: { page: shown[0].slug, story: shown[0].stories[0].slug } });
  return (
    <div className="reader">
      <aside className="side" data-lenis-prevent>
        <Find className="find small" query={query} onQuery={setQuery} onEnter={first} />
        <nav aria-label="Chapters">
          {shown.map((c) => (
            <div key={c.slug}>
              <Link className="side-chapter" to="/components/$page/$story/" params={{ page: c.slug, story: c.stories[0].slug }} data-on={c.slug === chapter.slug || undefined}>
                {c.title}
              </Link>
              {(query || c.slug === chapter.slug) && (
                <ol>
                  {c.stories.map((s) => (
                    <li key={s.slug}>
                      <Link to="/components/$page/$story/" params={{ page: c.slug, story: s.slug }} activeProps={{ "aria-current": "page" }}>
                        {s.title}
                      </Link>
                    </li>
                  ))}
                </ol>
              )}
            </div>
          ))}
        </nav>
      </aside>
      <article className="story">
        <Link to="/components/" className="crumb">
          {chapter.title}
        </Link>
        <h1>{found.title}</h1>
        {isCaptured(chapter.slug, found.slug) ? (
          <Capture page={chapter.slug} story={found.slug} title={found.title} />
        ) : (
          <>
            <Live key={`${chapter.slug}/${found.slug}`} page={chapter.slug} story={found.slug} title={found.title} />
            <Windows page={chapter.slug} story={found.slug} title={found.title} />
          </>
        )}
        <nav className="pager" aria-label="More stories">
          {prev && (
            <Link to="/components/$page/$story/" params={{ page: prev.chapter.slug, story: prev.story.slug }}>
              ← {prev.story.title}
            </Link>
          )}
          {next && (
            <Link className="next" to="/components/$page/$story/" params={{ page: next.chapter.slug, story: next.story.slug }}>
              {next.story.title} →
            </Link>
          )}
        </nav>
      </article>
    </div>
  );
}