<template>
  <div class="flex flex-col h-full">
    <LayoutHeader :title="$t('logs.title')">
      <template #right>
        <FormControl
          v-model="levelFilter"
          type="select"
          :options="levelOptions"
          class="w-32"
        />
        <TextInput
          v-model="searchQuery"
          type="text"
          :placeholder="$t('common.search')"
          class="w-64"
        >
          <template #prefix>
            <FeatherIcon name="search" class="h-4 w-4 text-ink-gray-4" />
          </template>
        </TextInput>
        <Button variant="subtle" @click="refreshLogs">
          <template #prefix>
            <FeatherIcon name="refresh-cw" class="h-4 w-4" />
          </template>
          {{ $t('common.refresh') }}
        </Button>
        <Button variant="subtle" @click="exportLogs">
          <template #prefix>
            <FeatherIcon name="download" class="h-4 w-4" />
          </template>
          {{ $t('common.export') }}
        </Button>
      </template>
    </LayoutHeader>

    <div class="flex flex-1 overflow-hidden">
      <!-- Sidebar -->
      <div class="w-56 border-r bg-surface-gray-2 overflow-y-auto">
        <nav class="p-2">
          <button
            v-for="logType in logTypes"
            :key="logType.id"
            class="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-left transition-colors"
            :class="
              activeLogType === logType.id
                ? 'bg-surface-white shadow-sm text-ink-gray-9'
                : 'text-ink-gray-5 hover:bg-surface-white hover:text-ink-gray-7'
            "
            @click="activeLogType = logType.id"
          >
            <FeatherIcon :name="logType.icon" class="h-4 w-4" />
            {{ $t(logType.label) }}
          </button>
        </nav>
      </div>

      <!-- Content -->
      <div class="flex-1 overflow-auto p-5">
        <div v-if="filteredLogs.length" class="bg-gray-900 rounded-lg overflow-hidden">
          <div class="p-4 font-mono text-sm overflow-x-auto max-h-[calc(100vh-200px)]">
            <div
              v-for="(log, idx) in filteredLogs"
              :key="idx"
              class="flex gap-4 py-1 hover:bg-gray-800 px-2 rounded"
            >
              <span class="text-gray-500 flex-shrink-0 w-40">{{ log.timestamp }}</span>
              <span
                class="flex-shrink-0 w-20 uppercase"
                :class="{
                  'text-green-400': log.level === 'info',
                  'text-yellow-400': log.level === 'warning',
                  'text-red-400': log.level === 'error',
                  'text-gray-400': log.level === 'debug',
                }"
              >
                [{{ log.level }}]
              </span>
              <span v-if="log.container" class="text-blue-400 flex-shrink-0 w-32">
                {{ log.container }}
              </span>
              <span v-if="log.source" class="text-purple-400 flex-shrink-0 w-24">
                {{ log.source }}
              </span>
              <span v-if="log.user" class="text-cyan-400 flex-shrink-0 w-40">
                {{ log.user }}
              </span>
              <span v-if="log.action" class="text-orange-400 flex-shrink-0 w-28">
                {{ log.action }}
              </span>
              <span class="text-gray-300 flex-1">{{ log.message }}</span>
              <span v-if="log.amount" class="text-green-400">
                {{ formatCurrency(log.amount) }}
              </span>
              <span v-if="log.ip" class="text-gray-500">
                {{ log.ip }}
              </span>
            </div>
          </div>
        </div>

        <EmptyState
          v-else
          icon="file-text"
          :title="$t('logs.noLogs')"
          description="No log entries match your filters"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Button, TextInput, FormControl, FeatherIcon } from 'frappe-ui'
import LayoutHeader from '@/components/Common/LayoutHeader.vue'
import EmptyState from '@/components/Common/EmptyState.vue'
import {
  logTypes,
  containerLogs,
  systemLogs,
  webServerLogs,
  adminPanelLogs,
  billingLogs,
  usersLogs,
  sitesLogs,
} from '@/mocks/logs'

const activeLogType = ref('container')
const levelFilter = ref('all')
const searchQuery = ref('')

const levelOptions = [
  { label: 'All Levels', value: 'all' },
  { label: 'Info', value: 'info' },
  { label: 'Warning', value: 'warning' },
  { label: 'Error', value: 'error' },
  { label: 'Debug', value: 'debug' },
]

const logsMap = {
  container: containerLogs,
  system: systemLogs,
  webserver: webServerLogs,
  apps: containerLogs,
  admin: adminPanelLogs,
  billing: billingLogs,
  users: usersLogs,
  sites: sitesLogs,
}

const currentLogs = computed(() => {
  return logsMap[activeLogType.value] || []
})

const filteredLogs = computed(() => {
  let logs = currentLogs.value

  if (levelFilter.value !== 'all') {
    logs = logs.filter(l => l.level === levelFilter.value)
  }

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    logs = logs.filter(l =>
      l.message?.toLowerCase().includes(query) ||
      l.container?.toLowerCase().includes(query) ||
      l.source?.toLowerCase().includes(query) ||
      l.user?.toLowerCase().includes(query)
    )
  }

  return logs
})

function refreshLogs() {
  console.log('Refreshing logs...')
}

function exportLogs() {
  console.log('Exporting logs...')
}

function formatCurrency(value) {
  return new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB',
    minimumFractionDigits: 0,
  }).format(value)
}
</script>
