<template>
  <q-page padding>
    <!-- Overview KPIs -->
    <div class="row q-col-gutter-sm q-mb-md">
      <div v-for="kpi in kpis" :key="kpi.key" class="col-6 col-md-2">
        <q-card flat bordered class="kpi-card" :class="{ 'kpi-active': activeTab === kpi.key }" @click="activeTab = kpi.key">
          <q-card-section class="q-pa-sm text-center">
            <div class="text-h5 text-weight-bold" :style="{ color: kpi.color }">{{ overview[kpi.key] ?? '—' }}</div>
            <div class="text-caption text-grey-7">{{ kpi.label }}</div>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <!-- Tab content -->
    <q-card flat bordered>
      <q-card-section class="q-pb-none">
        <div class="row items-center">
          <q-tabs v-model="activeTab" dense no-caps active-color="primary" indicator-color="primary" class="text-grey-7">
            <q-tab v-for="kpi in kpis" :key="kpi.key" :name="kpi.key" :label="kpi.label" />
          </q-tabs>
          <q-space />
          <q-btn dense unelevated color="primary" icon="add" :label="'Ajouter ' + activeLabel" no-caps
            @click="openCreate" class="q-ml-sm" />
          <q-btn dense flat icon="refresh" @click="loadTab" class="q-ml-xs">
            <q-tooltip>Rafraîchir</q-tooltip>
          </q-btn>
        </div>
      </q-card-section>

      <q-card-section>
        <DataTable
          :rows="rows" :columns="currentColumns" row-key="ref"
          flat dense class="ops-table"
          :loading="tabLoading"
          hide-pagination :pagination="{ rowsPerPage: 0 }"
        >
          <template #body-cell-actions="props">
            <q-td :props="props" class="text-right">
              <q-btn flat dense round icon="edit" size="sm" @click.stop="openEdit(props.row)">
                <q-tooltip>Modifier</q-tooltip>
              </q-btn>
              <q-btn flat dense round icon="delete" size="sm" color="negative" @click.stop="confirmDelete(props.row)">
                <q-tooltip>Supprimer</q-tooltip>
              </q-btn>
            </q-td>
          </template>
          <template #body-cell-enabled="props">
            <q-td :props="props">
              <q-icon :name="props.value ? 'check_circle' : 'cancel'" :color="props.value ? 'green-6' : 'grey-5'" size="18px" />
            </q-td>
          </template>
          <template #no-data>
            <div class="text-center text-grey-5 q-pa-lg">
              Aucun élément. Cliquez sur « Ajouter » pour créer.
            </div>
          </template>
        </DataTable>
      </q-card-section>
    </q-card>

    <!-- Create / Edit Dialog -->
    <q-dialog v-model="dialogOpen" persistent>
      <q-card style="width:500px;max-width:90vw">
        <q-card-section>
          <div class="text-h6">{{ editingRow ? 'Modifier' : 'Créer' }} {{ activeLabel }}</div>
        </q-card-section>
        <q-card-section class="q-gutter-y-sm">
          <template v-for="f in currentFormFields" :key="f.field">
            <q-input v-if="f.type === 'text' || f.type === 'number' || f.type === 'password'"
              v-model="formData[f.field]"
              :label="f.label" :type="f.type === 'password' ? 'password' : f.type === 'number' ? 'number' : 'text'"
              dense outlined />
            <q-select v-else-if="f.type === 'select'"
              v-model="formData[f.field]"
              :label="f.label" :options="f.options" emit-value map-options
              dense outlined />
            <q-toggle v-else-if="f.type === 'toggle'"
              v-model="formData[f.field]"
              :label="f.label" color="primary" />
          </template>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="Annuler" @click="dialogOpen = false" />
          <q-btn unelevated color="primary" :label="editingRow ? 'Sauvegarder' : 'Créer'"
            :loading="saving" @click="saveForm" />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <!-- Delete confirmation -->
    <q-dialog v-model="deleteDialogOpen">
      <q-card style="width:400px">
        <q-card-section>
          <div class="text-h6">Confirmer la suppression</div>
          <div class="q-mt-sm">Supprimer <strong>{{ deletingRow?.name || deletingRow?.ref }}</strong> ?</div>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn flat label="Annuler" @click="deleteDialogOpen = false" />
          <q-btn unelevated color="negative" label="Supprimer" :loading="deleting" @click="doDelete" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import DataTable from 'src/components/shared/DataTable.vue'
import { Notify } from 'quasar'

import { HUB_URL } from 'src/config/hub'

// ── KPI / Tabs ──
const kpis = [
  { key: 'trunks',      label: 'Trunks',      color: '#6366f1' },
  { key: 'agents',      label: 'Agents',       color: '#0ea5e9' },
  { key: 'credentials', label: 'Identifiants', color: '#8b5cf6' },
  { key: 'numbers',     label: 'Numéros',      color: '#10b981' },
  { key: 'domains',     label: 'Domaines',     color: '#f59e0b' },
  { key: 'peers',       label: 'Peers',        color: '#ef4444' },
]

