// ==== BAGIAN SETUP ====

// 1. Pilih semua elemen HTML yang dibutuhkan
const formTugas = document.getElementById('form-tugas');
const inputTugas = document.getElementById('input-tugas');
const daftarTugasContainer = document.getElementById('daftar-tugas-container');

// 2. Siapkan "database" kita: sebuah array untuk menyimpan semua object tugas
let daftarTugas = [];

// ==== BAGIAN FUNGSI ====

// 3. Fungsi untuk menampilkan (me-render) semua tugas ke layar
function renderTugas() {
    // Kosongkan dulu containernya agar tidak ada duplikat
    daftarTugasContainer.innerHTML = '';

    // Loop melalui array 'daftarTugas' menggunakan forEach
    daftarTugas.forEach(function(tugas) {
        // Buat elemen div baru untuk setiap tugas
        const divTugas = document.createElement('div');
        divTugas.classList.add('item-tugas');
        // Tambahkan class 'selesai' jika tugasnya sudah selesai
        if (tugas.selesai) {
            divTugas.classList.add('selesai');
        }

        // Buat elemen span untuk teks tugas
        const spanTeks = document.createElement('span');
        spanTeks.classList.add('teks-tugas');
        spanTeks.textContent = tugas.teks;
        // Event listener untuk menandai selesai saat teks diklik
        spanTeks.addEventListener('click', function() {
            toggleSelesai(tugas.id);
        });

        // Buat tombol hapus
        const tombolHapus = document.createElement('button');
        tombolHapus.classList.add('tombol-hapus');
        tombolHapus.textContent = 'Hapus';
        // Event listener untuk menghapus tugas saat tombol diklik
        tombolHapus.addEventListener('click', function() {
            hapusTugas(tugas.id);
        });

        // Masukkan span dan tombol ke dalam div tugas
        divTugas.appendChild(spanTeks);
        divTugas.appendChild(tombolHapus);

        // Masukkan div tugas ke dalam container utama
        daftarTugasContainer.appendChild(divTugas);
    });
}

// 4. Fungsi untuk menambah tugas baru
function tambahTugas(teks) {
    const tugasBaru = {
        id: Date.now(), // Gunakan timestamp sebagai ID unik
        teks: teks,
        selesai: false
    };
    daftarTugas.push(tugasBaru);
    renderTugas(); // Setelah menambah, render ulang daftarnya
}

// 5. Fungsi untuk menghapus tugas berdasarkan ID
function hapusTugas(id) {
    // Buat array baru yang isinya semua tugas KECUALI yang ID-nya cocok
    daftarTugas = daftarTugas.filter(tugas => tugas.id !== id);
    renderTugas(); // Render ulang
}

// 6. Fungsi untuk mengubah status selesai/belum selesai (toggle)
function toggleSelesai(id) {
    daftarTugas.forEach(function(tugas) {
        if (tugas.id === id) {
            tugas.selesai = !tugas.selesai; // Balikkan nilainya (true -> false, false -> true)
        }
    });
    renderTugas(); // Render ulang
}


// ==== BAGIAN EVENT LISTENERS ====

// 7. Event listener untuk form submission (saat tombol 'Tambah' diklik)
formTugas.addEventListener('submit', function(event) {
    event.preventDefault(); // Mencegah halaman refresh saat form disubmit

    const teksTugasBaru = inputTugas.value;

    if (teksTugasBaru.trim() !== '') { // Pastikan input tidak kosong
        tambahTugas(teksTugasBaru);
        inputTugas.value = ''; // Kosongkan kembali inputnya
    }
});

// Render awal saat halaman pertama kali dimuat (jika ada data awal)
renderTugas();