<script lang="ts">
  interface LogEntry {
    timestamp: string;
    priority: string;
    message: string;
  }

  let logs = $state<LogEntry[]>([]);
  let loading = $state(true);
  let error = $state('');
  let filter = $state('');
  let hours = $state(1);

  async function loadLogs() {
    loading = true;
    error = '';
    try {
      const token = localStorage.getItem('token');
      const res = await fetch(`/api/logs?hours=${hours}&filter=${encodeURIComponent(filter)}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (res.ok) {
        const data = await res.json();
        logs = data.data || [];
      } else {
        error = 'Failed to load logs';
      }
    } catch (e) {
      error = 'Connection error';
      console.error('Failed to load logs:', e);
    } finally {
      loading = false;
    }
  }

  function getPriorityClass(priority: string): string {
    const p = priority.toLowerCase();
    if (p === 'err' || p === 'error') return 'error';
    if (p === 'warning' || p === 'warn') return 'warning';
    if (p === 'info') return 'info';
    return '';
  }

  $effect(() => { loadLogs(); });
</script>

<div class="header">
  <h2>Mail Logs</h2>
  <div class="controls">
    <label>
      Hours:
      <select bind:value={hours} onchange={loadLogs}>
        <option value={1}>Last hour</option>
        <option value={6}>Last 6 hours</option>
        <option value={24}>Last 24 hours</option>
        <option value={48}>Last 48 hours</option>
      </select>
    </label>
    <label>
      Filter:
      <input type="text" bind:value={filter} placeholder="Filter logs..." onkeydown={(e) => e.key === 'Enter' && loadLogs()} />
    </label>
    <button onclick={loadLogs}>Refresh</button>
  </div>
</div>

{#if loading}
  <p>Loading...</p>
{:else if error}
  <p class="error">{error}</p>
{:else if logs.length === 0}
  <p>No log entries found.</p>
{:else}
  <div class="log-container">
    {#each logs as entry}
      <div class="log-entry {getPriorityClass(entry.priority)}">
        <span class="timestamp">{entry.timestamp}</span>
        <span class="priority">[{entry.priority}]</span>
        <span class="message">{entry.message}</span>
      </div>
    {/each}
  </div>
{/if}

<style>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .controls {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .controls label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .controls select,
  .controls input {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #3498db;
    color: white;
  }

  .log-container {
    background: #1a1a2e;
    color: #eee;
    padding: 1rem;
    border-radius: 8px;
    max-height: 600px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.85rem;
  }

  .log-entry {
    padding: 0.25rem 0;
    border-bottom: 1px solid #333;
  }

  .log-entry:last-child {
    border-bottom: none;
  }

  .timestamp {
    color: #888;
    margin-right: 0.5rem;
  }

  .priority {
    margin-right: 0.5rem;
    font-weight: bold;
  }

  .log-entry.error .priority {
    color: #e74c3c;
  }

  .log-entry.warning .priority {
    color: #f39c12;
  }

  .log-entry.info .priority {
    color: #3498db;
  }

  .error {
    color: #e74c3c;
  }
</style>
