// ─── Savuki Drilling — Teams & Users Module ──────────────────────────────
import { showToast, openModal, closeModal, navigate } from '../app.js';
import { richSelect } from './rich-select.js';

const TEAMS_API = '/api/teams';
const USERS_API = '/api/users';

function token() { return localStorage.getItem('sd_token') || ''; }

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

async function apiPost(url, data) {
  const body = new URLSearchParams({ ...data, token: token() });
  const res = await fetch(url, {
    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 USER_TYPES = ['Dev', 'Test', 'Admin', 'Dispatch', 'Manager', 'Driver', 'Workshop', 'Install'];
const ROLE_BADGE = {
  Dev: 'badge-drilling', Test: 'badge-pending', Admin: 'badge-navy',
  Dispatch: 'badge-active', Manager: 'badge-complete', Driver: 'badge-orange',
  Workshop: 'badge-pending', Install: 'badge-active',
};

// ═════════════════════════════════════════════════════════════════════════
// TEAMS PAGE
// ═════════════════════════════════════════════════════════════════════════
export async function initTeams(role) {
  const isAdmin = ['admin', 'dev', 'test'].includes(role);
  const c = document.getElementById('view-content');
  c.innerHTML = `
  <div class="page-header">
    <div><h1>Teams</h1></div>
    ${isAdmin ? `<button class="btn btn-accent" id="btn-new-team">+ New Team</button>` : ''}
  </div>
  <div class="toolbar" style="margin-bottom:1rem">
    <div class="toolbar-filters">
      <input class="form-control" id="t-search" placeholder="Search teams…" style="width:200px" />
      <select class="form-control" id="t-status" style="width:140px">
        <option value="">All</option>
        <option value="ACTIVE">Active</option>
        <option value="INACTIVE">Inactive</option>
      </select>
    </div>
  </div>
  <div id="teams-wrap">
    <div class="page-loader"><div class="spinner"></div></div>
  </div>`;

  let _allTeams = [];
  let _allUsers = [];

  const render = () => {
    const q = (document.getElementById('t-search')?.value || '').toLowerCase();
    const st = document.getElementById('t-status')?.value || '';
    let filtered = _allTeams;
    if (st) filtered = filtered.filter(t => t.status === st);
    if (q) filtered = filtered.filter(t =>
      t.name.toLowerCase().includes(q) ||
      (t.team_members || '').toLowerCase().includes(q) ||
      (t.assigned_assets || '').toLowerCase().includes(q)
    );
    document.getElementById('teams-wrap').innerHTML = renderTeamsGrid(filtered, isAdmin);
    document.querySelectorAll('.t-edit').forEach(b =>
      b.addEventListener('click', () => openTeamModal(
        JSON.parse(decodeURIComponent(b.dataset.team)), _allUsers, reload
      ))
    );
  };

  const reload = async () => {
    try { _allTeams = await apiFetch(`${TEAMS_API}/list.php`); } catch { }
    try { _allUsers = await apiFetch(`${USERS_API}/list.php`); } catch { }
    render();
  };

  document.getElementById('t-search')?.addEventListener('input', debounce(render, 250));
  document.getElementById('t-status')?.addEventListener('change', render);
  document.getElementById('btn-new-team')?.addEventListener('click', async () => {
    if (!_allUsers.length) try { _allUsers = await apiFetch(`${USERS_API}/list.php`); } catch { }
    openTeamModal(null, _allUsers, reload);
  });

  await reload();
}

function renderTeamsGrid(teams, isAdmin) {
  if (!teams.length) return `<div class="empty-state" style="padding:3rem"><p>No teams found.</p></div>`;
  return `<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem">
    ${teams.map(t => {
    const members = (t.team_members || '').split(',').map(s => s.trim()).filter(Boolean);
    const assets = (t.assigned_assets || '').split(',').map(s => s.trim()).filter(Boolean);
    const active = t.status === 'ACTIVE';
    return `
      <div class="card" style="border-top:3px solid ${active ? 'var(--primary)' : 'var(--border)'}">
        <div class="card-header">
          <div>
            <span class="card-title">${esc(t.name)}</span>
            <span class="badge ${active ? 'badge-active' : 'badge-complete'}" style="margin-left:.5rem">
              ${t.status || 'ACTIVE'}
            </span>
          </div>
          ${isAdmin ? `<button class="btn btn-ghost btn-sm t-edit"
            data-team="${encodeURIComponent(JSON.stringify(t))}">Edit</button>` : ''}
        </div>
        <div class="card-body" style="padding:.75rem 1rem">
          <!-- Members -->
          <div style="margin-bottom:.65rem">
            <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
                        color:var(--text-muted);margin-bottom:.35rem">Members (${members.length})</div>
            <div style="display:flex;flex-wrap:wrap;gap:.3rem">
              ${members.length
        ? members.map(m => `<span class="badge badge-navy" style="font-size:.72rem">${esc(m)}</span>`).join('')
        : `<span style="font-size:.8rem;color:var(--text-muted)">No members</span>`}
            </div>
          </div>
          <!-- Assets -->
          <div style="margin-bottom:.5rem">
            <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
                        color:var(--text-muted);margin-bottom:.35rem">Assets</div>
            <div style="display:flex;flex-wrap:wrap;gap:.3rem">
              ${assets.length
        ? assets.map(a => `<span class="badge badge-orange" style="font-size:.72rem">${esc(a)}</span>`).join('')
        : `<span style="font-size:.8rem;color:var(--text-muted)">No assets</span>`}
            </div>
          </div>
          <!-- Stats -->
          <div style="display:flex;gap:1rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-light);font-size:.78rem">
            <span style="color:var(--text-muted)">Active JCs: <strong style="color:var(--primary)">${t.active_jobcards || 0}</strong></span>
          </div>
        </div>
      </div>`;
  }).join('')}
  </div>`;
}

// ── Team Create/Edit Modal ────────────────────────────────────────────────
function openTeamModal(team, allUsers, reload) {
  const isEdit = !!team;
  const title = isEdit ? `Edit Team — ${team.name}` : 'New Team';

  const userOpts = allUsers.map(u =>
    `<option value="${esc(u.username)}">${esc(u.username)} (${u.user_type})</option>`
  ).join('');

  const currentMembers = (team?.team_members || '').split(',').map(s => s.trim()).filter(Boolean);
  const currentAssets = (team?.assigned_assets || '').split(',').map(s => s.trim()).filter(Boolean);

  openModal(title, `
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Team Name <span style="color:var(--danger)">*</span></label>
        <input class="form-control" id="tm-name" value="${esc(team?.name)}" />
      </div>
      <div class="form-group">
        <label class="form-label">Status</label>
        <select class="form-control" id="tm-status">
          <option value="ACTIVE"   ${team?.status === 'ACTIVE' ? 'selected' : ''}>Active</option>
          <option value="INACTIVE" ${team?.status === 'INACTIVE' ? 'selected' : ''}>Inactive</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label class="form-label">Members</label>
      <div id="tm-member-rs"></div>
      <div id="tm-members" style="display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem;min-height:30px">
        ${currentMembers.map(m => memberTag(m)).join('')}
      </div>
    </div>

    <div class="form-group">
      <label class="form-label">Assigned Assets</label>
      <div style="display:flex;gap:.5rem">
        <input class="form-control" id="tm-asset-input" placeholder="Asset name…" style="flex:1" />
        <button class="btn btn-ghost btn-sm" id="btn-add-asset" type="button">+ Add</button>
      </div>
      <div id="tm-assets" style="display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem;min-height:30px">
        ${currentAssets.map(a => assetTag(a)).join('')}
      </div>
    </div>

    <div id="tm-err" class="login-error"></div>
  `, async () => {
    const errEl = document.getElementById('tm-err');
    errEl.classList.remove('visible');
    const name = document.getElementById('tm-name')?.value.trim();
    const status = document.getElementById('tm-status')?.value;
    const members = [...document.querySelectorAll('.tm-member-tag')].map(el => el.dataset.val).join(', ');
    const assets = [...document.querySelectorAll('.tm-asset-tag')].map(el => el.dataset.val).join(', ');

    if (!name) { errEl.textContent = 'Team name is required.'; errEl.classList.add('visible'); return; }

    try {
      if (isEdit) {
        await apiPost(`${TEAMS_API}/update.php`, {
          record_id: team.record_id, name, assigned_assets: assets, team_members: members, status,
        });
      } else {
        await apiPost(`${TEAMS_API}/create.php`, {
          name, assigned_assets: assets, team_members: members, status,
        });
      }
      closeModal();
      showToast(isEdit ? 'Team updated.' : 'Team created.', 'success');
      reload();
    } catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
  }, { confirmLabel: isEdit ? 'Save' : 'Create Team', confirmClass: 'btn-primary' });

  // Wire member rich select
  setTimeout(() => {
    richSelect('tm-member-rs', {
      placeholder: 'Search and add a member…',
      items: allUsers.map(u => ({
        value: u.username,
        label: u.username,
        badge: u.user_type,
        sub: u.team_id ? `Team: ${u.team_id}` : 'No team',
      })),
      onSelect: (val) => {
        if (!val) return;
        if (document.querySelector(`.tm-member-tag[data-val="${val}"]`)) return;
        document.getElementById('tm-members')?.insertAdjacentHTML('beforeend', memberTag(val));
        bindTagRemovals();
      },
    });

    document.getElementById('btn-add-asset')?.addEventListener('click', () => {
      const input = document.getElementById('tm-asset-input');
      const val = input?.value.trim();
      if (!val) return;
      if (document.querySelector(`.tm-asset-tag[data-val="${val}"]`)) { input.value = ''; return; }
      document.getElementById('tm-assets')?.insertAdjacentHTML('beforeend', assetTag(val));
      bindTagRemovals();
      input.value = '';
    });

    document.getElementById('tm-asset-input')?.addEventListener('keydown', e => {
      if (e.key === 'Enter') { e.preventDefault(); document.getElementById('btn-add-asset')?.click(); }
    });

    bindTagRemovals();
  }, 50);
}

function memberTag(val) {
  return `<span class="badge badge-navy tm-member-tag" data-val="${esc(val)}"
    style="cursor:pointer;padding:.25rem .5rem;display:flex;align-items:center;gap:.3rem">
    ${esc(val)} <span class="tm-remove" style="font-weight:900;opacity:.7">✕</span>
  </span>`;
}

function assetTag(val) {
  return `<span class="badge badge-orange tm-asset-tag" data-val="${esc(val)}"
    style="cursor:pointer;padding:.25rem .5rem;display:flex;align-items:center;gap:.3rem">
    ${esc(val)} <span class="tm-remove" style="font-weight:900;opacity:.7">✕</span>
  </span>`;
}

function bindTagRemovals() {
  document.querySelectorAll('.tm-remove').forEach(btn => {
    if (btn._bound) return;
    btn._bound = true;
    btn.addEventListener('click', () => btn.closest('.badge')?.remove());
  });
}

// ═════════════════════════════════════════════════════════════════════════
// USERS PAGE
// ═════════════════════════════════════════════════════════════════════════
export async function initUsers(role) {
  const isAdmin = ['admin', 'dev', 'test'].includes(role);
  const c = document.getElementById('view-content');
  c.innerHTML = `
  <div class="page-header">
    <div><h1>Users</h1></div>
    ${isAdmin ? `<button class="btn btn-accent" id="btn-new-user">+ New User</button>` : ''}
  </div>
  <div class="toolbar" style="margin-bottom:1rem">
    <div class="toolbar-filters">
      <input class="form-control" id="u-search" placeholder="Search users…" style="width:200px" />
      <select class="form-control" id="u-role" style="width:140px">
        <option value="">All Roles</option>
        ${USER_TYPES.map(t => `<option value="${t}">${t}</option>`).join('')}
      </select>
    </div>
  </div>
  <div class="card" id="users-wrap">
    <div class="card-body" style="padding:0"><div class="page-loader"><div class="spinner"></div></div></div>
  </div>`;

  let _allUsers = [];

  const render = () => {
    const q = (document.getElementById('u-search')?.value || '').toLowerCase();
    const rt = document.getElementById('u-role')?.value || '';
    let filtered = _allUsers;
    if (rt) filtered = filtered.filter(u => u.user_type?.toLowerCase() === rt.toLowerCase());
    if (q) filtered = filtered.filter(u =>
      u.username.toLowerCase().includes(q) ||
      (u.user_type || '').toLowerCase().includes(q) ||
      (u.team_id || '').toLowerCase().includes(q)
    );
    const wrap = document.getElementById('users-wrap');
    if (!wrap) return;
    wrap.innerHTML = `<div class="card-body" style="padding:0">${renderUsersTable(filtered, isAdmin)}</div>`;
    wrap.querySelectorAll('.u-edit').forEach(b =>
      b.addEventListener('click', () => openUserModal(
        JSON.parse(decodeURIComponent(b.dataset.user)), reload
      ))
    );
  };

  const reload = async () => {
    try { _allUsers = await apiFetch(`${USERS_API}/list.php`); } catch { }
    render();
  };

  document.getElementById('u-search')?.addEventListener('input', debounce(render, 250));
  document.getElementById('u-role')?.addEventListener('change', render);
  document.getElementById('btn-new-user')?.addEventListener('click', () => openUserModal(null, reload));

  await reload();
}

function renderUsersTable(rows, isAdmin) {
  if (!rows.length) return `<div class="empty-state" style="padding:2rem"><p>No users found.</p></div>`;

  const html = rows.map(u => `<tr>
    <td data-label="Username"><strong>${esc(u.username)}</strong></td>
    <td data-label="Role">
      <span class="badge ${ROLE_BADGE[u.user_type] || 'badge-navy'}">${esc(u.user_type || '—')}</span>
    </td>
    <td data-label="Team">
      ${u.team_id ? `<span class="badge badge-orange">${esc(u.team_id)}</span>` : '<span style="color:var(--text-muted)">—</span>'}
    </td>
    <td data-label="">
      ${isAdmin ? `<button class="btn btn-ghost btn-sm u-edit"
        data-user="${encodeURIComponent(JSON.stringify(u))}">Edit</button>` : ''}
    </td>
  </tr>`).join('');

  return `<div class="table-wrap"><table>
    <thead><tr><th>Username</th><th>Role</th><th>Team</th>${isAdmin ? '<th></th>' : ''}</tr></thead>
    <tbody>${html}</tbody>
  </table></div>`;
}

// ── User Create/Edit Modal ────────────────────────────────────────────────
function openUserModal(user, reload) {
  const isEdit = !!user;

  const typeOpts = USER_TYPES.map(t =>
    `<option value="${t}" ${user?.user_type === t ? 'selected' : ''}>${t}</option>`
  ).join('');

  openModal(isEdit ? `Edit — ${user.username}` : 'New User', `
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">Username <span style="color:var(--danger)">*</span></label>
        <input class="form-control" id="u-username" value="${esc(user?.username)}" />
      </div>
      <div class="form-group">
        <label class="form-label">Role <span style="color:var(--danger)">*</span></label>
        <select class="form-control" id="u-type">
          <option value="">— Select —</option>
          ${typeOpts}
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">${isEdit ? 'New Password' : 'Password <span style="color:var(--danger)">*</span>'}</label>
      <input class="form-control" id="u-pass" type="password"
             placeholder="${isEdit ? 'Leave blank to keep current' : 'Enter password'}" />
    </div>
    <div id="u-err" class="login-error"></div>
  `, async () => {
    const errEl = document.getElementById('u-err');
    errEl.classList.remove('visible');
    const username = document.getElementById('u-username')?.value.trim();
    const userType = document.getElementById('u-type')?.value;
    const password = document.getElementById('u-pass')?.value;

    if (!username) { errEl.textContent = 'Username is required.'; errEl.classList.add('visible'); return; }
    if (!userType) { errEl.textContent = 'Role is required.'; errEl.classList.add('visible'); return; }
    if (!isEdit && !password) { errEl.textContent = 'Password is required.'; errEl.classList.add('visible'); return; }

    try {
      if (isEdit) {
        await apiPost(`${USERS_API}/update.php`, {
          record_id: user.record_id, username, user_type: userType, password,
        });
      } else {
        await apiPost(`${USERS_API}/create.php`, {
          username, user_type: userType, password,
        });
      }
      closeModal();
      showToast(isEdit ? 'User updated.' : 'User created.', 'success');
      reload();
    } catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
  }, { confirmLabel: isEdit ? 'Save' : 'Create User', confirmClass: 'btn-primary' });
}

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); }; }