import { app, isRouteCurrent } from '../router.js';
import { api } from '../api.js';
import {
  escapeHTML, relativeTime,
  getEnvelopeType, getEnvelopePayload, getEnvelopeTS,
  isCurrentPath, infrastructureSkeleton, formatBytes,
} from '../utils.js';
import { subscribeWS } from '../ws.js';
import {
  openclawState, swarmState,
  mergeOpenClawEvents, mergeSwarmSnapshot, mergeSwarmServiceSnapshot,
  getK8sHomelabServices,
} from '../state.js';

let infraUnsubscribe = null;
let _infraTimerInterval = null;

export function cleanup() {
  if (infraUnsubscribe) { infraUnsubscribe(); infraUnsubscribe = null; }
  if (_infraTimerInterval) { clearInterval(_infraTimerInterval); _infraTimerInterval = null; }
}

function handleInfraWS(msg) {
  if (msg.type !== 'message') return;

  const eventType = getEnvelopeType(msg.data);

  if (eventType === 'openclaw.snapshot') {
    mergeOpenClawEvents([msg.data]);
    if (isCurrentPath('/infrastructure')) renderInfraGrid();
    // Dead branch removed: if (isCurrentPath('/agents')) renderAgentVMStrip()
    return;
  }

  if (eventType === 'swarm.snapshot') {
    mergeSwarmSnapshot(msg.data);
    if (isCurrentPath('/infrastructure')) renderInfraGrid();
    return;
  }

  if (eventType === 'swarm.service.snapshot') {
    mergeSwarmServiceSnapshot(msg.data);
    if (isCurrentPath('/infrastructure')) renderInfraGrid();
    return;
  }
}

async function loadInfrastructureSnapshots() {
  const [ocData, swarmData, serviceData] = await Promise.all([
    api('/v1/events?event_type=openclaw.snapshot&limit=100'),
    api('/v1/events?event_type=swarm.snapshot&limit=10').catch(() => ({ events: [] })),
    api('/v1/events?event_type=swarm.service.snapshot&limit=100').catch(() => ({ events: [] })),
  ]);

  mergeOpenClawEvents(ocData.events || []);
  for (const evt of swarmData.events || []) mergeSwarmSnapshot(evt);
  for (const evt of serviceData.events || []) mergeSwarmServiceSnapshot(evt);
}

// ── Infrastructure Uptime & Freshness ───────────────────
function getUptimeBadge(uptimeSec) {
  if (!uptimeSec) return '';
  const hours = uptimeSec / 3600;
  const pct = Math.min(100, (hours / 24) * 100);
  const cls = pct >= 99 ? 'good' : pct >= 90 ? 'warn' : 'bad';
  return `<span class="uptime-badge ${cls}">${pct.toFixed(0)}% / 24h</span>`;
}

function formatUptime(sec) {
  if (!sec) return '-';
  if (sec < 60) return sec + 's';
  if (sec < 3600) return Math.floor(sec / 60) + 'm';
  if (sec < 86400) return Math.floor(sec / 3600) + 'h ' + Math.floor((sec % 3600) / 60) + 'm';
  return Math.floor(sec / 86400) + 'd ' + Math.floor((sec % 86400) / 3600) + 'h';
}

function serviceCardHeader(svc) {
  const uptimeBadge = getUptimeBadge(svc.uptime_sec);
  return `
    <div class="service-card-header">
      <div>
        <div class="service-card-name">${escapeHTML(svc.name)}${uptimeBadge ? ' ' + uptimeBadge : ''}</div>
        <div class="service-role-tag">${escapeHTML(svc.role || '')}</div>
      </div>
      <span class="service-badge ${escapeHTML(svc.status || 'down')}">${escapeHTML(svc.status || 'down')}</span>
    </div>
  `;
}

