RedditBot/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reddit Bot Dashboard</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      min-height: 100vh;
      color: #e4e4e4;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #333;
    }

    h1 {
      font-size: 28px;
      color: #ff6b6b;
    }

    .status-badge {
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
    }

    .status-running {
      background: #2ecc71;
      color: #fff;
    }

    .status-dry-run {
      background: #f39c12;
      color: #fff;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .stat-card {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .stat-card h3 {
      font-size: 12px;
      text-transform: uppercase;
      color: #888;
      margin-bottom: 8px;
    }

    .stat-card .value {
      font-size: 32px;
      font-weight: 700;
      color: #fff;
    }

    .stat-card .subtext {
      font-size: 12px;
      color: #666;
      margin-top: 4px;
    }

    .stat-card.highlight {
      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    }

    .stat-card.highlight h3,
    .stat-card.highlight .subtext {
      color: rgba(255, 255, 255, 0.8);
    }

    .panels {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    @media (max-width: 900px) {
      .panels {
        grid-template-columns: 1fr;
      }
    }

    .panel {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
    }

    .panel-header {
      padding: 16px 20px;
      background: rgba(0, 0, 0, 0.2);
      font-weight: 600;
      font-size: 14px;
      text-transform: uppercase;
      color: #aaa;
    }

    .panel-content {
      padding: 0;
      max-height: 400px;
      overflow-y: auto;
    }

    .activity-item {
      padding: 12px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .activity-item:last-child {
      border-bottom: none;
    }

    .activity-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .activity-icon.sent {
      background: #2ecc71;
    }

    .activity-icon.skipped {
      background: #95a5a6;
    }

    .activity-icon.response {
      background: #9b59b6;
    }

    .activity-icon.error {
      background: #e74c3c;
    }

    .activity-content {
      flex: 1;
      min-width: 0;
    }

    .activity-message {
      font-size: 14px;
      color: #ddd;
      word-wrap: break-word;
    }

    .activity-time {
      font-size: 11px;
      color: #666;
      margin-top: 4px;
    }

    .message-item {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .message-item:last-child {
      border-bottom: none;
    }

    .message-recipient {
      font-weight: 600;
      color: #ff6b6b;
      font-size: 13px;
      margin-bottom: 6px;
    }

    .message-text {
      font-size: 14px;
      color: #bbb;
      line-height: 1.5;
    }

    .message-meta {
      font-size: 11px;
      color: #666;
      margin-top: 8px;
      display: flex;
      gap: 12px;
    }

    .response-badge {
      background: #9b59b6;
      color: #fff;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 10px;
    }

    .config-section {
      margin-top: 30px;
    }

    .config-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 16px;
    }

    .config-item {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .config-item h4 {
      font-size: 12px;
      color: #888;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .config-item .value {
      color: #fff;
      font-size: 14px;
    }

    .tag {
      display: inline-block;
      background: rgba(255, 107, 107, 0.2);
      color: #ff6b6b;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 12px;
      margin: 2px;
    }

    .empty-state {
      padding: 40px;
      text-align: center;
      color: #666;
    }

    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.2);
    }

    ::-webkit-scrollbar-thumb {
      background: #444;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #555;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>Reddit Bot Dashboard</h1>
      <div id="status-badges">
        <span class="status-badge status-running" id="running-badge">Running</span>
        <span class="status-badge status-dry-run" id="dryrun-badge" style="display: none;">Dry Run</span>
      </div>
    </header>

    <div class="stats-grid">
      <div class="stat-card highlight">
        <h3>Messages Sent</h3>
        <div class="value" id="stat-sent">0</div>
        <div class="subtext"><span id="stat-hour">0</span> / <span id="stat-max-hour">8</span> this hour</div>
      </div>
      <div class="stat-card">
        <h3>Responses</h3>
        <div class="value" id="stat-responses">0</div>
        <div class="subtext"><span id="stat-rate">0</span>% response rate</div>
      </div>
      <div class="stat-card">
        <h3>Posts Processed</h3>
        <div class="value" id="stat-processed">0</div>
        <div class="subtext">Total analyzed</div>
      </div>
      <div class="stat-card">
        <h3>Success Examples</h3>
        <div class="value" id="stat-examples">0</div>
        <div class="subtext">Learning from responses</div>
      </div>
    </div>

    <div class="panels">
      <div class="panel">
        <div class="panel-header">Recent Activity</div>
        <div class="panel-content" id="activity-list">
          <div class="empty-state">No activity yet</div>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header">Recent Messages</div>
        <div class="panel-content" id="messages-list">
          <div class="empty-state">No messages sent yet</div>
        </div>
      </div>
    </div>

    <div class="config-section">
      <div class="config-grid">
        <div class="config-item">
          <h4>Monitoring Subreddits</h4>
          <div class="value" id="config-subreddits"></div>
        </div>
        <div class="config-item">
          <h4>Target Genders</h4>
          <div class="value" id="config-genders"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function formatTime(timestamp) {
      const date = new Date(timestamp);
      const now = new Date();
      const diff = now - date;

      if (diff < 60000) return 'Just now';
      if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
      if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
      return date.toLocaleDateString();
    }

    function getActivityIcon(type) {
      const icons = {
        sent: '✉️',
        skipped: '⏭️',
        response: '💬',
        error: '❌'
      };
      return icons[type] || '📌';
    }

    async function fetchStats() {
      try {
        const res = await fetch('/api/stats');
        const stats = await res.json();

        document.getElementById('stat-sent').textContent = stats.totalMessagesSent;
        document.getElementById('stat-hour').textContent = stats.messagesThisHour;
        document.getElementById('stat-max-hour').textContent = stats.maxMessagesPerHour;
        document.getElementById('stat-responses').textContent = stats.totalResponses;
        document.getElementById('stat-rate').textContent = stats.responseRate;
        document.getElementById('stat-processed').textContent = stats.totalProcessed;

        document.getElementById('dryrun-badge').style.display = stats.dryRunMode ? 'inline' : 'none';

        document.getElementById('config-subreddits').innerHTML = stats.subreddits
          .map(s => `<span class="tag">r/${s}</span>`).join('');
        document.getElementById('config-genders').innerHTML = stats.targetGenders
          .map(g => `<span class="tag">${g}</span>`).join('');

      } catch (err) {
        console.error('Failed to fetch stats:', err);
      }
    }

    async function fetchActivity() {
      try {
        const res = await fetch('/api/activity');
        const activity = await res.json();

        const container = document.getElementById('activity-list');

        if (activity.length === 0) {
          container.innerHTML = '<div class="empty-state">No activity yet</div>';
          return;
        }

        container.innerHTML = activity.map(item => `
          <div class="activity-item">
            <div class="activity-icon ${item.type}">${getActivityIcon(item.type)}</div>
            <div class="activity-content">
              <div class="activity-message">${escapeHtml(item.message)}</div>
              <div class="activity-time">${formatTime(item.timestamp)}</div>
            </div>
          </div>
        `).join('');

      } catch (err) {
        console.error('Failed to fetch activity:', err);
      }
    }

    async function fetchMessages() {
      try {
        const res = await fetch('/api/messages');
        const messages = await res.json();

        const container = document.getElementById('messages-list');

        if (messages.length === 0) {
          container.innerHTML = '<div class="empty-state">No messages sent yet</div>';
          return;
        }

        container.innerHTML = messages.map(msg => `
          <div class="message-item">
            <div class="message-recipient">
              u/${escapeHtml(msg.recipient)}
              ${msg.gotResponse ? '<span class="response-badge">Got Response!</span>' : ''}
            </div>
            <div class="message-text">${escapeHtml(msg.message)}</div>
            <div class="message-meta">
              <span>${formatTime(msg.sentAt)}</span>
            </div>
          </div>
        `).join('');

      } catch (err) {
        console.error('Failed to fetch messages:', err);
      }
    }

    async function fetchSuccessful() {
      try {
        const res = await fetch('/api/successful');
        const successful = await res.json();
        document.getElementById('stat-examples').textContent = successful.length;
      } catch (err) {
        console.error('Failed to fetch successful:', err);
      }
    }

    function escapeHtml(text) {
      const div = document.createElement('div');
      div.textContent = text;
      return div.innerHTML;
    }

    // Initial fetch
    fetchStats();
    fetchActivity();
    fetchMessages();
    fetchSuccessful();

    // Poll for updates
    setInterval(() => {
      fetchStats();
      fetchActivity();
      fetchMessages();
      fetchSuccessful();
    }, 5000);
  </script>
</body>
</html>