/* =========================================================================
 *  CTWCAD — Mobile-only React additions
 *  ────────────────────────────────────
 *  • useIsMobile() — reactive hook
 *  • <MobileTabBar/> — bottom tab bar
 *  • <MobileRailToggle/> — opens folder rail as slide-over
 *  • <MobileFullscreenButton/> — pill button for previewer
 *  • patches FileDrawer + CADViewer to add fullscreen affordance on mobile
 * =======================================================================*/

function useIsMobile() {
  const [m, setM] = React.useState(!!window.CTWCAD_IS_MOBILE);
  React.useEffect(() => {
    const on = (e) => setM(!!e.detail.mobile);
    window.addEventListener("ctwcad:mobile-changed", on);
    return () => window.removeEventListener("ctwcad:mobile-changed", on);
  }, []);
  return m;
}

function MobileTabBar({ route, onNavigate }) {
  const isMobile = useIsMobile();
  if (!isMobile) return null;
  const tabs = [
    { id: "dashboard", label: "Home",   icon: "home" },
    { id: "files",     label: "Files",  icon: "folder" },
    { id: "trash",     label: "Trash",  icon: "trash-2" },
    { id: "settings",  label: "Me",     icon: "user" },
  ];
  return (
    <nav className="ct-mobile-tabbar" role="tablist">
      {tabs.map(t => (
        <button
          key={t.id}
          className={"ct-mobile-tab " + (route === t.id ? "is-active" : "")}
          onClick={() => onNavigate(t.id)}
          role="tab"
          aria-selected={route === t.id}
        >
          <Icon name={t.icon} size={20} />
          <span>{t.label}</span>
        </button>
      ))}
    </nav>
  );
}

/* Mobile-only "menu" toggle for the file browser folder rail */
function MobileRailToggle() {
  const isMobile = useIsMobile();
  if (!isMobile) return null;
  const toggle = () => {
    const el = document.documentElement;
    const open = el.getAttribute("data-rail-open") === "1";
    el.setAttribute("data-rail-open", open ? "0" : "1");
  };
  return (
    <button className="ct-mobile-rail-btn" onClick={toggle} title="Folders" aria-label="Folders">
      <Icon name="menu" size={16}/>
    </button>
  );
}

/* Auto-close rail when navigating */
window.addEventListener("ctwcad:folder-changed", () => {
  document.documentElement.setAttribute("data-rail-open", "0");
});

/* ─────────────────────────────────────────────────────────────
 *  Wrap CADViewer / PDFPreview to inject a fullscreen pill on mobile.
 * ───────────────────────────────────────────────────────────── */
(function patchPreview() {
  const OrigFilePreview = window.FilePreview;
  if (!OrigFilePreview) return;

  function MobileFullscreenWrap({ file, height, allowFullscreen }) {
    const [fs, setFs] = React.useState(false);
    const isMobile = useIsMobile();

    // ESC closes
    React.useEffect(() => {
      if (!fs) return;
      const onKey = (e) => { if (e.key === "Escape") setFs(false); };
      window.addEventListener("keydown", onKey);
      // Lock body scroll while fullscreen
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => {
        window.removeEventListener("keydown", onKey);
        document.body.style.overflow = prev;
      };
    }, [fs]);

    if (fs) {
      // Render fullscreen via portal-like fixed wrapper
      return (
        <>
          <div style={{ position: "relative", height }}>
            {/* placeholder preserves layout while preview is detached */}
            <div className="ct-skeleton-block" style={{ height: "100%" }}/>
          </div>
          <div className="ct-preview is-fullscreen" style={{ background: "var(--ct-bg)" }}>
            <OrigFilePreview file={file} height={window.innerHeight} allowFullscreen={false}/>
            <button
              className="ct-preview-close"
              onClick={() => setFs(false)}
              aria-label="Close fullscreen"
              style={{ width: 44, height: 44 }}
            >
              <Icon name="x" size={18}/>
            </button>
            <div className="ct-preview-fs-hint">
              <Icon name="move" size={12}/>
              drag to orbit · tap × to close
            </div>
          </div>
        </>
      );
    }

    return (
      <div style={{ position: "relative" }}>
        <OrigFilePreview file={file} height={height} allowFullscreen={allowFullscreen}/>
        {isMobile && (
          <button
            className="ct-preview-fs-pill"
            onClick={() => setFs(true)}
            aria-label="Open fullscreen preview"
          >
            <Icon name="maximize-2" size={12}/>
            Fullscreen
          </button>
        )}
      </div>
    );
  }

  // Replace globally so FileDrawer (and anyone else who reads window.FilePreview) gets the wrapper
  window.FilePreview = MobileFullscreenWrap;
})();

Object.assign(window, { useIsMobile, MobileTabBar, MobileRailToggle });