// assets/js/categories.js

import { db, collection, getDocs } from "./firebase-config.js";
import { AppState, initAuthState } from "./state.js";
import { initNavbar, getPathPrefix } from "./navbar.js";
import { initDrawer } from "./drawer.js";
import "./pincode.js";
import "./modals.js";

/**
 * Fetch and Render Full Categories Grid with Subcategories
 */
export const renderFullCategoriesPage = async () => {
    const container = document.getElementById('full-categories-container');
    if (!container) return;

    try {
        const snap = await getDocs(collection(db, "categories"));
        const categories = [];
        snap.forEach(d => {
            const cat = d.data();
            cat.id = d.id;
            categories.push(cat);
        });

        AppState.allCategories = categories;
        const rootCats = categories.filter(c => c.parentId === 'root');
        const prefix = getPathPrefix();

        if (rootCats.length === 0) {
            container.innerHTML = `<div class="text-center py-12 text-gray-400 font-bold">No categories found.</div>`;
            return;
        }

        let html = "";
        rootCats.forEach(parentCat => {
            const subCats = categories.filter(c => c.parentId === parentCat.id);

            html += `
                <div class="category-section-block bg-white p-5 rounded-lg shadow-sm border border-gray-200" data-cat-name="${parentCat.name.toLowerCase()}">
                    <div class="flex items-center justify-between border-b pb-3 mb-4">
                        <div class="flex items-center gap-3">
                            <img src="${parentCat.logo || 'https://rukminim2.flixcart.com/flap/128/128/image/29327f40e9c4d26b.png'}" alt="${parentCat.name}" class="w-8 h-8 object-contain">
                            <h2 class="text-lg font-bold text-gray-800">${parentCat.name}</h2>
                        </div>
                        <a href="${prefix}index.html?category=${encodeURIComponent(parentCat.name)}" class="text-xs font-bold text-flipkart hover:underline">
                            View All ${parentCat.name} <i class="fa-solid fa-arrow-right ml-1"></i>
                        </a>
                    </div>

                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                        <!-- Parent Link -->
                        <a href="${prefix}index.html?category=${encodeURIComponent(parentCat.name)}" class="border border-gray-100 p-3 rounded-lg flex flex-col items-center justify-center hover:border-flipkart hover:shadow-md transition bg-gray-50 text-decoration-none group">
                            <div class="w-16 h-16 mb-2 flex items-center justify-center">
                                <img src="${parentCat.logo || 'https://rukminim2.flixcart.com/flap/128/128/image/29327f40e9c4d26b.png'}" class="max-h-full max-w-full object-contain group-hover:scale-105 transition" alt="${parentCat.name}">
                            </div>
                            <span class="text-xs font-bold text-gray-800 text-center leading-tight">All ${parentCat.name}</span>
                        </a>

                        <!-- Nested Subcategories -->
                        ${subCats.map(sub => `
                            <a href="${prefix}index.html?category=${encodeURIComponent(parentCat.name)}&subcategory=${encodeURIComponent(sub.name)}" class="border border-gray-100 p-3 rounded-lg flex flex-col items-center justify-center hover:border-flipkart hover:shadow-md transition bg-white text-decoration-none group">
                                <div class="w-16 h-16 mb-2 flex items-center justify-center">
                                    <img src="${sub.logo || 'https://rukminim2.flixcart.com/flap/128/128/image/29327f40e9c4d26b.png'}" class="max-h-full max-w-full object-contain group-hover:scale-105 transition" alt="${sub.name}">
                                </div>
                                <span class="text-xs font-semibold text-gray-700 text-center leading-tight">${sub.name}</span>
                            </a>
                        `).join('')}
                    </div>
                </div>
            `;
        });

        container.innerHTML = html;
    } catch (e) {
        console.error("Categories Explorer error:", e);
        container.innerHTML = `<div class="text-center py-8 text-red-500 font-bold">Failed to load categories.</div>`;
    }
};

/**
 * Filter Categories List by Search Input
 * @param {string} val 
 */
export const filterCategoriesList = (val) => {
    const q = val.toLowerCase().trim();
    document.querySelectorAll('.category-section-block').forEach(block => {
        const name = block.getAttribute('data-cat-name') || '';
        const text = block.innerText.toLowerCase();
        if (name.includes(q) || text.includes(q)) {
            block.style.display = 'block';
        } else {
            block.style.display = 'none';
        }
    });
};

// Global Window Bindings
window.filterCategoriesList = filterCategoriesList;

/**
 * Shared Component Injector
 */
const loadComponent = async (url, containerId) => {
    try {
        const res = await fetch(url);
        if (res.ok) {
            const html = await res.text();
            const container = document.getElementById(containerId);
            if (container) container.innerHTML = html;
        }
    } catch (e) {
        console.warn(`Failed to inject component: ${url}`, e);
    }
};

document.addEventListener("DOMContentLoaded", async () => {
    await loadComponent("../components/header.html", "header-component-container");
    await loadComponent("../components/drawer.html", "drawer-component-container");
    await loadComponent("../components/bottom-nav.html", "bottom-nav-container");
    await loadComponent("../components/modals.html", "modals-container");

    await initNavbar();
    await initDrawer();
    await renderFullCategoriesPage();

    initAuthState((user) => {
        const loginBtn = document.getElementById("navLoginBtn");
        const profileDiv = document.getElementById("navProfileDiv");
        const userName = document.getElementById("navUserName");
        const drawerUserName = document.getElementById("drawerUserName");
        const drawerLoginText = document.getElementById("drawerLoginText");

        if (user) {
            if (loginBtn) loginBtn.classList.add("hide");
            if (profileDiv) profileDiv.classList.remove("hide");
            const name = user.displayName || user.email.split('@')[0];
            if (userName) userName.innerText = name;
            if (drawerUserName) drawerUserName.innerText = name;
            if (drawerLoginText) drawerLoginText.innerText = "My Account";
        } else {
            if (loginBtn) loginBtn.classList.remove("hide");
            if (profileDiv) profileDiv.classList.add("hide");
            if (drawerUserName) drawerUserName.innerText = "Guest User";
            if (drawerLoginText) drawerLoginText.innerText = "Login & Signup";
        }
    });
});