<script setup>
import { ref, watch, computed } from 'vue'
import { useSettingsStore } from '../stores/settings'
import { useTheme } from '../composables/useTheme'

const store = useSettingsStore()
const { setTheme } = useTheme()

const isOpen = ref(false)

const togglePanel = () => {
  isOpen.value = !isOpen.value
}

const closePanel = () => {
  isOpen.value = false
}

// Theme Handling
watch(() => store.theme, (newVal) => {
  if (newVal === 'system') {
    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    setTheme(isDark ? 'dark' : 'light')
  } else {
    setTheme(newVal)
  }
}, { immediate: true })

// Background Image Handling
const handleImageUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      store.backgroundImage = e.target.result
      store.backgroundType = 'image'
    }
    reader.readAsDataURL(file)
  }
}

// Helper to translate
const t = (key) => store.t[key]

// Background Style for App (This will be used in App.vue, but we preview it here or just logical check)
// UI Helpers
const tabs = ['General', 'Model', 'Appearance', 'About']
const currentTab = ref('General')

</script>

<template>
  <div>
    <!-- Trigger Button -->
    <button 
      class="settings-trigger"
      @click="togglePanel"
      :title="t('settings')"
    >
      <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="3"></circle>
        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
      </svg>
    </button>

    <!-- Overlay (Mobile) -->
    <div 
      class="settings-overlay" 
      :class="{ 'is-open': isOpen }"
      @click="closePanel"
    ></div>

    <!-- Panel -->
    <div class="settings-panel" :class="{ 'is-open': isOpen }">
      <div class="panel-header">
        <h2>{{ t('settings') }}</h2>
        <button class="close-btn" @click="closePanel" :title="t('close')">
          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>

      <div class="panel-content">
        <!-- Appearance Section -->
        <section class="settings-section">
          <h3>{{ t('appearance') }}</h3>
          
          <div class="form-group">
            <label>{{ t('theme') }}</label>
            <div class="segment-control">
              <button :class="{ active: store.theme === 'light' }" @click="store.theme = 'light'">{{ t('light') }}</button>
              <button :class="{ active: store.theme === 'dark' }" @click="store.theme = 'dark'">{{ t('dark') }}</button>
              <button :class="{ active: store.theme === 'system' }" @click="store.theme = 'system'">{{ t('system') }}</button>
            </div>
          </div>

          <div class="form-group">
            <label>{{ t('background') }}</label>
            <select v-model="store.backgroundType" class="select-input">
              <option value="default">{{ t('default') }}</option>
              <option value="warm">{{ t('warm') }}</option>
              <option value="reading">{{ t('reading') }}</option>
              <option value="image">{{ t('image') }}</option>
            </select>
          </div>

          <div v-if="store.backgroundType === 'image'" class="form-group">
            <label>{{ t('image') }}</label>
            <input type="file" accept="image/*" @change="handleImageUpload" class="file-input" />
            
            <label class="sub-label">{{ t('opacity') }}: {{ Math.round(store.backgroundOpacity * 100) }}%</label>
            <input 
              type="range" 
              min="0.05" 
              max="0.5" 
              step="0.05" 
              v-model.number="store.backgroundOpacity" 
              class="range-slider"
            />
          </div>
        </section>

        <!-- Model Section -->
        <section class="settings-section">
          <h3>{{ t('modelIntelligence') }}</h3>
          
          <div class="form-group">
            <label>{{ t('thinkingLevel') }}</label>
            <div class="segment-control">
              <button :class="{ active: store.modelThinking === 'low' }" @click="store.modelThinking = 'low'">{{ t('low') }}</button>
              <button :class="{ active: store.modelThinking === 'medium' }" @click="store.modelThinking = 'medium'">{{ t('medium') }}</button>
              <button :class="{ active: store.modelThinking === 'high' }" @click="store.modelThinking = 'high'">{{ t('high') }}</button>
            </div>
            <p class="help-text">{{ store.modelThinking === 'low' ? t('lowDesc') : store.modelThinking === 'medium' ? t('mediumDesc') : t('highDesc') }}</p>
          </div>

          <div class="form-group">
            <label>{{ t('debounceTime') }}: {{ store.debounceMs }}ms</label>
            <input 
              type="range" 
              min="1000" 
              max="5000" 
              step="500" 
              v-model.number="store.debounceMs" 
              class="range-slider"
            />
          </div>
        </section>

        <!-- Privacy & Preferences -->
        <section class="settings-section">
          <h3>{{ t('privacyPreferences') }}</h3>
          
          <div class="form-group toggle-group">
            <label>{{ t('privacyMode') }}</label>
            <button 
              class="toggle-switch" 
              :class="{ active: store.privacyMode }" 
              @click="store.privacyMode = !store.privacyMode"
            >
              <span class="toggle-thumb"></span>
            </button>
          </div>
          <p class="help-text">{{ t('privacyDesc') }}</p>

          <div class="form-group">
            <label>{{ t('language') }}</label>
            <select v-model="store.language" class="select-input" :disabled="store.privacyMode">
              <option value="auto">{{ t('auto') }}</option>
              <option value="zh">Chinese</option>
              <option value="en">English</option>
              <option value="ja">Japanese</option>
              <option value="ko">Korean</option>
              <option value="de">German</option>
              <option value="fr">French</option>
            </select>
          </div>
          
           <div class="form-group">
            <label>{{ t('currency') }}</label>
            <select v-model="store.currency" class="select-input" :disabled="store.privacyMode">
              <option value="auto">{{ t('auto') }}</option>
              <option value="CNY">CNY (¥)</option>
              <option value="USD">USD ($)</option>
              <option value="EUR">EUR (€)</option>
              <option value="JPY">JPY (¥)</option>
              <option value="KRW">KRW (₩)</option>
              <option value="GBP">GBP (£)</option>
              <option value="AUD">AUD ($)</option>
              <option value="CAD">CAD ($)</option>
            </select>
          </div>
        </section>

        <!-- About -->
        <section class="settings-section">
          <h3>{{ t('about') }}</h3>
          <div class="about-card">
            <h4>llm-in-text</h4>
            <p>A smart Markdown editor with local LLM intelligence.</p>
            <p class="version">v0.1.0-beta</p>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<style scoped>