function serviceStatRow(label, value, valueClass) {
  return `
    <div class="service-stat-row">
      <span class="service-stat-label">${escapeHTML(label)}</span>
      <span class="service-stat-value${valueClass ? ' ' + valueClass : ''}">${value}</span>
    </div>
  `;
}

function renderVMCard(name) {
  const evt = openclawState.instances[name];
  const payload = getEnvelopePayload(evt);
  const inst = payload.instance || {};
  const host = payload.host || {};
  const guest = payload.guest;
  const issues = payload.issues;

  return `
    <div class="vm-card">
      <div class="vm-card-header">
        <h3>${escapeHTML(inst.name || name)}</h3>
        <div class="vm-status ${host.state === 'running' ? 'running' : 'stopped'}">
          ${host.state === 'running' ? 'Running' : 'Stopped'}
        </div>
      </div>
      <div class="vm-updated"><span class="freshness-timer" data-ts="${escapeHTML(getEnvelopeTS(evt))}">Updated ${escapeHTML(relativeTime(getEnvelopeTS(evt)))}</span></div>
      <table class="vm-stats">
        <tr><td>Host</td><td>${escapeHTML(inst.host || '-')}</td></tr>
        <tr><td>Domain</td><td>${escapeHTML(inst.domain || '-')}</td></tr>
        <tr><td>vCPUs</td><td>${host.vcpus || '-'}</td></tr>
        <tr><td>Memory</td><td>${escapeHTML(formatBytes(host.memory_kib ? host.memory_kib * 1024 : 0) || '-')}</td></tr>
        <tr><td>Disk</td><td>${escapeHTML(formatBytes(host.disk_actual_bytes) || '-')}</td></tr>
        <tr><td>Autostart</td><td>${host.autostart ? 'Yes' : 'No'}</td></tr>
      </table>
      ${guest ? `
        <div class="vm-card-divider"></div>
        <table class="vm-stats">
          <tr><td>Gateway</td><td style="${guest.service_active ? 'color:var(--success)' : 'color:var(--error)'}">${guest.service_active ? 'Active' : 'Inactive'}</td></tr>
          <tr><td>HTTP</td><td style="${guest.http_status === 200 ? 'color:var(--success)' : 'color:var(--error)'}">${guest.http_status || 'N/A'}</td></tr>
          <tr><td>Version</td><td>${escapeHTML(guest.version || '-')}</td></tr>
          <tr><td>Guest Mem</td><td>${guest.memory_percent !== undefined ? guest.memory_percent.toFixed(1) : '-'}%</td></tr>
          <tr><td>Guest Disk</td><td>${guest.disk_percent !== undefined ? guest.disk_percent.toFixed(1) : '-'}%</td></tr>
          <tr><td>Load</td><td>${guest.load_average !== undefined ? guest.load_average.toFixed(2) : '-'}</td></tr>
          <tr><td>Uptime</td><td>${escapeHTML(guest.service_uptime || '-')}</td></tr>
        </table>
      ` : ''}
      ${issues && Object.values(issues).some(Boolean) ? `
        <div class="vm-card-divider"></div>
        <div class="vm-issues-label">Issues</div>
        <div class="vm-issues">
          ${Object.entries(issues).filter(([, value]) => value).map(([key]) => `
            <span class="issue ${escapeHTML(key)}">${escapeHTML(key.replace(/_/g, ' '))}</span>
          `).join('')}
        </div>
      ` : ''}
    </div>
  `;
}

