import { useEffect, useState, useSyncExternalStore, type ReactNode } from "react";
import { Button } from "../components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "../components/ui/dialog";

const query = "(max-width: 767px)";
function subscribe(listener: () => void) {
  const media = window.matchMedia(query);
  media.addEventListener("change", listener);
  return () => media.removeEventListener("change", listener);
}
const isNarrow = () => window.matchMedia(query).matches;

/** Keep the archive content readable on phones, using the shared accessible dialog. */
export function ArchiveNavigation({ surface, children }: { surface: string; children: ReactNode }) {
  const narrow = useSyncExternalStore(subscribe, isNarrow, () => false);
  const [open, setOpen] = useState(false);
  useEffect(() => { setOpen(false); }, [surface, narrow]);
  if (!narrow || !["memory-management", "evidence-management"].includes(surface)) return children;
  return <Dialog open={open} onOpenChange={setOpen}>
    <div className="fixed inset-x-0 top-0 z-30 flex h-12 items-center justify-between border-b bg-background px-4">
      <span className="font-heading font-semibold">ThothII</span>
      <DialogTrigger render={<Button variant="outline" size="sm" />}>Navigation</DialogTrigger>
    </div>
    <DialogContent className="flex max-h-[calc(100dvh-2rem)] flex-col">
      <DialogTitle>Navigation</DialogTitle>
      <DialogDescription className="sr-only">Choose an administration page or a session.</DialogDescription>
      <div className="min-h-0 overflow-y-auto [&>aside]:w-full">{children}</div>
    </DialogContent>
  </Dialog>;
}