<template>
  <div class="p-4 max-w-[1800px] mx-auto space-y-8">
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-3xl font-bold text-green tracking-tight">Réglages Système</h1>
        <p class="text-text-muted text-xs mt-1">Configurez l'interface, la maintenance et la sécurité de votre application.</p>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
      <!-- Section Interface -->
      <section class="card-jardin flex flex-col h-full border-green/20">
        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
          <span class="text-2xl">🎨</span>
          <div>
            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Interface Graphique</h2>
            <p class="text-[10px] text-text-muted font-bold">Ajustez les échelles visuelles.</p>
          </div>
        </div>

        <div class="flex-1 space-y-6">
          <div v-for="s in uiSizeSettings" :key="s.key" class="space-y-2">
            <div class="flex justify-between items-center">
              <label class="text-[10px] font-black uppercase tracking-widest text-text-muted">{{ s.label }}</label>
              <span class="text-xs font-mono text-green">{{ uiSizes[s.key] }}{{ s.unit }}</span>
            </div>
            <input
              type="range"
              :min="s.min" :max="s.max" :step="s.step"
              v-model.number="uiSizes[s.key]"
              class="w-full h-1.5 bg-bg-hard rounded-lg appearance-none cursor-pointer accent-green"
              @input="applyUiSizes"
            />
          </div>
        </div>

        <div class="mt-8 pt-4 border-t border-bg-hard flex items-center justify-between">
          <button
            class="text-[10px] font-black uppercase tracking-widest text-text-muted hover:text-text transition-colors"
            @click="resetUiSettings"
          >Réinitialiser</button>
          <div class="flex items-center gap-3">
            <span v-if="uiSavedMsg" class="text-[10px] font-bold text-aqua animate-pulse">{{ uiSavedMsg }}</span>
            <button
              class="btn-primary !py-2 !px-6 text-xs"
              :disabled="savingUi"
              @click="saveUiSettings"
            >{{ savingUi ? '...' : 'Enregistrer' }}</button>
          </div>
        </div>
      </section>

      <!-- Section Général / Debug -->
      <section class="card-jardin flex flex-col h-full border-yellow/20">
        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
          <span class="text-2xl">⚙️</span>
          <div>
            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Général & Debug</h2>
            <p class="text-[10px] text-text-muted font-bold">Options globales du système.</p>
          </div>
        </div>

        <div class="flex-1 space-y-6">
          <label class="flex items-start gap-4 cursor-pointer group bg-bg-hard/30 p-4 rounded-2xl border border-bg-soft/50 hover:border-yellow/30 transition-all">
            <div class="relative mt-1">
              <input v-model="debugMode" type="checkbox" class="sr-only peer" />
              <div class="w-10 h-5 bg-bg-hard rounded-full peer peer-checked:bg-yellow transition-colors"></div>
              <div class="absolute left-1 top-1 w-3 h-3 bg-text-muted peer-checked:bg-bg peer-checked:translate-x-5 rounded-full transition-all"></div>
            </div>
            <div class="flex-1">
              <div class="text-sm font-bold text-text group-hover:text-yellow transition-colors">Mode Debug Interactif</div>
              <p class="text-[10px] text-text-muted mt-1 leading-relaxed italic">Affiche les statistiques vitales (CPU, RAM, Disque) dans la barre de navigation supérieure.</p>
            </div>
          </label>
        </div>

        <div class="mt-8 pt-4 border-t border-bg-hard flex items-center justify-end gap-3">
          <span v-if="savedMsg" class="text-[10px] font-bold text-aqua">{{ savedMsg }}</span>
          <button
            class="btn-primary !bg-yellow !text-bg !py-2 !px-6 text-xs"
            :disabled="saving"
            @click="saveSettings"
          >
            {{ saving ? '...' : 'Appliquer' }}
          </button>
        </div>
      </section>

      <!-- Section Maintenance -->
      <section class="card-jardin flex flex-col h-full border-blue/20">
        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
          <span class="text-2xl">🌦️</span>
          <div>
            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Maintenance Météo</h2>
            <p class="text-[10px] text-text-muted font-bold">Synchronisation des données externes.</p>
          </div>
        </div>

        <div class="flex-1">
          <p class="text-xs text-text-muted leading-relaxed mb-6">
            Force le rafraîchissement des prévisions Open-Meteo et des relevés de la station locale WeeWX. Les données sont normalement mises à jour toutes les heures automatiquement.
          </p>
          
          <button
            class="btn-outline w-full py-4 border-blue/20 text-blue hover:bg-blue/10 flex flex-col items-center gap-2"
            :disabled="refreshingMeteo"
            @click="refreshMeteo"
          >
            <span class="text-lg">{{ refreshingMeteo ? '🔄' : '⚡' }}</span>
            <span class="text-[10px] font-black uppercase tracking-widest">{{ refreshingMeteo ? 'Rafraîchissement en cours...' : 'Forcer la mise à jour' }}</span>
          </button>
        </div>
      </section>

      <!-- Section Sauvegarde -->
      <section class="card-jardin flex flex-col h-full border-aqua/20">
        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
          <span class="text-2xl">📦</span>
          <div>
            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Sauvegarde & Export</h2>
            <p class="text-[10px] text-text-muted font-bold">Protégez vos données.</p>
          </div>
        </div>

        <div class="flex-1 space-y-6">
          <p class="text-xs text-text-muted leading-relaxed">
            Génère une archive complète (.zip) incluant votre base de données SQLite et tous les médias (photos/vidéos) uploadés.
          </p>
          
          <button
            class="btn-primary !bg-aqua !text-bg w-full py-4 flex flex-col items-center gap-2 shadow-lg hover:shadow-aqua/20"
            :disabled="downloadingBackup"
            @click="downloadBackup"
          >
            <span class="text-xl">💾</span>
            <span class="text-[10px] font-black uppercase tracking-widest">{{ downloadingBackup ? 'Préparation...' : 'Télécharger le Pack Complet' }}</span>
          </button>
          
          <div v-if="backupMsg" class="text-[10px] text-center font-bold text-aqua animate-bounce">{{ backupMsg }}</div>
        </div>
      </section>

      <!-- Section API Docs (Largeur double sur XL+) -->
      <section class="card-jardin xl:col-span-2 flex flex-col border-bg-soft/50">
        <div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
          <span class="text-2xl">🛠️</span>
          <div>
            <h2 class="text-text font-bold uppercase tracking-widest text-xs">Outils Développeur & API</h2>
            <p class="text-[10px] text-text-muted font-bold">Documentation technique et monitoring.</p>
          </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <button @click="openApiDocs" class="btn-outline flex flex-col items-center gap-2 py-6 border-bg-soft hover:bg-bg-hard transition-all">
            <span class="text-xl">📖</span>
            <span class="text-[10px] font-bold uppercase">Swagger UI</span>
          </button>
          <button @click="openApiRedoc" class="btn-outline flex flex-col items-center gap-2 py-6 border-bg-soft hover:bg-bg-hard transition-all">
            <span class="text-xl">📄</span>
            <span class="text-[10px] font-bold uppercase">ReDoc Docs</span>
          </button>
          <button @click="openApiHealth" class="btn-outline flex flex-col items-center gap-2 py-6 border-bg-soft hover:bg-bg-hard transition-all">
            <span class="text-xl">💓</span>
            <span class="text-[10px] font-bold uppercase">Santé API</span>
          </button>
        </div>
        
        <div class="mt-6 p-3 bg-bg-hard/50 rounded-xl border border-bg-soft/30 flex items-center justify-between">
          <span class="text-[9px] font-bold text-text-muted uppercase tracking-widest">Base URL API détectée</span>
          <span class="text-xs font-mono text-aqua">{{ apiBaseUrl }}</span>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { settingsApi } from '@/api/settings'
