"use client";

import { useEffect, type ReactNode } from "react";
import { usePathname, useRouter } from "next/navigation";

const SIDEBAR_REFRESH_MS = 15000;

/** Responsive Zwei-Spalten-Hülle: auf Mobil je nach Route Liste ODER Thread. */
export function ChatFrame({
  sidebar,
  children,
}: {
  sidebar: ReactNode;
  children: ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const onIndex = pathname === "/chat";

  // Kanalliste (ungelesen-Zähler, letzte Nachricht, neue Kanäle) aktuell halten.
  // Clientseitiger Zustand wie der Nachrichtenentwurf bleibt dabei erhalten.
  useEffect(() => {
    const tick = () => {
      if (document.visibilityState === "visible") router.refresh();
    };
    const id = setInterval(tick, SIDEBAR_REFRESH_MS);
    document.addEventListener("visibilitychange", tick);
    return () => {
      clearInterval(id);
      document.removeEventListener("visibilitychange", tick);
    };
  }, [router]);

  return (
    <div className="chat-shell">
      <aside className={`chat-col ${onIndex ? "" : "chat-hide-mobile"}`}>
        {sidebar}
      </aside>
      <section className={`chat-col ${onIndex ? "chat-hide-mobile" : ""}`}>
        {children}
      </section>
    </div>
  );
}