{% extends "botapp/base.html" %}
{% load static %}

{% block title %}{{ bot.name }} | RPA Monitor{% endblock %}

{% block content %}
<div class="space-y-6">

  <!-- Hero do bot -->
  <div class="glass-card p-6 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-indigo-500/5 pointer-events-none"></div>
    <div class="relative grid grid-cols-1 md:grid-cols-[auto_1fr_auto] gap-6 items-start">
      <div class="w-14 h-14 rounded-xl bg-blue-500/20 border border-blue-500/40 flex items-center justify-center shrink-0">
        <i class="bi bi-robot text-blue-400 text-2xl"></i>
      </div>

      <div>
        <div class="flex items-center gap-2 flex-wrap">
          <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-100">{{ bot.name }}</h1>
          {% if bot.is_active %}
          <span class="chip chip-success"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>Ativo</span>
          {% else %}
          <span class="chip chip-muted">Inativo</span>
          {% endif %}
          {% if bot.last_status %}
          <span class="chip
            {% if bot.last_status == 'completed' %}chip-success
            {% elif bot.last_status == 'failed' %}chip-danger
            {% elif bot.last_status == 'started' %}chip-info
            {% else %}chip-muted{% endif %}">Último: {{ bot.last_status|title }}</span>
          {% endif %}
        </div>
        {% if bot.description %}
        <p class="mt-2 text-slate-300 max-w-3xl leading-relaxed">{{ bot.description }}</p>
        {% endif %}
        <div class="mt-3 flex items-center gap-x-4 gap-y-1 text-xs text-slate-400 flex-wrap">
          {% if bot.department %}<span class="inline-flex items-center gap-1"><i class="bi bi-building"></i>{{ bot.department }}</span>{% endif %}
          {% if bot.version %}<span class="inline-flex items-center gap-1"><i class="bi bi-tag"></i>v{{ bot.version }}</span>{% endif %}
          <span class="inline-flex items-center gap-1"><i class="bi bi-calendar-plus"></i>Criado em {{ bot.created_at|date:"d/m/Y H:i" }}</span>
          {% if bot.last_execution_at %}<span class="inline-flex items-center gap-1"><i class="bi bi-clock-history"></i>Última execução {{ bot.last_execution_at|date:"d/m/Y H:i" }}</span>{% endif %}
        </div>
      </div>

      {% if user.is_superuser %}
      <button id="toggleBotStatus" data-bot-id="{{ bot.id }}"
              class="{% if bot.is_active %}btn-ghost hover:text-red-400{% else %}btn-primary{% endif %}">
        {% if bot.is_active %}<i class="bi bi-pause-fill"></i> Desativar{% else %}<i class="bi bi-play-fill"></i> Ativar{% endif %}
      </button>
      {% endif %}
    </div>
  </div>

  {% if user.is_staff or user.is_superuser %}
  <!-- Threshold de silêncio (individual) -->
  <div class="glass-card p-5">
    <div class="flex items-start justify-between flex-wrap gap-4">
      <div class="flex items-start gap-3">
        <div class="w-10 h-10 rounded-lg bg-amber-500/10 border border-amber-500/30 flex items-center justify-center shrink-0">
          <i class="bi bi-stopwatch text-amber-400 text-lg"></i>
        </div>
        <div>
          <h2 class="text-lg font-semibold text-slate-100">Threshold de silêncio</h2>
          <p class="text-sm text-slate-400 mt-0.5">
            Dispara alerta <code class="px-1 py-0.5 rounded bg-slate-800 text-amber-300 text-xs">silent_bot</code>
            quando esse tempo passa sem nova execução.
          </p>
          <div class="mt-2 text-xs text-slate-400">
            Atual:
            {% if bot.silence_threshold_minutes %}
              <span class="chip chip-info ml-1"><i class="bi bi-stopwatch"></i>{{ bot.silence_threshold_minutes }}min</span>
            {% elif bot.silence_threshold_hours %}
              <span class="chip chip-info ml-1"><i class="bi bi-stopwatch"></i>{{ bot.silence_threshold_hours }}h</span>
            {% else %}
              <span class="chip chip-muted ml-1">default global ({{ default_hours }}h)</span>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="flex items-end gap-2 flex-wrap">
        <div>
          <label class="fx-label">Valor</label>
          <input id="botThresholdInput" type="number" min="1" max="8760"
                 value="{% if bot.silence_threshold_minutes %}{{ bot.silence_threshold_minutes }}{% elif bot.silence_threshold_hours %}{{ bot.silence_threshold_hours }}{% else %}24{% endif %}"
                 class="fx-input w-28">
        </div>
        <div>
          <label class="fx-label">Unidade</label>
          <select id="botThresholdUnit" class="fx-select" onchange="onBotUnitChange()">
            <option value="minutes" {% if bot.silence_threshold_minutes %}selected{% endif %}>Minutos</option>
            <option value="hours" {% if not bot.silence_threshold_minutes %}selected{% endif %}>Horas</option>
          </select>
        </div>
        <button type="button" onclick="applyBotThreshold(false)" class="btn-primary">
          <i class="bi bi-check-lg"></i> Aplicar
        </button>
        <button type="button" onclick="applyBotThreshold(true)" class="btn-ghost" title="Volta ao default global">
          <i class="bi bi-x-circle"></i> Limpar
        </button>
      </div>
    </div>
    <div id="botThresholdResult" class="hidden text-sm p-3 rounded-lg border mt-3"></div>
    <p class="text-xs text-slate-500 mt-3">
      Use <strong>minutos</strong> para bots de alta frequência (ex.: a cada 10min).
      Para aplicar em lote, veja <a href="{% url 'silence_thresholds' %}" class="text-blue-400 hover:underline">Thresholds de silêncio</a>.
    </p>
  </div>
  {% endif %}

  <!-- Filtros de logs -->
  <div class="flex items-end justify-between flex-wrap gap-4">
    <h2 class="text-xl font-semibold text-slate-100">
      <i class="bi bi-journal-code text-slate-400"></i> Logs de Execução
    </h2>
    <form method="get" class="flex items-end gap-3 flex-wrap">
      <div>
        <label class="fx-label">Início</label>
        <input type="date" name="start_time" value="{{ request.GET.start_time }}" class="fx-input">
      </div>
      <div>
        <label class="fx-label">Fim</label>
        <input type="date" name="end_time" value="{{ request.GET.end_time }}" class="fx-input">
      </div>
      <button type="submit" class="btn-primary"><i class="bi bi-funnel"></i> Filtrar</button>
    </form>
  </div>

  <!-- Logs -->
  <div class="glass-card overflow-hidden">
    <div class="overflow-x-auto">
      <table class="fx-table">
        <thead>
          <tr>
            <th>Tarefa</th><th>Status</th><th>Início</th><th>Fim</th><th>Duração</th>
            <th>Erro</th><th>Sistema</th><th>Usuário</th><th class="text-right">Ações</th>
          </tr>
        </thead>
        <tbody>
          {% for log in logs %}
          <tr>
            <td class="font-medium text-slate-200">{{ log.task|default:"—" }}</td>
            <td>
              {% if log.status == 'completed' %}<span class="chip chip-success">{{ log.get_status_display }}</span>
              {% elif log.status == 'failed' %}<span class="chip chip-danger">{{ log.get_status_display }}</span>
              {% elif log.status == 'started' %}<span class="chip chip-info">{{ log.get_status_display }}</span>
              {% else %}<span class="chip chip-muted">{{ log.status|default:"—" }}</span>{% endif %}
            </td>
            <td class="text-slate-400 text-xs">{{ log.start_time|date:"d/m/Y H:i:s"|default:"—" }}</td>
            <td class="text-slate-400 text-xs">{{ log.end_time|date:"d/m/Y H:i:s"|default:"—" }}</td>
            <td class="text-slate-300 text-xs">{{ log.duration|default:"—" }}</td>
            <td>{% if log.error_message %}<span class="text-red-400 text-xs cursor-help" title="{{ log.error_message }}">{{ log.error_message|truncatechars:30 }}</span>{% else %}<span class="text-slate-600">—</span>{% endif %}</td>
            <td class="text-slate-500 text-xs">{{ log.os_platform|truncatechars:20|default:"—" }}</td>
            <td class="text-slate-400 text-xs">{{ log.user_login|default:"—" }}</td>
            <td class="text-right">
              <button class="btn-ghost text-xs py-1 px-2" onclick="showLogDetails({{ log.id }})">
                <i class="bi bi-eye"></i> Detalhes
              </button>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="9" class="text-center py-12 text-slate-500">
            <i class="bi bi-inbox text-3xl"></i>
            <p class="mt-2">Nenhum log encontrado.</p>
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Paginação -->
  <div class="fx-pagination">
    {% if page_obj.has_previous %}
      <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}">&laquo;</a>
    {% endif %}
    <span class="current">Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span>
    {% if page_obj.has_next %}
      <a href="?page={{ page_obj.next_page_number }}{% if request.GET.start_time %}&start_time={{ request.GET.start_time }}{% endif %}{% if request.GET.end_time %}&end_time={{ request.GET.end_time }}{% endif %}">&raquo;</a>
    {% endif %}
  </div>
