import { useState, useEffect } from 'react';

export type DeviceType = 'desktop' | 'tablet' | 'phone' | 'iwb';

function detectDeviceType(): DeviceType {
  const width = window.innerWidth;
  const touchPoints = navigator.maxTouchPoints ?? 0;
  const hasTouch = touchPoints > 0 || 'ontouchstart' in window;

  if (width >= 1280 && !hasTouch) return 'desktop';
  if (width >= 768 && hasTouch) return 'tablet';
  if (width < 768) return 'phone';
  return 'desktop';
}

const STORAGE_KEY = 'cc_device_type';

export function useDeviceContext() {
  const [deviceType, setDeviceTypeState] = useState<DeviceType>(() => {
    const stored = localStorage.getItem(STORAGE_KEY) as DeviceType | null;
    if (stored && ['desktop', 'tablet', 'phone', 'iwb'].includes(stored)) return stored;
    return detectDeviceType();
  });

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, deviceType);
  }, [deviceType]);

  const setDeviceType = (type: DeviceType) => {
    setDeviceTypeState(type);
  };

  const isTouch = deviceType === 'tablet' || deviceType === 'phone';
  const isMobileLayout = deviceType === 'phone';

  return { deviceType, setDeviceType, isTouch, isMobileLayout };
}