// The rule this pins is a client rule, and it is the rule the docs and

// component-library sidebars used to break: what the reader collapsed wins,

// and the hook never records a choice on the reader's behalf. The server sends

// the same answer -- see `OpenAgentsWeb.SidebarStateTest` -- but only the

// browser decides what happens after a LiveView update repaints the seed.

import assert from "node:assert/strict"

import {execFileSync} from "node:child_process"

import {readdirSync, readFileSync} from "node:fs"

import {resolve} from "node:path"

import test from "node:test"

import {fileURLToPath} from "node:url"

const assetsDir = resolve(fileURLToPath(new URL("..", import.meta.url)))

const projectDir = resolve(assetsDir, "..")

const mixEnv = process.env.MIX_ENV ?? "test"

// The hook is colocated in `layouts.ex`, so the file to load is the one the

// compiler extracts. Compile first if this clone has not been built yet.

const hookPath = () => {

  const directory = resolve(

    projectDir,

    `_build/${mixEnv}/phoenix-colocated/openagents/OpenAgentsWeb.Layouts`,

  )

  const found = readdirSync(directory)

    .filter(entry => entry.endsWith(".js"))

    .map(entry => resolve(directory, entry))

    .find(path => readFileSync(path, "utf8").includes("sidebar_sections"))

  assert.ok(found, "no colocated hook in layouts.ex maintains sidebar_sections")

  return found

}

const loadHook = async () => {

  try {

    return (await import(hookPath())).default

  } catch (_missingBuild) {

    execFileSync("mix", ["compile"], {

      cwd: projectDir,

      encoding: "utf8",

      env: {...process.env, MIX_ENV: mixEnv},

      stdio: "pipe",

    })

    return (await import(hookPath())).default

  }

}

// Enough of a document for a hook that reads and writes one cookie.

const stubDocument = jar => {

  globalThis.document = {

    get cookie() {

      return Object.entries(jar)

        .map(([key, value]) => `${key}=${value}`)

        .join("; ")

    },

    set cookie(assignment) {

      const [pair] = assignment.split("; ")

      const separator = pair.indexOf("=")

      jar[pair.slice(0, separator)] = pair.slice(separator + 1)

    },

  }

}

const cookieValue = sections => encodeURIComponent(JSON.stringify(sections))

// A `<details>` with a summary and, optionally, the row marking the page the

// reader is on.

const stubSection = ({id, open, active}) => {

  const listeners = {}

  return {

    id,

    open,

    dataset: {},

    addEventListener: (name, handler) => (listeners[name] = handler),

    removeEventListener: name => delete listeners[name],

    querySelector: selector => {

      if (selector === "summary") return {addEventListener() {}, removeEventListener() {}}

      if (selector === "[aria-current]") return active ? {} : null

      return null

    },

    toggle(next) {

      this.open = next

      listeners.toggle?.()

    },

  }

}

const mount = async element => {

  const hook = await loadHook()

  const instance = Object.create(hook)

  instance.el = element

  instance.mounted()

  return instance

}

test("a collapsed section the reader is reading stays collapsed", async () => {

  const jar = {sidebar_sections: cookieValue({"sidebar-section-getting-started": false})}

  stubDocument(jar)

  // Painted open, as a LiveView update repainting the seed would leave it.

  const element = stubSection({id: "sidebar-section-getting-started", open: true, active: true})

  await mount(element)

  assert.equal(element.open, false)

  assert.deepEqual(JSON.parse(decodeURIComponent(jar.sidebar_sections)), {

    "sidebar-section-getting-started": false,

  })

})

test("the seed governs a section the reader has said nothing about", async () => {

  const jar = {}

  stubDocument(jar)

  const element = stubSection({id: "sidebar-section-issues", open: true, active: true})

  await mount(element)

  assert.equal(element.open, true)

  // Silence stays silence: an unwritten cookie is what lets the seed keep

  // deciding, including the seed that opens the section holding the page.

  assert.deepEqual(jar, {})

})