import { meteoApi } from '@/api/meteo'
import { UI_SIZE_DEFAULTS, applyUiSizesToRoot } from '@/utils/uiSizeDefaults'

const debugMode = ref(false)
const saving = ref(false)
const savedMsg = ref('')
const refreshingMeteo = ref(false)
const downloadingBackup = ref(false)
const backupMsg = ref('')
const apiBaseUrl = detectApiBaseUrl()

// --- UI Size settings ---
const uiSizeSettings = [
  { key: 'ui_font_size',      label: 'Corps de texte',          min: 12, max: 24,  step: 1, unit: 'px' },
  { key: 'ui_menu_font_size', label: 'Texte menu latéral',      min: 11, max: 20,  step: 1, unit: 'px' },
  { key: 'ui_menu_icon_size', label: 'Icônes menu',             min: 14, max: 32,  step: 1, unit: 'px' },
  { key: 'ui_thumb_size',     label: 'Miniatures médias',       min: 60, max: 300, step: 4, unit: 'px' },
  { key: 'ui_weather_icon_size', label: 'Icônes Météo',         min: 32, max: 128, step: 4, unit: 'px' },
  { key: 'ui_dashboard_icon_size', label: 'Icônes Dashboard',   min: 16, max: 64,  step: 2, unit: 'px' },
]

