// Shared state for mobile rotation (layout <-> any component).
// - isTablet: true when the device's smaller screen side is >= 600px.
// - landscapeMode: user preference to display content rotated 90deg.
//   Only meaningful on tablets; phones stay portrait-only.
export const useIsTablet = () => useState<boolean>('isTablet', () => false)
export const useLandscapeMode = () => useState<boolean>('landscapeMode', () => false)

const STORAGE_KEY = 'logship_landscape_mode'

export const useMobileRotation = () => {
  const isTablet = useIsTablet()
  const landscapeMode = useLandscapeMode()

  const detectTablet = (): boolean => {
    if (!import.meta.client) return false
    // Use screen (device-level) dimensions, not viewport — independent of CSS rotation.
    const minDim = Math.min(window.screen.width, window.screen.height)
    return minDim >= 600
  }

  const init = () => {
    if (!import.meta.client) return
    isTablet.value = detectTablet()

    // Only restore saved landscape preference on tablets.
    if (isTablet.value) {
      try {
        landscapeMode.value = localStorage.getItem(STORAGE_KEY) === 'true'
      } catch {
        landscapeMode.value = false
      }
    } else {
      // Phones never use landscape mode.
      landscapeMode.value = false
    }
  }

  const toggle = () => {
    if (!isTablet.value) return
    landscapeMode.value = !landscapeMode.value
    try {
      localStorage.setItem(STORAGE_KEY, String(landscapeMode.value))
    } catch {
      // Storage unavailable — preference just won't persist.
    }
  }

  const setLandscape = (value: boolean) => {
    if (!isTablet.value) return
    landscapeMode.value = value
    try {
      localStorage.setItem(STORAGE_KEY, String(value))
    } catch {}
  }

  return { isTablet, landscapeMode, init, toggle, setLandscape }
}