navi/src/store.js

import { create } from 'zustand'

export const useStore = create((set, get) => ({
  // ── Search state ──
  query: '',
  results: [],
  searchLoading: false,
  abortController: null,

  setQuery: (query) => set({ query }),
  setResults: (results) => set({ results }),
  setSearchLoading: (loading) => set({ searchLoading: loading }),
  setAbortController: (ctrl) => set({ abortController: ctrl }),

  // ── Stop list ──
  stops: [],
  // Each stop: { id, lat, lon, name, source, matchCode, isOrigin }

  addStop: (stop) => {
    const { stops } = get()
    if (stops.length >= 10) return false
    set({ stops: [...stops, { ...stop, id: crypto.randomUUID() }] })
    return true
  },

  removeStop: (id) => {
    set({ stops: get().stops.filter((s) => s.id !== id) })
  },

  reorderStops: (newStops) => set({ stops: newStops }),

  clearStops: () => set({ stops: [] }),

  setStops: (stops) => set({ stops }),

  // ── Geolocation ──
  userLocation: null, // { lat, lon }
  geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'

  setUserLocation: (loc) => set({ userLocation: loc }),
  setGeoPermission: (p) => set({ geoPermission: p }),

  // ── Map viewport (for search bias) ──
  mapCenter: null, // { lat, lon, zoom }
  setMapCenter: (center) => set({ mapCenter: center }),

  // ── Mode ──
  mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
  setMode: (mode) => set({ mode }),

  // ── Route ──
  route: null, // Valhalla response (trip object)
  routeLoading: false,
  routeError: null,

  setRoute: (route) => set({ route, routeError: null }),
  setRouteLoading: (loading) => set({ routeLoading: loading }),
  setRouteError: (err) => set({ routeError: err, route: null }),
  clearRoute: () => set({ route: null, routeError: null }),

  // ── Place detail ──
  selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
  clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
  gpsOrigin: true, // whether GPS should be used as origin when available
  pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)

  setSelectedPlace: (place) => set({ selectedPlace: place }),
  clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
  setClickMarker: (marker) => set({ clickMarker: marker }),
  clearClickMarker: () => set({ clickMarker: null }),
  setGpsOrigin: (val) => set({ gpsOrigin: val }),
  setPendingDestination: (place) => set({ pendingDestination: place }),
  clearPendingDestination: () => set({ pendingDestination: null }),

  startDirections: (place) => {
    const { geoPermission, stops, addStop, clearStops } = get()
    if (geoPermission === 'granted') {
      clearStops()
      addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
      set({ gpsOrigin: true, selectedPlace: null })
    } else if (stops.length > 0) {
      const origin = stops[0]
      clearStops()
      addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
      addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
      set({ selectedPlace: null })
    } else {
      // GPS denied, no stops: set pendingDestination only; origin-picker will add both
      set({ pendingDestination: place, selectedPlace: null })
    }
  },

  // ── UI state ──
  sheetState: 'half', // 'collapsed' | 'half' | 'full'
  panelOpen: true,
  autocompleteOpen: false,
  theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
  themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)

  setSheetState: (s) => set({ sheetState: s }),
  setPanelOpen: (open) => set({ panelOpen: open }),
  setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
  setTheme: (theme) => set({ theme }),
  setThemeOverride: (override) => {
    set({ themeOverride: override })
    if (override) {
      localStorage.setItem('navi-theme-override', override)
    } else {
      localStorage.removeItem('navi-theme-override')
    }
  },
  // ── Auth state ──
  auth: { authenticated: false, username: null, loaded: false },
  setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),

  // ── Contacts ──
  contacts: [],
  contactsLoaded: false,
  activeTab: 'routes', // 'routes' | 'contacts'
  editingContact: null, // null=closed, {}=new, {id:N}=edit
  pickingLocationFor: null, // form data while user picks location on map

  setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
  setActiveTab: (tab) => set({ activeTab: tab }),
  setEditingContact: (c) => set({ editingContact: c }),
  clearEditingContact: () => set({ editingContact: null }),
  setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
  clearPickingLocationFor: () => set({ pickingLocationFor: null }),
}))

// ── Panel state selector ──
// Returns string state, prioritizing preview to allow it alongside any route state
export const usePanelState = () => {
  return useStore((s) => {
    const hasPreview = !!s.selectedPlace
    const hasRoute = !!s.route
    const hasStops = s.stops.length >= 1

    if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
    if (hasPreview && hasStops) return "PREVIEW_ROUTING"
    if (hasPreview) return "PREVIEW"
    if (hasRoute) return "ROUTE_CALCULATED"
    if (hasStops) return "ROUTING"
    return "IDLE"
  })
}