dashboard.js

const cardContainer = document.getElementById("card-container");
const totalCountEl = document.getElementById("totalCount");

const allBtn = document.getElementById("all");
const openBtn = document.getElementById("open");
const closedBtn = document.getElementById("closed");

const searchInput = document.getElementById("searchInput");
const searchBtn = document.getElementById("searchBtn");

const API_ALL = "https://phi-lab-server.vercel.app/api/v1/lab/issues";
// const API_SEARCH = `https://phi-lab-server.vercel.app/api/v1/lab/issues/search?q=${searchText}`;

let allIssues = [];
let currentTab = "all";

function setActiveTab(tab){
    currentTab = tab;
     [allBtn, openBtn, closedBtn].forEach((btn) => {
        btn.classList.remove("btn-primary");
        btn.classList.add("btn");
  });

   if (tab === "all") {
    allBtn.classList.add("btn-primary");
}
   if (tab === "open"){
    openBtn.classList.add("btn-primary");
} 
    if (tab === "closed"){
        closedBtn.classList.add("btn-primary");
    }

}

function updateCount(issues) {
  totalCountEl.textContent = String(issues.length);
}


// modal 
async function openIssueModal(id) {
    const modal = document.getElementById("issue_modal");
    const modalContent = document.getElementById("modal_content");
    
    
    modalContent.innerHTML = `<h3 class="text-2xl font-bold text-center text-gray-500 py-10">Loading details...</h3>`;
    modal.showModal();
    
    const response = await fetch(`https://phi-lab-server.vercel.app/api/v1/lab/issue/${id}`);
    const data = await response.json();
    const issue = data.data;

    modalContent.innerHTML = `
    <h3 class="text-3xl font-bold text-[#111827] mb-4">${issue.title}</h3>
        
        <div class="flex items-center gap-3 text-[#6B7280] text-[15px] mb-4 flex-wrap">
          <span class="${issue.status === "open" ? "bg-[#00A96E]" : "bg-[#8B5CF6]"} text-white px-4 py-1 rounded-full font-medium text-sm capitalize">${issue.status}</span>
          <span class="text-xl leading-none">•</span>
          <span>Opened by <span class="font-medium text-[#111827]">${issue.author}</span></span>
          <span class="text-xl leading-none">•</span>
        <p class="text-gray-400 text-[12px]">${issue.updatedAt.split("T")[0]}</p>
        </div>

        <div class="mb-6">
        <span class="badge badge-xs   py-3.5 rounded-full text-[10px] ${issue.labels[0]==="enhancement" ? "text-[#00A96E] bg-[#BBF7D0]" : issue.labels[0]==="bug" ? "text-[#EF4444] bg-[#FEECEC]" :"text-[#D97706] bg-[#FFF8DB]"}">${issue.labels[0].toUpperCase()}</span>

          <span class="badge badge-xs py-3.5 rounded-full text-[10px] ${
                                issue.labels && issue.labels[1]
                                    ? issue.labels[1] === "enhancement"
                                    ? "text-[#00A96E] bg-[#BBF7D0]"
                                    : issue.labels[1] === "bug"
                                    ? "text-[#EF4444] bg-[#FEECEC]"
                                    : "text-[#D97706] bg-[#FFF8DB]"
                                    : "hidden"
                                }">${issue.labels && issue.labels[1] ? issue.labels[1].toUpperCase() : ""}
                            </span>
        </div>

        <p class="text-[#6B7280] text-[17px] mb-7">
          ${issue.description}
        </p>
        
        <div class="bg-[#F8FAFC] p-6 rounded-xl flex flex-col sm:flex-row justify-between sm:items-center items-start gap-4">
            <div>
                <p class="text-[#6B7280] text-[15px] mb-1">Assignee:</p>
                <p class="font-bold text-xl text-[#111827]">${issue.assignee}</p>
            </div>
            <div>
                <p class="text-[#6B7280] text-[15px] mb-2">Priority:</p>
                <span class="inline-block ${issue.priority === "high" ? "bg-[#EF4444]" : issue.priority === "medium" ? "bg-[#F59E0B]" : "bg-[#9CA3AF]"} text-white text-xs font-bold px-5 py-1.5 rounded-full uppercase tracking-wide">${issue.priority}</span>
            </div>
        </div>

        <div class="modal-action mt-6">
          <form method="dialog">
            <button class="bg-[#4F46E5] hover:bg-[#4338CA] text-white text-[16px] font-semibold py-2.5 px-8 rounded-lg transition-colors cursor-pointer">Close</button>
          </form>
        </div>
    `
   
}



function clearCards() {
  cardContainer.innerHTML = "";
}
// calculateCount();

