---
/* ---------------------------------------------------------------------------
 * PulseSubForm — embedded fieldset inside the dispatch edit panel.
 *
 * Reads the dispatch's current pulse (if any) and renders editable fields.
 * Submitted via the parent dispatch form with `pulse_*` prefixed names; the
 * dispatches resource's ops.create/update read these out of ctx.formData.
 *
 * If pulse_question is blank on save, no pulse is attached. The status field
 * intentionally isn't here — pulses follow their parent dispatch's lifecycle
 * (draft → open on publish, → closed on archive).
 * ------------------------------------------------------------------------- */

import { getPulseById } from '../../lib/db';

interface Props {
  /** The dispatch being edited, or null when creating. */
  item: Record<string, unknown> | null;
}

const { item } = Astro.props;
const pulseId = item?.pulse_id ? Number(item.pulse_id) : null;
const pulse = pulseId ? getPulseById(pulseId) : null;

const question = pulse?.question ?? '';
const initialOptions: string[] = pulse?.options ? [...pulse.options] : ['', ''];
while (initialOptions.length < 2) initialOptions.push('');

function toDateOnly(v: string | null | undefined): string {
  if (!v) return '';
  const s = String(v);
  const m = s.match(/^(\d{4}-\d{2}-\d{2})/);
  return m ? m[1] : '';
}
---

<div class="bs-pulse-embed">
  <p class="bs-helper">
    Attach a pulse by filling in the question and at least two options.
    Leaving the question blank means no pulse on this dispatch. Pulses open
    when the dispatch is published and close at the end of the chosen day.
  </p>

  <div class="bs-field">
    <label class="bs-label" for="pulse_question">Question</label>
    <input
      type="text"
      id="pulse_question"
      name="pulse_question"
      class="bs-input"
      value={question}
      placeholder="What should we prioritise next?"
      maxlength="240"
    />
  </div>

  <div class="bs-field">
    <label class="bs-label">Options</label>
    <div class="bs-multitext" data-multitext="pulse_options" data-min="2" data-max="4">
      <div class="bs-multitext-rows">
        {initialOptions.map((opt, i) => (
          <div class="bs-multitext-row">
            <input
              type="text"
              name="pulse_options"
              class="bs-input"
              value={opt}
              placeholder={`Option ${i + 1}`}
              maxlength="120"
            />
            <button type="button" class="bs-multitext-remove" aria-label="Remove option">×</button>
          </div>
        ))}
      </div>
      <button type="button" class="bs-multitext-add">+ Add option</button>
    </div>
  </div>

  <div class="bs-field">
    <label class="bs-label" for="pulse_closes_at">Closes on</label>
    <input
      type="date"
      id="pulse_closes_at"
      name="pulse_closes_at"
      class="bs-input"
      value={toDateOnly(pulse?.closes_at)}
    />
    <p class="bs-helper">
      The pulse closes at the end of the chosen day. Opens automatically when the
      dispatch is published.
    </p>
  </div>
</div>
