<script setup lang="ts">
/**
 * ToolboxVignette — Carte compacte pour la barre laterale "Boite a outils".
 *
 * Affiche un protocole ou outil avec titre, description, contexte et actions.
 * Utilise les variables mood pour le theming.
 */

export interface ToolboxAction {
  label: string
  icon?: string
  to?: string
  emit?: string
}

const props = withDefaults(
  defineProps<{
    title: string
    description?: string
    contextLabel?: string
    actions?: ToolboxAction[]
  }>(),
  {
    description: undefined,
    contextLabel: undefined,
    actions: undefined,
  },
)

const emit = defineEmits<{
  action: [actionEmit: string]
}>()

const defaultActions: ToolboxAction[] = [
  { label: 'Contexte', icon: 'i-lucide-info', emit: 'context' },
  { label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
  { label: 'Choisir', icon: 'i-lucide-check-circle', emit: 'choisir' },
  { label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer' },
]

const resolvedActions = computed(() => props.actions ?? defaultActions)

function handleAction(action: ToolboxAction) {
  if (action.to) {
    navigateTo(action.to)
  }
  else if (action.emit) {
    emit('action', action.emit)
  }
}
</script>

<template>
  <div class="toolbox-vignette">
    <h4 class="toolbox-vignette__title">
      {{ title }}
    </h4>

    <p v-if="description" class="toolbox-vignette__description">
      {{ description }}
    </p>

    <div v-if="contextLabel" class="toolbox-vignette__context">
      <UIcon name="i-lucide-tag" class="text-xs" />
      <span>Contexte : {{ contextLabel }}</span>
    </div>

    <div class="toolbox-vignette__actions">
      <UButton
        v-for="action in resolvedActions"
        :key="action.label"
        :icon="action.icon"
        :label="action.label"
        size="xs"
        variant="soft"
        class="toolbox-vignette__action-btn"
        @click="handleAction(action)"
      />
    </div>
  </div>
</template>

<style scoped>
.toolbox-vignette {
  background: var(--mood-surface);
  border: 1px solid var(--mood-border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.toolbox-vignette:hover {
  border-color: var(--mood-accent);
  box-shadow: 0 1px 4px var(--mood-shadow);
}

.toolbox-vignette__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mood-text);
  line-height: 1.3;
}

.toolbox-vignette__description {
  font-size: 0.75rem;
  color: var(--mood-text-muted);
  line-height: 1.4;
}

.toolbox-vignette__context {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--mood-text-muted);
}

.toolbox-vignette__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.toolbox-vignette__action-btn {
  --btn-bg: var(--mood-accent-soft);
  --btn-color: var(--mood-accent);
}
</style>