</div>

<!-- Modal -->
<div id="logModal" class="fixed inset-0 z-50 hidden bg-black/70 backdrop-blur-sm items-center justify-center p-4" onclick="if(event.target===this)closeModal()">
  <div class="glass-card max-w-3xl w-full max-h-[85vh] overflow-hidden flex flex-col">
    <div class="flex items-center justify-between p-4 border-b border-slate-700">
      <h3 class="text-lg font-semibold text-slate-100"><i class="bi bi-file-earmark-code text-blue-400"></i> Detalhes do Log</h3>
      <button onclick="closeModal()" class="text-slate-400 hover:text-red-400 text-2xl leading-none">&times;</button>
    </div>
    <div id="logDetails" class="p-5 overflow-auto"></div>
  </div>
</div>

<script>
  function closeModal() {
    const m = document.getElementById('logModal');
    m.classList.add('hidden'); m.classList.remove('flex');
  }

  function formatLogData(data) {
    const items = [
      ['Tarefa', data.task], ['Descrição', data.description], ['Status', data.status],
      ['Início', data.start_time], ['Fim', data.end_time], ['Duração', data.duration],
      ['Mensagem de Erro', data.error_message], ['Tipo de Exceção', data.exception_type],
      ['Diretório', data.bot_dir], ['SO', data.os_platform], ['Python', data.python_version],
      ['IP', data.host_ip], ['Host', data.host_name], ['Usuário', data.user_login],
      ['PID', data.pid], ['Manual', data.manual_trigger ? 'Sim' : 'Não'],
      ['Trigger', data.trigger_source], ['Ambiente', data.env],
    ];
    const html = items.map(([k,v]) => `
      <div class="border-b border-slate-800 py-2">
        <div class="text-xs text-slate-500 uppercase tracking-wider">${k}</div>
        <div class="text-sm text-slate-200 mt-0.5 break-words">${v ?? '<span class="text-slate-600">—</span>'}</div>
      </div>
    `).join('');
    const result = data.result_data ?
      `<div class="mt-4 pt-3 border-t border-slate-700">
         <div class="text-xs text-slate-500 uppercase tracking-wider mb-2">Resultado</div>
         <pre class="bg-slate-950 border border-slate-800 rounded p-3 text-xs text-emerald-300 overflow-auto">${JSON.stringify(data.result_data, null, 2)}</pre>
       </div>` : '';
    return `
      <div class="text-xs text-slate-500 mb-3">Log #${data.id}</div>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6">${html}</div>
      ${result}
    `;
  }

  function showLogDetails(logId) {
    const m = document.getElementById('logModal');
    const body = document.getElementById('logDetails');
    body.innerHTML = '<div class="text-center py-8 text-slate-400"><i class="bi bi-arrow-clockwise animate-spin text-2xl"></i><p class="mt-2">Carregando...</p></div>';
    m.classList.remove('hidden'); m.classList.add('flex');

    fetch(`/log/${logId}/`, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
      .then(r => r.json())
      .then(d => { body.innerHTML = formatLogData(d); })
      .catch(() => { body.innerHTML = '<div class="text-red-400 text-center py-8">Erro ao carregar detalhes.</div>'; });
  }

  // Toggle bot status
  (function(){
    const btn = document.getElementById('toggleBotStatus');
    if (!btn) return;
    btn.addEventListener('click', function() {
      const botId = this.dataset.botId;
      const isActive = this.classList.contains('btn-ghost');
      if (!confirm(`Tem certeza que deseja ${isActive ? 'desativar' : 'ativar'} este bot?`)) return;
      fetch(`/bot/${botId}/toggle-status/`, {
        method: 'POST',
        headers: {'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json'},
        body: JSON.stringify({}),
      })
      .then(r => r.json())
      .then(d => { if (d.status === 'success') location.reload(); })
      .catch(() => alert('Erro ao atualizar status.'));
    });
  })();

  // Threshold de silêncio — reusa o endpoint de bulk com bot_ids=[this].
  function onBotUnitChange() {
    const unit = document.getElementById('botThresholdUnit').value;
    const input = document.getElementById('botThresholdInput');
    if (unit === 'minutes') {
      input.min = 1; input.max = 525600;
      if (parseInt(input.value, 10) >= 60) input.value = 10;
    } else {
      input.min = 1; input.max = 8760;
      if (parseInt(input.value, 10) < 1) input.value = 24;
    }
  }

  async function applyBotThreshold(clear) {
    const result = document.getElementById('botThresholdResult');
    let body = { bot_ids: [{{ bot.id }}] };
    let label = '';

    if (clear) {
      body.threshold_hours = null;
      body.threshold_minutes = null;
      if (!confirm('Voltar este bot ao threshold default global?')) return;
    } else {
      const unit = document.getElementById('botThresholdUnit').value;
      const raw = document.getElementById('botThresholdInput').value;
      const v = parseInt(raw, 10);
      if (!v || v < 1) { alert('Valor inválido.'); return; }
      label = v + (unit === 'minutes' ? 'min' : 'h');
      if (unit === 'minutes') body.threshold_minutes = v;
      else body.threshold_hours = v;
      if (!confirm(`Aplicar threshold de ${label} a este bot?`)) return;
    }

    result.className = 'text-sm p-3 rounded-lg border border-slate-700 bg-slate-800/50 text-slate-300 mt-3';
    result.textContent = 'Aplicando...';
    result.classList.remove('hidden');

    try {
      const resp = await fetch('{% url "bulk_set_silence_threshold" %}', {
        method: 'POST',
        headers: {
          'X-CSRFToken': '{{ csrf_token }}',
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(body),
      });
      const data = await resp.json();
      if (!resp.ok || data.status !== 'success') {
        result.className = 'text-sm p-3 rounded-lg border border-red-500/40 bg-red-500/10 text-red-300 mt-3';
        result.textContent = data.message || ('Erro ' + resp.status);
      } else {
        result.className = 'text-sm p-3 rounded-lg border border-emerald-500/40 bg-emerald-500/10 text-emerald-200 mt-3';
        result.textContent = data.message;
        setTimeout(() => location.reload(), 1000);
      }
    } catch (e) {
      result.className = 'text-sm p-3 rounded-lg border border-red-500/40 bg-red-500/10 text-red-300 mt-3';
      result.textContent = 'Erro de rede.';
    }
  }

  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
</script>
{% endblock %}