class MonthAccordion extends HTMLElement {
    constructor() {
        super();
        this.isOpen = false;
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        this.addEventListener('click', this.toggle.bind(this));
    }

    toggle() {
        this.isOpen = !this.isOpen;
        this.render();
    }

    render() {
        const month = this.getAttribute('month') || 'Monat';
        
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    margin-bottom: 0.5rem;
                    border-radius: 0.5rem;
                    overflow: hidden;
                    background-color: white;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                }
                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 1rem;
                    cursor: pointer;
                    user-select: none;
                }
                .header:hover {
                    background-color: rgba(0, 0, 0, 0.02);
                }
                .month-name {
                    font-weight: 600;
                    font-size: 1.1rem;
                    color: #1f2937;
                }
                .task-count {
                    background-color: #e5e7eb;
                    color: #4b5563;
                    padding: 0.25rem 0.5rem;
                    border-radius: 9999px;
                    font-size: 0.75rem;
                }
                .content {
                    padding: 0 1rem;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease-out;
                }
                .content.open {
                    max-height: 500px;
                    padding-bottom: 1rem;
                }
                .task-list {
                    margin-top: 0.5rem;
                }
                .add-task-form {
                    display: flex;
                    margin-top: 1rem;
                }
                .add-task-input {
                    flex: 1;
                    padding: 0.75rem;
                    border: 1px solid #e5e7eb;
                    border-radius: 0.375rem;
                    margin-right: 0.5rem;
                    font-size: 1rem;
                }
                .add-task-btn {
                    background-color: #3b82f6;
                    color: white;
                    border: none;
                    border-radius: 0.375rem;
                    padding: 0 1rem;
                    cursor: pointer;
                }
                .add-task-btn:hover {
                    background-color: #2563eb;
                }
                .chevron {
                    transition: transform 0.2s ease;
                }
                .chevron.open {
                    transform: rotate(180deg);
                }
            </style>
            <div class="header">
                <div class="flex items-center">
                    <span class="month-name">${month}</span>
                    <span class="task-count ml-2">5 Aufgaben</span>
                </div>
                <div>
                    <i data-feather="chevron-down" class="chevron ${this.isOpen ? 'open' : ''}"></i>
                </div>
            </div>
            <div class="content ${this.isOpen ? 'open' : ''}">
                <div class="task-list">
                    <div class="task-item flex items-center p-4 border-b border-gray-200">
                        <div class="flex items-center flex-1">
                            <input type="checkbox" class="task-checkbox w-6 h-6 rounded border-gray-300 text-blue-500 mr-3">
                            <span class="text-gray-800">Einkaufen gehen</span>
                        </div>
                        <button class="delete-task text-gray-400 hover:text-red-500 p-2">
                            <i data-feather="trash-2" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
                <form class="add-task-form" data-month="${month}">
                    <input type="text" class="add-task-input" placeholder="Neue Aufgabe..." required>
                    <button type="submit" class="add-task-btn">Hinzufügen</button>
                </form>
            </div>
        `;
        
        if (this.shadowRoot.querySelector('[data-feather]')) {
            feather.replace();
        }
    }
}

customElements.define('custom-month-accordion', MonthAccordion);