<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <div class="flex justify-between items-start">
        <div class="flex-1">
          <h3 class="text-lg font-semibold brand-section-title">{{ card.name }}</h3>
          <p v-if="card.description" class="text-sm text-[var(--brand-text-muted)] mt-1">
            {{ card.description }}
          </p>
        </div>
        <UBadge :color="getStatusColor(card)">
          ID: {{ card.id }}
        </UBadge>
      </div>
    </template>

    <!-- Card Details -->
    <div class="space-y-3">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-[var(--brand-text)]">
        <div>
          <span class="font-medium text-[var(--brand-text-muted)]">Database ID:</span>
          <span class="ml-2">{{ card.database_id }}</span>
        </div>
        <div>
          <span class="font-medium text-[var(--brand-text-muted)]">Query Type:</span>
          <span class="ml-2">{{ card.query_type || card.dataset_query?.type }}</span>
        </div>
        <div>
          <span class="font-medium text-[var(--brand-text-muted)]">Collection:</span>
          <span class="ml-2">{{ card.collection_id || 'Root' }}</span>
        </div>
        <div>
          <span class="font-medium text-[var(--brand-text-muted)]">Created:</span>
          <span class="ml-2">{{ formatDate(card.created_at) }}</span>
        </div>
      </div>

      <!-- Query Preview -->
      <div v-if="card.dataset_query?.native?.query" class="mt-4">
        <details class="group">
          <summary class="cursor-pointer text-sm font-medium text-[var(--brand-primary)]">
            Ver SQL
          </summary>
          <pre class="mt-2 p-3 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] text-xs overflow-x-auto whitespace-pre-wrap break-words text-[var(--brand-text)]">{{ card.dataset_query.native.query }}</pre>
        </details>
      </div>

      <!-- Parameters Form -->
      <div v-if="hasParameters" class="mt-4">
        <details class="group" :open="showParameters">
          <summary class="cursor-pointer text-sm font-medium text-[var(--brand-primary)] flex items-center gap-2 py-2">
            <UIcon name="i-heroicons-adjustments-horizontal" class="w-4 h-4" />
            <span>Configurar Parámetros</span>
            <UIcon name="i-heroicons-chevron-down-20-solid" class="w-4 h-4 transition-transform group-open:rotate-180" />
          </summary>

          <div class="mt-3 p-4 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] space-y-3">
            <div v-for="(param, key) in parameterValues" :key="key" class="flex flex-col gap-1">
              <label class="text-xs font-medium text-[var(--brand-text-muted)]">
                {{ getParameterLabel(key) }}
              </label>

              <!-- Boolean parameter -->
              <UToggle
                v-if="getParameterType(key) === 'boolean'"
                v-model="parameterValues[key]"
                size="sm"
              />

              <!-- Date parameter -->
              <input
                v-else-if="getParameterType(key) === 'date'"
                v-model="parameterValues[key]"
                type="date"
                class="px-3 py-2 text-sm border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
              />

              <!-- Text parameter -->
              <input
                v-else
                v-model="parameterValues[key]"
                type="text"
                class="px-3 py-2 text-sm border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
              />
            </div>

            <div class="flex gap-2 pt-2">
              <UButton
                @click="resetParameters"
                color="gray"
                variant="soft"
                size="xs"
                icon="i-heroicons-arrow-path"
              >
                Restablecer
              </UButton>
            </div>
          </div>
        </details>
      </div>

      <!-- Actions -->
      <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-[var(--brand-border)]">
        <UButton
          @click="executeQuery"
          :loading="executing"
          :ui="{ base: 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)] border border-[var(--brand-primary)] hover:bg-[var(--brand-primary)] hover:border-[var(--brand-accent)] disabled:opacity-50 disabled:cursor-not-allowed' }"
          size="sm"
        >
          Ejecutar Query
        </UButton>

        <UButton
          @click="executeQueryCached"
          :loading="executingCached"
          color="gray"
          variant="soft"
          size="sm"
        >
          Con Caché
        </UButton>

        <UDropdown :items="exportItems">
          <UButton
            color="gray"
            variant="soft"
            size="sm"
            trailing-icon="i-heroicons-chevron-down-20-solid"
          >
            Exportar
          </UButton>
        </UDropdown>
      </div>

      <!-- Query Results -->
      <div v-if="queryResult" class="mt-4">
        <div class="flex flex-wrap justify-between items-center gap-2 mb-2">
          <h4 class="font-medium text-sm text-[var(--brand-text)]">Resultados</h4>
          <div class="flex items-center gap-2">
            <UBadge color="green">
              {{ queryResult.data?.rows?.length || 0 }} filas en {{ queryResult.running_time || 0 }}ms
            </UBadge>
            <UButton
              v-if="queryResult.data"
              @click="copyResults"
              color="gray"
              variant="soft"
              size="xs"
              icon="i-heroicons-clipboard-document"
            >
              {{ copied ? 'Copiado!' : 'Copiar JSON' }}
            </UButton>
          </div>
        </div>

        <!-- Empty State -->
        <div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)]">
          <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[#3a2a16] rounded-full">
            <svg class="w-8 h-8 text-[var(--brand-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
            </svg>
          </div>
          <h3 class="text-sm font-medium text-[var(--brand-text)] mb-1">No hay datos</h3>
          <p class="text-xs text-[var(--brand-text-muted)]">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
        </div>

        <!-- Data Display -->
        <div v-else>
          <!-- Table View -->
          <div v-if="queryResult.data.cols && queryResult.data.rows" class="overflow-x-auto mb-4 rounded-lg border border-[var(--brand-border)]">
            <table class="min-w-full divide-y divide-[var(--brand-border)]">
              <thead class="bg-[var(--brand-surface)]">
                <tr>
                  <th
                    v-for="col in queryResult.data.cols"
                    :key="col.name"
                    class="px-4 py-3 text-left text-xs font-medium text-[var(--brand-text-muted)] uppercase tracking-wider"
                  >
                    {{ col.display_name || col.name }}
                  </th>
                </tr>
              </thead>
              <tbody class="bg-[var(--brand-bg)] divide-y divide-[var(--brand-border)]">
                <tr v-for="(row, rowIndex) in queryResult.data.rows" :key="rowIndex">
                  <td
                    v-for="(cell, cellIndex) in row"
                    :key="cellIndex"
                    class="px-4 py-3 whitespace-nowrap text-sm text-[var(--brand-text)]"
                  >
                    {{ formatCell(cell, queryResult.data.cols[cellIndex]) }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- JSON View (collapsible) -->
          <details class="group">
            <summary class="cursor-pointer text-sm font-medium text-[var(--brand-primary)] flex items-center gap-2">
              <span>Ver JSON completo</span>
              <UIcon name="i-heroicons-chevron-down-20-solid" class="w-4 h-4 transition-transform group-open:rotate-180" />
            </summary>
            <pre class="mt-2 p-3 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] text-xs whitespace-pre-wrap break-words text-[var(--brand-text)]">{{ JSON.stringify(queryResult.data, null, 2) }}</pre>
          </details>
        </div>
      </div>

      <!-- Error Display -->
      <UAlert
        v-if="error"
        color="red"
        variant="soft"
        :title="error"
        :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'red', variant: 'link' }"
        @close="error = null"
      />
    </div>
  </UCard>
</template>

<script setup lang="ts">
const props = defineProps<{
  card: any
}>()

const executing = ref(false)
const executingCached = ref(false)
const queryResult = ref<any>(null)
const error = ref<string | null>(null)
const copied = ref(false)
const showParameters = ref(false)
const parameterValues = ref<Record<string, any>>({})

// Initialize parameter values from card template tags
const templateTags = computed(() => props.card.dataset_query?.native?.['template-tags'] || {})

const hasParameters = computed(() => Object.keys(templateTags.value).length > 0)

// Initialize parameters on mount
function initializeParameters() {
  const params: Record<string, any> = {}
  for (const [tagName, tagConfig] of Object.entries(templateTags.value)) {
    const config = tagConfig as any
    if (config.type === 'boolean') {
      // Para boolean, el default viene como array [false] o [true]
      params[tagName] = config.default?.[0] ?? false
    } else if (config.type === 'text' && (tagName.toLowerCase().includes('fecha') || config?.['display-name']?.toLowerCase().includes('fecha'))) {
      // Para campos de fecha tipo text, inicializar con string vacío
      params[tagName] = config.default ?? ''
    } else {
      params[tagName] = config.default ?? ''
    }
  }
  parameterValues.value = params
}

// Watch for card changes and reinitialize
watch(() => props.card, () => {
  initializeParameters()
}, { immediate: true })

const exportItems = [[
  {
    label: 'CSV',
    icon: 'i-heroicons-document-text',
    click: () => downloadExport('csv')
  },
  {
    label: 'JSON',
    icon: 'i-heroicons-code-bracket',
    click: () => downloadExport('json')
  },
  {
    label: 'XLSX',
    icon: 'i-heroicons-table-cells',
    click: () => downloadExport('xlsx')
  }
]]

function getParameterType(key: string): string {
  const config = templateTags.value[key] as any
  const type = config?.type || 'text'

  // Si es tipo text pero el nombre incluye "fecha", tratar como date
  if (type === 'text' && (key.toLowerCase().includes('fecha') || config?.['display-name']?.toLowerCase().includes('fecha'))) {
    return 'date'
  }

  return type
}

function getParameterLabel(key: string): string {
  const config = templateTags.value[key] as any
  return config?.['display-name'] || key
}

function resetParameters() {
  initializeParameters()
}

function getStatusColor(card: any) {
  if (card.archived) return 'red'
  if (card.dataset) return 'blue'
  return 'gray'
}

function formatDate(dateString: string) {
  if (!dateString) return 'N/A'
  return new Date(dateString).toLocaleDateString('es-ES', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}

async function executeQuery() {
  executing.value = true
  error.value = null
  queryResult.value = null

  try {
    const parameters = []

    // Build parameters from current form values
    for (const [tagName, tagConfig] of Object.entries(templateTags.value)) {
      const config = tagConfig as any
      let paramType = 'string/='
      let paramValue = parameterValues.value[tagName]

      // Determine parameter type based on tag type
      if (config.type === 'date') {
        paramType = 'date/single'
        paramValue = parameterValues.value[tagName] || ''
      } else if (config.type === 'boolean') {
        paramType = 'boolean/='
        paramValue = parameterValues.value[tagName]
      } else if (config.type === 'number') {
        paramType = 'number/='
        paramValue = parameterValues.value[tagName] || null
      } else if (config.type === 'text') {
        paramType = 'string/='
        paramValue = parameterValues.value[tagName] || ''
      }

      // Only add parameter if:
      // 1. It's required, OR
      // 2. It has a non-empty value (not null, not empty string, not empty array)
      const isRequired = config.required === true
      const hasValue = paramValue !== null &&
                       paramValue !== '' &&
                       paramValue !== undefined &&
                       (!Array.isArray(paramValue) || paramValue.length > 0)

      if (isRequired || hasValue) {
        parameters.push({
          type: paramType,
          target: ['variable', ['template-tag', tagName]],
          value: paramValue
        })
      }
    }

    const result = await $fetch(`/api/metabase/cards/${props.card.id}/query`, {
      method: 'POST',
      body: { parameters }
    })
    queryResult.value = result
  } catch (e: any) {
    error.value = e.message || 'Error al ejecutar la query'
  } finally {
    executing.value = false
  }
}

async function executeQueryCached() {
  executingCached.value = true
  error.value = null
  queryResult.value = null

  try {
    const result = await $fetch(`/api/metabase/cards/${props.card.id}/query`)
    queryResult.value = result
  } catch (e: any) {
    error.value = e.message || 'Error al ejecutar la query con caché'
  } finally {
    executingCached.value = false
  }
}

function downloadExport(format: 'csv' | 'json' | 'xlsx') {
  const url = `${window.location.origin}/api/metabase/cards/${props.card.id}/query/${format}`
  window.open(url, '_blank')
}

async function copyResults() {
  try {
    await navigator.clipboard.writeText(JSON.stringify(queryResult.value.data, null, 2))
    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch (e) {
    console.error('Error al copiar:', e)
  }
}

function formatCell(value: any, col: any) {
  if (value === null || value === undefined) return '-'

  // Format numbers based on type
  if (col.base_type === 'type/Float' || col.base_type === 'type/Decimal') {
    return new Intl.NumberFormat('es-ES', {
      minimumFractionDigits: 0,
      maximumFractionDigits: 2
    }).format(value)
  }

  if (col.base_type === 'type/Integer') {
    return new Intl.NumberFormat('es-ES').format(value)
  }

  // Format dates
  if (col.base_type === 'type/Date' || col.base_type === 'type/DateTime') {
    return new Date(value).toLocaleDateString('es-ES')
  }

  return value
}
</script>
