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

const { t } = useI18n()
const authStore = useAuthStore()

interface QualificationType {
  id: string
  key: string
  name: string
  description?: string
  category: string
  has_expiry: boolean
  validity_months?: number
  icon: string
  source: 'system' | 'custom'
}

interface Qualification {
  id: string
  user_id: string
  first_name: string
  last_name: string
  email: string
  qualification_key: string
  qualification_name: string
  category: string
  icon: string
  issued_date?: string
  expiry_date?: string
  issuer?: string
  certificate_number?: string
  level?: string
  document_url?: string
  status: string
  expiry_status: 'valid' | 'expiring_soon' | 'expired' | 'no_expiry'
  days_until_expiry?: number
}

interface Category {
  key: string
  name: string
  icon: string
}

const loading = ref(true)
const qualifications = ref<Qualification[]>([])
const qualificationTypes = ref<{ system: QualificationType[], custom: QualificationType[], categories: Category[] }>({
  system: [],
  custom: [],
  categories: []
})
const expiringData = ref<{ expired: Qualification[], expiring_soon: Qualification[] }>({
  expired: [],
  expiring_soon: []
})
const users = ref<any[]>([])

const filterUser = ref('')
const filterCategory = ref('')
const filterStatus = ref('')
const searchQuery = ref('')

const showModal = ref(false)
const editingQualification = ref<any>(null)
const formData = ref({
  user_id: '',
  qualification_type_id: '',
  org_qualification_type_id: '',
  issued_date: '',
  expiry_date: '',
  issuer: '',
  certificate_number: '',
  level: '',
  notes: ''
})
const saving = ref(false)
const activeTab = ref<'list' | 'expiring' | 'matrix'>('list')

onMounted(async () => {
  await Promise.all([
    loadQualificationTypes(),
    loadQualifications(),
    loadExpiringQualifications(),
    loadUsers()
  ])
  loading.value = false
})

async function loadQualificationTypes() {
  try {
    const data = await api.get('/qualifications/types')
    qualificationTypes.value = data
  } catch (e) {
    console.error('Failed to load types:', e)
  }
}

async function loadQualifications() {
  try {
    qualifications.value = await api.get('/qualifications')
  } catch (e) {
    console.error('Failed to load qualifications:', e)
  }
}

async function loadExpiringQualifications() {
  try {
    expiringData.value = await api.get('/qualifications/expiring?days=30')
  } catch (e) {
    console.error('Failed to load expiring:', e)
  }
}

async function loadUsers() {
  try {
    users.value = await api.get('/users')
  } catch (e) {
    console.error('Failed to load users:', e)
  }
}

const filteredQualifications = computed(() => {
  let result = [...qualifications.value]
  if (filterUser.value) result = result.filter(q => q.user_id === filterUser.value)
  if (filterCategory.value) result = result.filter(q => q.category === filterCategory.value)
  if (filterStatus.value) result = result.filter(q => q.expiry_status === filterStatus.value)
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(q => 
      q.qualification_name.toLowerCase().includes(query) ||
      q.first_name.toLowerCase().includes(query) ||
      q.last_name.toLowerCase().includes(query)
    )
  }
  return result
})

const allTypes = computed(() => [...qualificationTypes.value.system, ...qualificationTypes.value.custom])

function openAddModal() {
  editingQualification.value = null
  formData.value = { user_id: '', qualification_type_id: '', org_qualification_type_id: '', issued_date: '', expiry_date: '', issuer: '', certificate_number: '', level: '', notes: '' }
  showModal.value = true
}

function openEditModal(qual: Qualification) {
  editingQualification.value = qual
  formData.value = { user_id: qual.user_id, qualification_type_id: '', org_qualification_type_id: '', issued_date: qual.issued_date || '', expiry_date: qual.expiry_date || '', issuer: qual.issuer || '', certificate_number: qual.certificate_number || '', level: qual.level || '', notes: '' }
  showModal.value = true
}

async function saveQualification() {
  if (!formData.value.user_id || (!formData.value.qualification_type_id && !formData.value.org_qualification_type_id)) return
  saving.value = true
  try {
    if (editingQualification.value) {
      await api.put(`/qualifications/${editingQualification.value.id}`, formData.value)
    } else {
      await api.post('/qualifications', formData.value)
    }
    showModal.value = false
    await loadQualifications()
    await loadExpiringQualifications()
  } catch (e) {
    console.error('Failed to save:', e)
  } finally {
    saving.value = false
  }
}

async function deleteQualification(id: string) {
  if (!confirm(t('messages.confirmDelete'))) return
  try {
    await api.delete(`/qualifications/${id}`)
    await loadQualifications()
    await loadExpiringQualifications()
  } catch (e) {
    console.error('Failed to delete:', e)
  }
}

function getStatusColor(status: string): string {
  switch (status) {
    case 'valid': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
    case 'expiring_soon': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
    case 'expired': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
    case 'no_expiry': return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
    default: return 'bg-gray-100 text-gray-800'
  }
}