async function loadTab() {
    const response = await fetch("https://phi-lab-server.vercel.app/api/v1/lab/issues");
    const data = await response.json();
    // console.log(data);

    // displayIssues(data.data);
    data.data.status.forEach(issue => {
        const btn = document.createElement("button");
        btn.className = "btn";
        btn.id = "closed"
        btn.textContent = data.data.status.toUpperCase();

        btn.onclick = ()=> selectTab(tabId ,btn);
        tabContainer.appendChild(btn);

    });
    
        
   
}
function getFilteredList() {
  if (currentTab === "open") {
   return allIssues.filter((i) => i.status === "open");
  }
  if (currentTab === "closed"){
     return allIssues.filter((i) => i.status === "closed");

  }

  return allIssues;
}

async function loadAllIssues() {
    clearCards();
    cardContainer.innerHTML = `
    <div class="col-span-4 p-6 text-center text-gray-500 bg-white rounded-xl">
      <span class="loading loading-ring loading-xl"></span>
    </div>
  `;
    const response = await fetch("https://phi-lab-server.vercel.app/api/v1/lab/issues");
    const data = await response.json();
    // console.log(data);
    allIssues = data.data;
    renderIssues(allIssues);
           
   
}

async function runSearch() {
    const searchText = (searchInput?.value || "").trim();

  if (!searchText) {
    renderIssues(getFilteredList());
    return;
  }
 // loading
  clearCards();
  cardContainer.innerHTML = `
    <div class="col-span-4 p-6 text-center text-gray-500 bg-white rounded-xl">
        <span class="loading loading-ring loading-xl"></span>
    </div>
  `;
    
  const searchUrl = `https://phi-lab-server.vercel.app/api/v1/lab/issues/search?q=${searchText}`;
  
  
  const res = await fetch(searchUrl);
  const json = await res.json()

    // search API
    const searched = Array.isArray(json.data) ? json.data : [];

    //  current tab 
    const finalList =
      currentTab === "open"
        ? searched.filter((i) => i.status === "open")
        : currentTab === "closed"
        ? searched.filter((i) => i.status === "closed")
        : searched;

    renderIssues(finalList);
  }


function renderIssues(issues) {
    clearCards();
    updateCount(issues)
    issues.forEach(issue => {
        const card = document.createElement("div");
        card.className =  `card bg-base-100 shadow-sm p-1   ${issue.status ==="open"? "border-t-5 border-success" :"border-t-5 border-primary" }`;
        card.innerHTML = 
        `<div class="">
                <div onclick="openIssueModal(${issue.id})" class=" p-4 space-y-2" >
                    <div class="flex justify-between">
                    <img src="${issue.status==="closed"? "./assets/Closed- Status .png": "./assets/Open-Status.png"}" alt="" class="max-w-7">
                    <span class="badge badge-xs  px-6 py-2.5 rounded-full text-[12px] ${issue.priority ==="medium"? "text-[#D97706] bg-[#FFF8DB]": issue.priority ==="low"? "text-gray-400 bg-gray-200" :"text-[#EF4444] bg-[#FEECEC]"}">${issue.priority.toUpperCase()}</span>
                    </div>
                        <h2  class="text-[16px] font-semibold">${issue.title}</h2>
                        <p class="text-gray-400 text-[12px] line-clamp-2">
                            ${issue.description}
                        </p>
                        <div class="flex gap-3 items-start">
                        
                            <span class="badge badge-xs   py-3.5 rounded-full text-[10px] ${issue.labels[0]==="enhancement" ? "text-[#00A96E] bg-[#BBF7D0]" : issue.labels[0]==="bug" ? "text-[#EF4444] bg-[#FEECEC]" :"text-[#D97706] bg-[#FFF8DB]"}">${issue.labels[0].toUpperCase()}</span>
                            <span class="badge badge-xs py-3.5 rounded-full text-[10px] ${
                                issue.labels && issue.labels[1]
                                    ? issue.labels[1] === "enhancement"
                                    ? "text-[#00A96E] bg-[#BBF7D0]"
                                    : issue.labels[1] === "bug"
                                    ? "text-[#EF4444] bg-[#FEECEC]"
                                    : "text-[#D97706] bg-[#FFF8DB]"
                                    : "hidden"
                                }">${issue.labels && issue.labels[1] ? issue.labels[1].toUpperCase() : ""}
                            </span>
                                                                                                        
                            
                        </div>
                        
                    </div>
                </div>
                    
                <hr class="border-b border-gray-200 ">

                <div class="p-4">
                    <p class="text-gray-400 text-[12px]">#${issue.id} ${issue.author}</p>
                    <p class="text-gray-400 text-[12px]">${issue.createdAt.split("T")[0]}</p>
                </div>
            </div>`
        
            cardContainer.appendChild(card);
    }); 
}

allBtn.addEventListener("click", () => {
  setActiveTab("all");
  renderIssues(getFilteredList());
});
openBtn.addEventListener("click", () => {
  setActiveTab("open");
  renderIssues(getFilteredList());
});
closedBtn.addEventListener("click", () => {
  setActiveTab("closed");
  renderIssues(getFilteredList());
});

searchBtn?.addEventListener("click", runSearch);
searchInput?.addEventListener("keydown", (press) => {
  if (press.key === "Enter") runSearch();
});
setActiveTab("all");
loadAllIssues();