components/task-card.js

class TaskCard extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        
        const id = this.getAttribute('id');
        const text = this.getAttribute('text');
        const email = this.getAttribute('email');
        const completed = this.getAttribute('completed') === 'true';
        const hasReminder = this.getAttribute('has-reminder') === 'true';
        const reminderStopped = this.getAttribute('reminder-stopped') === 'true';
        const reminderFrequency = this.getAttribute('reminder-frequency');
        const createdAt = this.getAttribute('created-at');
        
        const createdDate = new Date(createdAt).toLocaleDateString();
        const timeAgo = this.getTimeAgo(createdAt);
this.shadowRoot.innerHTML = `
            <style>
                .task-card {
                    background: white;
                    border-radius: 12px;
                    padding: 20px;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                }
                
                .task-card:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                }
                
                .task-card.completed {
                    opacity: 0.7;
                    background: #f9fafb;
                }
                
                .task-text {
                    transition: all 0.3s ease;
                }
                
                .task-card.completed .task-text {
                    text-decoration: line-through;
                    color: #9ca3af;
                }
                .task-checkbox {
                    width: 24px;
                    height: 24px;
                    cursor: pointer;
                    border: 2px solid #d1d5db;
                    border-radius: 6px;
                    position: relative;
                    transition: all 0.2s ease;
                    background-color: white;
                }
                
                .task-checkbox:hover {
                    border-color: #3b82f6;
                }
                
                .task-checkbox.checked {
                    background-color: #10b981;
                    border-color: #10b981;
                }
                
                .task-checkbox.checked::after {
                    content: '✓';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: white;
                    font-weight: bold;
                    font-size: 14px;
                }
.action-btn {
                    padding: 8px;
                    border-radius: 8px;
                    transition: all 0.2s ease;
                    cursor: pointer;
                }
                
                .action-btn:hover {
                    background-color: #f3f4f6;
                }
                
                .action-btn.delete:hover {
                    background-color: #fee2e2;
                    color: #dc2626;
                }
                
                .reminder-btn {
                    position: relative;
                }
                
                .reminder-btn.active {
                    color: #3b82f6;
                }
                
                .reminder-pulse {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 10px;
                    height: 10px;
                    background-color: #10b981;
                    border-radius: 50%;
                    animation: pulse 2s infinite;
                }
                
                @keyframes pulse {
                    0% {
                        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
                    }
                    70% {
                        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
                    }
                    100% {
                        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
                    }
                }
                
                .badge {
                    display: inline-block;
                    padding: 2px 8px;
                    border-radius: 12px;
                    font-size: 0.75rem;
                    font-weight: 500;
                }
                
                .badge-reminder {
                    background-color: #dbeafe;
                    color: #1e40af;
                }
                
                .badge-stopped {
                    background-color: #fef3c7;
                    color: #92400e;
                }
            </style>
            
            <div class="task-card ${completed ? 'completed' : ''}">
                <div class="flex items-start gap-3">
                    <div class="task-checkbox ${completed ? 'checked' : ''}" data-action="toggle"></div>
<div class="flex-1">
                        <h3 class="task-text font-semibold text-gray-800 mb-2">${text}</h3>
                        
                        <div class="flex flex-wrap items-center gap-2 mb-3">
                            <div class="flex items-center gap-1 text-xs text-gray-500">
                                <i data-feather="mail" class="w-3 h-3"></i>
                                <span class="truncate max-w-[150px]">${email}</span>
                            </div>
                            <div class="flex items-center gap-1 text-xs text-gray-500">
                                <i data-feather="calendar" class="w-3 h-3"></i>
                                <span>${timeAgo}</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex gap-2">
                                ${hasReminder && !reminderStopped ? 
                                    `<span class="badge badge-reminder">Active (${reminderFrequency || 'daily'})</span>` : ''}
                                ${reminderStopped ? 
                                    '<span class="badge badge-stopped">Reminder Stopped</span>' : ''}
</div>
                <div class="flex items-center gap-1">
                                ${!completed ? `
                                    <button class="action-btn reminder-btn ${hasReminder && !reminderStopped ? 'active' : ''}" 
                                            data-action="reminder" 
                                            title="${hasReminder && !reminderStopped ? 'Stop Reminder' : 'Set Reminder'}" 
                                            type="button">
                                        <i data-feather="bell" class="w-4 h-4"></i>
                                        ${hasReminder && !reminderStopped ? '<div class="reminder-pulse"></div>' : ''}
                                    </button>
                                ` : ''}
                                <button class="action-btn delete" data-action="delete" title="Delete Task" type="button">
                                    <i data-feather="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
</div>
                    </div>
                </div>
            </div>
        `;
    }
    
    getTimeAgo(dateString) {
        const date = new Date(dateString);
        const seconds = Math.floor((new Date() - date) / 1000);
        
        let interval = seconds / 31536000;
        if (interval > 1) return Math.floor(interval) + 'y ago';
        
        interval = seconds / 2592000;
        if (interval > 1) return Math.floor(interval) + 'mo ago';
        
        interval = seconds / 86400;
        if (interval > 1) return Math.floor(interval) + 'd ago';
        
        interval = seconds / 3600;
        if (interval > 1) return Math.floor(interval) + 'h ago';
        
        interval = seconds / 60;
        if (interval > 1) return Math.floor(interval) + 'm ago';
        
        return 'Just now';
    }
}

customElements.define('task-card', TaskCard);