<!--
  FlowQuickButton.vue — Drop-in trigger button for the global Flow Editor.

  Odoo-style "inline create from anywhere": any page includes this single
  component and gets a consistent, contextually-loaded Flow editor popup.

  Behavior:
    - If `templateName` prop is set → opens existing template in edit mode
    - Else → opens new-template wizard, pre-filling category / applies_to
             / trigger_event based on the page's context

  Props:
    - templateName   string | null     — if set, edit this FT
    - label          string            — button label (default: "Flows")
    - icon           string            — material icon name
    - color          string            — Quasar colour token
    - category       string            — preset for a new template
    - appliesTo      string            — preset for a new template
    - triggerEvent   string            — preset for a new template
    - flat, dense, size …              — passthrough to q-btn

  Usage:
    <FlowQuickButton category="residential" applies-to="Service Contract"
      trigger-event="on_contract_signed" />

    <FlowQuickButton template-name="FT-00005" label="Éditer onboarding" />
-->
<template>
  <q-btn :flat="flat" :dense="dense" :size="size"
    :color="color" :icon="icon" :label="label" no-caps
    @click="onClick">
    <q-tooltip v-if="tooltip">{{ tooltip }}</q-tooltip>
  </q-btn>
</template>

<script setup>
import { useFlowEditor } from 'src/composables/useFlowEditor'

const props = defineProps({
  templateName: { type: String, default: null },
  label:        { type: String, default: 'Flows' },
  icon:         { type: String, default: 'account_tree' },
  color:        { type: String, default: 'indigo-6' },
  tooltip:      { type: String, default: '' },
  flat:         { type: Boolean, default: false },
  dense:        { type: Boolean, default: true },
  size:         { type: String, default: 'md' },
  category:     { type: String, default: 'other' },
  appliesTo:    { type: String, default: null },
  triggerEvent: { type: String, default: null },
})

const emit = defineEmits(['saved'])

const fe = useFlowEditor()

function onClick () {
  const onSaved = (tpl) => emit('saved', tpl)
  if (props.templateName) {
    fe.openTemplate(props.templateName, { onSaved })
  } else {
    fe.openNew({
      category: props.category,
      applies_to: props.appliesTo,
      trigger_event: props.triggerEvent,
      onSaved,
    })
  }
}
</script>
