from __future__ import annotations

import htpy as h
from htpy import Node, Renderable

from repub.components import admin_sidebar

ON_LOAD_JS = (
    "@post(window.location.pathname + "
    "(window.location.search + '&u=').replace(/^&/,'?'), "
    "{retryMaxCount: Infinity})"
)

TAB_ID_JS = "self.crypto.randomUUID().substring(0,8)"


def shim_page(
    *, datastar_src: str, current_path: str, head: Node | None = None
) -> Renderable:
    return h.html(lang="en")[
        h.head[
            h.meta(charset="UTF-8"),
            head,
            h.script(id="js", defer=True, type="module", src=datastar_src),
            h.meta(name="viewport", content="width=device-width, initial-scale=1.0"),
        ],
        h.body[
            h.div({"data-signals:tabid": TAB_ID_JS}),
            h.div(
                {
                    "data-init": ON_LOAD_JS,
                    "data-on:online__window": ON_LOAD_JS,
                }
            ),
            h.noscript["Your browser does not support JavaScript!"],
            h.main(
                id="morph",
                class_="min-h-screen lg:grid lg:grid-cols-[18rem_minmax(0,1fr)]",
            )[
                admin_sidebar(current_path=current_path),
                h.div(class_="px-4 py-4 sm:px-5 lg:px-6 lg:py-5")[
                    h.div(class_="mx-auto max-w-7xl space-y-5")[
                        h.section[
                            h.div(
                                class_="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
                            )[
                                h.div(class_="max-w-3xl")[
                                    h.p(
                                        class_="text-xs font-semibold uppercase tracking-[0.22em] text-amber-600"
                                    )["Connecting"],
                                    h.h1(
                                        class_="mt-1 text-3xl font-semibold tracking-tight text-slate-950"
                                    )["Loading page"],
                                    h.p(class_="mt-1 text-sm text-slate-600")[
                                        "Rendering the latest server view for this route."
                                    ],
                                ],
                            ]
                        ],
                        h.section(
                            class_="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200"
                        )[
                            h.div(class_="animate-pulse space-y-4 p-6")[
                                h.div(class_="h-5 w-40 rounded-full bg-stone-100"),
                                h.div(class_="h-12 rounded-2xl bg-stone-100"),
                                h.div(class_="h-12 rounded-2xl bg-stone-100"),
                                h.div(class_="h-12 rounded-2xl bg-stone-100"),
                            ]
                        ],
                    ]
                ],
            ],
        ],
    ]