<script setup lang="ts">
import { useGalleryStore } from "../stores/gallery";
import { Settings, CheckSquare, Type, Palette } from 'lucide-vue-next';

const store = useGalleryStore();
</script>

<template>
  <div class="h-full bg-gray-800 text-white p-4 flex flex-col gap-6 overflow-y-auto border-l border-gray-700 w-80">
      <h2 class="text-lg font-bold flex items-center gap-2">
          <Settings class="w-5 h-5" />
          Watermark Settings
      </h2>

      <!-- Text Input -->
      <div class="flex flex-col gap-2">
          <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Content</label>
          <div class="relative">
              <Type class="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
              <input 
                type="text"
                v-model="store.watermarkSettings.text"
                class="w-full bg-gray-700 text-white pl-10 pr-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
                placeholder="Enter text..."
              />
          </div>
      </div>

      <!-- Color Picker -->
      <div class="flex flex-col gap-2">
          <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Color</label>
          <div class="flex items-center gap-2 bg-gray-700 p-2 rounded border border-gray-600">
             <Palette class="w-4 h-4 text-gray-400" />
             <input 
                type="color" 
                v-model="store.watermarkSettings.color"
                class="w-8 h-8 rounded cursor-pointer bg-transparent border-none p-0"
             />
             <span class="text-xs text-gray-300 font-mono">{{ store.watermarkSettings.color }}</span>
          </div>
      </div>

      <!-- Controls -->
      <div class="space-y-4">
           <div>
              <div class="flex justify-between mb-1">
                  <label class="text-xs text-gray-400">Size (Scale)</label>
                  <span class="text-xs text-gray-300">{{ (store.watermarkSettings.scale * 100).toFixed(1) }}%</span>
              </div>
              <input 
                type="range" 
                min="0.01" 
                max="0.20" 
                step="0.001" 
                :value="store.watermarkSettings.scale"
                @input="e => store.updateWatermarkSettings({ scale: parseFloat((e.target as HTMLInputElement).value) })"
                class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
              />
              <p class="text-[10px] text-gray-500 mt-1">Relative to image height</p>
          </div>

           <div>
              <div class="flex justify-between mb-1">
                  <label class="text-xs text-gray-400">Opacity</label>
                  <span class="text-xs text-gray-300">{{ (store.watermarkSettings.opacity * 100).toFixed(0) }}%</span>
              </div>
              <input 
                type="range" 
                min="0.1" 
                max="1.0" 
                step="0.01" 
                :value="store.watermarkSettings.opacity"
                @input="e => store.updateWatermarkSettings({ opacity: parseFloat((e.target as HTMLInputElement).value) })"
                class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
              />
          </div>
      </div>

      <!-- Placement Mode -->
       <div class="flex flex-col gap-2">
          <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Placement</label>
          <div class="flex items-center gap-2 p-2 rounded bg-gray-700/50 border border-gray-600">
             <div class="p-1 rounded bg-green-500/20 text-green-400">
                 <CheckSquare class="w-4 h-4" v-if="!store.watermarkSettings.manual_override" />
                 <div class="w-4 h-4" v-else></div>
             </div>
             <div class="flex-1">
                 <p class="text-sm font-medium text-gray-200">Smart Auto-Placement</p>
                 <p class="text-xs text-gray-500">Uses ZCA algorithm for each image</p>
             </div>
          </div>
          <p class="text-xs text-gray-500 mt-1 italic">
              * Dragging the watermark in the preview will enable Manual Override for all images.
          </p>
      </div>
  </div>
</template>
