components/task-scheduler.js

class TaskScheduler extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .task-card {
          background: white;
          border-radius: 0.5rem;
          padding: 1.5rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .task-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 1rem;
        }
        .task-list {
          margin-top: 1rem;
        }
        .task-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.75rem 0;
          border-bottom: 1px solid #E5E7EB;
        }
        .task-name {
          font-weight: 500;
        }
        .task-time {
          font-size: 0.875rem;
          color: #6B7280;
        }
        .task-controls {
          display: flex;
          gap: 0.5rem;
        }
        button {
          padding: 0.25rem 0.5rem;
          border-radius: 0.25rem;
          font-size: 0.875rem;
          cursor: pointer;
        }
        .btn-primary {
          background: #3B82F6;
          color: white;
          border: none;
        }
        .btn-secondary {
          background: white;
          color: #3B82F6;
          border: 1px solid #3B82F6;
        }
        .btn-danger {
          background: #EF4444;
          color: white;
          border: none;
        }
        .add-task {
          margin-top: 1rem;
          display: flex;
          gap: 0.5rem;
        }
        input {
          flex: 1;
          padding: 0.5rem;
          border: 1px solid #E5E7EB;
          border-radius: 0.25rem;
        }
      </style>
      <div class="task-card">
        <div class="task-header">
          <h3>Task Scheduler</h3>
          <span>Active Tasks: 3</span>
        </div>
        
        <div class="task-list">
          <div class="task-item">
            <div>
              <div class="task-name">Daily Backup</div>
              <div class="task-time">Runs at 2:00 AM</div>
            </div>
            <div class="task-controls">
              <button class="btn-secondary">Edit</button>
              <button class="btn-danger">Delete</button>
            </div>
          </div>
          <div class="task-item">
            <div>
              <div class="task-name">Sync Files</div>
              <div class="task-time">Every 6 hours</div>
            </div>
            <div class="task-controls">
              <button class="btn-secondary">Edit</button>
              <button class="btn-danger">Delete</button>
            </div>
          </div>
          <div class="task-item">
            <div>
              <div class="task-name">Clean Temp</div>
              <div class="task-time">Daily at midnight</div>
            </div>
            <div class="task-controls">
              <button class="btn-secondary">Edit</button>
              <button class="btn-danger">Delete</button>
            </div>
          </div>
        </div>
        
        <div class="add-task">
          <input type="text" placeholder="New task name" id="new-task">
          <button class="btn-primary">Add</button>
        </div>
      </div>
    `;

    this.shadowRoot.querySelector('.btn-primary').addEventListener('click', () => {
      const taskName = this.shadowRoot.getElementById('new-task').value;
      if (taskName) {
        this.dispatchEvent(new CustomEvent('add-task', { detail: taskName }));
        this.shadowRoot.getElementById('new-task').value = '';
      }
    });
  }
}

customElements.define('task-scheduler', TaskScheduler);