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

const UNITS = ['ft', 'ea', 'box', 'roll', 'pair', 'bag', 'lb', 'gal', 'pkg'];

class MaterialForm extends HTMLElement {
  #onSave = null;

  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `<style>:host{display:block}</style><dialog></dialog>`;
    }
  }

  open(material, onSave) {
    this.#onSave = onSave;
    const isEdit = !!material;
    const d = this.shadowRoot.querySelector('dialog');
    d.innerHTML = `
      <style>
        dialog { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-lg); width: 440px; max-width: 95vw; background: var(--surface); color: var(--text); }
        dialog::backdrop { background: rgba(0,0,0,.45); }
        .dlg-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); }
        .dlg-title { font-size: 1rem; font-weight: 700; }
        .dlg-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: .25rem; display: flex; }
        form { padding: 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
        .field-label { font-size: .813rem; font-weight: 600; color: var(--text); display: block; margin-bottom: .3rem; }
        .field-input, .field-select { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .75rem; font-size: .875rem; background: var(--surface); color: var(--text); box-sizing: border-box; transition: border-color .15s; }
        .field-input:focus, .field-select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10,126,164,.12); }
        .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
        .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; }
        .toggle-label { font-size: .875rem; font-weight: 500; }
        input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
        .dlg-footer { padding: .875rem 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .5rem; }
        .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: .5rem 1rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
        .btn-primary { background: var(--teal); color: #fff; border: none; border-radius: var(--radius); padding: .5rem 1rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
        .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
        .error-msg { color: var(--danger); font-size: .813rem; min-height: 1.2em; }
      </style>
      <div class="dlg-header">
        <span class="dlg-title">${isEdit ? 'Edit Material' : 'Add Material'}</span>
        <button class="dlg-close" id="dlg-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
      </div>
      <form id="mat-form" novalidate>
        <div>
          <label class="field-label" for="m-name">Name *</label>
          <input class="field-input" id="m-name" type="text" value="${this.#esc(material?.name || '')}" placeholder="e.g. Single Mode Fiber Cable" required maxlength="200">
        </div>
        <div class="row-2">
          <div>
            <label class="field-label" for="m-unit">Unit of Measure</label>
            <select class="field-select" id="m-unit">
              <option value="">— Select —</option>
              ${UNITS.map(u => `<option value="${u}" ${material?.unit === u ? 'selected' : ''}>${u}</option>`).join('')}
            </select>
          </div>
          <div>
            <label class="field-label" for="m-part">Part Number</label>
            <input class="field-input" id="m-part" type="text" value="${this.#esc(material?.part_number || '')}" placeholder="e.g. SMF-09-500" maxlength="100">
          </div>
        </div>
        ${isEdit ? `
          <div class="toggle-row">
            <span class="toggle-label">Active</span>
            <input type="checkbox" id="m-active" ${material.active ? 'checked' : ''}>
          </div>` : ''}
        <div class="error-msg" id="form-error"></div>
      </form>
      <div class="dlg-footer">
        <button class="btn-ghost" id="dlg-cancel">Cancel</button>
        <button class="btn-primary" id="dlg-save">${isEdit ? 'Save Changes' : 'Add Material'}</button>
      </div>`;

    if (window.lucide) lucide.createIcons({ root: d });
    d.querySelector('#dlg-close').addEventListener('click',  () => d.close());
    d.querySelector('#dlg-cancel').addEventListener('click', () => d.close());

    d.querySelector('#dlg-save').addEventListener('click', async () => {
      const name  = d.querySelector('#m-name').value.trim();
      const errEl = d.querySelector('#form-error');
      if (!name) { errEl.textContent = 'Name is required'; d.querySelector('#m-name').focus(); return; }
      errEl.textContent = '';

      const saveBtn = d.querySelector('#dlg-save');
      saveBtn.disabled = true;
      saveBtn.textContent = 'Saving…';

      const payload = {
        name,
        unit:        d.querySelector('#m-unit').value,
        part_number: d.querySelector('#m-part').value.trim(),
        active: isEdit ? d.querySelector('#m-active').checked : true,
      };

      try {
        if (isEdit) await api.put(`/registry/materials/${material.id}`, payload);
        else        await api.post('/registry/materials', payload);
        d.close();
        window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: isEdit ? 'Material updated' : 'Material added', type: 'success' } }));
        this.#onSave?.();
      } catch (err) {
        errEl.textContent = err.message;
        saveBtn.disabled = false;
        saveBtn.textContent = isEdit ? 'Save Changes' : 'Add Material';
      }
    });

    d.showModal();
    d.querySelector('#m-name').focus();
  }

  #esc(s) { return (s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
}

customElements.define('material-form', MaterialForm);