import { api } from '../lib/api.mjs';

class WoForm extends HTMLElement {
  #woId = null;
  #wo   = null;

  static get observedAttributes() { return ['wo-id']; }
  attributeChangedCallback(_, __, val) { this.#woId = val ? +val : null; this.#load(); }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.#render();
    if (this.#woId) this.#load();
  }

  async #load() {
    if (!this.#woId) return;
    this.#wo = await api.get(`/work-orders/${this.#woId}`);
    this.#render();
  }

  #render() {
    const wo = this.#wo ?? {};
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; }
        form  { display: grid; gap: 1rem; }
        .row  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; color: #1a2e3b; }
        input, select, textarea {
          border: 1px solid #e2ebf0; border-radius: 8px;
          padding: .5rem .75rem; font-size: .95rem; background: #fff; color: #1a2e3b;
        }
        input:focus, select:focus, textarea:focus { outline: none; border-color: #0a7ea4; }
        textarea { resize: vertical; min-height: 80px; }
        .actions { display: flex; gap: .75rem; justify-content: flex-end; }
        button {
          padding: .5rem 1.25rem; border: none; border-radius: 8px;
          font-weight: 600; cursor: pointer;
        }
        .btn-primary { background: #0a7ea4; color: #fff; }
        .btn-cancel  { background: transparent; border: 1px solid #e2ebf0; color: #1a2e3b; }
        .error { color: #c0392b; font-size: .85rem; }
      </style>
      <form>
        <label>Title *<input name="title" required value="${wo.title || ''}"></label>
        <div class="row">
          <label>Priority
            <select name="priority">
              ${['low','normal','high','urgent'].map(p =>
                `<option value="${p}" ${wo.priority===p?'selected':''}>${p}</option>`).join('')}
            </select>
          </label>
          <label>Site Name<input name="site_name" value="${wo.site_name || ''}"></label>
        </div>
        <label>Address<input name="address" value="${wo.address || ''}"></label>
        <div class="row">
          <label>Scheduled Start<input type="datetime-local" name="scheduled_start"
            value="${wo.scheduled_start ? wo.scheduled_start.slice(0,16) : ''}"></label>
          <label>Scheduled End<input type="datetime-local" name="scheduled_end"
            value="${wo.scheduled_end ? wo.scheduled_end.slice(0,16) : ''}"></label>
        </div>
        <label>Description<textarea name="description">${wo.description || ''}</textarea></label>
        <label>Instructions<textarea name="instructions">${wo.instructions || ''}</textarea></label>
        <label>Access Notes<textarea name="access_notes">${wo.access_notes || ''}</textarea></label>
        <div class="error" id="err"></div>
        <div class="actions">
          <button type="button" class="btn-cancel" id="cancel">Cancel</button>
          <button type="submit" class="btn-primary">${this.#woId ? 'Save Changes' : 'Create Work Order'}</button>
        </div>
      </form>`;

    this.shadowRoot.querySelector('#cancel').addEventListener('click', () =>
      this.dispatchEvent(new CustomEvent('wo:cancel', { bubbles: true, composed: true })));

    this.shadowRoot.querySelector('form').addEventListener('submit', async e => {
      e.preventDefault();

      // Read fields directly — Shadow DOM + FormData has unreliable browser support
      const val = name => (this.shadowRoot.querySelector(`[name="${name}"]`)?.value ?? '').trim();
      // datetime-local gives "YYYY-MM-DDTHH:MM"; convert to full ISO so Go can parse it
      const dt  = name => { const v = val(name); return v ? new Date(v).toISOString() : null; };

      const body = {
        title:           val('title'),
        priority:        val('priority') || 'normal',
        site_name:       val('site_name'),
        address:         val('address'),
        scheduled_start: dt('scheduled_start'),
        scheduled_end:   dt('scheduled_end'),
        description:     val('description'),
        instructions:    val('instructions'),
        access_notes:    val('access_notes'),
      };

      if (!body.title) {
        this.shadowRoot.querySelector('#err').textContent = 'Title is required.';
        return;
      }

      this.shadowRoot.querySelector('#err').textContent = '';
      try {
        const wo = this.#woId
          ? await api.put(`/work-orders/${this.#woId}`, body)
          : await api.post('/work-orders', body);
        this.dispatchEvent(new CustomEvent('wo:saved',
          { detail: { wo }, bubbles: true, composed: true }));
      } catch (err) {
        this.shadowRoot.querySelector('#err').textContent = err.message;
      }
    });
  }
}

customElements.define('wo-form', WoForm);