<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NOD//Xtract</title>
  <link rel="stylesheet" href="/nodxtract/css/nodx.css">
</head>
<body>

<!-- Auth screen -->
<div id="screen-auth" class="screen active">
  <div class="nodx-header">
    <div class="nodx-logo">NOD<span>//</span>Xtract</div>
    <div class="nodx-tagline">Extract. Escape. Repeat.</div>
  </div>
  <div class="panel">
    <div class="panel-title">Operator Access</div>
    <div id="auth-msg"></div>
    <div class="field">
      <label>Handle</label>
      <input type="text" id="auth-handle" placeholder="your_handle" maxlength="20">
    </div>
    <div class="field">
      <label>Password</label>
      <input type="password" id="auth-password" placeholder="••••••••">
    </div>
    <div class="flex-between mt8">
      <button class="btn" id="btn-login">Login</button>
      <button class="btn" id="btn-register">Register</button>
    </div>
  </div>
  <div class="text-dim" style="font-size:11px;margin-top:8px">
    New operators receive starter tools and a Low Signature rig.
  </div>
</div>

<!-- Safehouse screen -->
<div id="screen-safehouse" class="screen">
  <div class="nodx-header">
    <div class="flex-between">
      <div>
        <div class="nodx-logo">NOD<span>//</span>Xtract</div>
        <div class="nodx-tagline">Extract. Escape. Repeat.</div>
      </div>
      <button class="btn" id="btn-logout" style="font-size:11px;padding:4px 10px">Logout</button>
    </div>
    <div class="nodx-operator" id="operator-info"></div>
  </div>

  <div id="safehouse-msg"></div>

  <div class="panel">
    <div class="panel-title">Operator Status</div>
    <div class="flex-between mb8">
      <span class="text-dim" style="font-size:12px">Credits</span>
      <span class="text-amber" id="stat-credits">-</span>
    </div>
    <div class="flex-between mb8">
      <span class="text-dim" style="font-size:12px">Fragments</span>
      <span class="text-green" id="stat-fragments">-</span>
    </div>
    <div class="flex-between">
      <span class="text-dim" style="font-size:12px">Ghost Rating</span>
      <span class="text-bright" id="stat-ghost">-</span>
    </div>
  </div>

  <div class="panel">
    <div class="panel-title">Select Target</div>
    <div id="target-list">
      <div class="text-dim" style="font-size:12px">Loading targets...</div>
    </div>
  </div>

  <div class="panel" id="traces-panel" style="display:none">
    <div class="panel-title">Recent Activity - <span id="traces-target-name"></span></div>
    <div id="traces-list">
      <div class="text-dim" style="font-size:12px">No traces found.</div>
    </div>
  </div>

  <div class="panel">
    <div class="panel-title">Select Rig</div>
    <div id="rig-list">
      <div class="text-dim" style="font-size:12px">Loading rigs...</div>
    </div>
  </div>

  <div class="panel">
    <div class="panel-title">Select Tools <span class="text-dim" style="font-size:11px">(max 4)</span></div>
    <div id="tool-list">
      <div class="text-dim" style="font-size:12px">Loading tools...</div>
    </div>
  </div>

  <button class="btn btn-full mt16" id="btn-start-run">
    &gt; Initiate Infiltration
  </button>
</div>

