/**
 * Skrift – Interface „Drucken"
 * ---------------------------------------------------------------------------
 * Zeigt im Auftrag eine Maschinen-Auswahl + „Drucken"-Button. Der Button reiht
 * den Auftrag über POST /skrift-orders/enqueue als Druck-Job(s) ein (Brief +
 * ggf. Umschlag, mit aufgelöstem Template). Läuft über die angemeldete Session.
 *
 * Bewusst von Hand als ESM (kein Build-Schritt) – Vue + SDK stellt Directus bereit.
 */
import { defineComponent, ref, inject, onMounted, h } from 'vue';
import { useApi } from '@directus/extensions-sdk';

const PrintButton = defineComponent({
  setup() {
    const api = useApi();
    const values = inject('values', ref({}));
    const machines = ref([]);
    const selected = ref(null);
    const busy = ref(false);
    const msg = ref('');
    const err = ref('');

    async function ladeMaschinen() {
      try {
        const res = await api.get('/items/machines', { params: { fields: 'id,name,active', limit: -1 } });
        machines.value = (res.data?.data || []).filter((m) => m.active !== false);
        if (machines.value.length && selected.value == null) selected.value = machines.value[0].id;
      } catch {
        err.value = 'Maschinen konnten nicht geladen werden.';
      }
    }
    onMounted(ladeMaschinen);

    async function drucken() {
      const orderId = values && values.value ? values.value.id : null;
      if (!orderId) { err.value = 'Auftrag zuerst speichern.'; return; }
      if (selected.value == null) { err.value = 'Bitte eine Maschine wählen.'; return; }
      busy.value = true; err.value = ''; msg.value = '';
      try {
        const res = await api.post('/skrift-orders/enqueue', { order: orderId, machine: selected.value });
        const n = (res.data?.jobs || []).length;
        msg.value = `${n} Druck-Job(s) eingereiht.`;
      } catch (e) {
        err.value = (e && e.response && e.response.data && e.response.data.error) || (e && e.message) || 'Fehler beim Einreihen.';
      } finally {
        busy.value = false;
      }
    }

    return () => {
      if (!machines.value.length) {
        return h('div', { style: 'color:var(--foreground-subdued);font-size:13px;' },
          err.value || 'Keine aktive Maschine – bitte unter Einstellungen → Maschinen anlegen.');
      }
      return h('div', { style: 'display:flex;flex-direction:column;gap:8px;' }, [
        h('div', { style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;' }, [
          h('select', {
            style: 'padding:6px 10px;border:1px solid var(--border-normal);border-radius:6px;background:var(--background-page);font:inherit;',
            onChange: (e) => { selected.value = e.target.value; },
          }, machines.value.map((m) => h('option', { value: m.id, selected: String(m.id) === String(selected.value) }, m.name))),
          h('button', {
            type: 'button', disabled: busy.value, onClick: drucken,
            style: 'cursor:pointer;border:1px solid var(--primary);background:var(--primary);color:#fff;border-radius:6px;padding:6px 16px;font:inherit;',
          }, busy.value ? 'Wird eingereiht …' : 'Drucken'),
        ]),
        msg.value ? h('div', { style: 'color:var(--success, #2e7d32);font-size:13px;' }, msg.value) : null,
        err.value ? h('div', { style: 'color:var(--danger, #c62828);font-size:13px;' }, err.value) : null,
      ]);
    };
  },
});

export default {
  id: 'skrift-print-button',
  name: 'Drucken',
  icon: 'print',
  description: 'Reiht den Auftrag als Druck-Job für eine Maschine ein.',
  component: PrintButton,
  types: ['alias'],
  localTypes: ['presentation'],
  group: 'presentation',
  options: null,
};