// Neues Ticket anlegen (auch aus dem Rechtsklick-Menü und per Tastenkürzel mit vorbefülltem Text).
import { h, clear, toast, errText } from '../lib/dom.js';
import { apiCall, getMeta, plainToHtml } from '../lib/core.js';
import { spinner, showError } from '../lib/ui.js';

export async function renderCreate(host, ctx) {
  host.append(spinner());
  let meta;
  try { meta = await getMeta(); } catch (e) { return showError(ctx, host, e); }
  const { prefill } = await chrome.storage.local.get('prefill');
  if (prefill) chrome.storage.local.remove('prefill');
  clear(host);
  const me = ctx.session.staff?.id;
  const f = {
    name: h('input', { type: 'text', required: true, maxlength: '120', placeholder: 'Name des Anfragers' }),
    mail: h('input', { type: 'email', placeholder: 'optional' }),
    subject: h('input', { type: 'text', value: prefill?.subject || '', required: true, maxlength: '255' }),
    message: h('textarea', { required: true, value: prefill?.message || '' }),
    dept: h('select', { required: true }, meta.departments.map((d) => h('option', { value: d.id }, d.name))),
    prio: h('select', { required: true }, meta.priorities.map((p) => h('option', { value: p.id }, p.name))),
    who: h('select', {}, h('option', { value: '' }, 'Nicht zuweisen'), h('option', { value: me, selected: '' }, 'Mir zuweisen'), meta.agents.filter((a) => a.id !== me).map((a) => h('option', { value: a.id }, a.name))),
    notify: h('input', { type: 'checkbox' }),
  };
  const submit = h('button', { class: 'btn primary', type: 'submit' }, 'Ticket anlegen');
  const out = h('div');
  host.append(h('form', { class: 'stack', onsubmit: async (ev) => {
    ev.preventDefault(); clear(out); submit.disabled = true;
    try {
      const { data } = await apiCall('ticket_create.php', { method: 'POST', body: {
        requesterName: f.name.value.trim(), requesterEmail: f.mail.value.trim(), subject: f.subject.value.trim(), message: plainToHtml(f.message.value.trim()),
        departmentId: Number(f.dept.value), priorityId: Number(f.prio.value), assignedStaffId: f.who.value ? Number(f.who.value) : null, notifyCustomer: f.notify.checked } });
      const number = data.ticket?.number;
      toast(`Ticket #${number} angelegt`);
      if (number) ctx.go('ticket', { number });
    } catch (e) { if (e.status === 401) return ctx.logoutExpired(); out.append(h('div', { class: 'msg err', role: 'alert' }, errText(e))); }
    submit.disabled = false;
  } },
    h('div', { class: 'card stack' },
      h('label', {}, 'Anfrager (Name)', f.name), h('label', {}, 'Anfrager (E-Mail)', f.mail),
      h('label', {}, 'Betreff', f.subject), h('label', {}, 'Beschreibung', f.message),
      h('div', { class: 'row2' }, h('label', {}, 'Abteilung', f.dept), h('label', {}, 'Priorität', f.prio)),
      h('label', {}, 'Bearbeiter', f.who),
      h('label', { class: 'inline' }, f.notify, 'Kunden per E-Mail benachrichtigen')),
    out, submit));
  f.name.focus();
}