corrosion-admin-panel/frontend/src/views/admin/PluginConfigsView.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useLootStore } from '@/stores/loot'
import { useTeleportStore } from '@/stores/teleport'
import { useGatherStore } from '@/stores/gather'
import { useAutoDoorsStore } from '@/stores/autodoors'
import { useKitsStore } from '@/stores/kits'
import { useFurnaceSplitterStore } from '@/stores/furnacesplitter'
import { useBetterChatStore } from '@/stores/betterchat'
import { useTimedExecuteStore } from '@/stores/timedexecute'
import { useRaidableBasesStore } from '@/stores/raidablebases'

import Panel from '@/components/ds/data/Panel.vue'
import Button from '@/components/ds/core/Button.vue'
import Icon from '@/components/ds/core/Icon.vue'
import Badge from '@/components/ds/core/Badge.vue'
import Input from '@/components/ds/forms/Input.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'

const router = useRouter()
const auth = useAuthStore()

const lootStore = useLootStore()
const teleportStore = useTeleportStore()
const gatherStore = useGatherStore()
const autoDoorsStore = useAutoDoorsStore()
const kitsStore = useKitsStore()
const furnaceSplitterStore = useFurnaceSplitterStore()
const betterChatStore = useBetterChatStore()
const timedExecuteStore = useTimedExecuteStore()
const raidableBasesStore = useRaidableBasesStore()

const searchQuery = ref('')
const loading = ref(true)

interface PluginDef {
  key: string
  name: string
  description: string
  icon: string
  path: string
  permission: string
  getConfigs: () => any[]
  fetchFn: () => Promise<void>
}

const plugins: PluginDef[] = [
  { key: 'loot', name: 'Loot tables', description: 'Configure loot container drop tables and item probabilities', icon: 'crosshair', path: '/loot-builder', permission: 'loot.view', getConfigs: () => lootStore.profiles, fetchFn: () => lootStore.fetchProfiles() },
  { key: 'teleport', name: 'Teleport', description: 'Home locations, TPR cooldowns, and VIP teleport settings', icon: 'navigation', path: '/teleport-config', permission: 'teleport.view', getConfigs: () => teleportStore.configs, fetchFn: () => teleportStore.fetchConfigs() },
  { key: 'gather', name: 'Gather rates', description: 'Resource gathering multipliers and pickup rates', icon: 'pickaxe', path: '/gather-manager', permission: 'gather.view', getConfigs: () => gatherStore.configs, fetchFn: () => gatherStore.fetchConfigs() },
  { key: 'autodoors', name: 'Auto doors', description: 'Automatic door closing delays and permissions', icon: 'door-open', path: '/autodoors', permission: 'autodoors.view', getConfigs: () => autoDoorsStore.configs, fetchFn: () => autoDoorsStore.fetchConfigs() },
  { key: 'kits', name: 'Kits', description: 'Player kits with items, cooldowns, and permissions', icon: 'gift', path: '/kits', permission: 'kits.view', getConfigs: () => kitsStore.configs, fetchFn: () => kitsStore.fetchConfigs() },
  { key: 'furnacesplitter', name: 'Furnace splitter', description: 'Automatic furnace ore splitting and smelting config', icon: 'flame', path: '/furnace-splitter', permission: 'furnacesplitter.view', getConfigs: () => furnaceSplitterStore.configs, fetchFn: () => furnaceSplitterStore.fetchConfigs() },
  { key: 'betterchat', name: 'Better Chat', description: 'Chat formatting, group colors, and title prefixes', icon: 'message-square', path: '/better-chat', permission: 'betterchat.view', getConfigs: () => betterChatStore.configs, fetchFn: () => betterChatStore.fetchConfigs() },
  { key: 'timedexecute', name: 'Timed Execute', description: 'Scheduled, real-time, and event-driven command execution', icon: 'clock', path: '/timed-execute', permission: 'timedexecute.view', getConfigs: () => timedExecuteStore.configs, fetchFn: () => timedExecuteStore.fetchConfigs() },
  { key: 'raidablebases', name: 'Raidable Bases', description: 'PVE raid events, difficulty, NPCs, and loot settings', icon: 'swords', path: '/raidable-bases', permission: 'raidablebases.view', getConfigs: () => raidableBasesStore.configs, fetchFn: () => raidableBasesStore.fetchConfigs() },
]

const visiblePlugins = computed(() =>
  plugins.filter(p => auth.hasPermission(p.permission))
)

const filteredPlugins = computed(() => {
  if (!searchQuery.value.trim()) return visiblePlugins.value
  const q = searchQuery.value.toLowerCase()
  return visiblePlugins.value.filter(
    p => p.name.toLowerCase().includes(q) || p.description.toLowerCase().includes(q)
  )
})