.settings-trigger {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  cursor: pointer;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.settings-trigger:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  transform: scale(1.05);
}

.settings-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 350px;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  z-index: 10000;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.settings-panel.is-open {
  transform: translateX(0);
}

.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.settings-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile Fullscreen */
@media (max-width: 640px) {
  .settings-panel {
    width: 100%;
    border-right: none;
  }
}

.panel-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--panel-border);
}

.panel-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: var(--muted-text);
  cursor: pointer;
  padding: 4px;
}

.close-btn:hover {
  color: var(--app-text);
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.settings-section {
  margin-bottom: 32px;
}

.settings-section h3 {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--muted-text);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--app-text);
}

.sub-label {
  font-size: 0.8rem;
  color: var(--muted-text);
  margin-top: 8px;
  margin-bottom: 4px;
}

.help-text {
  font-size: 0.8rem;
  color: var(--muted-text);
  margin-top: 6px;
}

/* Segment Control */
.segment-control {
  display: flex;
  background: var(--ghost-code-bg);
  padding: 4px;
  border-radius: 8px;
}

.segment-control button {
  flex: 1;
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  color: var(--muted-text);
  transition: all 0.2s;
}

.segment-control button.active {
  background: var(--app-bg);
  color: var(--app-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  font-weight: 600;
}

/* Range Slider */
.range-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  background: var(--panel-border);
  border-radius: 2px;
  outline: none;
  margin: 10px 0;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--focus-ring);
  cursor: pointer;
  transition: transform 0.1s;
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Inputs */
.select-input, .file-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--app-bg);
  color: var(--app-text);
  font-size: 0.9rem;
  outline: none;
}

.select-input:focus {
  border-color: var(--focus-ring);
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Toggle Switch */
.toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-group label {
  margin-bottom: 0;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  background: var(--panel-border);
  border-radius: 999px;
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-switch.active {
  background: var(--focus-ring);
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch.active .toggle-thumb {
  transform: translateX(20px);
}

/* About Card */
.about-card {
  background: var(--ghost-code-bg);
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}

.about-card h4 {
  margin: 0 0 8px;
}

.about-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted-text);
}

.about-card .version {
  margin-top: 8px;
  font-size: 0.8rem;
  opacity: 0.7;
}
</style>
