brainstorming/app/pages/index.vue

<script setup lang="ts">
const { admin } = useAuth()

const categories = ['UTAM/Playwright', 'Jira Automation', 'Documentation', 'Testing', 'Dev Workflow', 'General']
const newIdea = ref('')
const category = ref('General')
const hasSubmitted = ref(false)
const revealAll = ref(false)
const toast = useToast()

const { data: ideas, refresh } = useFetch<any[]>('/api/ideas')

async function submitIdea() {
  if (!newIdea.value.trim()) return
  await $fetch('/api/ideas', {
    method: 'POST',
    body: { text: newIdea.value, category: category.value },
  })
  newIdea.value = ''
  hasSubmitted.value = true
  revealAll.value = true
  toast.add({ title: 'Idea guardada', color: 'success' })
  refresh()
}

async function vote(id: number) {
  try {
    await $fetch(`/api/votes/${id}`, { method: 'POST' })
    refresh()
  } catch {
    toast.add({ title: 'Ya has votado esta idea', color: 'warning' })
  }
}

async function deleteIdea(id: number) {
  await $fetch(`/api/ideas/${id}`, { method: 'DELETE' })
  refresh()
}

async function toggleHide(idea: any) {
  await $fetch(`/api/ideas/${idea.id}`, {
    method: 'PATCH',
    body: { hidden: !idea.hidden },
  })
  refresh()
}

function isHidden() {
  return !revealAll.value && !hasSubmitted.value
}
</script>

<template>
  <div class="min-h-screen bg-neutral-50 text-neutral-900 p-4 md:p-8">
    <header class="max-w-6xl mx-auto flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
      <div>
        <h1 class="text-3xl font-bold flex items-center gap-3">
          Automation Brainstorming
        </h1>
        <p class="text-neutral-500 mt-1">Propuestas sin fricción, 100% anónimo.</p>
      </div>
      <div class="flex gap-2">
        <UBadge color="success" variant="subtle">Interno</UBadge>
        <NuxtLink v-if="!admin" to="/login">
          <UBadge color="neutral" variant="subtle" class="cursor-pointer">Admin</UBadge>
        </NuxtLink>
        <NuxtLink v-else to="/admin">
          <UBadge color="primary" variant="subtle" class="cursor-pointer">Panel Admin</UBadge>
        </NuxtLink>
      </div>
    </header>

    <main class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- Submit form -->
      <div class="lg:col-span-1 space-y-6">
        <UCard>
          <template #header>
            <h2 class="text-lg font-semibold">Nueva Iniciativa</h2>
          </template>
          <form class="space-y-4" @submit.prevent="submitIdea">
            <UFormField label="Categoría">
              <USelect v-model="category" :items="categories" />
            </UFormField>
            <UFormField label="¿Qué te gustaría automatizar?">
              <UTextarea v-model="newIdea" :rows="4" placeholder="Ej: Automatizar el mapeo de tests en Jira..." />
            </UFormField>
            <UButton type="submit" block :disabled="!newIdea.trim()">
              Enviar Idea
            </UButton>
          </form>
        </UCard>
      </div>

      <!-- Ideas wall -->
      <div class="lg:col-span-2 space-y-4">
        <div class="flex items-center justify-between mb-2">
          <h2 class="text-xl font-bold">
            Tablón de Ideas ({{ ideas?.length ?? 0 }})
          </h2>
          <UButton
            variant="ghost"
            size="xs"
            @click="revealAll = !revealAll"
          >
            {{ revealAll ? 'Ocultar por anonimato' : 'Revelar todas' }}
          </UButton>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <UCard v-for="idea in ideas" :key="idea.id">
            <div class="flex justify-between items-start mb-3">
              <UBadge v-if="!isHidden()" color="primary" variant="subtle" size="xs">
                {{ idea.category }}
              </UBadge>
              <UBadge v-else color="neutral" variant="subtle" size="xs">???</UBadge>
              <span class="text-xs text-neutral-400">{{ new Date(idea.created_at).toLocaleDateString() }}</span>
            </div>

            <p
              class="text-sm leading-relaxed mb-4"
              :class="isHidden() ? 'blur-sm select-none' : ''"
            >
              {{ isHidden() ? 'Envía tu idea primero para ver las demás.' : idea.text }}
            </p>

            <div class="flex items-center justify-between pt-3 border-t border-neutral-100">
              <UButton variant="ghost" size="xs" @click="vote(idea.id)">
                +1 Votar
                <UBadge v-if="idea.votes > 0" color="primary" size="xs" class="ml-1">{{ idea.votes }}</UBadge>
              </UButton>

              <!-- Admin actions -->
              <div v-if="admin" class="flex gap-1">
                <UButton
                  variant="ghost"
                  size="xs"
                  :color="idea.hidden ? 'success' : 'warning'"
                  @click="toggleHide(idea)"
                >
                  {{ idea.hidden ? 'Mostrar' : 'Ocultar' }}
                </UButton>
                <UButton variant="ghost" size="xs" color="error" @click="deleteIdea(idea.id)">
                  Borrar
                </UButton>
              </div>
            </div>
          </UCard>
        </div>

        <div v-if="!ideas?.length" class="text-center py-20 bg-white rounded-2xl border-2 border-dashed border-neutral-200">
          <h3 class="text-neutral-500 font-medium">Aún no hay ideas.</h3>
          <p class="text-neutral-400 text-sm">¡Sé el primero!</p>
        </div>
      </div>
    </main>
  </div>
</template>