const activeTab = ref('trunks')
const overview = ref({})
const rows = ref([])
const tabLoading = ref(false)

const activeLabel = computed(() => kpis.find(k => k.key === activeTab.value)?.label || activeTab.value)

// ── Column definitions per resource ──
const columnDefs = {
  trunks: [
    { name: 'name', label: 'Nom', field: 'name', align: 'left', sortable: true },
    { name: 'inbound_uri', label: 'URI Entrant', field: 'inbound_uri', align: 'left' },
    { name: 'send_register', label: 'Register', field: 'send_register', align: 'center' },
    { name: 'enabled', label: 'Actif', field: 'enabled', align: 'center' },
    { name: 'actions', label: '', field: 'actions', align: 'right' },
  ],
  agents: [
    { name: 'name', label: 'Nom', field: 'name', align: 'left', sortable: true },
    { name: 'username', label: 'Utilisateur', field: 'username', align: 'left' },
    { name: 'domain', label: 'Domaine', field: r => r.domain_ref || r.domain, align: 'left' },
    { name: 'enabled', label: 'Actif', field: 'enabled', align: 'center' },
    { name: 'actions', label: '', field: 'actions', align: 'right' },
  ],
  credentials: [
    { name: 'name', label: 'Nom', field: 'name', align: 'left', sortable: true },
    { name: 'username', label: 'Utilisateur', field: 'username', align: 'left' },
    { name: 'ref', label: 'Ref', field: 'ref', align: 'left' },
    { name: 'actions', label: '', field: 'actions', align: 'right' },
  ],
  numbers: [
    { name: 'name', label: 'Nom', field: 'name', align: 'left', sortable: true },
    { name: 'tel_url', label: 'Tel URL', field: 'tel_url', align: 'left' },
    { name: 'aor_link', label: 'AOR Link', field: 'aor_link', align: 'left' },
    { name: 'city', label: 'Ville', field: 'city', align: 'left' },
    { name: 'country', label: 'Pays', field: 'country', align: 'left' },
    { name: 'actions', label: '', field: 'actions', align: 'right' },
  ],
  domains: [
    { name: 'name', label: 'Nom', field: 'name', align: 'left', sortable: true },
    { name: 'domain_uri', label: 'URI', field: 'domain_uri', align: 'left' },
    { name: 'ref', label: 'Ref', field: 'ref', align: 'left' },
    { name: 'actions', label: '', field: 'actions', align: 'right' },
  ],
  peers: [
    { name: 'name', label: 'Nom', field: 'name', align: 'left', sortable: true },
    { name: 'aor', label: 'AOR', field: 'aor', align: 'left' },
    { name: 'contact_addr', label: 'Contact', field: 'contact_addr', align: 'left' },
    { name: 'enabled', label: 'Actif', field: 'enabled', align: 'center' },
    { name: 'actions', label: '', field: 'actions', align: 'right' },
  ],
}

const currentColumns = computed(() => columnDefs[activeTab.value] || [])

// ── Form fields per resource ──
const formFieldDefs = {
  trunks: [
    { field: 'name', label: 'Nom', type: 'text' },
    { field: 'inbound_uri', label: 'URI Entrant', type: 'text' },
    { field: 'send_register', label: 'Envoyer REGISTER', type: 'toggle' },
    { field: 'inbound_credentials_ref', label: 'Ref Identifiants', type: 'text' },
    { field: 'outbound_credentials_ref', label: 'Ref Sortant', type: 'text' },
    { field: 'uris', label: 'URIs (JSON array)', type: 'text' },
    { field: 'enabled', label: 'Actif', type: 'toggle' },
  ],
  agents: [
    { field: 'name', label: 'Nom', type: 'text' },
    { field: 'username', label: 'Utilisateur', type: 'text' },
    { field: 'domain_ref', label: 'Ref Domaine', type: 'text' },
    { field: 'credentials_ref', label: 'Ref Identifiants', type: 'text' },
    { field: 'max_contacts', label: 'Max contacts', type: 'number' },
    { field: 'enabled', label: 'Actif', type: 'toggle' },
  ],
  credentials: [
    { field: 'name', label: 'Nom', type: 'text' },
    { field: 'username', label: 'Utilisateur', type: 'text' },
    { field: 'password', label: 'Mot de passe', type: 'password' },
  ],
  numbers: [
    { field: 'name', label: 'Nom', type: 'text' },
    { field: 'tel_url', label: 'Tel URL (tel:+15551234567)', type: 'text' },
    { field: 'aor_link', label: 'AOR Link', type: 'text' },
    { field: 'city', label: 'Ville', type: 'text' },
    { field: 'country', label: 'Pays', type: 'text' },
    { field: 'country_iso_code', label: 'Code ISO', type: 'text' },
    { field: 'trunk_ref', label: 'Ref Trunk', type: 'text' },
  ],
  domains: [
    { field: 'name', label: 'Nom', type: 'text' },
    { field: 'domain_uri', label: 'URI du domaine', type: 'text' },
    { field: 'rule', label: 'Règle', type: 'text' },
    { field: 'egressPolicies', label: 'Politiques sortantes (JSON)', type: 'text' },
  ],
  peers: [
    { field: 'name', label: 'Nom', type: 'text' },
    { field: 'aor', label: 'AOR (sip:host:port)', type: 'text' },
    { field: 'contact_addr', label: 'Adresse contact', type: 'text' },
    { field: 'credentials_ref', label: 'Ref Identifiants', type: 'text' },
    { field: 'balancing_algorithm', label: 'Algorithme', type: 'select', options: [
      { label: 'Round Robin', value: 'round-robin' },
      { label: 'Least Sessions', value: 'least-sessions' },
    ] },
    { field: 'with_session_affinity', label: 'Affinité session', type: 'toggle' },
    { field: 'enabled', label: 'Actif', type: 'toggle' },
  ],
}

