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

const STATUSES  = ['draft','assigned','scheduled','in_progress','pending_review','closed'];
const PRI_COLOR = { low:'var(--priority-low)', normal:'var(--priority-normal)', high:'var(--priority-high)', urgent:'var(--priority-urgent)' };

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

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

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

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

  #render() {
    const wo = this.#wo || {};
    const isNew = !this.#woId;
    const s = this.shadowRoot;
    s.innerHTML = `<style>${this.#css()}</style>${this.#html(wo, isNew)}`;
    this.#bind();
    if (window.lucide) lucide.createIcons({ root: s });
  }

  #css() { return `
    :host { display: block; }
    .page-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
    .back-btn { background:none; border:1px solid var(--border); color:var(--text); border-radius:var(--radius); padding:.4rem .75rem; font-size:.813rem; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:.3rem; transition:background .15s; }
    .back-btn:hover { background:var(--surface-2); }
    h1 { font-size:1.25rem; font-weight:700; color:var(--text); }
    .layout { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; align-items:start; }
    .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; flex-direction:column; gap:1rem; box-shadow:var(--shadow-sm); }
    .card-title { font-size:.813rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; padding-bottom:.75rem; border-bottom:1px solid var(--border); }
    label { display:flex; flex-direction:column; gap:.3rem; font-size:.813rem; font-weight:600; color:var(--text); }
    input, select, textarea { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .75rem; background:var(--surface); color:var(--text); font-size:.875rem; width:100%; transition:border-color .15s,box-shadow .15s; color-scheme:inherit; }
    input:focus, select:focus, textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,126,164,.15); }
    textarea { resize:vertical; min-height:80px; line-height:1.6; font-family:inherit; }
    .row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; padding-right:2rem; }
    .priority-select-wrap { position:relative; }
    .pri-dot { width:8px; height:8px; border-radius:50%; position:absolute; left:.75rem; top:50%; transform:translateY(-50%); pointer-events:none; }
    .priority-select { padding-left:1.75rem; }
    .footer { display:flex; justify-content:flex-end; gap:.75rem; margin-top:.5rem; }
    .btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border:none; border-radius:var(--radius); font-size:.875rem; font-weight:600; cursor:pointer; transition:opacity .15s; }
    .btn-primary { background:var(--teal); color:#fff; }
    .btn-primary:hover { opacity:.88; }
    .btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
    .btn-ghost:hover { background:var(--surface-2); }
    .btn:disabled { opacity:.5; cursor:not-allowed; }
    .err { color:var(--danger); font-size:.813rem; text-align:right; }
    @media (max-width:768px) { .layout { grid-template-columns:1fr; } .row2 { grid-template-columns:1fr; } }
    .lp-dialog { border:1px solid var(--border); border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow-lg); width:440px; max-width:96vw; background:var(--surface); color:var(--text); }
    .lp-dialog::backdrop { background:rgba(0,0,0,.45); }
    .lp-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
    .lp-title { font-size:.938rem; font-weight:700; }
    .lp-close { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.25rem; display:flex; }
    .lp-body { padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.75rem; }
    .lp-search { width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .75rem; font-size:.875rem; background:var(--surface); color:var(--text); box-sizing:border-box; }
    .lp-search:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,126,164,.12); }
    .lp-list { max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.35rem; }
    .lp-item { padding:.55rem .75rem; border-radius:var(--radius-sm); cursor:pointer; display:flex; flex-direction:column; gap:.15rem; transition:background .12s; border:2px solid transparent; }
    .lp-item:hover { background:var(--surface-2); }
    .lp-item.selected { border-color:var(--teal); background:rgba(10,126,164,.06); }
    .lp-item-name { font-size:.875rem; font-weight:500; color:var(--text); }
    .lp-item-meta { font-size:.75rem; color:var(--text-muted); }
    .lp-footer { padding:.875rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem; }
    .lp-empty { text-align:center; padding:1.5rem; color:var(--text-muted); font-size:.875rem; }
  `; }

  #html(wo, isNew) {
    const v = (field, fallback = '') => this.#esc(wo[field] ?? fallback);
    return `
      <div class="page-header">
        <button class="back-btn" id="back"><i data-lucide="chevron-left" style="width:15px;height:15px"></i> Back</button>
        <h1>${isNew ? 'New Work Order' : `Edit ${wo.wo_number || 'Work Order'}`}</h1>
      </div>
      <form id="wo-form">
        <div class="layout">
          <!-- Left: main fields -->
          <div style="display:flex;flex-direction:column;gap:1rem;">
            <div class="card">
              <div style="display:flex;align-items:center;justify-content:space-between;padding-bottom:.75rem;border-bottom:1px solid var(--border);">
                <span class="card-title" style="border:none;padding:0;margin:0">Details</span>
                ${(isNew || wo.status === 'draft') ? `<button type="button" class="btn btn-ghost" id="load-profile-btn" style="padding:.3rem .7rem;font-size:.75rem;">
                  <i data-lucide="layout-template" style="width:13px;height:13px"></i> Load Profile
                </button>` : ''}
              </div>
              <label>Title *<input name="title" required value="${v('title')}" placeholder="Brief description of the work"></label>
              <label>Description<textarea name="description" rows="3" placeholder="What needs to be done…">${v('description')}</textarea></label>
              <label>Instructions<textarea name="instructions" rows="5" placeholder="Step-by-step instructions for the field crew…">${v('instructions')}</textarea></label>
            </div>
            <div class="card">
              <div class="card-title">Location</div>
              <label>Site Name<input name="site_name" value="${v('site_name')}" placeholder="e.g. Downtown Office"></label>
              <label>Address<input name="address" value="${v('address')}" placeholder="Street address"></label>
              <label>Access Notes<textarea name="access_notes" rows="2" placeholder="Gate codes, road conditions, parking info…">${v('access_notes')}</textarea></label>
            </div>
          </div>

          <!-- Right: metadata -->
          <div style="display:flex;flex-direction:column;gap:1rem;">
            <div class="card">
              <div class="card-title">Status &amp; Priority</div>
              ${!isNew ? `<label>Status
                <select name="status">
                  ${STATUSES.map(s => `<option value="${s}" ${wo.status===s?'selected':''}>${s.replace('_',' ')}</option>`).join('')}
                </select>
              </label>` : ''}
              <label>Priority
                <div class="priority-select-wrap">
                  <span class="pri-dot" id="pri-dot" style="background:${PRI_COLOR[wo.priority||'normal']}"></span>
                  <select name="priority" class="priority-select">
                    ${['low','normal','high','urgent'].map(p =>
                      `<option value="${p}" ${(wo.priority||'normal')===p?'selected':''}>${p.charAt(0).toUpperCase()+p.slice(1)}</option>`
                    ).join('')}
                  </select>
                </div>
              </label>
            </div>
            <div class="card">
              <div class="card-title">Schedule</div>
              <label>Scheduled Start<input type="datetime-local" name="scheduled_start" value="${toLocalDatetime(wo.scheduled_start)}"></label>
              <label>Scheduled End<input type="datetime-local" name="scheduled_end" value="${toLocalDatetime(wo.scheduled_end)}"></label>
            </div>
            <div class="card">
              <div class="card-title">Parent</div>
              <label>Parent Type
                <select name="parent_type">
                  <option value="">None</option>
                  <option value="project"       ${wo.parent_type==='project'?'selected':''}>Project</option>
                  <option value="ticket"         ${wo.parent_type==='ticket'?'selected':''}>Trouble Ticket</option>
                  <option value="service_order"  ${wo.parent_type==='service_order'?'selected':''}>Service Order</option>
                </select>
              </label>
              <label>Parent ID<input name="parent_id" type="number" value="${wo.parent_id ?? ''}" placeholder="Reference ID"></label>
            </div>
          </div>
        </div>

        <div class="footer">
          <div class="err" id="form-err"></div>
          <button type="button" class="btn btn-ghost" id="cancel-btn">Cancel</button>
          <button type="submit" class="btn btn-primary" id="save-btn">
            <i data-lucide="save" style="width:14px;height:14px"></i>
            ${isNew ? 'Create Work Order' : 'Save Changes'}
          </button>
        </div>
      </form>

      <dialog class="lp-dialog" id="lp-dialog">
        <div class="lp-header">
          <span class="lp-title">Load Work Order Profile</span>
          <button class="lp-close" id="lp-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
        </div>
        <div class="lp-body">
          <input class="lp-search" id="lp-search" placeholder="Search profiles…" autocomplete="off">
          <div class="lp-list" id="lp-list"><div class="lp-empty">Loading…</div></div>
        </div>
        <div class="lp-footer">
          <button class="btn btn-ghost" id="lp-cancel">Cancel</button>
          <button class="btn btn-primary" id="lp-confirm" disabled>Load Profile</button>
        </div>
      </dialog>`;
  }

  #bind() {
    const s = this.shadowRoot;

    s.querySelector('#back')?.addEventListener('click', () => this.#goBack());
    s.querySelector('#cancel-btn')?.addEventListener('click', () => this.#goBack());

    // Load Profile dialog
    this.#bindLoadProfile(s);

    // Update priority dot colour on change
    s.querySelector('[name="priority"]')?.addEventListener('change', e => {
      const dot = s.querySelector('#pri-dot');
      if (dot) dot.style.background = PRI_COLOR[e.target.value] || PRI_COLOR.normal;
    });

    // Dirty tracking
    s.querySelectorAll('input, select, textarea').forEach(el =>
      el.addEventListener('input', () => { this.#dirty = true; }));

    s.querySelector('#wo-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const val = n => (s.querySelector(`[name="${n}"]`)?.value ?? '').trim();
      const dt  = n => { const v = val(n); return v ? new Date(v).toISOString() : null; };

      if (!val('title')) {
        s.querySelector('#form-err').textContent = 'Title is required.';
        return;
      }

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

      const btn = s.querySelector('#save-btn');
      btn.disabled = true;
      s.querySelector('#form-err').textContent = '';

      try {
        if (this.#woId) {
          // Also update status if changed
          const newStatus = val('status');
          if (newStatus && this.#wo?.status !== newStatus) {
            await api.put(`/work-orders/${this.#woId}/status`, { status: newStatus });
          }
          await api.put(`/work-orders/${this.#woId}`, body);
          window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Work order saved', type: 'success' } }));
        } else {
          const created = await api.post('/work-orders', body);
          window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Work order created', type: 'success' } }));
          this.#dirty = false;
          window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${created.id}` } }));
          return;
        }
        this.#dirty = false;
        window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${this.#woId}` } }));
      } catch (err) {
        s.querySelector('#form-err').textContent = err.message;
        btn.disabled = false;
      }
    });
  }

  #bindLoadProfile(s) {
    const lpBtn     = s.querySelector('#load-profile-btn');
    const dialog    = s.querySelector('#lp-dialog');
    if (!lpBtn || !dialog) return;

    const listEl    = s.querySelector('#lp-list');
    const searchEl  = s.querySelector('#lp-search');
    const confirmBtn = s.querySelector('#lp-confirm');
    let allProfiles  = [];
    let selectedProfile = null;

    const renderList = (items) => {
      if (items.length === 0) { listEl.innerHTML = '<div class="lp-empty">No profiles found</div>'; return; }
      listEl.innerHTML = items.map(p => `
        <div class="lp-item${selectedProfile?.id === p.id ? ' selected' : ''}" data-id="${p.id}">
          <div class="lp-item-name">${this.#esc(p.name)}</div>
          <div class="lp-item-meta">${p.category ? `${p.category} · ` : ''}${p.step_count} step${p.step_count !== 1 ? 's' : ''} · ${p.default_priority} priority${p.default_duration_hours ? ` · ${p.default_duration_hours}h` : ''}</div>
        </div>`).join('');
      listEl.querySelectorAll('.lp-item').forEach(item => {
        item.addEventListener('click', () => {
          selectedProfile = allProfiles.find(p => p.id === +item.dataset.id);
          listEl.querySelectorAll('.lp-item').forEach(i => i.classList.toggle('selected', +i.dataset.id === selectedProfile?.id));
          confirmBtn.disabled = !selectedProfile;
        });
      });
    };

    lpBtn.addEventListener('click', async () => {
      selectedProfile = null;
      confirmBtn.disabled = true;
      searchEl.value = '';
      listEl.innerHTML = '<div class="lp-empty">Loading…</div>';
      dialog.showModal();
      try {
        allProfiles = await api.get('/profiles') || [];
        renderList(allProfiles);
      } catch (err) {
        listEl.innerHTML = `<div class="lp-empty">${err.message}</div>`;
      }
    });

    searchEl.addEventListener('input', () => {
      const q = searchEl.value.toLowerCase();
      renderList(q ? allProfiles.filter(p => p.name.toLowerCase().includes(q) || (p.category || '').toLowerCase().includes(q)) : allProfiles);
    });

    s.querySelector('#lp-close').addEventListener('click',  () => dialog.close());
    s.querySelector('#lp-cancel').addEventListener('click', () => dialog.close());

    confirmBtn.addEventListener('click', async () => {
      if (!selectedProfile) return;
      // Fetch full profile to get instructions
      let full = selectedProfile;
      try { full = await api.get(`/profiles/${selectedProfile.id}`); } catch { /* use list data */ }

      dialog.close();

      // Pre-fill form fields (only if currently empty)
      const priEl    = s.querySelector('[name="priority"]');
      const instrEl  = s.querySelector('[name="instructions"]');

      if (priEl) { priEl.value = full.default_priority || 'normal'; priEl.dispatchEvent(new Event('change')); }
      if (instrEl && !instrEl.value.trim() && full.default_instructions) {
        instrEl.value = full.default_instructions;
      }
      // Compute scheduled_end from duration if start is filled and end is empty
      const startEl = s.querySelector('[name="scheduled_start"]');
      const endEl   = s.querySelector('[name="scheduled_end"]');
      if (full.default_duration_hours && startEl?.value && !endEl?.value) {
        const startMs = new Date(startEl.value).getTime();
        const endDate = new Date(startMs + full.default_duration_hours * 3600000);
        // Format back to datetime-local value (YYYY-MM-DDTHH:MM)
        endEl.value = endDate.toISOString().slice(0, 16);
      }

      this.#dirty = true;
      window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: `Profile "${full.name}" loaded`, type: 'success' } }));
    });
  }

  #goBack() {
    if (this.#dirty && !confirm('You have unsaved changes. Leave anyway?')) return;
    if (this.#woId) {
      window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${this.#woId}` } }));
    } else {
      window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: '/work-orders' } }));
    }
  }

  #esc(s) { return (s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
}
customElements.define('wo-form', WoForm);