function getStatus(plugin: PluginDef): { label: string; tone: 'online' | 'info' | 'neutral' } {
  const configs = plugin.getConfigs()
  if (!configs || configs.length === 0) return { label: 'Not configured', tone: 'neutral' }
  const hasActive = configs.some((c: any) => c.is_active)
  if (hasActive) return { label: 'Active', tone: 'online' }
  return { label: 'Configured', tone: 'info' }
}

function getConfigCount(plugin: PluginDef): string {
  const configs = plugin.getConfigs()
  if (!configs || configs.length === 0) return 'No profiles'
  return `${configs.length} profile${configs.length !== 1 ? 's' : ''}`
}

// Search model — DS Input uses string v-model
const searchModel = computed<string>({
  get: () => searchQuery.value,
  set: (v: string | undefined) => { searchQuery.value = v ?? '' },
})

onMounted(async () => {
  const fetches = visiblePlugins.value.map(p => p.fetchFn().catch(() => {}))
  await Promise.all(fetches)
  loading.value = false
})
</script>

<template>
  <div class="pc">
    <!-- Page head -->
    <div class="pc__head">
      <div class="pc__head-id">
        <div class="pc__head-chip">
          <Icon name="puzzle" :size="20" :stroke-width="2" />
        </div>
        <div>
          <div class="t-eyebrow">Plugin management</div>
          <h1 class="pc__title">Plugin configs</h1>
        </div>
      </div>
    </div>

    <!-- Search -->
    <Input
      v-model="searchModel"
      icon="search"
      placeholder="Search plugins…"
    />

    <!-- Loading skeleton -->
    <div v-if="loading" class="pc__grid">
      <div
        v-for="i in visiblePlugins.length"
        :key="i"
        class="pc__skeleton"
      >
        <div class="pc__skel-icon" />
        <div class="pc__skel-lines">
          <div class="pc__skel-line pc__skel-line--name" />
          <div class="pc__skel-line pc__skel-line--sub" />
        </div>
      </div>
    </div>

    <!-- Cards grid -->
    <div v-else-if="filteredPlugins.length" class="pc__grid">
      <div
        v-for="plugin in filteredPlugins"
        :key="plugin.key"
        class="pc__card"
      >
        <!-- Card head -->
        <div class="pc__card-head">
          <div class="pc__card-id">
            <div class="pc__card-icon">
              <Icon :name="plugin.icon" :size="18" :stroke-width="2" />
            </div>
            <div>
              <div class="pc__card-name">{{ plugin.name }}</div>
              <div class="pc__card-count">{{ getConfigCount(plugin) }}</div>
            </div>
          </div>
          <Badge :tone="getStatus(plugin).tone">{{ getStatus(plugin).label }}</Badge>
        </div>

        <!-- Description -->
        <p class="pc__card-desc">{{ plugin.description }}</p>

        <!-- Configure button -->
        <Button
          variant="secondary"
          size="sm"
          icon-right="chevron-right"
          :block="true"
          @click="router.push(plugin.path)"
        >Configure</Button>
      </div>
    </div>

    <!-- Empty state (search miss) -->
    <Panel v-else>
      <EmptyState
        icon="search"
        title="No plugins match"
        description="Try a different search term."
      />
    </Panel>
  </div>
</template>

<style scoped>
/* ---- Page shell ---- */
.pc { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

/* ---- Page head ---- */
.pc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc__head-id { display: flex; align-items: center; gap: 12px; }
.pc__head-chip {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.pc__title {
  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin-top: 3px;
}

/* ---- Grid ---- */
.pc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px)  { .pc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .pc__grid { grid-template-columns: 1fr; } }

/* ---- Card ---- */
.pc__card {
  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  transition: var(--transition-colors);
}
.pc__card:hover { background: var(--surface-raised); }

.pc__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pc__card-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc__card-icon {
  width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); background: var(--surface-raised-2);
  box-shadow: var(--ring-default); transition: var(--transition-colors);
}
.pc__card:hover .pc__card-icon { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.pc__card-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.pc__card-count { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pc__card-desc { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.5; flex: 1; }

/* ---- Skeleton ---- */
.pc__skeleton {
  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
  padding: 16px; display: flex; align-items: flex-start; gap: 12px;
  animation: pc-pulse 1.4s ease-in-out infinite;
}
@keyframes pc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.pc__skel-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-raised-2); flex: none; }
.pc__skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.pc__skel-line { height: 10px; border-radius: var(--radius-sm); background: var(--surface-raised-2); }
.pc__skel-line--name { width: 60%; }
.pc__skel-line--sub { width: 40%; }
</style>