<!-- フィルターカード -->
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">ログフィルター</h6>
  </div>
  <div class="card-body">
    <form action="/admin/logs" method="GET" class="row g-3">
      <div class="col-md-3">
        <label for="date" class="form-label">日付</label>
        <input type="date" class="form-control" id="date" name="date" value="<%= filter?.date || '' %>">
      </div>
      <div class="col-md-3">
        <!-- 種類フィルターは削除 -->
      </div>
      <div class="col-md-3">
        <label for="status" class="form-label">ステータス</label>
        <select class="form-select" id="status" name="status">
          <option value="">すべて</option>
          <option value="成功" <%= filter?.status === '成功' ? 'selected' : '' %>>成功</option>
          <option value="失敗" <%= filter?.status === '失敗' ? 'selected' : '' %>>失敗</option>
        </select>
      </div>
      <div class="col-md-3 d-flex align-items-end">
        <button type="submit" class="btn btn-primary">フィルター適用</button>
        <a href="/admin/logs" class="btn btn-secondary ms-2">リセット</a>
      </div>
    </form>
  </div>
</div>

<!-- ログ一覧テーブル -->
<div class="card shadow mb-4">
  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
    <h6 class="m-0 font-weight-bold text-primary">配信ログ</h6>
    <div class="dropdown no-arrow">
      <button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        エクスポート
      </button>
      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="/admin/logs/export?format=csv">CSV形式</a></li>
        <li><a class="dropdown-item" href="/admin/logs/export?format=json">JSON形式</a></li>
      </ul>
    </div>
  </div>
  <div class="card-body">
    <% if (logs && logs.length > 0) { %>
      <div class="table-responsive">
        <table class="table table-bordered" width="100%" cellspacing="0">
          <thead>
            <tr>
              <th>日時</th>
              <th>ユーザー</th>
              <th>ステータス</th>
              <th>内容</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <% logs.forEach(log => { %>
              <tr>
                <td><%= new Date(log.createdAt).toLocaleString('ja-JP') %></td>
                <td>
                  <% if (log.userId) { %>
                    <a href="/admin/users/<%= log.userId %>">
                      <%= log.displayName || log.lineUserId.substring(0, 8) + '...' %>
                    </a>
                  <% } else { %>
                    不明
                  <% } %>
                </td>
                <td>
                  <% if (log.status === '成功') { %>
                    <span class="badge bg-success">成功</span>
                  <% } else { %>
                    <span class="badge bg-danger">失敗</span>
                  <% } %>
                </td>
                <td>
                  <% if (log.content && log.content.length > 50) { %>
                    <%= log.content.substring(0, 50) %>...
                  <% } else { %>
                    <%= log.content %>
                  <% } %>
                </td>
                <td>
                  <button class="btn btn-sm btn-info view-log-btn" data-log-id="<%= log._id %>">
                    <i class="fas fa-eye"></i> 詳細
                  </button>
                </td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
      
      <!-- ページネーション -->
      <% if (pagination.pages > 1) { %>
        <nav aria-label="ページナビゲーション">
          <ul class="pagination justify-content-center">
            <li class="page-item <%= pagination.current === 1 ? 'disabled' : '' %>">
              <a class="page-link" href="/admin/logs?page=<%= pagination.current - 1 %>&date=<%= filter?.date || '' %>&type=<%= filter?.type || '' %>&status=<%= filter?.status || '' %>" aria-label="前へ">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            
            <% for (let i = 1; i <= pagination.pages; i++) { %>
              <li class="page-item <%= pagination.current === i ? 'active' : '' %>">
                <a class="page-link" href="/admin/logs?page=<%= i %>&date=<%= filter?.date || '' %>&type=<%= filter?.type || '' %>&status=<%= filter?.status || '' %>">
                  <%= i %>
                </a>
              </li>
            <% } %>
            
            <li class="page-item <%= pagination.current === pagination.pages ? 'disabled' : '' %>">
              <a class="page-link" href="/admin/logs?page=<%= pagination.current + 1 %>&date=<%= filter?.date || '' %>&type=<%= filter?.type || '' %>&status=<%= filter?.status || '' %>" aria-label="次へ">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      <% } %>
    <% } else { %>
      <div class="alert alert-info">
        <i class="fas fa-info-circle"></i> ログが見つかりません。
      </div>
    <% } %>
  </div>
</div>

<!-- ログ詳細モーダル -->
<div class="modal fade" id="logDetailModal" tabindex="-1" aria-labelledby="logDetailModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="logDetailModalLabel">ログ詳細</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="text-center py-3" id="logDetailLoading">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <p>ログ詳細を読み込み中...</p>
        </div>
        
        <div id="logDetailContent" style="display: none;">
          <div class="row mb-3">
            <div class="col-md-6">
              <strong>日時:</strong>
              <span id="logDetailTimestamp"></span>
            </div>
            <div class="col-md-6">
              <strong>ユーザー:</strong>
              <span id="logDetailUser"></span>
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <strong>内容:</strong>
              <span id="logDetailContent"></span>
            </div>
            <div class="col-md-6">
              <strong>ステータス:</strong>
              <span id="logDetailStatus"></span>
            </div>
          </div>
          
          <div class="mb-3">
            <strong>メッセージ:</strong>
            <p id="logDetailMessage"></p>
          </div>
          
          <div class="mb-3">
            <strong>詳細情報:</strong>
            <pre id="logDetailData" class="bg-light p-3 rounded"></pre>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    // ログ詳細ボタンのクリックイベント
    $('.view-log-btn').click(function() {
      const logId = $(this).data('log-id');
      
      // モーダルを表示
      $('#logDetailModal').modal('show');
      
      // ローディング表示
      $('#logDetailLoading').show();
      $('#logDetailContent').hide();
      
      // ログ詳細の取得
      $.get(`/admin/api/logs/${logId}`, function(data) {
        if (data.success) {
          const log = data.log;
          
          // 日時
          $('#logDetailTimestamp').text(new Date(log.createdAt).toLocaleString('ja-JP'));
          
          // ユーザー
          if (log.userId) {
            $('#logDetailUser').html(`<a href="/admin/users/${log.userId}">${log.displayName || log.lineUserId}</a>`);
          } else {
            $('#logDetailUser').text('不明');
          }
          
          // 内容
          $('#logDetailContent').text(log.content || '');
          
          // ステータス
          let statusHtml = '';
          if (log.status === '成功') {
            statusHtml = '<span class="badge bg-success">成功</span>';
          } else {
            statusHtml = '<span class="badge bg-danger">失敗</span>';
          }
          $('#logDetailStatus').html(statusHtml);
          
          // メッセージ
          $('#logDetailMessage').text(log.errorMessage || '');
          
          // 詳細情報
          if (log.data) {
            let dataStr = '';
            try {
              dataStr = JSON.stringify(log.data, null, 2);
            } catch (e) {
              dataStr = String(log.data);
            }
            $('#logDetailData').text(dataStr);
          } else {
            $('#logDetailData').text('詳細情報はありません');
          }
          
          // 表示切り替え
          $('#logDetailLoading').hide();
          $('#logDetailContent').show();
        } else {
          $('#logDetailContent').html('<div class="alert alert-danger">ログの取得に失敗しました</div>');
          $('#logDetailLoading').hide();
          $('#logDetailContent').show();
        }
      }).fail(function() {
        $('#logDetailContent').html('<div class="alert alert-danger">サーバーエラーが発生しました</div>');
        $('#logDetailLoading').hide();
        $('#logDetailContent').show();
      });
    });
  });
</script>