<template>
  <div class="space-y-6">
    <h3 class="text-lg font-bold">Section Visibility</h3>
    <p class="text-sm opacity-70">Toggle which sidebar sections are visible to all users.</p>

    <div class="space-y-4 max-w-md">
      <div class="form-control">
        <label class="label cursor-pointer">
          <span class="label-text font-medium">Automatics Section</span>
          <input type="checkbox" v-model="form.show_automatics" class="toggle toggle-primary" />
        </label>
      </div>
      <div class="form-control">
        <label class="label cursor-pointer">
          <span class="label-text font-medium">Service Section</span>
          <input type="checkbox" v-model="form.show_service" class="toggle toggle-primary" />
        </label>
      </div>
      <div class="form-control">
        <label class="label cursor-pointer">
          <span class="label-text font-medium">Stats Section</span>
          <input type="checkbox" v-model="form.show_stats" class="toggle toggle-primary" />
        </label>
      </div>
      <div class="form-control">
        <label class="label cursor-pointer">
          <span class="label-text font-medium">Market Ticker (Header)</span>
          <input type="checkbox" v-model="form.show_ticker" class="toggle toggle-primary" />
        </label>
      </div>
    </div>

    <button class="btn btn-primary" @click="save" :disabled="saving">
      <span v-if="saving" class="loading loading-spinner loading-xs"></span>
      Save Changes
    </button>
    <div v-if="error" class="alert alert-error alert-sm">{{ error }}</div>
    <div v-if="success" class="alert alert-success alert-sm">{{ success }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useSettingsStore } from '../../../stores/settings'

const settingsStore = useSettingsStore()
const saving = ref(false)
const error = ref('')
const success = ref('')

const form = reactive({
  show_automatics: true,
  show_service: true,
  show_stats: true,
  show_ticker: true,
})

onMounted(() => {
  form.show_automatics = settingsStore.settings.show_automatics
  form.show_service = settingsStore.settings.show_service
  form.show_stats = settingsStore.settings.show_stats
  form.show_ticker = settingsStore.settings.show_ticker
})

async function save() {
  error.value = ''
  success.value = ''
  saving.value = true
  try {
    await settingsStore.updateSettings({ ...form })
    success.value = 'Visibility settings saved'
  } catch {
    error.value = 'Failed to save settings'
  } finally {
    saving.value = false
  }
}
</script>
