<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { api } from '@/api'
import SecuritySettings from '@/components/SecuritySettings.vue'

const authStore = useAuthStore()

const currentPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const loading = ref(false)
const message = ref('')
const error = ref('')
const showSecuritySettings = ref(false)

// Logo upload
const logoFile = ref<File | null>(null)
const logoPreview = ref<string | null>(null)
const logoLoading = ref(false)
const logoMessage = ref('')
const logoError = ref('')
const fileInput = ref<HTMLInputElement | null>(null)

// App lock status
const lockMethod = ref<string | null>(null)

onMounted(() => {
  lockMethod.value = localStorage.getItem('lockMethod')
  // Store email for biometric setup
  if (authStore.user?.email) {
    localStorage.setItem('userEmail', authStore.user.email)
  }
  // Set logo preview from current org logo
  if (authStore.orgLogo) {
    logoPreview.value = authStore.orgLogo
  }
})

function handleLogoSelect(event: Event) {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  
  if (!file) return
  
  // Validate file type
  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml']
  if (!allowedTypes.includes(file.type)) {
    logoError.value = 'Nur JPG, PNG, WebP oder SVG erlaubt'
    return
  }
  
  // Validate file size (5MB)
  if (file.size > 5 * 1024 * 1024) {
    logoError.value = 'Datei zu groß (max 5MB)'
    return
  }
  
  logoFile.value = file
  logoError.value = ''
  
  // Create preview
  const reader = new FileReader()
  reader.onload = (e) => {
    logoPreview.value = e.target?.result as string
  }
  reader.readAsDataURL(file)
}

