import { api } from '../../lib/api.mjs';
import { formatDateTime, formatDate } from '../../lib/format.mjs';

const TABS = ['Overview', 'Checklist', 'Resources', 'Photos', 'Accounting', 'Activity'];
const STATUS_TRANSITIONS = {
  draft:          ['assigned','scheduled'],
  assigned:       ['scheduled','in_progress'],
  scheduled:      ['in_progress'],
  in_progress:    ['pending_review','closed'],
  pending_review: ['in_progress','closed'],
  closed:         [],
};

class WoDetail extends HTMLElement {
  #woId    = null;
  #wo      = null;
  #tab     = 'Overview';
  #loading = true;

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

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

  async #load() {
    this.#loading = true;
    this.#render();
    try { this.#wo = await api.get(`/work-orders/${this.#woId}`); } catch { this.#wo = null; }
    this.#loading = false;
    this.#render();
  }

  #render() {
    const s = this.shadowRoot;
    s.innerHTML = `<style>${this.#css()}</style>${this.#html()}`;
    this.#bind();
    if (window.lucide) lucide.createIcons({ nodes: [s] });
  }

  #css() { return `
    :host { display: block; }
    .page-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
    .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; flex-shrink:0; }
    .back-btn:hover { background:var(--surface-2); }
    .header-info { flex:1; min-width:0; }
    .wo-number { font-family:monospace; font-size:.813rem; color:var(--text-muted); margin-bottom:.15rem; }
    h1 { font-size:1.2rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .header-badges { display:flex; align-items:center; gap:.5rem; margin-top:.35rem; flex-wrap:wrap; }
    .header-actions { display:flex; gap:.5rem; flex-shrink:0; }
    .btn { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .9rem; border:none; border-radius:var(--radius); font-size:.813rem; font-weight:600; cursor:pointer; transition:opacity .15s,background .15s; white-space:nowrap; }
    .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); }
    .meta-strip { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.25rem; margin-bottom:1rem; display:flex; gap:2rem; flex-wrap:wrap; box-shadow:var(--shadow-sm); }
    .meta-item { display:flex; flex-direction:column; gap:.15rem; }
    .meta-label { font-size:.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
    .meta-value { font-size:.875rem; color:var(--text); font-weight:500; }
    .tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:1rem; overflow-x:auto; }
    .tab { padding:.65rem 1rem; font-size:.875rem; font-weight:500; color:var(--text-muted); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:color .15s,border-color .15s; }
    .tab.active { color:var(--teal); border-bottom-color:var(--teal); font-weight:600; }
    .tab:hover:not(.active) { color:var(--text); }
    .tab-content { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow-sm); }
    .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
    .detail-field { display:flex; flex-direction:column; gap:.25rem; }
    .field-label { font-size:.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
    .field-value { font-size:.875rem; color:var(--text); line-height:1.5; }
    .field-value.empty { color:var(--text-muted); font-style:italic; }
    .text-block { background:var(--surface-2); border-radius:var(--radius-sm); padding:.75rem 1rem; font-size:.875rem; line-height:1.6; color:var(--text); white-space:pre-wrap; }
    .phase-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:999px; font-size:.7rem; font-weight:700; background:var(--surface-2); color:var(--text-muted); }
    .status-menu { position:relative; }
    .status-dropdown { position:absolute; top:calc(100% + .25rem); right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); z-index:50; min-width:160px; overflow:hidden; }
    .status-opt { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; font-size:.875rem; cursor:pointer; border:none; background:none; width:100%; text-align:left; transition:background .15s; color:var(--text); }
    .status-opt:hover { background:var(--surface-2); }
    .status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .placeholder { text-align:center; padding:3rem; color:var(--text-muted); }
    .placeholder i { margin-bottom:.75rem; }
    @media (max-width:768px) { .detail-grid { grid-template-columns:1fr; } .meta-strip { gap:1rem; } }
  `; }

  #html() {
    if (this.#loading) return `
      <div style="display:flex;align-items:center;justify-content:center;padding:4rem">
        <ui-spinner size="lg"></ui-spinner>
      </div>`;

    if (!this.#wo) return `
      <ui-empty icon="alert-circle" heading="Work order not found" body="This work order may have been deleted.">
        <button class="btn btn-ghost" id="back" style="margin-top:.5rem">
          <i data-lucide="arrow-left" style="width:14px;height:14px"></i> Back to list
        </button>
      </ui-empty>`;

    const wo = this.#wo;
    const transitions = STATUS_TRANSITIONS[wo.status] || [];
    const STATUS_COLORS = { draft:'var(--status-draft)', assigned:'var(--status-assigned)', scheduled:'var(--status-scheduled)', in_progress:'var(--status-in_progress)', pending_review:'var(--status-pending_review)', closed:'var(--status-closed)' };

    return `
      <div class="page-header">
        <button class="back-btn" id="back"><i data-lucide="chevron-left" style="width:15px;height:15px"></i> Work Orders</button>
        <div class="header-info">
          <div class="wo-number">${wo.wo_number}</div>
          <h1>${this.#esc(wo.title)}</h1>
          <div class="header-badges">
            <ui-badge type="status"   value="${wo.status}"></ui-badge>
            <ui-badge type="priority" value="${wo.priority}"></ui-badge>
          </div>
        </div>
        <div class="header-actions">
          <button class="btn btn-ghost" id="edit-btn">
            <i data-lucide="pencil" style="width:14px;height:14px"></i> Edit
          </button>
          ${transitions.length ? `
            <div class="status-menu" id="status-menu">
              <button class="btn btn-primary" id="status-btn">
                <i data-lucide="refresh-cw" style="width:14px;height:14px"></i> Change Status
              </button>
              <div class="status-dropdown" id="status-dropdown" style="display:none">
                ${transitions.map(s => `
                  <button class="status-opt" data-status="${s}">
                    <span class="status-dot" style="background:${STATUS_COLORS[s]}"></span>
                    ${s.replace('_',' ')}
                  </button>`).join('')}
              </div>
            </div>` : ''}
        </div>
      </div>

      <div class="meta-strip">
        <div class="meta-item">
          <span class="meta-label">Site</span>
          <span class="meta-value">${this.#esc(wo.site_name) || '—'}</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">Scheduled Start</span>
          <span class="meta-value">${formatDateTime(wo.scheduled_start)}</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">Scheduled End</span>
          <span class="meta-value">${formatDateTime(wo.scheduled_end)}</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">Created By</span>
          <span class="meta-value">${this.#esc(wo.created_by) || '—'}</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">Created</span>
          <span class="meta-value">${formatDate(wo.created_at)}</span>
        </div>
        ${wo.parent_type ? `<div class="meta-item">
          <span class="meta-label">Parent</span>
          <span class="meta-value">${wo.parent_type} #${wo.parent_id}</span>
        </div>` : ''}
      </div>

      <div class="tab-bar">
        ${TABS.map(t => `<button class="tab${this.#tab===t?' active':''}" data-tab="${t}">${t}</button>`).join('')}
      </div>

      <div class="tab-content" id="tab-content">
        ${this.#tabContent(wo)}
      </div>`;
  }

  #tabContent(wo) {
    switch (this.#tab) {
      case 'Overview': return `
        <div class="detail-grid">
          <div class="detail-field" style="grid-column:1/-1">
            <div class="field-label">Description</div>
            ${wo.description
              ? `<div class="text-block">${this.#esc(wo.description)}</div>`
              : '<div class="field-value empty">No description provided</div>'}
          </div>
          <div class="detail-field" style="grid-column:1/-1">
            <div class="field-label">Instructions</div>
            ${wo.instructions
              ? `<div class="text-block">${this.#esc(wo.instructions)}</div>`
              : '<div class="field-value empty">No instructions provided</div>'}
          </div>
          <div class="detail-field">
            <div class="field-label">Address</div>
            <div class="field-value${wo.address?'':' empty'}">${this.#esc(wo.address) || 'Not set'}</div>
          </div>
          <div class="detail-field">
            <div class="field-label">Access Notes</div>
            ${wo.access_notes
              ? `<div class="text-block" style="font-size:.813rem">${this.#esc(wo.access_notes)}</div>`
              : '<div class="field-value empty">No access notes</div>'}
          </div>
        </div>`;
      case 'Checklist':
      case 'Resources':
      case 'Photos':
      case 'Accounting':
      case 'Activity':
        return `<div class="placeholder">
          <i data-lucide="construction" style="width:40px;height:40px;margin:0 auto .75rem;color:var(--text-muted)"></i>
          <p style="font-weight:600;margin-bottom:.35rem">${this.#tab} — Coming in Phase 2</p>
          <p style="font-size:.875rem">This section will be available in the next phase of development.</p>
        </div>`;
      default: return '';
    }
  }

  #bind() {
    const s = this.shadowRoot;
    s.querySelector('#back')?.addEventListener('click', () =>
      window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: '/work-orders' } })));

    s.querySelector('#edit-btn')?.addEventListener('click', () =>
      window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${this.#woId}/edit` } })));

    // Tab switching
    s.querySelectorAll('.tab').forEach(tab =>
      tab.addEventListener('click', () => {
        this.#tab = tab.dataset.tab;
        s.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === this.#tab));
        s.querySelector('#tab-content').innerHTML = this.#tabContent(this.#wo);
        if (window.lucide) lucide.createIcons({ nodes: [s.querySelector('#tab-content')] });
      }));

    // Status dropdown
    const statusBtn = s.querySelector('#status-btn');
    const dropdown  = s.querySelector('#status-dropdown');
    statusBtn?.addEventListener('click', e => {
      e.stopPropagation();
      dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
    });
    document.addEventListener('click', () => { if (dropdown) dropdown.style.display = 'none'; }, { once: false });

    s.querySelectorAll('.status-opt').forEach(opt =>
      opt.addEventListener('click', async () => {
        dropdown.style.display = 'none';
        try {
          await api.put(`/work-orders/${this.#woId}/status`, { status: opt.dataset.status });
          window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: `Status changed to ${opt.dataset.status.replace('_',' ')}`, type: 'success' } }));
          this.#load();
        } catch (err) {
          window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
        }
      }));
  }

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