<template>
  <div>
    <div class="page-header">
      <h2>Floor Map</h2>
    </div>

    <div class="section-card">
      <div class="setting-group">
        <h3>Facility Blueprint</h3>
        <p class="setting-description">
          The floor-plan image and its pixel dimensions for this facility. Map
          markers are positioned against these dimensions, so the width and
          height must match the native size of the blueprint image. Leave the
          image paths at their defaults to use the bundled sitemap.
        </p>

        <div class="setting-row">
          <label>
            <span>Blueprint image (light theme)</span>
            <input
              type="text"
              v-model="settings.map_blueprint_light"
              placeholder="/static/images/sitemap2025-light.png"
              @blur="saveSetting('map_blueprint_light', settings.map_blueprint_light)"
              :disabled="saving"
            >
            <div class="map-upload-row">
              <input type="file" accept="image/*" @change="uploadBlueprint('light', $event)" :disabled="mapUploading" />
              <img v-if="settings.map_blueprint_light" :src="withBase(settings.map_blueprint_light)" class="map-thumb" alt="light blueprint" />
            </div>
            <small class="input-hint">Upload an image, or type a path/URL to the light-theme floor plan</small>
          </label>
        </div>

        <div class="setting-row">
          <label>
            <span>Blueprint image (dark theme)</span>
            <input
              type="text"
              v-model="settings.map_blueprint_dark"
              placeholder="/static/images/sitemap2025-dark.png"
              @blur="saveSetting('map_blueprint_dark', settings.map_blueprint_dark)"
              :disabled="saving"
            >
            <div class="map-upload-row">
              <input type="file" accept="image/*" @change="uploadBlueprint('dark', $event)" :disabled="mapUploading" />
              <img v-if="settings.map_blueprint_dark" :src="withBase(settings.map_blueprint_dark)" class="map-thumb map-thumb-dark" alt="dark blueprint" />
            </div>
            <small class="input-hint">Upload an image, or type a path/URL to the dark-theme floor plan</small>
          </label>
        </div>

        <div class="setting-row">
          <label>
            <span>Blueprint width (pixels)</span>
            <input
              type="number"
              v-model="settings.map_width"
              min="1"
              placeholder="3300"
              @blur="saveSetting('map_width', settings.map_width)"
              :disabled="saving"
            >
            <small class="input-hint">Native pixel width of the blueprint image</small>
          </label>
        </div>

        <div class="setting-row">
          <label>
            <span>Blueprint height (pixels)</span>
            <input
              type="number"
              v-model="settings.map_height"
              min="1"
              placeholder="2550"
              @blur="saveSetting('map_height', settings.map_height)"
              :disabled="saving"
            >
            <small class="input-hint">Native pixel height of the blueprint image</small>
          </label>
        </div>
      </div>
    </div>

    <div v-if="error" class="error-message">{{ error }}</div>
    <div v-if="success" class="settings-success">{{ success }}</div>
  </div>
</template>

<script setup>
import { withBase } from '../../utils/basePath'
import { onMounted } from 'vue'
import { useSystemSettings } from '../../composables/systemSettings'

const {
  settings, saving, mapUploading, error, success,
  loadSettings, saveSetting, uploadBlueprint,
} = useSystemSettings()

onMounted(loadSettings)
</script>