async function uploadLogo() {
  if (!logoFile.value) return
  
  logoLoading.value = true
  logoError.value = ''
  logoMessage.value = ''
  
  try {
    const formData = new FormData()
    formData.append('logo', logoFile.value)
    
    const response = await api.post('/uploads/logo', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    logoMessage.value = 'Logo erfolgreich hochgeladen'
    logoFile.value = null
    
    // Update store with new logo URL
    authStore.setOrgLogo(response.data.logo_url)
    logoPreview.value = response.data.logo_url
  } catch (e) {
    logoError.value = e instanceof Error ? e.message : 'Fehler beim Hochladen'
  } finally {
    logoLoading.value = false
  }
}

async function deleteLogo() {
  if (!confirm('Logo wirklich löschen?')) return
  
  logoLoading.value = true
  logoError.value = ''
  
  try {
    await api.delete('/uploads/logo')
    logoMessage.value = 'Logo gelöscht'
    logoPreview.value = null
    logoFile.value = null
    authStore.setOrgLogo(null)
  } catch (e) {
    logoError.value = e instanceof Error ? e.message : 'Fehler beim Löschen'
  } finally {
    logoLoading.value = false
  }
}

const lockStatusText = computed(() => {
  if (!lockMethod.value || lockMethod.value === 'none') return 'Deaktiviert'
  if (lockMethod.value === 'biometric') return 'Fingerabdruck / Face ID'
  if (lockMethod.value === 'pin') return 'PIN-Code'
  return 'Unbekannt'
})

const lockStatusClass = computed(() => {
  if (!lockMethod.value || lockMethod.value === 'none') {
    return 'bg-red-100 text-red-700'
  }
  return 'bg-green-100 text-green-700'
})

async function changePassword() {
  if (newPassword.value !== confirmPassword.value) {
    error.value = 'Passwörter stimmen nicht überein'
    return
  }
  
  if (newPassword.value.length < 8) {
    error.value = 'Passwort muss mindestens 8 Zeichen haben'
    return
  }

  loading.value = true
  error.value = ''
  message.value = ''

  try {
    await api.post('/auth/change-password', {
      currentPassword: currentPassword.value,
      newPassword: newPassword.value
    })
    message.value = 'Passwort erfolgreich geändert'
    currentPassword.value = ''
    newPassword.value = ''
    confirmPassword.value = ''
  } catch (e) {
    error.value = e instanceof Error ? e.message : 'Fehler beim Ändern'
  } finally {
    loading.value = false
  }
}

function handleSecurityClose() {
  showSecuritySettings.value = false
  lockMethod.value = localStorage.getItem('lockMethod')
}
</script>

<template>
  <div class="space-y-6">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">🔧 Einstellungen</h1>

    <!-- Profile -->
    <div class="card">
      <h2 class="text-lg font-semibold mb-4">👤 Profil</h2>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm text-gray-500">Name</label>
          <p class="font-medium">{{ authStore.fullName }}</p>
        </div>
        <div>
          <label class="block text-sm text-gray-500">E-Mail</label>
          <p class="font-medium">{{ authStore.user?.email }}</p>
        </div>
        <div>
          <label class="block text-sm text-gray-500">Rolle</label>
          <p class="font-medium capitalize">{{ authStore.user?.role }}</p>
        </div>
        <div>
          <label class="block text-sm text-gray-500">Organisation</label>
          <p class="font-medium">{{ authStore.orgName }}</p>
        </div>
      </div>
    </div>

    <!-- Organization Logo (Chef only) -->
    <div v-if="authStore.isChef" class="card">
      <h2 class="text-lg font-semibold mb-4">🏢 Firmenlogo</h2>
      <p class="text-gray-600 text-sm mb-4">
        Lade ein Logo für deine Organisation hoch. Deine Mitarbeiter sehen es in der Sidebar.
      </p>
      
      <div class="flex items-start gap-6">
        <!-- Logo Preview -->
        <div class="flex-shrink-0">
          <div class="w-32 h-32 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg flex items-center justify-center overflow-hidden bg-gray-50 dark:bg-gray-700">
            <img 
              v-if="logoPreview" 
              :src="logoPreview" 
              alt="Logo Vorschau"
              class="max-w-full max-h-full object-contain"
            >
            <span v-else class="text-4xl text-gray-400">🏢</span>
          </div>
        </div>
        
        <!-- Upload Controls -->
        <div class="flex-1 space-y-4">
          <div>
            <input
              ref="fileInput"
              type="file"
              accept="image/jpeg,image/png,image/webp,image/svg+xml"
              class="hidden"
              @change="handleLogoSelect"
            >
            <button
              type="button"
              class="btn btn-secondary"
              @click="fileInput?.click()"
            >
              📁 Datei auswählen
            </button>
            <span v-if="logoFile" class="ml-3 text-sm text-gray-600 dark:text-gray-400">
              {{ logoFile.name }}
            </span>
          </div>
          
          <p class="text-xs text-gray-500">
            JPG, PNG, WebP oder SVG • max. 5MB • empfohlen: 200x80px
          </p>
          
          <div class="flex gap-2">
            <button
              v-if="logoFile"
              type="button"
              :disabled="logoLoading"
              class="btn btn-primary"
              @click="uploadLogo"
            >
              {{ logoLoading ? 'Hochladen...' : '⬆️ Hochladen' }}
            </button>
            <button
              v-if="authStore.orgLogo"
              type="button"
              :disabled="logoLoading"
              class="btn btn-secondary text-red-600 hover:bg-red-50"
              @click="deleteLogo"
            >
              🗑️ Logo löschen
            </button>
          </div>
          
          <div v-if="logoError" class="text-red-600 text-sm">{{ logoError }}</div>
          <div v-if="logoMessage" class="text-green-600 text-sm">{{ logoMessage }}</div>
        </div>
      </div>
    </div>

    <!-- App Security -->
    <div class="card">
      <h2 class="text-lg font-semibold mb-4">🔐 App-Sicherheit</h2>
      <p class="text-gray-600 text-sm mb-4">
        Schütze deine App mit Fingerabdruck, Face ID oder PIN. 
        Bei jedem Öffnen der App musst du dich verifizieren.
      </p>
      
      <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
        <div>
          <div class="font-medium">App-Sperre</div>
          <div :class="['inline-block px-2 py-1 rounded text-sm mt-1', lockStatusClass]">
            {{ lockStatusText }}
          </div>
        </div>
        <button 
          @click="showSecuritySettings = true"
          class="btn btn-primary"
        >
          Konfigurieren
        </button>
      </div>
    </div>

    <!-- Change Password -->
    <div class="card">
      <h2 class="text-lg font-semibold mb-4">🔑 Passwort ändern</h2>
      <form @submit.prevent="changePassword" class="space-y-4 max-w-md">
        <div>
          <label class="block text-sm font-medium mb-1">Aktuelles Passwort</label>
          <input v-model="currentPassword" type="password" required class="input" />
        </div>
        <div>
          <label class="block text-sm font-medium mb-1">Neues Passwort</label>
          <input v-model="newPassword" type="password" required class="input" />
        </div>
        <div>
          <label class="block text-sm font-medium mb-1">Passwort bestätigen</label>
          <input v-model="confirmPassword" type="password" required class="input" />
        </div>

        <div v-if="error" class="text-red-600 text-sm">{{ error }}</div>
        <div v-if="message" class="text-green-600 text-sm">{{ message }}</div>

        <button type="submit" :disabled="loading" class="btn btn-primary">
          {{ loading ? 'Speichern...' : 'Passwort ändern' }}
        </button>
      </form>
    </div>

    <!-- Security Settings Modal -->
    <SecuritySettings 
      v-if="showSecuritySettings" 
      @close="handleSecurityClose" 
    />
  </div>
</template>
