// ==== ELEMENTOS HTML ====
const inicio = document.getElementById("inicio");
const catalogo = document.getElementById("catalogo");
const productosSection = document.getElementById("productos");

const explorarBtn = document.getElementById("explorarBtn");
const volverInicio = document.getElementById("volverInicio");
const volverCatalogo = document.getElementById("volverCatalogo");

const listaPastelerias = document.getElementById("listaPastelerias");
const listaComentarios = document.getElementById("listaComentarios");
const productosPublico = document.getElementById("productosPublico");

const formComentario = document.getElementById("formComentario");

// ==== VARIABLES ====
let pasteleriaActual = null;
let productoSeleccionado = null;
let estrellasSeleccionadas = 0;

// ==== INIT ====
document.addEventListener("DOMContentLoaded", () => {
    mostrarPastelerias();
    inicializarEventos();
});

// =======================
// EVENTOS
// =======================
function inicializarEventos() {
    explorarBtn.onclick = () => {
        inicio.classList.add("oculto");
        catalogo.classList.remove("oculto");
    };

    volverInicio.onclick = () => {
        catalogo.classList.add("oculto");
        inicio.classList.remove("oculto");
    };

    volverCatalogo.onclick = () => {
        productosSection.classList.add("oculto");
        catalogo.classList.remove("oculto");
    };

    document.getElementById("buscador").addEventListener("input", (e) => {
        mostrarPastelerias(e.target.value);
    });

    formComentario.addEventListener("submit", enviarComentario);
}

// =======================
//  PASTELERÍAS
// =======================
async function mostrarPastelerias(filtro = "") {
    const res = await fetch("/api/pastelerias");
    const data = await res.json();

    const lista = data.filter(p =>
        p.nombre.toLowerCase().includes(filtro.toLowerCase())
    );

    listaPastelerias.innerHTML = "";

    lista.forEach(p => {
        const card = document.createElement("div");
        card.classList.add("card");

        card.innerHTML = `
            <img src="${p.imagen}">
            <h3>${p.nombre}</h3>
            <p>${p.descripcion}</p>
        `;

        // CORREGIDO PARA ABRIR POPUP DE CALIFICAR
        card.onclick = () => mostrarProductosPublico(p.id, p.nombre);

        listaPastelerias.appendChild(card);
    });
}

// =======================
//  PRODUCTOS – VISTA DE USUARIO
// =======================
function mostrarProductosPublico(idPasteleria, nombre) {
    catalogo.classList.add("oculto");
    productosSection.classList.remove("oculto");

    pasteleriaActual = idPasteleria;

    document.getElementById("tituloProductos").textContent =
        "Productos de " + nombre;

    cargarProductosPublico(idPasteleria);
    cargarComentarios();
}

async function cargarProductosPublico(idPasteleria) {
    productosPublico.innerHTML = "<p>Cargando...</p>";

    const res = await fetch(`/api/productos?id_pasteleria=${idPasteleria}`);
    const productos = await res.json();

    productosPublico.innerHTML = "";

    productos.forEach(p => {
        const div = document.createElement("div");
        div.classList.add("producto-card");

        div.innerHTML = `
            <img src="${p.imagen}">
            <h3>${p.nombre}</h3>
            <p>S/ ${p.precio}</p>

            <div class="rating-promedio" data-id="${p.id}">
                ⭐ Cargando...
            </div>

            <button onclick="mostrarCalificador(${p.id}, '${p.nombre}')">
                ⭐ Calificar
            </button>
        `;

        productosPublico.appendChild(div);

        cargarPromedioProducto(p.id);
    });
}

// =======================
// ⭐ PROMEDIO POR PRODUCTO
// =======================
async function cargarPromedioProducto(idProducto) {
    const res = await fetch(`/api/promedio-producto/${idProducto}`);
    const data = await res.json();

    const div = document.querySelector(`.rating-promedio[data-id="${idProducto}"]`);
    if (!div) return;

    const promedio = Math.round(data.promedio || 0);

    div.textContent = promedio > 0
        ? "⭐".repeat(promedio) + ` (${promedio}/5)`
        : "Sin calificaciones";
}

// =======================
// ⭐ POPUP CALIFICACIÓN
// =======================
function mostrarCalificador(id, nombre) {
    productoSeleccionado = id;
    estrellasSeleccionadas = 0;

    document.getElementById("productoCalificarNombre").textContent = nombre;

    document.querySelectorAll("#estrellasSelect span")
        .forEach(est => {
            est.style.color = "gray";
            est.onclick = () => seleccionarEstrellas(est.dataset.v);
        });

    document.getElementById("popupCalificar").classList.remove("oculto");
}

function seleccionarEstrellas(n) {
    estrellasSeleccionadas = Number(n);

    document.querySelectorAll("#estrellasSelect span")
        .forEach(est => {
            est.style.color = est.dataset.v <= n ? "gold" : "gray";
        });
}

function cerrarPopup() {
    document.getElementById("popupCalificar").classList.add("oculto");
}

// Enviar calificación ⭐
async function enviarCalificacion() {

    if (estrellasSeleccionadas === 0)
        return alert("Selecciona estrellas");

    const comentario = document.getElementById("comentarioUsuario").value.trim();
    const nombre = document.getElementById("nombreUsuarioCalifica").value.trim() || "Anónimo";

    await fetch("/api/calificaciones", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            id_pasteleria: pasteleriaActual,
            id_producto: productoSeleccionado,
            puntuacion: estrellasSeleccionadas,
            comentario,
            nombre
        })
    });

    alert("¡Gracias por tu calificación!");

    cerrarPopup();
    cargarPromedioProducto(productoSeleccionado);
}

// =======================
//  COMENTARIOS GENERALES
// =======================
async function cargarComentarios() {
    const res = await fetch(`/api/calificaciones?id_pasteleria=${pasteleriaActual}`);
    const comentarios = await res.json();

    listaComentarios.innerHTML = "";

    if (comentarios.length === 0)
        return listaComentarios.innerHTML = "<p>No hay comentarios aún.</p>";

    comentarios.forEach(c => {
        const div = document.createElement("div");
        div.classList.add("comentario");

        div.innerHTML = `
            <strong>${c.nombre}</strong>
            <p>${c.comentario}</p>
            <small>${new Date(c.fecha).toLocaleDateString()}</small>
            <span class="rating">⭐ ${c.puntuacion}/5</span>
        `;

        listaComentarios.appendChild(div);
    });
}

// Enviar comentario
async function enviarComentario(e) {
    e.preventDefault();

    const nombre = document.getElementById("nombreUsuario").value.trim();
    const texto = document.getElementById("textoComentario").value.trim();

    if (!nombre || !texto) return alert("Completa los campos");

    await fetch("/api/calificaciones", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            id_pasteleria: pasteleriaActual,
            id_producto: null,
            puntuacion: 5,
            comentario: texto,
            nombre
        })
    });

    formComentario.reset();
    cargarComentarios();
}
