<template>
  <div class="profile-page">
    <div class="card">
      <form @submit.prevent="saveProfile" class="profile-form">
        <div class="form-group">
          <label for="fullName">Voller Name (optional)</label>
          <input 
            type="text" 
            id="fullName" 
            v-model="form.fullName"
            placeholder="z.B. Max Mustermann"
          >
        </div>

        <div class="form-group">
          <label for="email">Email-Adresse</label>
          <input 
            type="email" 
            id="email" 
            v-model="form.email"
            placeholder="email@beispiel.de"
            disabled
          >
          <small class="help-text">Die Email-Adresse kann derzeit nicht geändert werden</small>
        </div>

        <div class="form-group">
          <label for="state">Bundesland</label>
          <select 
            id="state" 
            v-model="form.stateId"
          >
            <option value="">Kein Bundesland ausgewählt</option>
            <option 
              v-for="state in availableStates" 
              :key="state.id" 
              :value="state.id"
            >
              {{ state.name }}
            </option>
          </select>
        </div>

        <div class="form-group">
          <label for="weekWorkdays">Arbeitstage pro Woche</label>
          <input 
            type="number" 
            id="weekWorkdays" 
            v-model.number="form.weekWorkdays"
            min="1"
            max="7"
            required
          >
          <small class="help-text">Standard: 5 (Montag bis Freitag)</small>
        </div>

        <div class="form-group">
          <label for="dailyHours">Tägliche Arbeitsstunden (Grundwert)</label>
          <input 
            type="number" 
            id="dailyHours" 
            v-model.number="form.dailyHours"
            min="1"
            max="24"
            required
          >
          <small class="help-text">
            Wird als Fallback verwendet, wenn kein spezifischer Zeitwunsch definiert ist.
            Für detaillierte Zeitwünsche siehe <router-link to="/settings/timewish">Zeitwünsche</router-link>
          </small>
        </div>

        <div class="form-group">
          <label for="titleType">Anzeige in Seitentitel</label>
          <select 
            id="titleType" 
            v-model.number="form.preferredTitleType"
          >
            <option :value="0">Restzeit für Tag ohne Korrektur</option>
            <option :value="1">Restzeit für Tag, korrigiert nach Wochenarbeitszeit</option>
            <option :value="2">Restzeit für Tag, korrigiert nach Gesamtarbeitszeit</option>
            <option :value="3">Heute gearbeitete Zeit</option>
            <option :value="4">Uhrzeit für Arbeitsende ohne Korrektur</option>
            <option :value="5">Uhrzeit für Arbeitsende, korrigiert nach Wochenarbeitszeit</option>
            <option :value="6">Uhrzeit für Arbeitsende, korrigiert nach Gesamtarbeitszeit</option>
            <option :value="7">Nur App-Name</option>
          </select>
        </div>

        <div class="form-group">
          <label>Google-Anmeldung</label>
          <button type="button" class="btn" @click="linkGoogle" :disabled="loading">
            Mit Google-Konto verknüpfen
          </button>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary" :disabled="loading">
            {{ loading ? 'Wird gespeichert...' : 'Einstellungen speichern' }}
          </button>
        </div>
      </form>
    </div>

    <!-- Modal-Komponente -->
    <Modal 
      v-if="showModal"
      :show="showModal"
      :title="modalConfig.title"
      :message="modalConfig.message"
      :type="modalConfig.type"
      :confirmText="modalConfig.confirmText"
      :cancelText="modalConfig.cancelText"
      @confirm="onConfirm" 
      @cancel="onCancel" 
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '../stores/authStore'
import { useModal } from '../composables/useModal'
import Modal from '../components/Modal.vue'
import { API_BASE_URL } from '@/config/api'

const API_URL = API_BASE_URL
const authStore = useAuthStore()
const availableStates = ref([])
const loading = ref(false)

const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()

const form = ref({
  fullName: '',
  email: '',
  stateId: null,
  weekWorkdays: 5,
  dailyHours: 8,
  preferredTitleType: 2
})

// Lade Profil
async function loadProfile() {
  try {
    loading.value = true
    const response = await fetch(`${API_URL}/profile`, {
      headers: {
        'Authorization': `Bearer ${authStore.token}`
      }
    })
    
    if (!response.ok) {
      throw new Error('Fehler beim Laden des Profils')
    }
    
    const profile = await response.json()
    form.value = {
      fullName: profile.fullName || '',
      email: profile.email || '',
      stateId: profile.stateId || null,
      weekWorkdays: profile.weekWorkdays || 5,
      dailyHours: profile.dailyHours || 8,
      preferredTitleType: profile.preferredTitleType || 2
    }
  } catch (error) {
    console.error('Fehler beim Laden des Profils:', error)
    await alert(`Fehler: ${error.message}`, 'Fehler')
  } finally {
    loading.value = false
  }
}

// Lade Bundesländer
async function loadStates() {
  try {
    const response = await fetch(`${API_URL}/profile/states`, {
      headers: {
        'Authorization': `Bearer ${authStore.token}`
      }
    })
    
    if (!response.ok) {
      throw new Error('Fehler beim Laden der Bundesländer')
    }
    
    availableStates.value = await response.json()
  } catch (error) {
    console.error('Fehler beim Laden der Bundesländer:', error)
  }
}

// Speichere Profil
async function saveProfile() {
  try {
    loading.value = true
    const response = await fetch(`${API_URL}/profile`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${authStore.token}`
      },
      body: JSON.stringify({
        fullName: form.value.fullName,
        stateId: form.value.stateId,
        weekWorkdays: form.value.weekWorkdays,
        dailyHours: form.value.dailyHours,
        preferredTitleType: form.value.preferredTitleType
      })
    })
    
    if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || 'Fehler beim Speichern des Profils')
    }
    
    await alert('Einstellungen erfolgreich gespeichert', 'Erfolg')
  } catch (error) {
    console.error('Fehler beim Speichern des Profils:', error)
    await alert(`Fehler: ${error.message}`, 'Fehler')
  } finally {
    loading.value = false
  }
}

async function linkGoogle() {
  try {
    loading.value = true
    const response = await fetch(`${API_URL}/auth/google/link-url`, {
      method: 'POST',
      headers: {
        ...authStore.getAuthHeaders(),
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ platform: 'web' })
    })
    const result = await response.json()
    if (!response.ok || !result.url) {
      throw new Error(result.error || 'Google-Verknüpfung konnte nicht gestartet werden')
    }
    window.location.href = result.url
  } catch (error) {
    await alert(`Fehler: ${error.message}`, 'Fehler')
  } finally {
    loading.value = false
  }
}

// Initiales Laden
onMounted(async () => {
  await Promise.all([
    loadStates(),
    loadProfile()
  ])
})
</script>

<style scoped>
.profile-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.form-group input,
.form-group select {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.form-group input:disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.help-text {
  font-size: 12px;
  color: #666;
  font-style: italic;
}

.help-text a {
  color: #4CAF50;
  text-decoration: none;
}

.help-text a:hover {
  text-decoration: underline;
}

.form-actions {
  margin-top: 10px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
}
</style>
