// --- JAVASCRIPT LOGIKA SA FIKSNIM PUTANJAMA ---

// --- 1. DEFINIRANJE BAZE PODATAKA (PRIMJER) ---
// Napomena: Svaka slika MORA postojati u folderu "slike/"
const rawSongs = [
    { pjevac: "Safet Isović", pjesma: "Jutros rano", ritam: "3/4", intonacija: "Am", slika: "slike/Safet Isovic - Jutros rano - 3_4 - Am.jpg" },
    { pjevac: "Himzo Polovina", pjesma: "Emina", ritam: "4/4", intonacija: "Dm", slika: "slike/Himzo Polovina - Emina - 4_4 - Dm.jpg" },
    { pjevac: "Safet Isović", pjesma: "Zvijezda tjera mjeseca", ritam: "2/4", intonacija: "G", slika: "slike/Safet Isovic - Zvijezda tjera mjeseca - 2_4 - G.jpg" },
    { pjevac: "Haris Džinović", pjesma: "I tebe sam sit kafano", ritam: "3/4", intonacija: "Cm", slika: "slike/Haris Dzinovic - I tebe sam sit kafano - 3_4 - Cm.jpg" },
    // Dodajte ovdje sve ostale pjesme s ispravnim putanjama do foldera "slike/"
];

let songs = rawSongs; // Koristimo fiksni niz umjesto dinamičkog učitavanja
let selectedType = "pjevac"; 
let currentSelectedValue = null; 
let currentFilterValue = null; 

// --- 2. INICIJALIZACIJA (Ostaje ista) ---
const abeceda=["A","B","C","Č","Ć","D","Dž","Đ","E","F","G","H","I","J","K","L","Lj","M","N","Nj","O","P","R","S","Š","T","U","V","Z","Ž"];
const alphabetButtonsContainer = document.querySelector('.alphabet-buttons');
abeceda.forEach(slovo => {
    const btn = document.createElement('button');
    btn.textContent = slovo;
    alphabetButtonsContainer.appendChild(btn);
});

const poljeListe = document.getElementById('p3'); 
const slikaKontejner = document.querySelector('#p6 .slika-kontejner'); 

function clearPoljeListe() { poljeListe.innerHTML = ""; }
function prikaziSliku(song){
    // Ova funkcija ostaje ista, ali koristi fiksnu putanju song.slika
    // ... (ostatak prikaziSliku funkcije je isti) ...
    // (radi kompaktnosti, ne ponavljam cijelu funkciju)
}

// Fullscreen funkcionalnost (Ostaje ista)
const fullOverlay=document.getElementById("fullscreenOverlay");
const fullImg=document.getElementById("fullscreenImg");
function otvoriFullscreen(src){
    fullImg.src=src;
    fullOverlay.style.display="flex";
}
fullOverlay.onclick = () => { fullOverlay.style.display="none"; };


function prikaziSliku(song){
    // Pošto je P6 skriven, ovo se ne vidi na prvom ekranu
    slikaKontejner.innerHTML = "";
    if(!song) return;

    const info=document.createElement("div");
    info.className="info";
    info.textContent=`${song.ritam} - ${song.intonacija}`;
    slikaKontejner.appendChild(info);
    
    if(song.slika){
        const img=document.createElement("img");
        img.src=song.slika; // Koristi fiksnu putanju
        img.onclick = () => otvoriFullscreen(song.slika);
        slikaKontejner.appendChild(img);
    }
}

function prikaziListe(lista, cb, kljuc, listaNaslov){
    // ... (Ova funkcija ostaje ista) ...
    clearPoljeListe();
    poljeListe.innerHTML = `<h3 style="margin:5px 0; padding:0 5px; color:#333;">${listaNaslov}</h3>`;
    
    lista.forEach(item=>{
        const b=document.createElement("button");
        b.textContent=item;
        
        if(currentSelectedValue && kljuc === 'pjesma' && item === currentSelectedValue){
             b.classList.add("selected");
        }
        
        b.onclick=()=>{ 
            [...poljeListe.querySelectorAll('button')].forEach(x=>x.classList.remove("selected"));
            b.classList.add("selected");
            currentSelectedValue = item;
            cb(item);
        };
        poljeListe.appendChild(b);
    });
}

function updateListe(filterLetter = null) {
    // ... (Ova funkcija ostaje ista) ...
    currentSelectedValue = null; 
    currentFilterValue = null; 
    prikaziSliku(null); 

    let uniqueItems;
    let listKey;
    let listTitle;
    
    if (selectedType === "pjevac" || selectedType === "ritam") {
        
        listKey = selectedType === "pjevac" ? 'pjevac' : 'ritam';
        listTitle = selectedType === "pjevac" ? 'Pjevači' : 'Ritmovi';
        
        uniqueItems = [...new Set(songs.map(s => s[listKey]))].sort();
        
        if (filterLetter) {
            uniqueItems = uniqueItems.filter(x => x.toUpperCase().startsWith(filterLetter));
        }

        prikaziListe(uniqueItems, selectedItem => {
            
            currentFilterValue = selectedItem; 
            
            const filterProperty = selectedType === "pjevac" ? 'pjevac' : 'ritam';
            const filteredSongs = songs.filter(s => s[filterProperty] === selectedItem).map(s => s.pjesma).sort();
            
            prikaziListe(filteredSongs, selectedSong => {
                const songToDisplay = songs.find(s => s.pjesma === selectedSong && s[filterProperty] === currentFilterValue);
                prikaziSliku(songToDisplay);
            }, 'pjesma', `Pjesme od: ${selectedItem}`);
            
        }, listKey, listTitle);

    } else if (selectedType === "pjesma") {
        
        listKey = 'pjesma';
        listTitle = 'Sve Pjesme';
        
        uniqueItems = [...new Set(songs.map(s => s.pjesma))].sort();
        
        if (filterLetter) {
            uniqueItems = uniqueItems.filter(x => x.toUpperCase().startsWith(filterLetter));
        }

        prikaziListe(uniqueItems, selectedSong => {
            const songToDisplay = songs.find(x => x.pjesma === selectedSong);
            prikaziSliku(songToDisplay);
        }, listKey, listTitle);
    }
}

// --- 3. INICIJALIZACIJA PRIKAZA ---
// Nema event listenera za input file. Pozivamo updateListe odmah!
updateListe();

// --- 4. TIPOVI I ABECEDA (Ostaju isti) ---
document.querySelectorAll('.type-button').forEach(btn=>{
    btn.onclick=()=>{
        selectedType=btn.dataset.type;
        document.querySelectorAll('.type-button').forEach(b=>b.classList.remove('selected'));
        btn.classList.add('selected');
        updateListe(); 
    };
});

alphabetButtonsContainer.addEventListener('click', e=>{
    if(e.target.tagName!=="BUTTON" || e.target.textContent==="") return;
    const slovo=e.target.textContent.toUpperCase();
    updateListe(slovo); 
});