<template>
  <div>
    <h1 class="text-h4 mb-4">Plugins</h1>

    <v-progress-linear v-if="loading" indeterminate color="primary" class="mb-4" />

    <v-alert v-if="!loading && plugins.length === 0" type="info" variant="tonal" class="mb-4">
      No plugins installed. Plugins extend Purrse with additional features and integrations.
    </v-alert>

    <v-row v-if="plugins.length > 0">
      <v-col v-for="plugin in plugins" :key="plugin.id" cols="12" sm="6" md="4">
        <v-card>
          <v-card-item>
            <template v-slot:prepend>
              <v-icon size="large" color="primary">mdi-puzzle</v-icon>
            </template>
            <v-card-title>{{ plugin.name }}</v-card-title>
            <v-card-subtitle>v{{ plugin.version }}</v-card-subtitle>
          </v-card-item>
          <v-card-text>{{ plugin.description }}</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { pluginsApi } from '@/services/plugins'
import type { Plugin } from '@/types'

const plugins = ref<Plugin[]>([])
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    const { data } = await pluginsApi.getAll()
    plugins.value = data
  } catch {
    // silently handle - empty state shown
  } finally {
    loading.value = false
  }
})
</script>