function getStatusLabel(status: string): string {
  switch (status) {
    case 'valid': return t('qualifications.valid')
    case 'expiring_soon': return t('qualifications.expiringSoon')
    case 'expired': return t('qualifications.expired')
    case 'no_expiry': return '♾️'
    default: return status
  }
}

function formatDate(date: string | undefined): string {
  if (!date) return '-'
  return new Date(date).toLocaleDateString()
}

function selectQualificationType(type: QualificationType) {
  if (type.source === 'system') {
    formData.value.qualification_type_id = type.id
    formData.value.org_qualification_type_id = ''
  } else {
    formData.value.org_qualification_type_id = type.id
    formData.value.qualification_type_id = ''
  }
}

const selectedTypeName = computed(() => {
  const typeId = formData.value.qualification_type_id || formData.value.org_qualification_type_id
  if (!typeId) return ''
  const type = allTypes.value.find(t => t.id === typeId)
  return type ? `${type.icon} ${type.name}` : ''
})
</script>

<template>
  <div class="space-y-6">
    <div class="flex items-center justify-between">
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">🎓 {{ t('qualifications.title') }}</h1>
      <button v-if="authStore.canManageUsers" @click="openAddModal" class="btn btn-primary">
        ➕ {{ t('qualifications.new') }}
      </button>
    </div>

    <!-- Tabs -->
    <div class="flex gap-2 border-b dark:border-gray-700">
      <button @click="activeTab = 'list'" :class="['px-4 py-2 font-medium border-b-2 transition-colors', activeTab === 'list' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700']">
        📋 {{ t('dashboard.overview') }}
      </button>
      <button @click="activeTab = 'expiring'" :class="['px-4 py-2 font-medium border-b-2 transition-colors flex items-center gap-2', activeTab === 'expiring' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700']">
        ⚠️ {{ t('qualifications.expiringSoon') }}
        <span v-if="expiringData.expired.length + expiringData.expiring_soon.length > 0" class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">
          {{ expiringData.expired.length + expiringData.expiring_soon.length }}
        </span>
      </button>
      <button v-if="authStore.canManageUsers" @click="activeTab = 'matrix'" :class="['px-4 py-2 font-medium border-b-2 transition-colors', activeTab === 'matrix' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700']">
        📊 Matrix
      </button>
    </div>

    <div v-if="loading" class="text-center py-12">
      <div class="animate-spin text-4xl">⏳</div>
      <p class="mt-2 text-gray-500">{{ t('app.loading') }}</p>
    </div>

    <!-- List Tab -->
    <div v-else-if="activeTab === 'list'" class="space-y-4">
      <div class="card">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label class="block text-sm font-medium mb-1">🔍 {{ t('app.search') }}</label>
            <input v-model="searchQuery" type="text" class="input" :placeholder="t('app.search') + '...'" />
          </div>
          <div>
            <label class="block text-sm font-medium mb-1">👤 {{ t('users.employee') }}</label>
            <select v-model="filterUser" class="input">
              <option value="">{{ t('app.all') }}</option>
              <option v-for="user in users" :key="user.id" :value="user.id">{{ user.first_name }} {{ user.last_name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium mb-1">📂 {{ t('documents.category') }}</label>
            <select v-model="filterCategory" class="input">
              <option value="">{{ t('app.all') }}</option>
              <option v-for="cat in qualificationTypes.categories" :key="cat.key" :value="cat.key">{{ cat.icon }} {{ cat.name }}</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium mb-1">📊 {{ t('app.status') }}</label>
            <select v-model="filterStatus" class="input">
              <option value="">{{ t('app.all') }}</option>
              <option value="valid">✅ {{ t('qualifications.valid') }}</option>
              <option value="expiring_soon">⚠️ {{ t('qualifications.expiringSoon') }}</option>
              <option value="expired">❌ {{ t('qualifications.expired') }}</option>
            </select>
          </div>
        </div>
      </div>

      <div v-if="filteredQualifications.length === 0" class="card text-center py-12 text-gray-500">{{ t('messages.noData') }}</div>

      <div v-else class="grid gap-4">
        <div v-for="qual in filteredQualifications" :key="qual.id" class="card hover:shadow-md transition-shadow">
          <div class="flex items-start justify-between">
            <div class="flex items-start gap-4">
              <div class="text-3xl">{{ qual.icon }}</div>
              <div>
                <h3 class="font-semibold text-gray-900 dark:text-white">{{ qual.qualification_name }}</h3>
                <p class="text-sm text-gray-500">{{ qual.first_name }} {{ qual.last_name }}</p>
                <div class="flex flex-wrap gap-2 mt-2">
                  <span :class="['px-2 py-0.5 rounded text-xs font-medium', getStatusColor(qual.expiry_status)]">{{ getStatusLabel(qual.expiry_status) }}</span>
                  <span v-if="qual.expiry_date" class="text-xs text-gray-500">📅 {{ formatDate(qual.expiry_date) }}</span>
                  <span v-if="qual.issuer" class="text-xs text-gray-500">🏢 {{ qual.issuer }}</span>
                </div>
              </div>
            </div>
            <div v-if="authStore.canManageUsers" class="flex gap-2">
              <button @click="openEditModal(qual)" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">✏️</button>
              <button @click="deleteQualification(qual.id)" class="p-2 hover:bg-red-100 dark:hover:bg-red-900 rounded text-red-600">🗑️</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Expiring Tab -->
    <div v-else-if="activeTab === 'expiring'" class="space-y-6">
      <div v-if="expiringData.expired.length > 0" class="space-y-4">
        <h2 class="text-lg font-semibold text-red-600 flex items-center gap-2">❌ {{ t('qualifications.expired') }} ({{ expiringData.expired.length }})</h2>
        <div class="grid gap-3">
          <div v-for="qual in expiringData.expired" :key="qual.id" class="card border-l-4 border-red-500 bg-red-50 dark:bg-red-900/20">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-3">
                <span class="text-2xl">{{ qual.icon }}</span>
                <div>
                  <p class="font-medium">{{ qual.qualification_name }}</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">{{ qual.first_name }} {{ qual.last_name }}</p>
                </div>
              </div>
              <div class="text-right">
                <p class="text-sm font-medium text-red-600">{{ t('qualifications.expired') }}</p>
                <p class="text-sm text-gray-500">{{ formatDate(qual.expiry_date) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="expiringData.expiring_soon.length > 0" class="space-y-4">
        <h2 class="text-lg font-semibold text-yellow-600 flex items-center gap-2">⚠️ {{ t('qualifications.expiringSoon') }} ({{ expiringData.expiring_soon.length }})</h2>
        <div class="grid gap-3">
          <div v-for="qual in expiringData.expiring_soon" :key="qual.id" class="card border-l-4 border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-3">
                <span class="text-2xl">{{ qual.icon }}</span>
                <div>
                  <p class="font-medium">{{ qual.qualification_name }}</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">{{ qual.first_name }} {{ qual.last_name }}</p>
                </div>
              </div>
              <div class="text-right">
                <p class="text-sm font-medium text-yellow-600">{{ qual.days_until_expiry }} {{ t('time.days') }}</p>
                <p class="text-sm text-gray-500">{{ formatDate(qual.expiry_date) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="expiringData.expired.length === 0 && expiringData.expiring_soon.length === 0" class="card text-center py-12">
        <div class="text-4xl mb-4">✅</div>
        <p class="text-lg font-medium text-green-600">{{ t('messages.success') }}</p>
      </div>
    </div>

    <!-- Matrix Tab -->
    <div v-else-if="activeTab === 'matrix'" class="card">
      <p class="text-gray-500 text-center py-12">📊 Matrix</p>
    </div>

    <!-- Modal -->
    <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
        <div class="p-6">
          <h2 class="text-xl font-semibold mb-4">{{ editingQualification ? '✏️ ' + t('app.edit') : '➕ ' + t('qualifications.new') }}</h2>
          <form @submit.prevent="saveQualification" class="space-y-4">
            <div v-if="!editingQualification">
              <label class="block text-sm font-medium mb-1">{{ t('users.employee') }} *</label>
              <select v-model="formData.user_id" class="input" required>
                <option value="">{{ t('app.search') }}...</option>
                <option v-for="user in users" :key="user.id" :value="user.id">{{ user.first_name }} {{ user.last_name }}</option>
              </select>
            </div>
            <div v-if="!editingQualification">
              <label class="block text-sm font-medium mb-1">{{ t('qualifications.type') }} *</label>
              <div class="grid grid-cols-1 gap-2 max-h-48 overflow-y-auto border dark:border-gray-600 rounded-lg p-2">
                <div v-for="cat in qualificationTypes.categories" :key="cat.key" class="space-y-1">
                  <p class="text-xs font-medium text-gray-500 sticky top-0 bg-white dark:bg-gray-800 py-1">{{ cat.icon }} {{ cat.name }}</p>
                  <button v-for="type in allTypes.filter(t => t.category === cat.key)" :key="type.id" type="button" @click="selectQualificationType(type)" :class="['w-full text-left px-3 py-2 rounded text-sm transition-colors', (formData.qualification_type_id === type.id || formData.org_qualification_type_id === type.id) ? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200' : 'hover:bg-gray-100 dark:hover:bg-gray-700']">
                    {{ type.icon }} {{ type.name }}
                  </button>
                </div>
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium mb-1">{{ t('qualifications.issueDate') }}</label>
                <input v-model="formData.issued_date" type="date" class="input" />
              </div>
              <div>
                <label class="block text-sm font-medium mb-1">{{ t('qualifications.expiryDate') }}</label>
                <input v-model="formData.expiry_date" type="date" class="input" />
              </div>
            </div>
            <div>
              <label class="block text-sm font-medium mb-1">{{ t('qualifications.issuedBy') }}</label>
              <input v-model="formData.issuer" type="text" class="input" />
            </div>
            <div class="flex gap-3 pt-4">
              <button type="button" @click="showModal = false" class="btn flex-1">{{ t('app.cancel') }}</button>
              <button type="submit" :disabled="saving" class="btn btn-primary flex-1">{{ saving ? t('app.loading') : t('app.save') }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
