document.addEventListener('DOMContentLoaded', function () {
  var state = {
    period: '7d',
    workspaceId: null,
    usage: null,
    derived: {
      localizedOperations: [],
      normalizedTimeline: [],
      timelineMaxValue: 0,
      totalCalls: 0,
    },
    loading: false,
    loadError: '',
  };

  var periodSelect = document.getElementById('period');
  var exportBtn = document.querySelector('.page-header-actions .btn-secondary');
  var chartWrap = document.getElementById('chart-bars');
  var tableBody = document.getElementById('usage-tbody');
  var cardList = document.getElementById('usage-card-list');
  var chartTemplate = document.getElementById('tmpl-chart-bar');
  var rowTemplate = document.getElementById('tmpl-usage-row');
  var subtitle = document.querySelector('.section-card-subtitle');
  var statCards = document.querySelectorAll('.stats-grid .stat-card');

  function tKey(key) {
    return window.t ? t(key) : key;
  }

  function tfKey(key, vars) {
    return window.tf ? tf(key, vars) : tKey(key);
  }

  function currentLocale() {
    return localStorage.getItem('crank_lang') === 'ru' ? 'ru-RU' : 'en-US';
  }

  function currentWorkspaceId() {
    var workspace = window.getCurrentWorkspace ? window.getCurrentWorkspace() : null;
    return workspace ? workspace.id : null;
  }

  function element(tag, className, text) {
    var node = document.createElement(tag);
    if (className) node.className = className;
    if (text !== undefined && text !== null) node.textContent = text;
    return node;
  }

  function formatCount(value) {
    return Number(value || 0).toLocaleString(currentLocale());
  }

  function formatMs(value) {
    if (!value) {
      return '0ms';
    }
    if (value >= 1000) {
      return (value / 1000).toFixed(1) + 's';
    }
    return value + 'ms';
  }

  function periodLabel(period) {
    return tKey('usage.period.label.' + period);
  }

  function protocolColor(protocol) {
    return 'var(--blue)';
  }

  function protocolLabel(protocol) {
    return 'REST';
  }

  function localizedUsageOperation(operation) {
    if (!window.localizeDemoOperation) {
      return operation;
    }

    return window.localizeDemoOperation({
      name: operation.operation_name,
      operation_display_name: operation.operation_display_name,
      description: operation.operation_description || null,
    });
  }

  function chartBucketLabel(timestamp, period, index) {
    var date = new Date(timestamp);
    if (period === '7d') {
      return date.toLocaleDateString(currentLocale(), { weekday: 'short' });
    }
    if (period === '90d') {
      return date.toLocaleDateString(currentLocale(), { month: 'short' });
    }
    return tfKey('usage.chart.week', { index: index + 1 });
  }

  function toUtcBucketStart(date, period) {
    var bucket = new Date(date.getTime());
    bucket.setUTCMilliseconds(0);
    bucket.setUTCSeconds(0);
    bucket.setUTCMinutes(0);
    bucket.setUTCHours(0);

    if (period === '30d' || period === 'this_month') {
      var day = bucket.getUTCDay();
      var offset = day === 0 ? 6 : (day - 1);
      bucket.setUTCDate(bucket.getUTCDate() - offset);
      return bucket;
    }

    if (period === '90d') {
      bucket.setUTCDate(1);
      return bucket;
    }

    return bucket;
  }

  function shiftUtcBucket(date, period, amount) {
    var shifted = new Date(date.getTime());
    if (period === '30d' || period === 'this_month') {
      shifted.setUTCDate(shifted.getUTCDate() + (amount * 7));
      return shifted;
    }
    if (period === '90d') {
      shifted.setUTCMonth(shifted.getUTCMonth() + amount);
      return shifted;
    }
    shifted.setUTCDate(shifted.getUTCDate() + amount);
    return shifted;
  }

  function bucketKey(date) {
    return date.toISOString().slice(0, 19) + 'Z';
  }

  function expectedBucketCount(period, endBucket) {
    if (period === '7d') {
      return 7;
    }
    if (period === '30d') {
      return 5;
    }
    if (period === '90d') {
      return 4;
    }
    if (period === 'this_month') {
      var firstDay = new Date(Date.UTC(endBucket.getUTCFullYear(), endBucket.getUTCMonth(), 1));
      var firstWeek = toUtcBucketStart(firstDay, period);
      var diffMs = endBucket.getTime() - firstWeek.getTime();
      return Math.max(1, Math.floor(diffMs / (7 * 24 * 60 * 60 * 1000)) + 1);
    }
    return 7;
  }

  function normalizeTimeline(timeline, period) {
    if (!timeline.length) {
      return [];
    }

    var byBucket = {};
    timeline.forEach(function(point) {
      byBucket[point.bucket_start] = point;
    });

    var latestBucket = timeline.reduce(function(current, point) {
      return point.bucket_start > current.bucket_start ? point : current;
    }, timeline[0]);
    var endBucket = toUtcBucketStart(new Date(latestBucket.bucket_start), period);
    var bucketCount = expectedBucketCount(period, endBucket);
    var startBucket = shiftUtcBucket(endBucket, period, -(bucketCount - 1));
    var normalized = [];

    for (var index = 0; index < bucketCount; index += 1) {
      var bucketDate = shiftUtcBucket(startBucket, period, index);
      var key = bucketKey(bucketDate);
      normalized.push(byBucket[key] || {
        bucket_start: key,
        calls_ok: 0,
        calls_error: 0,
      });
    }

    return normalized;
  }

  function recomputeDerivedState() {
    var operations = state.usage ? (state.usage.operations || []) : [];
    var timeline = state.usage ? normalizeTimeline(state.usage.timeline || [], state.period) : [];
    var totalCalls = operations.reduce(function (sum, operation) {
      return sum + operation.calls_total;
    }, 0);
    var timelineMaxValue = timeline.reduce(function (maxValue, point) {
      return Math.max(maxValue, point.calls_ok + point.calls_error);
    }, 0);

    state.derived = {
      localizedOperations: operations.map(function (operation) {
        return {
          operation: operation,
          localized: localizedUsageOperation(operation),
        };
      }),
      normalizedTimeline: timeline,
      timelineMaxValue: timelineMaxValue,
      totalCalls: totalCalls,
    };
  }

  function buildEmptyState(title, message, compact) {
    var empty = element('div', 'empty-state');
    if (compact) {
      empty.style.padding = '0';
    }
    empty.appendChild(element('div', 'empty-state-title', title));
    empty.appendChild(element('div', 'empty-state-text', message));
    return empty;
  }

  function renderEmpty(title, message) {
    chartWrap.innerHTML = '';
    var chartEmpty = buildEmptyState(title, message, false);
    chartEmpty.style.width = '100%';
    chartWrap.appendChild(chartEmpty);

    tableBody.innerHTML = '';
    var row = document.createElement('tr');
    var cell = document.createElement('td');
    cell.colSpan = 7;
    cell.style.padding = '24px';
    cell.appendChild(buildEmptyState(title, message, true));
    row.appendChild(cell);
    tableBody.appendChild(row);
  }

  function renderStats() {
    var summary = state.usage ? state.usage.summary : null;
    var cards = [
      {
        value: formatCount(summary ? summary.rollup.calls_total : 0),
        text: tfKey('usage.stats.across', { period: periodLabel(state.period) }),
      },
      {
        value: ((summary ? summary.success_rate : 0) || 0).toFixed(1) + '%',
        text: tfKey('usage.stats.success_calls', { count: formatCount(summary ? summary.rollup.calls_ok : 0) }),
      },
      {
        value: formatMs(summary ? summary.rollup.p50_ms : 0),
        text: tKey('usage.stats.median'),
      },
      {
        value: formatMs(summary ? summary.rollup.p99_ms : 0),
        text: tfKey('usage.stats.error_calls', { count: formatCount(summary ? summary.rollup.calls_error : 0) }),
      }
    ];

    cards.forEach(function (card, index) {
      var node = statCards[index];
      if (!node) {
        return;
      }
      node.querySelector('.stat-value').textContent = card.value;
      var delta = node.querySelector('.stat-delta');
      delta.className = 'stat-delta';
      delta.textContent = card.text;
    });
  }

  function renderChart() {
    var timeline = state.derived.normalizedTimeline;
    chartWrap.innerHTML = '';

    if (!timeline.length) {
      var chartEmpty = buildEmptyState(
        tKey('usage.chart.empty.title'),
        tKey('usage.chart.empty.sub'),
        false
      );
      chartEmpty.style.width = '100%';
      chartWrap.appendChild(chartEmpty);
      return;
    }

    var maxValue = state.derived.timelineMaxValue;

    timeline.forEach(function (point, index) {
      var node = chartTemplate.content.cloneNode(true);
      var okHeight = maxValue ? Math.round((point.calls_ok / maxValue) * 160) : 0;
      var errorHeight = maxValue ? Math.round((point.calls_error / maxValue) * 160) : 0;
      if (point.calls_ok > 0) {
        okHeight = Math.max(okHeight, 6);
      }
      if (point.calls_error > 0) {
        errorHeight = Math.max(errorHeight, 6);
      }
      node.querySelector('.chart-bar.success').style.height = okHeight + 'px';
      node.querySelector('.chart-bar.success').dataset.tip = tfKey('usage.chart.ok', { count: formatCount(point.calls_ok) });
      node.querySelector('.chart-bar.error').style.height = errorHeight + 'px';
      node.querySelector('.chart-bar.error').dataset.tip = tfKey('usage.chart.errors', { count: formatCount(point.calls_error) });
      node.querySelector('.chart-col-label').textContent = chartBucketLabel(point.bucket_start, state.period, index);
      chartWrap.appendChild(node);
    });
  }

  function renderTable() {
    var operations = state.derived.localizedOperations;
    tableBody.innerHTML = '';
    if (cardList) {
      cardList.innerHTML = '';
    }

    if (!operations.length) {
      var row = document.createElement('tr');
      var cell = document.createElement('td');
      cell.colSpan = 7;
      cell.style.padding = '24px';
      cell.appendChild(
        buildEmptyState(
          tKey('usage.table.empty.title'),
          tKey('usage.table.empty.sub'),
          true
        )
      );
      row.appendChild(cell);
      tableBody.appendChild(row);
      renderOperationCards([]);
      return;
    }

    operations.forEach(function (entry) {
      var operation = entry.operation;
      var localizedOperation = entry.localized;
      var node = rowTemplate.content.cloneNode(true);
      var errorRate = operation.calls_total === 0
        ? 0
        : ((operation.calls_error / operation.calls_total) * 100);
      var share = state.derived.totalCalls === 0
        ? 0
        : ((operation.calls_total / state.derived.totalCalls) * 100);

      node.querySelector('.col-name').textContent = localizedOperation.operation_display_name || operation.operation_display_name;
      node.querySelector('.col-op-slug').textContent = operation.operation_name;

      var proto = node.querySelector('.col-proto');
      proto.textContent = protocolLabel(operation.protocol);
      proto.style.color = protocolColor(operation.protocol);

      node.querySelector('.col-calls').textContent = formatCount(operation.calls_total);
      node.querySelector('.col-errors').textContent = formatCount(operation.calls_error);

      var errorRateEl = node.querySelector('.col-err-rate');
      errorRateEl.textContent = errorRate.toFixed(2) + '%';
      errorRateEl.style.color = errorRate > 5 ? 'var(--red)' : (errorRate > 1 ? 'var(--amber)' : 'var(--green)');

      var latencyText = node.querySelector('.col-latency-text');
      latencyText.textContent =
        formatMs(operation.p50_ms) + ' / ' + formatMs(operation.p95_ms) + ' / ' + formatMs(operation.p99_ms);

      var base = Math.max(operation.p99_ms, 1);
      node.querySelector('.latency-p50').style.width = Math.max(4, Math.round((operation.p50_ms / base) * 64)) + 'px';
      node.querySelector('.latency-p95').style.width = Math.max(4, Math.round(((operation.p95_ms - operation.p50_ms) / base) * 64)) + 'px';
      node.querySelector('.latency-p99').style.width = Math.max(4, Math.round(((operation.p99_ms - operation.p95_ms) / base) * 64)) + 'px';

      node.querySelector('.col-quota-label').textContent = tfKey('usage.table.share', { value: share.toFixed(1) });
      node.querySelector('.col-quota-fill').style.width = share.toFixed(1) + '%';

      tableBody.appendChild(node);
    });

    renderOperationCards(operations);
  }

  function renderOperationCards(operations) {
    if (!cardList) {
      return;
    }

    cardList.innerHTML = '';

    if (!operations.length) {
      cardList.appendChild(buildEmptyState(
        tKey('usage.table.empty.title'),
        tKey('usage.table.empty.sub'),
        false
      ));
      return;
    }

    operations.forEach(function(entry) {
      var operation = entry.operation;
      var localizedOperation = entry.localized;
      var errorRate = operation.calls_total === 0
        ? 0
        : ((operation.calls_error / operation.calls_total) * 100);
      var share = state.derived.totalCalls === 0
        ? 0
        : ((operation.calls_total / state.derived.totalCalls) * 100);

      var card = element('div', 'resource-card');
      var header = element('div', 'resource-card-header');
      var headerMain = element('div');
      headerMain.appendChild(element(
        'div',
        'resource-card-title',
        localizedOperation.operation_display_name || operation.operation_display_name
      ));
      headerMain.appendChild(element('div', 'resource-card-subtitle', operation.operation_name));

      var actions = element('div', 'resource-card-actions');
      var protocolBadge = element('span', 'badge');
      protocolBadge.textContent = protocolLabel(operation.protocol);
      protocolBadge.style.color = protocolColor(operation.protocol);
      actions.appendChild(protocolBadge);
      header.appendChild(headerMain);
      header.appendChild(actions);
      card.appendChild(header);

      var metaGrid = element('div', 'resource-meta-grid');
      metaGrid.appendChild(buildUsageMetaItem('usage.table.th.calls', formatCount(operation.calls_total)));
      metaGrid.appendChild(buildUsageMetaItem('usage.table.th.errors', formatCount(operation.calls_error)));
      metaGrid.appendChild(buildUsageMetaItem('usage.table.th.error_rate', errorRate.toFixed(2) + '%'));
      metaGrid.appendChild(buildUsageMetaItem(
        'usage.table.th.latency',
        formatMs(operation.p50_ms) + ' / ' + formatMs(operation.p95_ms) + ' / ' + formatMs(operation.p99_ms)
      ));
      metaGrid.appendChild(buildUsageMetaItem('usage.table.th.share', tfKey('usage.table.share', { value: share.toFixed(1) })));
      card.appendChild(metaGrid);

      cardList.appendChild(card);
    });
  }

  function buildUsageMetaItem(labelKey, valueText) {
    var item = element('div', 'resource-meta-item');
    item.appendChild(element('div', 'resource-meta-label', tKey(labelKey)));
    item.appendChild(element('div', 'resource-meta-value', valueText));
    return item;
  }

  function renderUsage() {
    if (state.loading && !state.usage) {
      renderEmpty(tKey('usage.loading.title'), tKey('usage.loading.sub'));
      return;
    }

    if (state.loadError) {
      renderEmpty(tKey('usage.error.title'), state.loadError);
      return;
    }

    renderStats();
    renderChart();
    renderTable();
    if (subtitle) {
      subtitle.textContent = tfKey('usage.table.subtitle', { period: periodLabel(state.period) });
    }
  }

  async function loadUsage() {
    if (!window.CrankApi) {
      state.loadError = tKey('usage.error.api');
      renderUsage();
      return;
    }

    state.workspaceId = currentWorkspaceId();
    if (!state.workspaceId) {
      state.loadError = tKey('usage.error.workspace');
      renderUsage();
      return;
    }

    state.loading = true;
    state.loadError = '';
    renderUsage();

    try {
      state.usage = await window.CrankApi.getUsageOverview(state.workspaceId, { period: state.period });
      recomputeDerivedState();
    } catch (error) {
      state.loadError = error.message || tKey('usage.error.load');
      state.usage = null;
      recomputeDerivedState();
    } finally {
      state.loading = false;
      renderUsage();
    }
  }

  function exportCsv() {
    if (!state.usage) {
      if (window.CrankUi) {
        window.CrankUi.info(tKey('usage.export.empty.body'), tKey('usage.export.empty.title'));
      }
      return;
    }

    var rows = [tKey('usage.csv.header')];
    state.usage.operations.forEach(function (operation) {
      var localizedOperation = localizedUsageOperation(operation);
      var errorRate = operation.calls_total === 0
        ? 0
        : ((operation.calls_error / operation.calls_total) * 100);
      rows.push([
        '"' + (localizedOperation.operation_display_name || operation.operation_display_name) + '"',
        '"' + protocolLabel(operation.protocol) + '"',
        operation.calls_total,
        operation.calls_error,
        errorRate.toFixed(2),
        operation.p50_ms,
        operation.p95_ms,
        operation.p99_ms,
      ].join(','));
    });

    var blob = new Blob([rows.join('\r\n')], { type: 'text/csv' });
    var url = URL.createObjectURL(blob);
    var link = document.createElement('a');
    link.href = url;
    link.download = 'crank-usage-' + state.period + '.csv';
    link.click();
    URL.revokeObjectURL(url);
    if (window.CrankUi) {
      window.CrankUi.success(tKey('usage.export.done.body'), tKey('usage.export.done.title'));
    }
  }

  if (periodSelect) {
    periodSelect.value = state.period;
    periodSelect.addEventListener('change', function () {
      state.period = this.value;
      loadUsage();
    });
  }

  if (exportBtn) {
    exportBtn.addEventListener('click', exportCsv);
  }

  window.addEventListener('crank:workspacechange', loadUsage);

  if (window.whenWorkspacesReady) {
    window.whenWorkspacesReady().finally(loadUsage);
  } else {
    loadUsage();
  }
});