test("turning a caret records the reader's choice", async () => {

  const jar = {}

  stubDocument(jar)

  const element = stubSection({id: "sidebar-section-reference", open: true, active: false})

  await mount(element)

  element.toggle(false)

  assert.deepEqual(JSON.parse(decodeURIComponent(jar.sidebar_sections)), {

    "sidebar-section-reference": false,

  })

})

  patches rather than remounts, the element survives navigation and so does

  whatever the reader collapsed.

  `open` should be true for the section holding the current page: collapsing

  the section you are reading would hide your own location.

  `open` should be true for the section holding the current page, so a reader

  who has never touched this section lands with their own location visible.

  It is a seed: once the reader collapses a section, `state` carries that

  choice and it wins, even for the section they are reading.

  """

  attr :title, :string, required: true

    painting the seed and having a hook correct it a frame later.

    """

  attr :id, :string, default: nil, doc: "defaults to a slug of the title"

  attr :id, :string,

    default: nil,

    doc: """

    Defaults to a slug of the title, which is also the key the reader's choice

    is stored under. Section ids are one namespace across every surface, so an

    identically titled section shares its collapsed state; pass an explicit id

    for a section that must stand alone. See

    `OpenAgentsWeb.Plugs.SidebarSections`.

    """

  slot :inner_block, required: true

  def sidebar_section(assigns) do

        {render_slot(@inner_block)}

      </div>

    </details>

    <%!-- `open` above is a seed, not the truth. Re-applying it on every

    navigation collapses every section the reader opened but is not currently

    inside, and re-opens every section they closed that happens to be open by

    default. The hook makes the reader's own choices the state and keeps them

    in sessionStorage; the seed decides first paint, and a section containing

    the active row still opens regardless, so a page can never be hidden inside

    a section the reader had closed. With no JavaScript the seed governs and

    the sidebar still works. --%>

    <%!-- `open` above is a seed, not the truth. The server already resolves

    the reader's choice against it, so the seed decides the first paint only

    for a section the reader has never spoken about. The hook records each

    turn of a caret in the cookie and re-applies the reader's choice after a

    LiveView update, whose diff would otherwise repaint the seed. With no

    JavaScript the seed governs and the sidebar still works. --%>

    <script :type={Phoenix.LiveView.ColocatedHook} name=".SidebarSection">

      // A cookie rather than sessionStorage, because the server has to know.

      // Several sidebar destinations live in different live sessions, so

          if (this.summary) this.summary.removeEventListener("click", this.onClick)

        },

        restore() {

          // A section holding the active page opens regardless of what the

          // reader last did, so navigation can never land on a hidden row.

          // Asked of the DOM rather than of the server: the active row already

          // marks itself `aria-current`, and a server-side answer has to be

          // derived from the section's `open` attribute, which is true for a

          // section that is merely open by default -- so every navigation

          // re-forced such a section open and undid the reader's collapse.

          if (this.el.querySelector("[aria-current]")) {

            this.el.open = true

            this.onToggle()

            return

          }

          // Only the reader's own choice is applied, and it is never written

          // back from here. Forcing the section that holds the active page

          // open instead -- and recording that as a choice -- is what made

          // /docs and /components forget a collapse the application shell

          // kept: every row on those surfaces marks itself `aria-current`, so

          // every reload re-opened the section being read and overwrote the

          // cookie with `true`. A section holding the current page still

          // opens for a reader who has not collapsed it, through the

          // server-rendered seed.

          const stored = read()[this.el.id]

          if (stored !== undefined) this.el.open = stored

        },

  The value is a reader's own UI state, so it is treated as untrusted input and

  bounded on the way in: unparseable JSON, a non-object, oversized content, or

  keys that are not section ids are dropped rather than passed inward.

  ## Scoping

  There is one namespace, shared by every surface, keyed by the section id that

  `OpenAgentsWeb.Layouts.sidebar_section/1` derives from the section title. A

  section named the same thing on two surfaces is therefore one preference:

  collapse it on `/docs` and it is collapsed on `/components` too. That is the

  rule on purpose -- a reader who hides a group of links is talking about the

  group, not about the page they happened to be on -- and

  `test/openagents_web/sidebar_state_test.exs` pins it. A surface that needs a

  section of its own passes an explicit `id` rather than relying on its title

  being unique.

  """

  @behaviour Plug

    end

  end

  # The docs and component-library surfaces are where this used to fail. Their

  # rows mark themselves `aria-current`, and the hook forced any section

  # holding such a row open and wrote that back to the cookie, so the reader's

  # collapse survived on the application shell -- whose sections hold no

  # current row -- and was erased on `/docs` and `/components` on every reload.

  describe "collapsed sections survive on the docs and component surfaces" do

    test "a cold GET of a docs page paints the reader's collapsed sections collapsed", %{

      conn: conn

    } do

      html =

        conn

        |> put_req_cookie("sidebar_sections", ~s({"sidebar-section-transparency":false}))

        |> get(~p"/docs/welcome")

        |> html_response(200)

      refute html =~ ~r/id="sidebar-section-transparency"[^>]*\sopen/

    end

    test "the section holding the page being read stays collapsed if the reader closed it", %{

      conn: conn

    } do

      html =

        conn

        |> put_req_cookie("sidebar_sections", ~s({"sidebar-section-getting-started":false}))

        |> get(~p"/docs/welcome")

        |> html_response(200)

      refute html =~ ~r/id="sidebar-section-getting-started"[^>]*\sopen/

    end

    test "with no cookie the section holding the page being read is open", %{conn: conn} do

      html = conn |> get(~p"/docs/welcome") |> html_response(200)

      assert html =~ ~r/id="sidebar-section-getting-started"[^>]*\sopen/

    end

    test "a navigation within docs keeps the collapse", %{conn: conn} do

      conn = put_req_cookie(conn, "sidebar_sections", ~s({"sidebar-section-issues":false}))

      {:ok, view, _html} = live(conn, ~p"/docs/welcome")

      html = render_patch(view, ~p"/docs/issues")

      refute html =~ ~r/id="sidebar-section-issues"[^>]*\sopen/

    end

    test "the component library honours a collapse the same way", %{conn: conn} do

      html =

        conn

        |> put_req_cookie("sidebar_sections", ~s({"sidebar-section-reference":false}))

        |> get(~p"/components/icons")

        |> html_response(200)

      refute html =~ ~r/id="sidebar-section-reference"[^>]*\sopen/

    end

    # The behavioural half of the above is not renderable from here: the force

    # was in the colocated hook, which only runs in a browser. Pinned at the

    # source, the same way the viewport defaults are.

    test "the hook applies the reader's choice and never writes one for them" do

      source = File.read!("lib/openagents_web/components/layouts.ex")

      refute source =~ ~s([aria-current]),

             "the hook forces the section holding the active row open again"

    end

  end

  # Scoping is a decision, not an accident of naming: one namespace for every

  # surface, keyed by the section title. A section called the same thing in two

  # sidebars is one preference.

  describe "section ids are one namespace across surfaces" do

    test "the id comes from the title alone, not from the surface", %{conn: conn} do

      html = conn |> get(~p"/docs") |> html_response(200)

      assert html =~ ~s(id="sidebar-section-getting-started")

      assert standalone_section_id("Getting started") == "sidebar-section-getting-started"

    end

    test "an explicit id is how a section stands alone" do

      assert standalone_section_id("Getting started", id: "sidebar-section-gallery-demo") ==

               "sidebar-section-gallery-demo"

    end

  end

  # The Issues and Projects rows used to be repository-scoped: they took the

  # `:owner`/`:repo` of whatever page you were on, and fell back to the first

  # repository in your workspace alphabetically. The same row therefore led

    end

  end

  # The section rendered on its own, so the id it derives can be read without a

  # surface around it.

  defp standalone_section_id(title, options \\ []) do

    html =

      render_component(&OpenAgentsWeb.Layouts.sidebar_section/1,

        title: title,

        id: options[:id],

        inner_block: [

          %{

            __slot__: :inner_block,

            inner_block: fn _changed, _arguments -> "row" end

          }

        ]

      )

    [_match, id] = Regex.run(~r/<details[^>]*\sid="([^"]+)"/, html)

    id

  end

  defp parse(value) do

    :get

    |> Plug.Test.conn("/")