// ─── Savuki Drilling — Assets Module ─────────────────────────────────────
import { showToast, openModal, closeModal } from '../app.js';

const BASE = '/api/assets';
function token() { return localStorage.getItem('sd_token') || ''; }

async function apiFetch(path, params = {}) {
  const qs = new URLSearchParams({ ...params, token: token() });
  const res = await fetch(`${BASE}/${path}?${qs}`);
  const json = await res.json();
  if (!json.success) throw new Error(json.message);
  return json.data;
}

async function apiPost(path, data) {
  const body = new URLSearchParams({ ...data, token: token() });
  const res = await fetch(`${BASE}/${path}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body,
  });
  const json = await res.json();
  if (!json.success) throw new Error(json.message);
  return json.data;
}

const TYPE_ICONS = {
  'Vehicles & Transport': '🚛',
  'Heavy Equipment': '🔧',
  'Drill': '⚙️',
  'Drill Truck': '🚚',
  'Compressor Truck': '🚛',
  'Tools & Accessories': '🔩',
  'Workshop & Maintenance Equipment': '🛠️',
  'Office Items': '💻',
  'Safety & Protective Gear': '🦺',
  'Survey Equipment': '📐',
  'Items': '📦',
  'Temporary Structures': '🏗️',
};
function typeIcon(name) { return TYPE_ICONS[name] || '📋'; }

// ═════════════════════════════════════════════════════════════════════════
// INIT ASSETS PAGE
// ═════════════════════════════════════════════════════════════════════════
export async function initAssets(role) {
  const isAdmin = ['admin', 'dev', 'test'].includes(role);
  const c = document.getElementById('view-content');
  c.innerHTML = `
  <div class="page-header">
    <div><h1>Assets</h1></div>
    ${isAdmin ? `<button class="btn btn-accent" id="btn-new-asset">+ New Asset</button>` : ''}
  </div>
  <div class="toolbar" style="margin-bottom:1rem">
    <div class="toolbar-filters">
      <input class="form-control" id="a-search" placeholder="Search assets…" style="width:200px" />
      <select class="form-control" id="a-type" style="width:200px">
        <option value="">All Types</option>
      </select>
      <select class="form-control" id="a-status" style="width:130px">
        <option value="">All</option>
        <option value="ACTIVE">Active</option>
        <option value="INACTIVE">Inactive</option>
      </select>
    </div>
  </div>
  <!-- Stat cards -->
  <div class="stat-grid" id="asset-stats" style="margin-bottom:1.25rem">
    <div class="stat-card navy">
      <div class="stat-label">Total Assets</div>
      <div class="stat-value" id="as-total">—</div>
    </div>
    <div class="stat-card green">
      <div class="stat-label">Active</div>
      <div class="stat-value" id="as-active">—</div>
    </div>
    <div class="stat-card red">
      <div class="stat-label">Inactive</div>
      <div class="stat-value" id="as-inactive">—</div>
    </div>
  </div>
  <div id="assets-wrap">
    <div class="page-loader"><div class="spinner"></div></div>
  </div>`;

  let _types = [];

  const load = async () => {
    const wrap = document.getElementById('assets-wrap');
    if (!wrap) return;
    wrap.innerHTML = `<div class="page-loader"><div class="spinner"></div></div>`;
    try {
      const data = await apiFetch('list.php', {
        search: document.getElementById('a-search')?.value || '',
        type_id: document.getElementById('a-type')?.value || '',
        status: document.getElementById('a-status')?.value || '',
      });
      _types = data.types || [];

      // Populate type filter once
      const sel = document.getElementById('a-type');
      if (sel && sel.options.length === 1) {
        _types.forEach(t => {
          const o = document.createElement('option');
          o.value = t.record_id; o.textContent = t.name;
          sel.appendChild(o);
        });
      }

      // Update stat cards
      const all = data.assets || [];
      const el = (id, v) => { const e = document.getElementById(id); if (e) e.textContent = v; };
      el('as-total', all.length);
      el('as-active', all.filter(a => a.status === 'ACTIVE').length);
      el('as-inactive', all.filter(a => a.status !== 'ACTIVE').length);

      wrap.innerHTML = renderAssetsGrid(all, isAdmin);

      wrap.querySelectorAll('.a-edit').forEach(b =>
        b.addEventListener('click', () =>
          openAssetModal(JSON.parse(decodeURIComponent(b.dataset.asset)), _types, load)
        )
      );
    } catch (err) {
      wrap.innerHTML = `<div class="empty-state"><p>${err.message}</p></div>`;
    }
  };

  document.getElementById('a-search')?.addEventListener('input', debounce(load, 350));
  document.getElementById('a-type')?.addEventListener('change', load);
  document.getElementById('a-status')?.addEventListener('change', load);
  document.getElementById('btn-new-asset')?.addEventListener('click', async () => {
    if (!_types.length) {
      const data = await apiFetch('list.php', {}).catch(() => ({ types: [] }));
      _types = data.types || [];
    }
    openAssetModal(null, _types, load);
  });

  await load();
}

// ── Render assets as grouped cards ────────────────────────────────────────
function renderAssetsGrid(assets, isAdmin) {
  if (!assets.length) return `<div class="empty-state" style="padding:3rem"><p>No assets found.</p></div>`;

  // Group by type
  const groups = {};
  assets.forEach(a => {
    const key = a.type_name || 'Other';
    if (!groups[key]) groups[key] = [];
    groups[key].push(a);
  });

  return Object.entries(groups).map(([typeName, items]) => `
    <div class="card" style="margin-bottom:1rem">
      <div class="card-header">
        <span class="card-title">${typeIcon(typeName)} ${typeName}</span>
        <span class="badge badge-navy">${items.length}</span>
      </div>
      <div class="card-body" style="padding:0">
        <div class="table-wrap"><table>
          <thead><tr>
            <th>Asset</th><th>Status</th><th>Qty</th>
            <th>Fuel Level</th><th>Odometer</th>
            ${isAdmin ? '<th></th>' : ''}
          </tr></thead>
          <tbody>
            ${items.map(a => {
    const active = a.status === 'ACTIVE';
    const lvl = parseInt(a.current_level) || 0;
    const lvlColor = lvl <= 20 ? 'var(--danger)' : lvl <= 50 ? 'var(--warning)' : 'var(--success)';
    const hasOdo = a.odo > 0 || a.odo_type;
    const hasLvl = a.current_level != null && a.current_level !== '0';
    return `<tr>
                <td data-label="Asset"><strong>${esc(a.name)}</strong>
                  ${a.team_name ? `<div style="font-size:.72rem;color:var(--text-muted);margin-top:.15rem">Team: ${esc(a.team_name)}</div>` : ''}
                </td>
                <td data-label="Status">
                  <span class="badge ${active ? 'badge-active' : 'badge-complete'}">${a.status || 'ACTIVE'}</span>
                </td>
                <td data-label="Qty" style="color:var(--text-muted)">${a.amount > 0 ? a.amount : '—'}</td>
                <td data-label="Fuel Level">
                  ${hasLvl ? `
                  <div style="display:flex;align-items:center;gap:.5rem">
                    <div style="flex:1;height:8px;background:var(--border-light);border-radius:4px;overflow:hidden;min-width:60px">
                      <div style="height:100%;width:${Math.min(lvl, 100)}%;background:${lvlColor};border-radius:4px;transition:.3s"></div>
                    </div>
                    <span style="font-size:.78rem;font-weight:700;color:${lvlColor}">${lvl}%</span>
                  </div>` : '<span style="color:var(--text-muted)">—</span>'}
                </td>
                <td data-label="Odometer">
                  ${hasOdo && a.odo > 0
        ? `<strong>${(+a.odo).toLocaleString()}</strong>
                       <span style="font-size:.72rem;color:var(--text-muted)"> ${a.odo_type || ''}</span>`
        : '<span style="color:var(--text-muted)">—</span>'}
                </td>
                ${isAdmin ? `<td data-label="">
                  <button class="btn btn-ghost btn-sm a-edit"
                    data-asset="${encodeURIComponent(JSON.stringify(a))}">Edit</button>
                </td>` : ''}
              </tr>`;
  }).join('')}
          </tbody>
        </table></div>
      </div>
    </div>`).join('');
}

// ── Add / Edit Modal ──────────────────────────────────────────────────────
function openAssetModal(asset, types, reload) {
  const isEdit = !!asset;

  const typeOpts = types.map(t =>
    `<option value="${t.record_id}" ${asset?.asset_type_id == t.record_id ? 'selected' : ''}>${typeIcon(t.name)} ${t.name}</option>`
  ).join('');

  const odoType = asset?.odo_type || 'Kilometers';

  openModal(isEdit ? `Edit — ${asset.name}` : 'New Asset', `
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Asset Name <span style="color:var(--danger)">*</span></label>
        <input class="form-control" id="ai-name" value="${esc(asset?.name)}" />
      </div>
      <div class="form-group">
        <label class="form-label">Type <span style="color:var(--danger)">*</span></label>
        <select class="form-control" id="ai-type">
          <option value="">— Select —</option>
          ${typeOpts}
        </select>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Status</label>
        <select class="form-control" id="ai-status">
          <option value="ACTIVE"   ${asset?.status === 'ACTIVE' ? 'selected' : ''}>Active</option>
          <option value="INACTIVE" ${asset?.status === 'INACTIVE' ? 'selected' : ''}>Inactive</option>
        </select>
      </div>
      <div class="form-group">
        <label class="form-label">Quantity</label>
        <input class="form-control" id="ai-amount" type="number" min="0" value="${asset?.amount || 0}" />
      </div>
    </div>
    <hr style="border:none;border-top:1px solid var(--border);margin:.75rem 0">
    <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
                color:var(--text-muted);margin-bottom:.65rem">Meter / Odometer</div>
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Reading</label>
        <input class="form-control" id="ai-odo" type="number" min="0" value="${asset?.odo || 0}" />
      </div>
      <div class="form-group">
        <label class="form-label">Unit</label>
        <select class="form-control" id="ai-odo-type">
          <option value="Kilometers" ${odoType === 'Kilometers' ? 'selected' : ''}>Kilometers</option>
          <option value="Meters"     ${odoType === 'Meters' ? 'selected' : ''}>Meters</option>
          <option value="Hours"      ${odoType === 'Hours' ? 'selected' : ''}>Hours</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">Fuel / Fluid Level (%)</label>
      <div style="display:flex;align-items:center;gap:.75rem">
        <input class="form-control" id="ai-level" type="number" min="0" max="100"
               value="${asset?.current_level || 0}" style="width:100px" />
        <div style="flex:1;height:10px;background:var(--border-light);border-radius:5px;overflow:hidden">
          <div id="ai-level-bar" style="height:100%;border-radius:5px;transition:.2s;
               width:${Math.min(asset?.current_level || 0, 100)}%;
               background:${lvlColor(asset?.current_level || 0)}"></div>
        </div>
        <span id="ai-level-pct" style="font-size:.82rem;font-weight:700;min-width:36px;
              color:${lvlColor(asset?.current_level || 0)}">${asset?.current_level || 0}%</span>
      </div>
    </div>
    <div id="ai-err" class="login-error"></div>
  `, async () => {
    const errEl = document.getElementById('ai-err');
    errEl.classList.remove('visible');
    const name = document.getElementById('ai-name')?.value.trim();
    const typeId = document.getElementById('ai-type')?.value;
    if (!name) { errEl.textContent = 'Asset name is required.'; errEl.classList.add('visible'); return; }
    if (!typeId) { errEl.textContent = 'Type is required.'; errEl.classList.add('visible'); return; }
    try {
      const payload = {
        name, asset_type_id: typeId,
        status: document.getElementById('ai-status')?.value,
        amount: document.getElementById('ai-amount')?.value,
        odo: document.getElementById('ai-odo')?.value,
        odo_type: document.getElementById('ai-odo-type')?.value,
        current_level: document.getElementById('ai-level')?.value,
      };
      if (isEdit) {
        await apiPost('update.php', { record_id: asset.record_id, ...payload });
      } else {
        await apiPost('create.php', payload);
      }
      closeModal();
      showToast(isEdit ? 'Asset updated.' : 'Asset created.', 'success');
      reload();
    } catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
  }, { confirmLabel: isEdit ? 'Save' : 'Create Asset', confirmClass: 'btn-primary' });

  // Live fuel level bar
  setTimeout(() => {
    document.getElementById('ai-level')?.addEventListener('input', e => {
      const v = Math.min(Math.max(parseInt(e.target.value) || 0, 0), 100);
      const bar = document.getElementById('ai-level-bar');
      const pct = document.getElementById('ai-level-pct');
      if (bar) { bar.style.width = v + '%'; bar.style.background = lvlColor(v); }
      if (pct) { pct.textContent = v + '%'; pct.style.color = lvlColor(v); }
    });
  }, 50);
}

function lvlColor(v) {
  v = parseInt(v) || 0;
  return v <= 20 ? 'var(--danger)' : v <= 50 ? 'var(--warning)' : 'var(--success)';
}

function esc(v) { return (v || '').toString().replace(/"/g, '&quot;').replace(/</g, '&lt;'); }
function debounce(fn, ms) { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; }