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

class WoList extends HTMLElement {
  #data = [];

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

  async #load() {
    const status = this.getAttribute('filter-status') || '';
    this.#data = await api.get(`/work-orders?status=${status}`) ?? [];
    this.#render();
  }

  refresh() { this.#load(); }

  #render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: block; }
        .empty { color: #64748b; text-align: center; padding: 3rem; }
        .grid  { display: grid; gap: .75rem; }
        .card  {
          background: #fff; border: 1px solid #e2ebf0;
          border-radius: 8px; padding: 1rem 1.25rem;
          cursor: pointer; display: grid;
          grid-template-columns: 1fr auto; gap: .25rem 1rem;
          transition: box-shadow .15s;
        }
        .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
        .wo-num  { font-size: .75rem; color: #64748b; }
        .title   { font-weight: 600; }
        .meta    { font-size: .8rem; color: #64748b; }
        .badge   { display:inline-block; padding:.2rem .6rem; border-radius:999px;
                   font-size:.7rem; font-weight:700; text-transform:uppercase;
                   align-self: start; margin-top:.25rem; }
        .draft        { background:#e2e8f0; color:#475569; }
        .assigned     { background:#dbeafe; color:#1d4ed8; }
        .scheduled    { background:#fef3c7; color:#92400e; }
        .in_progress  { background:#d1fae5; color:#065f46; }
        .pending_review { background:#ede9fe; color:#5b21b6; }
        .closed       { background:#f3f4f6; color:#6b7280; }
      </style>
      ${this.#data.length === 0
        ? '<div class="empty">No work orders found.</div>'
        : `<div class="grid">${this.#data.map(wo => `
          <div class="card" data-id="${wo.id}">
            <div>
              <div class="wo-num">${wo.wo_number}</div>
              <div class="title">${wo.title}</div>
              <div class="meta">${wo.site_name || '—'}  ·  ${wo.steps_done}/${wo.step_count} steps</div>
            </div>
            <span class="badge ${wo.status}">${wo.status.replace('_',' ')}</span>
          </div>`).join('')}
        </div>`}`;

    this.shadowRoot.querySelectorAll('.card').forEach(c =>
      c.addEventListener('click', () =>
        this.dispatchEvent(new CustomEvent('wo:select',
          { detail: { id: +c.dataset.id }, bubbles: true, composed: true }))));
  }
}

customElements.define('wo-list', WoList);