<script setup lang="ts">
import { useGalleryStore } from "../stores/gallery";
import { Settings, CheckSquare, Type, Palette, Copy, Eraser, PlusSquare, Brush, Sparkles, Trash2, RotateCw } from 'lucide-vue-next';
import { computed } from "vue";

const store = useGalleryStore();

// Computed properties to handle "Get from Image OR Global" and "Set to Image" logic
const currentScale = computed({
    get: () => store.selectedImage?.scale ?? store.watermarkSettings.scale,
    set: (val) => {
        if (store.selectedIndex >= 0) {
            store.setImageSetting(store.selectedIndex, 'scale', val);
        } else {
            store.updateWatermarkSettings({ scale: val });
        }
    }
});

const currentOpacity = computed({
    get: () => store.selectedImage?.opacity ?? store.watermarkSettings.opacity,
    set: (val) => {
        if (store.selectedIndex >= 0) {
            store.setImageSetting(store.selectedIndex, 'opacity', val);
        } else {
            store.updateWatermarkSettings({ opacity: val });
        }
    }
});

const currentColor = computed({
    get: () => store.selectedImage?.color ?? store.watermarkSettings.color,
    set: (val) => {
        if (store.selectedIndex >= 0) {
            store.setImageSetting(store.selectedIndex, 'color', val);
        } else {
            store.updateWatermarkSettings({ color: val });
        }
    }
});

const applyAll = () => {
    if (confirm("Apply current settings (Size, Opacity, Color) to ALL images?")) {
        store.applySettingsToAll();
    }
};
</script>

<template>
  <div class="h-full bg-gray-800 text-white flex flex-col w-80 border-l border-gray-700">
      
      <!-- Mode Switcher Tabs -->
      <div class="flex border-b border-gray-700">
          <button 
            @click="store.editMode = 'add'"
            class="flex-1 py-3 text-sm font-medium flex items-center justify-center gap-2 transition-colors"
            :class="store.editMode === 'add' ? 'bg-gray-700 text-blue-400 border-b-2 border-blue-400' : 'text-gray-400 hover:bg-gray-750'"
          >
            <PlusSquare class="w-4 h-4" /> Add
          </button>
          <button 
            @click="store.editMode = 'remove'"
            class="flex-1 py-3 text-sm font-medium flex items-center justify-center gap-2 transition-colors"
            :class="store.editMode === 'remove' ? 'bg-gray-700 text-red-400 border-b-2 border-red-400' : 'text-gray-400 hover:bg-gray-750'"
          >
            <Eraser class="w-4 h-4" /> Remove
          </button>
      </div>

      <!-- Content Area -->
      <div class="flex-1 overflow-y-auto p-4 flex flex-col gap-6">
          
          <!-- ADD MODE SETTINGS -->
          <div v-if="store.editMode === 'add'" class="flex flex-col gap-6">
            <h2 class="text-lg font-bold flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <Settings class="w-5 h-5" />
                    Watermark
                </div>
                <button 
                    @click="applyAll" 
                    title="Apply Settings to All Images"
                    class="bg-gray-700 hover:bg-gray-600 p-1.5 rounded text-xs text-blue-300 transition-colors flex items-center gap-1"
                >
                    <Copy class="w-3 h-3" /> All
                </button>
            </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="flex gap-2">
                    <div class="relative flex-1">
                        <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>
                    <button 
                        @click="store.recalcAllWatermarks()"
                        class="bg-blue-600 hover:bg-blue-500 text-white p-2 rounded flex items-center justify-center transition-colors"
                        title="Apply & Recalculate Layout for ALL Images"
                    >
                        <RotateCw class="w-4 h-4" />
                    </button>
                </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="currentColor"
                        class="w-8 h-8 rounded cursor-pointer bg-transparent border-none p-0"
                    />
                    <span class="text-xs text-gray-300 font-mono">{{ currentColor }}</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">{{ (currentScale * 100).toFixed(1) }}%</span>
                    </div>
                    <input 
                        type="range" 
                        min="0.01" 
                        max="0.20" 
                        step="0.001" 
                        v-model.number="currentScale"
                        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">{{ (currentOpacity * 100).toFixed(0) }}%</span>
                    </div>
                    <input 
                        type="range" 
                        min="0.1" 
                        max="1.0" 
                        step="0.01" 
                        v-model.number="currentOpacity"
                        class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
                    />
                </div>
            </div>

            <!-- Placement Info -->
            <div class="flex flex-col gap-2">
                <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Placement Status</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.selectedImage?.manualPosition" />
                        <div class="w-4 h-4" v-else></div>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-200" v-if="!store.selectedImage?.manualPosition">Auto (ZCA)</p>
                        <p class="text-sm font-medium text-blue-300" v-else>Manual Override</p>
                    </div>
                </div>
            </div>
          </div>

          <!-- REMOVE MODE SETTINGS -->
          <div v-else class="flex flex-col gap-6">
             <h2 class="text-lg font-bold flex items-center gap-2 text-red-400">
                <Brush class="w-5 h-5" />
                Magic Eraser
            </h2>

            <!-- Auto Detect Controls -->
            <div class="flex gap-2">
                <button 
                    @click="store.selectedIndex >= 0 && store.detectWatermark(store.selectedIndex)"
                    class="flex-1 bg-blue-600 hover:bg-blue-500 text-white py-2 rounded flex items-center justify-center gap-2 text-sm transition-colors"
                    :disabled="store.selectedIndex < 0"
                >
                    <Sparkles class="w-4 h-4" /> Auto Detect
                </button>
                <button 
                    @click="store.selectedIndex >= 0 && store.clearMask(store.selectedIndex)"
                    class="bg-gray-700 hover:bg-gray-600 text-gray-300 px-3 rounded flex items-center justify-center transition-colors"
                    title="Clear Mask"
                    :disabled="store.selectedIndex < 0"
                >
                    <Trash2 class="w-4 h-4" />
                </button>
            </div>

            <p class="text-xs text-gray-400">Paint over the watermark you want to remove. The AI will fill in the background.</p>

            <div>
                <div class="flex justify-between mb-1">
                    <label class="text-xs text-gray-400">Brush Size</label>
                    <span class="text-xs text-gray-300">{{ store.brushSettings.size }}px</span>
                </div>
                <input 
                    type="range" 
                    min="5" 
                    max="100" 
                    step="1" 
                    v-model.number="store.brushSettings.size"
                    class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-red-500"
                />
            </div>
            
            <div class="p-3 bg-red-900/20 border border-red-900/50 rounded text-xs text-red-200">
                AI Inpainting is not yet connected. Masking preview only.
            </div>
          </div>

      </div>
  </div>
</template>