<script src="/nodxtract/js/api.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {

  var profile = null
  var targets = []
  var selectedTarget = null
  var selectedRig = null
  var selectedTools = []

  function showScreen(id) {
    document.querySelectorAll('.screen').forEach(function(s) {
      s.classList.remove('active')
    })
    document.getElementById(id).classList.add('active')
  }

  function showMsg(containerId, text, type) {
    type = type || 'error'
    document.getElementById(containerId).innerHTML =
      '<div class="msg ' + type + '">' + text + '</div>'
  }

  function clearMsg(containerId) {
    document.getElementById(containerId).innerHTML = ''
  }

  document.getElementById('btn-login').addEventListener('click', async function() {
    var handle = document.getElementById('auth-handle').value.trim()
    var password = document.getElementById('auth-password').value
    if (!handle || !password) return showMsg('auth-msg', 'Handle and password required.')
    try {
      await API.login(handle, password)
      await loadSafehouse()
      showScreen('screen-safehouse')
    } catch(e) {
      showMsg('auth-msg', e.message)
    }
  })

  document.getElementById('btn-register').addEventListener('click', async function() {
    var handle = document.getElementById('auth-handle').value.trim()
    var password = document.getElementById('auth-password').value
    if (!handle || !password) return showMsg('auth-msg', 'Handle and password required.')
    try {
      await API.register(handle, password)
      await loadSafehouse()
      showScreen('screen-safehouse')
    } catch(e) {
      showMsg('auth-msg', e.message)
    }
  })

  document.getElementById('btn-logout').addEventListener('click', function() {
    API.logout()
    showScreen('screen-auth')
  })

  async function loadSafehouse() {
    var results = await Promise.all([API.getProfile(), API.getTargets()])
    profile = results[0]
    targets = results[1].targets

    var op = API.getOperator()
    document.getElementById('operator-info').textContent = '> ' + op.handle + ' connected'
    document.getElementById('stat-credits').textContent = '\u20B5 ' + profile.operator.credits
    document.getElementById('stat-fragments').textContent = profile.operator.fragments
    document.getElementById('stat-ghost').textContent = profile.operator.ghost_rating

    renderTargets()
    renderRigs()
    renderTools()
  }

  function renderTargets() {
    var container = document.getElementById('target-list')
    if (!targets.length) {
      container.innerHTML = '<div class="text-dim">No targets available.</div>'
      return
    }
    container.innerHTML = targets.map(function(t) {
      return '<div class="target-card" data-id="' + t.id + '" onclick="selectTarget(\'' + t.id + '\')">' +
        '<div class="flex-between">' +
          '<span class="target-name">' + t.name + '</span>' +
          '<span class="target-sec">SEC ' + t.security_level + '</span>' +
        '</div>' +
        '<div class="target-meta">' + t.target_type.toUpperCase() + ' · ' + t.run_count + ' runs · depletion ' + Math.round(t.loot_depletion * 100) + '%</div>' +
      '</div>'
    }).join('')
  }

  window.selectTarget = async function(id) {
    selectedTarget = targets.find(function(t) { return t.id === id })
    document.querySelectorAll('.target-card').forEach(function(c) {
      c.classList.toggle('selected', c.dataset.id === id)
    })
    try {
      var data = await API.getTraces(id)
      renderTraces(data.traces)
    } catch(e) {}
  }

  function renderTraces(traces) {
    var panel = document.getElementById('traces-panel')
    var list = document.getElementById('traces-list')
    panel.style.display = 'block'
    document.getElementById('traces-target-name').textContent = selectedTarget ? selectedTarget.name : ''
    if (!traces.length) {
      list.innerHTML = '<div class="text-dim" style="font-size:12px">No traces found. You would be the first.</div>'
      return
    }
    list.innerHTML = traces.map(function(t) {
      return '<div class="trace-entry">' +
        '<span class="handle">' + t.handle + '</span>' +
        '<span class="' + t.outcome + '"> ' + t.outcome + '</span>' +
        '<span> · depth ' + t.depth + ' · rating ' + t.ghost_rating + '</span>' +
      '</div>'
    }).join('')
  }

  function renderRigs() {
    var container = document.getElementById('rig-list')
    var rigs = profile.rigs
    if (!rigs.length) {
      container.innerHTML = '<div class="text-dim">No rigs available.</div>'
      return
    }
    container.innerHTML = rigs.map(function(r) {
      return '<div class="tool-card" data-id="' + r.id + '" onclick="selectRig(\'' + r.id + '\')">' +
        '<span class="tool-name">' + r.name + '</span>' +
        '<div class="tool-meta">' + r.description + '</div>' +
        '<div class="tool-meta mt8"><span class="text-dim">trace x' + r.trace_mod + ' · reward x' + r.reward_mod + ' · capacity x' + r.capacity_mod + '</span></div>' +
      '</div>'
    }).join('')
    if (rigs.length > 0) selectRig(rigs[0].id)
  }

  window.selectRig = function(id) {
    selectedRig = profile.rigs.find(function(r) { return r.id === id })
    document.querySelectorAll('#rig-list .tool-card').forEach(function(c) {
      c.classList.toggle('selected', c.dataset.id === id)
    })
  }

  function renderTools() {
    var container = document.getElementById('tool-list')
    var tools = profile.tools
    if (!tools.length) {
      container.innerHTML = '<div class="text-dim">No tools in inventory.</div>'
      return
    }
    container.innerHTML = tools.map(function(t) {
      return '<div class="tool-card" data-id="' + t.instance_id + '" onclick="toggleTool(\'' + t.instance_id + '\')">' +
        '<div class="flex-between">' +
          '<span class="tool-name">' + t.name + '</span>' +
          '<span class="tool-charges">' + t.charges + ' charges</span>' +
        '</div>' +
        '<div class="tool-meta">' + t.description + '</div>' +
        '<div class="tool-meta"><span class="text-dim">' + t.category.toUpperCase() + '</span></div>' +
      '</div>'
    }).join('')
  }

  window.toggleTool = function(instanceId) {
    var idx = selectedTools.indexOf(instanceId)
    if (idx > -1) {
      selectedTools.splice(idx, 1)
    } else {
      if (selectedTools.length >= 4) {
        showMsg('safehouse-msg', 'Maximum 4 tools per infiltration.', 'info')
        setTimeout(function() { clearMsg('safehouse-msg') }, 2000)
        return
      }
      selectedTools.push(instanceId)
    }
    document.querySelectorAll('#tool-list .tool-card').forEach(function(c) {
      c.classList.toggle('selected', selectedTools.indexOf(c.dataset.id) > -1)
    })
  }

  document.getElementById('btn-start-run').addEventListener('click', async function() {
    if (!selectedTarget) return showMsg('safehouse-msg', 'Select a target first.', 'info')
    if (!selectedRig) return showMsg('safehouse-msg', 'Select a rig first.', 'info')
    if (!selectedTools.length) return showMsg('safehouse-msg', 'Select at least one tool.', 'info')
    try {
      document.getElementById('btn-start-run').disabled = true
      document.getElementById('btn-start-run').textContent = '> Connecting...'
      var data = await API.startRun(selectedTarget.id, selectedRig.id, selectedTools)
      sessionStorage.setItem('nodx_run', JSON.stringify(data.infiltration))
      sessionStorage.setItem('nodx_target', JSON.stringify(selectedTarget))
      window.location.href = '/nodxtract/run.html'
    } catch(e) {
      showMsg('safehouse-msg', e.message)
      document.getElementById('btn-start-run').disabled = false
      document.getElementById('btn-start-run').textContent = '> Initiate Infiltration'
    }
  })

  if (API.isLoggedIn()) {
    loadSafehouse().then(function() { showScreen('screen-safehouse') })
  }

})
</script>
</body>
</html>