<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores/app'
import {
  dataManagementAPI,
  type DataManagementSourceProfile
} from '@/api/admin/dataManagement'
import BaseDialog from '@/components/common/BaseDialog.vue'

const { t } = useI18n()
const appStore = useAppStore()

const loading = ref(false)
const profiles = ref<DataManagementSourceProfile[]>([])
const showModal = ref(false)
const editing = ref<DataManagementSourceProfile | null>(null)
const saving = ref(false)

const form = ref<{
  profile_id: string
  name: string
  config: {
    addr: string
    username: string
    password: string
    db: number
    container_name: string
  }
  set_active: boolean
}>({
  profile_id: '',
  name: '',
  config: {
    addr: 'localhost:6379',
    username: '',
    password: '',
    db: 0,
    container_name: ''
  },
  set_active: false
})

async function fetchProfiles() {
  loading.value = true
  try {
    const resp = await dataManagementAPI.listSourceProfiles('redis')
    profiles.value = resp.items
  } catch (err: any) {
    console.error('[RedisProfilesCard] Failed to fetch profiles', err)
    appStore.showError(err?.response?.data?.detail || t('common.loadFailed'))
  } finally {
    loading.value = false
  }
}

function openModal(profile?: DataManagementSourceProfile) {
  if (profile) {
    editing.value = profile
    form.value = {
      profile_id: profile.profile_id,
      name: profile.name,
      config: {
        addr: profile.config.addr,
        username: profile.config.username,
        password: '',
        db: profile.config.db,
        container_name: profile.config.container_name
      },
      set_active: false
    }
  } else {
    editing.value = null
    form.value = {
      profile_id: '',
      name: '',
      config: {
        addr: 'localhost:6379',
        username: '',
        password: '',
        db: 0,
        container_name: ''
      },
      set_active: false
    }
  }
  showModal.value = true
}

function closeModal() {
  showModal.value = false
  editing.value = null
}

async function save() {
  saving.value = true
  try {
    if (editing.value) {
      await dataManagementAPI.updateSourceProfile('redis', form.value.profile_id, {
        name: form.value.name,
        config: {
          host: '',
          port: 0,
          user: '',
          password: form.value.config.password,
          database: '',
          ssl_mode: '',
          addr: form.value.config.addr,
          username: form.value.config.username,
          db: form.value.config.db,
          container_name: form.value.config.container_name
        }
      })
    } else {
      await dataManagementAPI.createSourceProfile('redis', {
        profile_id: form.value.profile_id,
        name: form.value.name,
        config: {
          host: '',
          port: 0,
          user: '',
          password: form.value.config.password,
          database: '',
          ssl_mode: '',
          addr: form.value.config.addr,
          username: form.value.config.username,
          db: form.value.config.db,
          container_name: form.value.config.container_name
        },
        set_active: form.value.set_active
      })
    }
    await fetchProfiles()
    closeModal()
    appStore.showSuccess(t('common.saved'))
  } catch (err: any) {
    console.error('[RedisProfilesCard] Failed to save profile', err)
    appStore.showError(err?.response?.data?.detail || t('common.saveFailed'))
  } finally {
    saving.value = false
  }
}

async function activate(profileId: string) {
  try {
    await dataManagementAPI.setActiveSourceProfile('redis', profileId)
    await fetchProfiles()
    appStore.showSuccess(t('common.saved'))
  } catch (err: any) {
    console.error('[RedisProfilesCard] Failed to activate profile', err)
    appStore.showError(err?.response?.data?.detail || t('common.saveFailed'))
  }
}

async function remove(profileId: string) {
  if (!confirm(t('admin.dataManagement.profiles.confirmDelete'))) return
  try {
    await dataManagementAPI.deleteSourceProfile('redis', profileId)
    await fetchProfiles()
    appStore.showSuccess(t('common.deleted'))
  } catch (err: any) {
    console.error('[RedisProfilesCard] Failed to delete profile', err)
    appStore.showError(err?.response?.data?.detail || t('common.deleteFailed'))
  }
}

onMounted(fetchProfiles)

defineExpose({ refresh: fetchProfiles })
</script>

