import { useState, useEffect } from 'react';

export function useFullscreen() {
  const [on, setOn] = useState<boolean>(() => {
    try { return localStorage.getItem('wnwFullscreen') === '1'; } catch { return false; }
  });

  useEffect(() => {
    const id = 'wnw-fullscreen-style';
    let style = document.getElementById(id);
    if (!style) {
      style = document.createElement('style');
      style.id = id;
      style.textContent = `
        /* Hide WP admin chrome when fullscreen */
        .wnw-fullscreen #wpadminbar,
        .wnw-fullscreen #adminmenumain,
        .wnw-fullscreen #screen-meta,
        .wnw-fullscreen #screen-meta-links,
        .wnw-fullscreen #wpfooter { display:none !important; }
        .wnw-fullscreen #wpcontent { margin-left:0 !important; }
        .wnw-fullscreen #wpbody-content { padding-bottom:0 !important; }
        .wnw-fullscreen html, .wnw-fullscreen body { height: 100%; overflow: hidden; }
        .wnw-fullscreen .woonoow-fullscreen-root {
          position: fixed;
          inset: 0;
          z-index: 999;
          background: var(--background, #fff);
          height: 100dvh; /* ensure full viewport height on mobile/desktop */
          overflow: hidden; /* prevent double scrollbars; inner <main> handles scrolling */
          overscroll-behavior: contain;
          display: flex;
          flex-direction: column;
          contain: layout paint size; /* prevent WP wrappers from affecting layout */
        }
      `;
      document.head.appendChild(style);
    }
    document.body.classList.toggle('wnw-fullscreen', on);
    try { localStorage.setItem('wnwFullscreen', on ? '1' : '0'); } catch { /* ignore localStorage errors */ }
    return () => { /* do not remove style to avoid flicker between reloads */ };
  }, [on]);

  return { on, setOn } as const;
}
