apex/client/src/hooks/useConfiguratorUI.js

import { useState, useEffect, useCallback } from 'react';

const SESSION_STEP_KEY = 'apex_wardrobe_step';
const PLANS_OPEN_KEY = 'apex.plans.open';

function readPlansOpenFlag() {
  try {
    if (localStorage.getItem(PLANS_OPEN_KEY) === '1') return true;
    if (sessionStorage.getItem(PLANS_OPEN_KEY) === '1') {
      localStorage.setItem(PLANS_OPEN_KEY, '1');
      sessionStorage.removeItem(PLANS_OPEN_KEY);
      return true;
    }
  } catch {
    // ignore
  }
  return false;
}

export default function useConfiguratorUI() {
  const [activeStep, setActiveStep] = useState(() => {
    try { return Number(sessionStorage.getItem(SESSION_STEP_KEY)) || 1; } catch { return 1; }
  });
  const [expandedColumn, setExpandedColumn] = useState(null);

  useEffect(() => {
    try { sessionStorage.setItem(SESSION_STEP_KEY, String(activeStep)); } catch {}
  }, [activeStep]);

  // Modal visibility
  const [showMaterialPicker, setShowMaterialPicker] = useState(false);
  const [showMaterialModal, setShowMaterialModal] = useState(false);
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [showRoomUpload, setShowRoomUpload] = useState(false);
  const [showPlansView, setShowPlansView] = useState(readPlansOpenFlag);

  useEffect(() => {
    try {
      if (showPlansView) {
        localStorage.setItem(PLANS_OPEN_KEY, '1');
        sessionStorage.removeItem(PLANS_OPEN_KEY);
      } else {
        localStorage.removeItem(PLANS_OPEN_KEY);
        sessionStorage.removeItem(PLANS_OPEN_KEY);
      }
    } catch {
      // ignore
    }
  }, [showPlansView]);
  const [showAIRender, setShowAIRender] = useState(false);

  // Material picker state
  const [selectedMaterial, setSelectedMaterial] = useState(null);
  const [materialFilter, setMaterialFilter] = useState('');
  const [selectedCollection, setSelectedCollection] = useState('all');

  // Color picker state
  const [colorPickerElement, setColorPickerElement] = useState(null);

  // Room visualization
  const [roomConfig, setRoomConfig] = useState(null);
  const [roomAnalysis, setRoomAnalysis] = useState(null);
  const [roomViewActive, setRoomViewActive] = useState(false);

  // Order form
  const [orderForm, setOrderForm] = useState({ email: '', name: '', phone: '', notes: '' });
  const [orderSent, setOrderSent] = useState(false);
  const [lastOrderId, setLastOrderId] = useState(null);

  // Module click from 3D view
  const handleModuleClick = useCallback((moduleIndex) => {
    setExpandedColumn(prev => prev === moduleIndex ? null : moduleIndex);
    setActiveStep(2); // jump to columns step when clicking a module
  }, []);

  // Element click from 3D view
  const openColorPicker = useCallback((elementType, label) => {
    setColorPickerElement({ type: elementType, label });
    setShowColorPicker(true);
    setActiveStep(4); // jump to materials step
  }, []);

  const closeColorPicker = useCallback(() => {
    setShowColorPicker(false);
    setColorPickerElement(null);
  }, []);

  // Material handlers
  const openMaterialDetail = useCallback((material) => {
    setSelectedMaterial(material);
    setShowMaterialModal(true);
  }, []);

  const handleVariantSwitch = useCallback((variant, finishes) => {
    const variantMaterial = finishes.find(f => f.code === variant.variant_code);
    if (variantMaterial) {
      setSelectedMaterial(variantMaterial);
    }
  }, []);

  return {
    activeStep, setActiveStep,
    expandedColumn, setExpandedColumn,
    showMaterialPicker, setShowMaterialPicker,
    showMaterialModal, setShowMaterialModal,
    showColorPicker, setShowColorPicker,
    showRoomUpload, setShowRoomUpload,
    showPlansView, setShowPlansView,
    showAIRender, setShowAIRender,
    selectedMaterial, setSelectedMaterial,
    materialFilter, setMaterialFilter,
    selectedCollection, setSelectedCollection,
    colorPickerElement, setColorPickerElement,
    roomConfig, setRoomConfig,
    roomAnalysis, setRoomAnalysis,
    roomViewActive, setRoomViewActive,
    orderForm, setOrderForm,
    orderSent, setOrderSent,
    lastOrderId, setLastOrderId,
    handleModuleClick,
    openColorPicker,
    closeColorPicker,
    openMaterialDetail,
    handleVariantSwitch,
  };
}