<template>
  <div class="card p-6">
    <div class="mb-4 flex items-center justify-between">
      <div>
        <h3 class="text-base font-semibold text-gray-900 dark:text-white">
          {{ t('admin.dataManagement.redis.title') }}
        </h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
          {{ t('admin.dataManagement.redis.description') }}
        </p>
      </div>
      <button type="button" class="btn btn-primary btn-sm" @click="openModal()">
        {{ t('admin.dataManagement.redis.addProfile') }}
      </button>
    </div>

    <div v-if="loading" class="py-8 text-center text-gray-500 dark:text-gray-400">
      {{ t('common.loading') }}
    </div>
    <div v-else-if="profiles.length === 0" class="py-8 text-center text-gray-500 dark:text-gray-400">
      {{ t('admin.dataManagement.redis.noProfiles') }}
    </div>
    <div v-else class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead>
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
              {{ t('admin.dataManagement.profiles.name') }}
            </th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
              {{ t('admin.dataManagement.redis.address') }}
            </th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
              {{ t('admin.dataManagement.redis.database') }}
            </th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
              {{ t('admin.dataManagement.profiles.status') }}
            </th>
            <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
              {{ t('common.actions') }}
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
          <tr v-for="profile in profiles" :key="profile.profile_id">
            <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
              {{ profile.name }}
            </td>
            <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
              {{ profile.config.addr }}
            </td>
            <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
              {{ profile.config.db }}
            </td>
            <td class="whitespace-nowrap px-4 py-3 text-sm">
              <span
                class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
                :class="profile.is_active ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400' : 'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400'"
              >
                {{ profile.is_active ? t('admin.dataManagement.profiles.active') : t('admin.dataManagement.profiles.inactive') }}
              </span>
            </td>
            <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
              <button
                v-if="!profile.is_active"
                type="button"
                class="mr-2 text-primary-600 hover:text-primary-700"
                @click="activate(profile.profile_id)"
              >
                {{ t('admin.dataManagement.profiles.activate') }}
              </button>
              <button
                type="button"
                class="mr-2 text-primary-600 hover:text-primary-700"
                @click="openModal(profile)"
              >
                {{ t('common.edit') }}
              </button>
              <button
                type="button"
                class="text-red-600 hover:text-red-700"
                @click="remove(profile.profile_id)"
              >
                {{ t('common.delete') }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Modal -->
    <BaseDialog
      :show="showModal"
      :title="editing ? t('admin.dataManagement.redis.editProfile') : t('admin.dataManagement.redis.addProfile')"
      width="wide"
      @close="closeModal"
    >
      <form @submit.prevent="save">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">
              {{ t('admin.dataManagement.profiles.profileId') }}
            </label>
            <input
              v-model="form.profile_id"
              :disabled="!!editing"
              class="input w-full"
              required
            />
          </div>
          <div>
            <label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">
              {{ t('admin.dataManagement.profiles.name') }}
            </label>
            <input v-model="form.name" class="input w-full" required />
          </div>
          <div>
            <label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">
              {{ t('admin.dataManagement.redis.address') }}
            </label>
            <input v-model="form.config.addr" class="input w-full" placeholder="localhost:6379" required />
          </div>
          <div>
            <label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">
              {{ t('admin.dataManagement.redis.username') }}
            </label>
            <input v-model="form.config.username" class="input w-full" />
          </div>
          <div>
            <label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">
              {{ t('admin.dataManagement.redis.password') }}
            </label>
            <input v-model="form.config.password" type="password" class="input w-full" />
          </div>
          <div>
            <label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">
              {{ t('admin.dataManagement.redis.database') }}
            </label>
            <input v-model.number="form.config.db" type="number" min="0" class="input w-full" />
          </div>
          <div class="md:col-span-2">
            <label class="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-400">
              {{ t('admin.dataManagement.redis.containerName') }}
            </label>
            <input v-model="form.config.container_name" class="input w-full" />
          </div>
        </div>
        <div class="mt-4 flex justify-end gap-2">
          <button type="button" class="btn btn-secondary" @click="closeModal">
            {{ t('common.cancel') }}
          </button>
          <button type="submit" class="btn btn-primary" :disabled="saving">
            {{ saving ? t('common.loading') : t('common.save') }}
          </button>
        </div>
      </form>
    </BaseDialog>
  </div>
</template>
