<template>
  <div>
    <v-row class="mb-4">
      <v-col>
        <v-btn
          color="primary"
          prepend-icon="mdi-refresh"
          @click="loadLogs"
          :loading="loading"
        >
          Refresh
        </v-btn>
      </v-col>
      <v-col cols="auto">
        <v-select
          v-model="filterStatus"
          :items="statusOptions"
          label="Status"
          density="compact"
          variant="outlined"
          clearable
          style="min-width: 140px"
        />
      </v-col>
    </v-row>

    <v-card>
      <v-card-title>Recent Download Logs</v-card-title>
      <v-card-text>
        <div v-if="loading" class="text-center py-8">
          <v-progress-circular indeterminate />
        </div>

        <v-expansion-panels v-else-if="filteredLogs.length">
          <v-expansion-panel
            v-for="log in filteredLogs"
            :key="log.id"
          >
            <v-expansion-panel-title>
              <div class="d-flex align-center ga-2" style="width: 100%">
                <v-chip
                  :color="getStatusColor(log.status)"
                  size="small"
                  variant="tonal"
                >
                  {{ log.status }}
                </v-chip>
                <span class="text-truncate" style="max-width: 400px">
                  {{ log.url }}
                </span>
                <v-spacer />
                <span class="text-caption text-grey">
                  {{ formatDate(log.created_at) }}
                </span>
              </div>
            </v-expansion-panel-title>
            <v-expansion-panel-text>
              <div v-if="log.error_message" class="mb-4">
                <div class="text-subtitle-2 text-error">Error</div>
                <v-code class="d-block pa-2 bg-error-lighten-5">{{ log.error_message }}</v-code>
              </div>

              <div v-if="log.stdout" class="mb-4">
                <div class="text-subtitle-2">Output</div>
                <pre class="log-output bg-grey-lighten-4 pa-2 rounded">{{ log.stdout }}</pre>
              </div>

              <div v-if="log.stderr">
                <div class="text-subtitle-2 text-warning">Errors/Warnings</div>
                <pre class="log-output bg-warning-lighten-5 pa-2 rounded">{{ log.stderr }}</pre>
              </div>

              <div v-if="!log.stdout && !log.stderr && !log.error_message" class="text-grey">
                No log output available
              </div>
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>

        <div v-else class="text-center text-grey py-8">
          <v-icon size="48" class="mb-2">mdi-text-box-outline</v-icon>
          <div>No logs available</div>
        </div>
      </v-card-text>
    </v-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { settingsApi } from '../services/api'

const loading = ref(false)
const logs = ref([])
const filterStatus = ref(null)

const statusOptions = [
  { title: 'Completed', value: 'completed' },
  { title: 'Failed', value: 'failed' },
  { title: 'Running', value: 'running' },
]

const filteredLogs = computed(() => {
  if (!filterStatus.value) return logs.value
  return logs.value.filter(l => l.status === filterStatus.value)
})

onMounted(() => {
  loadLogs()
})

async function loadLogs() {
  loading.value = true
  try {
    const response = await settingsApi.getLogs({ limit: 100 })
    logs.value = response.data.logs
  } catch (error) {
    console.error('Failed to load logs:', error)
  } finally {
    loading.value = false
  }
}

function getStatusColor(status) {
  const colors = {
    completed: 'success',
    failed: 'error',
    running: 'info',
    pending: 'warning',
  }
  return colors[status] || 'grey'
}

function formatDate(dateStr) {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleString()
}
</script>

<style scoped>
.log-output {
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow: auto;
}
</style>
