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

    <div class="section-card">
      <div class="setting-group">
        <p class="setting-description">
          Wire global search and ticket links to your ServiceNow instance. When
          enabled, matching ticket numbers become clickable links and can trigger
          a smart-redirect from global search. Defaults ship for GE; change them
          for your site.
        </p>

        <div class="setting-row">
          <label class="toggle-label">
            <span>Enable ServiceNow</span>
            <button
              class="toggle-btn"
              :class="{ active: settings.servicenow_enabled }"
              @click="toggleSetting('servicenow_enabled')"
              :disabled="saving"
            >
              <span class="toggle-slider"></span>
            </button>
          </label>
        </div>

        <template v-if="settings.servicenow_enabled">
          <div class="setting-row">
            <label>
              <span>Search URL</span>
              <input
                type="url"
                v-model="settings.servicenow_search_url"
                placeholder="https://geaerospaceqa.service-now.com/now/nav/ui/search/.../{ticket}/..."
                @blur="saveSetting('servicenow_search_url', settings.servicenow_search_url)"
                :disabled="saving"
              >
              <small class="input-hint">Global-search redirect target. Use {ticket} where the ticket number goes.</small>
            </label>
          </div>

          <div class="setting-row">
            <label>
              <span>Ticket Prefixes</span>
              <input
                type="text"
                v-model="settings.servicenow_ticket_prefixes"
                placeholder="GEINC,GECHG,GERIT,GESCT"
                @blur="saveSetting('servicenow_ticket_prefixes', settings.servicenow_ticket_prefixes)"
                :disabled="saving"
              >
              <small class="input-hint">Comma-separated ticket-number prefixes that this site recognizes.</small>
            </label>
          </div>

          <div class="setting-row">
            <label>
              <span>Incident URL</span>
              <input
                type="url"
                v-model="settings.servicenow_incident_url"
                placeholder="(blank = plain text; use {ticket} in a URL template)"
                @blur="saveSetting('servicenow_incident_url', settings.servicenow_incident_url)"
                :disabled="saving"
              >
              <small class="input-hint">Link template for incident tickets. Use {ticket} where the ticket number goes.</small>
            </label>
          </div>

          <div class="setting-row">
            <label>
              <span>Change URL</span>
              <input
                type="url"
                v-model="settings.servicenow_change_url"
                placeholder="(blank = plain text; use {ticket} in a URL template)"
                @blur="saveSetting('servicenow_change_url', settings.servicenow_change_url)"
                :disabled="saving"
              >
              <small class="input-hint">Link template for change tickets. Use {ticket} where the ticket number goes.</small>
            </label>
          </div>
        </template>
      </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 { onMounted } from 'vue'
import { useSystemSettings } from '../../composables/systemSettings'

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

onMounted(loadSettings)
</script>