const currentFormFields = computed(() => formFieldDefs[activeTab.value] || [])

// ── Dialog state ──
const dialogOpen = ref(false)
const editingRow = ref(null)
const formData = ref({})
const saving = ref(false)
const deleteDialogOpen = ref(false)
const deletingRow = ref(null)
const deleting = ref(false)

// ── API helpers ──
async function hubFetch (path, opts = {}) {
  const res = await fetch(HUB_URL + path, {
    ...opts,
    headers: { 'Content-Type': 'application/json', ...opts.headers },
  })
  if (!res.ok) {
    const txt = await res.text().catch(() => res.statusText)
    throw new Error(txt || `HTTP ${res.status}`)
  }
  return res.json()
}

async function loadOverview () {
  try {
    overview.value = await hubFetch('/telephony/overview')
  } catch (e) {
    console.error('Telephony overview error:', e)
  }
}

async function loadTab () {
  tabLoading.value = true
  try {
    const data = await hubFetch(`/telephony/${activeTab.value}`)
    rows.value = data.items || []
  } catch (e) {
    console.error(`Load ${activeTab.value} error:`, e)
    rows.value = []
  }
  tabLoading.value = false
}

function openCreate () {
  editingRow.value = null
  formData.value = {}
  // Set default toggles
  for (const f of currentFormFields.value) {
    if (f.type === 'toggle') formData.value[f.field] = true
    else if (f.type === 'number') formData.value[f.field] = 0
    else formData.value[f.field] = ''
  }
  dialogOpen.value = true
}

function openEdit (row) {
  editingRow.value = row
  formData.value = { ...row }
  dialogOpen.value = true
}

async function saveForm () {
  saving.value = true
  try {
    const body = { ...formData.value }
    if (editingRow.value) {
      await hubFetch(`/telephony/${activeTab.value}/${editingRow.value.ref}`, {
        method: 'PUT',
        body: JSON.stringify(body),
      })
      Notify.create({ type: 'positive', message: 'Sauvegardé', timeout: 2000 })
    } else {
      await hubFetch(`/telephony/${activeTab.value}`, {
        method: 'POST',
        body: JSON.stringify(body),
      })
      Notify.create({ type: 'positive', message: 'Créé avec succès', timeout: 2000 })
    }
    dialogOpen.value = false
    await Promise.all([loadTab(), loadOverview()])
  } catch (e) {
    Notify.create({ type: 'negative', message: 'Erreur: ' + e.message, timeout: 4000 })
  }
  saving.value = false
}

function confirmDelete (row) {
  deletingRow.value = row
  deleteDialogOpen.value = true
}

async function doDelete () {
  if (!deletingRow.value) return
  deleting.value = true
  try {
    await hubFetch(`/telephony/${activeTab.value}/${deletingRow.value.ref}`, { method: 'DELETE' })
    Notify.create({ type: 'positive', message: 'Supprimé', timeout: 2000 })
    deleteDialogOpen.value = false
    await Promise.all([loadTab(), loadOverview()])
  } catch (e) {
    Notify.create({ type: 'negative', message: 'Erreur: ' + e.message, timeout: 4000 })
  }
  deleting.value = false
}

// ── Lifecycle ──
watch(activeTab, () => loadTab())

onMounted(async () => {
  await Promise.all([loadOverview(), loadTab()])
})
</script>

<style scoped>
.kpi-card {
  cursor: pointer;
  transition: all 0.15s;
  border: 2px solid transparent;
}
.kpi-card:hover {
  border-color: #c7d2fe;
}
.kpi-active {
  border-color: #6366f1 !important;
  background: #eef2ff;
}
</style>