function renderLLMProxyCard(svc) {
  const extra = svc.extra || {};
  const modelCount = extra.model_count;
  const cooldowns = extra.cooldown_count || 0;
  const httpStatus = svc.http_status;
  const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';

  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div style="display:flex;align-items:baseline;gap:0.5rem">
        <span class="llm-model-count">${modelCount !== undefined ? modelCount : '-'}</span>
        <span class="llm-model-label">models</span>
      </div>
      ${cooldowns > 0 ? `<div class="llm-cooldown-banner">⚠ ${cooldowns} model${cooldowns > 1 ? 's' : ''} in cooldown</div>` : ''}
      <div class="service-stats">
        ${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
        ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
        ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
      </div>
    </div>
  `;
}

function renderDBCard(svc) {
  const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div class="service-stats">
        ${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
        ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
        ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
      </div>
    </div>
  `;
}

function renderSearchCard(svc) {
  const extra = svc.extra || {};
  const ms = extra.response_ms;
  const httpStatus = svc.http_status;
  const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div class="service-stats">
        ${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
        ${ms !== undefined ? serviceStatRow('Response', ms + 'ms', ms < 500 ? 'ok' : 'warn') : ''}
        ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
      </div>
    </div>
  `;
}

function renderMCPCard(svc) {
  const extra = svc.extra || {};
  const reachable = extra.port_reachable;
  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div class="service-stats">
        ${reachable !== undefined ? serviceStatRow('Port', reachable ? 'reachable' : 'unreachable', reachable ? 'ok' : 'bad') : ''}
        ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
        ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
      </div>
    </div>
  `;
}

function renderVoiceCard(svc) {
  const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div class="service-stats">
        ${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
        ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
        ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
      </div>
    </div>
  `;
}

function renderAutomationCard(svc) {
  const healthClass = svc.health_state === 'healthy' ? 'ok' : svc.health_state === 'unhealthy' ? 'bad' : '';
  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div class="service-stats">
        ${serviceStatRow('Health', escapeHTML(svc.health_state || 'none'), healthClass)}
        ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
        ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
      </div>
    </div>
  `;
}

function renderAPICard(svc) {
  const httpStatus = svc.http_status;
  const httpClass = httpStatus === 200 ? 'ok' : httpStatus ? 'bad' : '';
  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div class="service-stats">
        ${serviceStatRow('HTTP', httpStatus ? String(httpStatus) : '-', httpClass)}
        ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
        ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
      </div>
    </div>
  `;
}

function renderWorkerCard(svc) {
  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div class="service-stats">
        ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
        ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
      </div>
    </div>
  `;
}

function renderGenericServiceCard(svc) {
  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div class="service-stats">
        ${serviceStatRow('Container', escapeHTML(svc.container_state || '-'), svc.container_state === 'running' ? 'ok' : 'bad')}
        ${serviceStatRow('Uptime', formatUptime(svc.uptime_sec), '')}
      </div>
    </div>
  `;
}

function renderServiceCard(svc) {
  const role = svc.role || 'unknown';
  switch (role) {
    case 'llm-proxy': return renderLLMProxyCard(svc);
    case 'db':        return renderDBCard(svc);
    case 'search':    return renderSearchCard(svc);
    case 'mcp':       return renderMCPCard(svc);
    case 'voice':     return renderVoiceCard(svc);
    case 'automation':return renderAutomationCard(svc);
    case 'api':
    case 'web':       return renderAPICard(svc);
    case 'worker':
    case 'queue':     return renderWorkerCard(svc);
    default:          return renderGenericServiceCard(svc);
  }
}

function renderHomelabServiceCard(svc) {
  const httpClass = svc.httpStatus === 200 ? 'ok' : svc.httpStatus ? 'bad' : '';
  return `
    <div class="service-card">
      ${serviceCardHeader(svc)}
      <div class="service-stats">
        ${serviceStatRow('Endpoint', escapeHTML(svc.endpoint || '-'), '')}
        ${serviceStatRow('Bucket', escapeHTML(svc.bucket ? `${svc.bucket}/${svc.prefix || ''}` : '-'), '')}
        ${serviceStatRow('Usage', escapeHTML(formatBytes(svc.totalBytes) || '-'), '')}
        ${serviceStatRow('Objects', escapeHTML(svc.objectCount !== undefined ? String(svc.objectCount) : '-'), '')}
        ${serviceStatRow('HTTP', svc.httpStatus ? String(svc.httpStatus) : '-', httpClass)}
        ${serviceStatRow('Source', escapeHTML(svc.sourceInstance || '-'), '')}
        ${serviceStatRow('Latest', escapeHTML(svc.latestBackup ? relativeTime(svc.latestBackup) : '-'), '')}
        ${svc.error ? serviceStatRow('Error', escapeHTML(svc.error), 'bad') : ''}
      </div>
    </div>
  `;
}

function renderInfraGrid() {
  const vmNames = Object.keys(openclawState.instances).sort();
  const allServices = Object.values(swarmState.services);
  const agentmonServices = allServices.filter(s => s.group === 'agentmon');
  const swarmServices = allServices.filter(s => s.group !== 'agentmon');
  const homelabServices = getK8sHomelabServices();

  app.innerHTML = `
    <div class="page-header">
      <div class="page-header-row">
        <h2>Infrastructure <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
        <button class="refresh-btn" id="infra-refresh-btn" type="button" title="Refresh infrastructure data">
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13.5 2.5A7 7 0 1 0 14 9"/><polyline points="14 2.5 14 6 10.5 6"/></svg>
          Refresh
        </button>
      </div>
    </div>

    <div class="infra-section">
      <p class="infra-section-title">VMs</p>
      ${vmNames.length === 0
        ? '<p class="empty-state">No VM data</p>'
        : `<div class="vm-grid">${vmNames.map(name => renderVMCard(name)).join('')}</div>`
      }
    </div>

    <div class="infra-section">
      <p class="infra-section-title">Swarm Services</p>
      ${swarmServices.length === 0
        ? '<p class="empty-state">No swarm service data</p>'
        : `<div class="service-grid">${swarmServices.map(svc => renderServiceCard(svc)).join('')}</div>`
      }
    </div>

    <div class="infra-section">
      <p class="infra-section-title">K8s Homelab</p>
      ${homelabServices.length === 0
        ? '<p class="empty-state">No k8s homelab service data</p>'
        : `<div class="service-grid">${homelabServices.map(svc => renderHomelabServiceCard(svc)).join('')}</div>`
      }
    </div>

    <div class="infra-section">
      <p class="infra-section-title">Agentmon</p>
      ${agentmonServices.length === 0
        ? '<p class="empty-state">No agentmon service data</p>'
        : `<div class="service-grid">${agentmonServices.map(svc => renderServiceCard(svc)).join('')}</div>`
      }
    </div>
  `;

  // Start freshness timer — update "Updated X ago" text every 10s
  if (_infraTimerInterval) clearInterval(_infraTimerInterval);
  _infraTimerInterval = setInterval(() => {
    document.querySelectorAll('.freshness-timer[data-ts]').forEach(el => {
      el.textContent = 'Updated ' + relativeTime(el.dataset.ts);
    });
  }, 10000);

  // Manual refresh button
  document.getElementById('infra-refresh-btn')?.addEventListener('click', async () => {
    const btn = document.getElementById('infra-refresh-btn');
    if (btn) btn.disabled = true;
    try {
      await loadInfrastructureSnapshots();
      renderInfraGrid();
    } finally {
      const b = document.getElementById('infra-refresh-btn');
      if (b) b.disabled = false;
    }
  });
}

export async function renderInfrastructure(routeToken) {
  app.innerHTML = `<div class="page-header"><h2>Infrastructure</h2></div><div style="margin-top:1rem">${infrastructureSkeleton()}</div>`;

  infraUnsubscribe = subscribeWS(handleInfraWS);

  try {
    await loadInfrastructureSnapshots();
    if (routeToken && !isRouteCurrent(routeToken)) return;

    if (isCurrentPath('/infrastructure')) {
      renderInfraGrid();
    }
  } catch (e) {
    if (isCurrentPath('/infrastructure')) {
      app.innerHTML = `<div class="page-header"><h2>Infrastructure</h2></div><p class="empty-state">Error: ${escapeHTML(e.message)}</p>`;
    }
  }
}