const uiSizes = ref<Record<string, number>>({ ...UI_SIZE_DEFAULTS })
const savingUi = ref(false)
const uiSavedMsg = ref('')

function applyUiSizes() {
  applyUiSizesToRoot(uiSizes.value)
  window.dispatchEvent(new CustomEvent('ui-sizes-updated', { detail: { ...uiSizes.value } }))
}

async function saveUiSettings() {
  savingUi.value = true
  uiSavedMsg.value = ''
  try {
    const payload: Record<string, string> = {}
    for (const [k, v] of Object.entries(uiSizes.value)) payload[k] = String(v)
    await settingsApi.update(payload)
    applyUiSizes()
    uiSavedMsg.value = 'Enregistré'
    setTimeout(() => { uiSavedMsg.value = '' }, 1800)
  } catch {
    uiSavedMsg.value = 'Erreur lors de l\'enregistrement.'
    setTimeout(() => { uiSavedMsg.value = '' }, 2200)
  } finally {
    savingUi.value = false
  }
}

function resetUiSettings() {
  uiSizes.value = { ...UI_SIZE_DEFAULTS }
  applyUiSizes()
}

function detectApiBaseUrl(): string {
  const envBase = String((import.meta as any).env?.VITE_API_URL || '').trim()
  if (envBase) {
    if (envBase.startsWith('http://') || envBase.startsWith('https://')) {
      return envBase.replace(/\/$/, '')
    }
    if (envBase.startsWith('/')) {
      return window.location.origin
    }
  }
  if (window.location.port === '8060') {
    return window.location.origin
  }
  return `${window.location.protocol}//${window.location.hostname}:8060`
}

function openInNewTab(path: string) {
  const url = `${apiBaseUrl}${path}`
  window.open(url, '_blank', 'noopener,noreferrer')
}

function openApiDocs() { openInNewTab('/docs') }
function openApiRedoc() { openInNewTab('/redoc') }
function openApiHealth() { openInNewTab('/api/health') }

function toBool(value: unknown): boolean {
  if (typeof value === 'boolean') return value
  const s = String(value ?? '').toLowerCase().trim()
  return s === '1' || s === 'true' || s === 'yes' || s === 'on'
}

function notifyDebugChanged(enabled: boolean) {
  localStorage.setItem('debug_mode', enabled ? '1' : '0')
  window.dispatchEvent(new CustomEvent('settings-updated', { detail: { debug_mode: enabled } }))
}

async function loadSettings() {
  try {
    const data = await settingsApi.get()
    debugMode.value = toBool(data.debug_mode)
    notifyDebugChanged(debugMode.value)
    for (const s of uiSizeSettings) {
      const v = data[s.key]
      if (v != null) uiSizes.value[s.key] = Number(v) || UI_SIZE_DEFAULTS[s.key]
    }
    applyUiSizes()
  } catch {
    // Laisse la valeur locale
  }
}

async function saveSettings() {
  saving.value = true
  savedMsg.value = ''
  try {
    await settingsApi.update({ debug_mode: debugMode.value ? '1' : '0' })
    notifyDebugChanged(debugMode.value)
    savedMsg.value = 'Pris en compte'
    window.setTimeout(() => { savedMsg.value = '' }, 1800)
  } finally {
    saving.value = false
  }
}

async function refreshMeteo() {
  refreshingMeteo.value = true
  try {
    await meteoApi.refresh()
  } finally {
    refreshingMeteo.value = false
  }
}

async function downloadBackup() {
  downloadingBackup.value = true
  backupMsg.value = ''
  try {
    const { blob, filename } = await settingsApi.downloadBackup()
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = filename
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)
    backupMsg.value = 'ZIP prêt !'
  } catch {
    backupMsg.value = 'Erreur export.'
  } finally {
    downloadingBackup.value = false
    window.setTimeout(() => { backupMsg.value = '' }, 2200)
  }
}

onMounted(() => {
  void loadSettings()
})
</script>
