<%- include('../partials/header') %>
<%- include('../partials/sidebar') %>

<div class="dashboard-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
  <div>
    <h1 class="text-gradient">Programação da Rádio</h1>
    <p style="color: var(--text-muted);">Grade de programas e horários.</p>
  </div>
  <a href="/admin/programacao/novo" class="btn btn-primary">
    <i class="fas fa-plus"></i> Novo Programa
  </a>
</div>

<div class="card">
  <div style="overflow-x: auto;">
    <table style="width: 100%; border-collapse: collapse; text-align: left;">
      <thead>
        <tr style="border-bottom: 1px solid var(--border-color);">
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Imagem</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Programa</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Locutor</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Dias</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Horário</th>
          <th style="padding: 15px; color: var(--text-muted); font-weight: 500;">Ações</th>
        </tr>
      </thead>
      <tbody>
        <% if (programas.length > 0) { %>
          <% programas.forEach(prog => { %>
            <tr style="border-bottom: 1px solid rgba(42, 52, 74, 0.5); transition: background 0.3s;" onmouseover="this.style.background='rgba(0,240,255,0.02)'" onmouseout="this.style.background='transparent'">
              <td style="padding: 15px;">
                <% if (prog.imagem_url) { %>
                  <img src="<%= prog.imagem_url %>" style="width: 50px; height: 50px; border-radius: 8px; object-fit: cover;">
                <% } else { %>
                  <div style="width: 50px; height: 50px; border-radius: 8px; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; color: var(--text-muted);"><i class="fas fa-calendar-alt"></i></div>
                <% } %>
              </td>
              <td style="padding: 15px; font-weight: 600;"><%= prog.nome %></td>
              <td style="padding: 15px;"><%= prog.locutor_nome || 'AutoDJ' %></td>
              <td style="padding: 15px; color: var(--text-muted); font-size: 0.9rem;">
                <% 
                  const mapDias = {1:'Seg', 2:'Ter', 3:'Qua', 4:'Qui', 5:'Sex', 6:'Sáb', 0:'Dom'};
                  const dias = prog.dias_semana ? prog.dias_semana.split(',').map(d => mapDias[d]).join(', ') : 'Todos os dias';
                %>
                <%= dias %>
              </td>
              <td style="padding: 15px;">
                <span style="background: rgba(189,0,255,0.1); color: var(--neon-purple); padding: 4px 8px; border-radius: 4px; font-size: 0.85rem;">
                  <i class="far fa-clock"></i> <%= prog.horario_inicio.substring(0,5) %> às <%= prog.horario_fim.substring(0,5) %>
                </span>
              </td>
              <td style="padding: 15px;">
                <form action="/admin/programacao/delete/<%= prog.id %>" method="POST" style="display:inline;" onsubmit="return confirm('Excluir este programa?');">
                  <button type="submit" class="btn btn-danger" style="padding: 8px 15px; font-size: 0.8rem;">
                    <i class="fas fa-trash"></i>
                  </button>
                </form>
              </td>
            </tr>
          <% }) %>
        <% } else { %>
          <tr><td colspan="6" style="padding: 30px; text-align: center; color: var(--text-muted);">Nenhum programa cadastrado.</td></tr>
        <% } %>
      </tbody>
    </table>
  </div>
</div>
<%- include('../partials/footer') %>
