<?php
include('../adm/config/db.php');

$sql="SELECT p.*,c.nome categoria_nome FROM produtos p
LEFT JOIN categorias c ON c.id=p.categoria_id
ORDER BY c.nome,p.nome";

$r=$conn->query($sql);

$produtos=[];
$base="../adm/uploads/produtos/";

while($row=$r->fetch_assoc()){
    $row["principal"]= $row["imagem_principal"]?$base.$row["imagem_principal"]:"";
    $ex=[];
    for($i=1;$i<=10;$i++){
        if(!empty($row["imagem".$i])) $ex[]=$base.$row["imagem".$i];
    }
    $row["extras"]=$ex;
    if(!$row["categoria_nome"]) $row["categoria_nome"]="Geral";
    $produtos[]=$row;
}
$conn->close();

function b64($p){
    if(file_exists($p)){
        $t=pathinfo($p,PATHINFO_EXTENSION);
        return "data:image/$t;base64,".base64_encode(file_get_contents($p));
    }
    return "";
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gerador de Catálogo PDF</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<style>
:root {
  --primary: #2b6ef6;
  --bg: #121212;
  --card: #1e1e1e;
  --text: #fff;
  --border: #333;
}
* { box-sizing: border-box; }
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--bg); color: var(--text);
    margin: 0; padding: 20px;
}
.header-actions {
    position: sticky; top: 0; z-index: 100;
    background: rgba(18,18,18,0.9);
    padding: 15px 0; border-bottom: 1px solid var(--border);
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.btn {
    padding: 12px 20px; font-size: 14px; font-weight: 600;
    background: var(--card); color: #fff;
    border: 1px solid var(--border); border-radius: 8px;
    cursor: pointer; transition: 0.2s;
    text-transform: uppercase;
}
.btn:hover { background: #333; }
.btn-primary {
    background: var(--primary); border-color: var(--primary);
}
.btn-primary:hover { background: #1a56d1; }

.container { max-width: 1200px; margin: 30px auto; }

/* Acordeão de Categorias */
.category-group {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; margin-bottom: 20px; overflow: hidden;
}
.category-header {
    padding: 15px 20px; font-size: 1.2rem; font-weight: bold;
    cursor: pointer; display: flex; justify-content: space-between;
    background: #252525; align-items: center;
}
.category-header:hover { background: #2a2a2a; }
.category-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px; padding: 20px;
}
.category-content.hidden { display: none; }
.cat-btn {
    font-size: 12px; padding: 8px 12px; border-radius: 6px;
    background: var(--primary); border:none; color:white; cursor:pointer;
}

/* Card do Produto */
.product-card {
    background: #111; border: 2px solid transparent;
    border-radius: 10px; padding: 10px; text-align: center;
    cursor: pointer; transition: 0.2s; position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
}
.product-card.sel {
    border-color: var(--primary);
    background: rgba(43, 110, 246, 0.15);
}
.product-card img {
    width: 100%; height: 120px; object-fit: cover;
    border-radius: 6px; margin-bottom: 10px;
}
.product-card .name { font-size: 0.9rem; font-weight: 600; margin-bottom: 5px; }
.product-card .price { font-size: 1rem; color: #4ade80; font-weight: bold; margin-top:10px; }

/* Lista de Ordenação */
.order-list {
    display: flex; gap: 15px; overflow-x: auto;
    padding: 15px; background: var(--card); border-radius: 12px;
    border: 1px solid var(--border); min-height: 120px; align-items:center;
}
.order-item {
    min-width: 100px;
    background: #111; border: 2px solid var(--primary);
    border-radius: 8px; padding: 10px; cursor: grab; text-align: center;
}
.order-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.order-item .ord-title { font-size: 0.8rem; margin-top: 5px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80px; }

/* Loader overlay */
#overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); display: none;
    align-items: center; justify-content: center; flex-direction: column; z-index: 9999;
}
.loader {
    border: 5px solid #333; border-top: 5px solid var(--primary);
    border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite;
}
#ov-text { margin-top: 20px; font-size: 1.2rem; font-weight: bold; }
@keyframes spin { 100% { transform: rotate(360deg); } }
</style>
</head>
<body>

<div id="overlay">
    <div class="loader"></div><div id="ov-text">Carregando...</div>
</div>

<div class="header-actions">
    <button class="btn" onclick="limpar()">Limpar Seleção</button>
    <button class="btn btn-primary" onclick="gerar()">GERAR CATÁLOGO PREMIUM EM PDF</button>
</div>

<div class="container">
    <h2>Catálogo Editável (Arraste lateralmente para ordenar os itens)</h2>
    <div class="order-list" id="lista-ordenada">
        <span style="color:#666">Nenhum produto selecionado.</span>
    </div>

    <h2 style="margin-top:40px;">Lista de Produtos por Categoria</h2>
    <div id="catalogo-categorias"></div>
</div>
<div align="center">catalogo44.com.br</div>
<script>
// Produtos injetados via PHP
const produtos = <?php
foreach($produtos as &$p){
    $p["principal"]= $p["principal"]?b64($p["principal"]):"";
    $e=[];
    foreach($p["extras"] as $x) $e[]=b64($x);
    $p["extras"]=$e;
}
echo json_encode($produtos, JSON_UNESCAPED_SLASHES);
?>;

const {jsPDF} = window.jspdf;

const COVER_URL = "https://modelo.catalogo44.com.br/capa.jpg";
const BACK_URL  = "https://modelo.catalogo44.com.br/verso.jpg";

let selecionados = []; // Array of product indexes in user's drag order

// Agrupamento por categoria
const categoriasDB = {};
produtos.forEach((p, idx) => {
    p._idx = idx; 
    if(!categoriasDB[p.categoria_nome]) categoriasDB[p.categoria_nome] = [];
    categoriasDB[p.categoria_nome].push(p);
});

// Renderização Principal
function renderUI() {
    renderOrdenada();
    renderCategorias();
}

function renderCategorias() {
    let ht = "";
    Object.keys(categoriasDB).forEach((catNome, catIndex) => {
        let prods = categoriasDB[catNome];
        let todasDaCatEstaoSels = prods.every(p => selecionados.includes(p._idx));
        
        ht += `<div class="category-group">
                <div class="category-header" onclick="toggleCat('cat_${catIndex}')">
                    <span>${catNome} <small>(${prods.length} itens)</small></span>
                    <button class="cat-btn" onclick="event.stopPropagation(); selecionarCategoria('${catNome}')">
                        ${todasDaCatEstaoSels ? "Desmarcar Toda a Categoria" : "Selecionar Toda a Categoria"}
                    </button>
                </div>
                <div class="category-content" id="cat_${catIndex}">`;
        
        prods.forEach(p => {
            let ativo = selecionados.includes(p._idx) ? "sel" : "";
            let priceHtml = "";
            if (p.status_promocao === 'Ativo' && parseFloat(p.preco_promocional) > 0) {
                priceHtml = `<span style="text-decoration: line-through; color: #888; font-size: 0.8rem; display: block;">R$ ${parseFloat(p.preco).toFixed(2).replace('.', ',')}</span>` + 
                            `R$ ${parseFloat(p.preco_promocional).toFixed(2).replace('.', ',')}`;
            } else {
                priceHtml = `R$ ${parseFloat(p.preco).toFixed(2).replace('.', ',')}`;
            }
            ht += `<div class="product-card ${ativo}" onclick="toggleProd(${p._idx})">
                    <div>
                        <img src="${p.principal}">
                        <div class="name">${p.nome}</div>
                    </div>
                    <div class="price">${priceHtml}</div>
                   </div>`;
        });
        
        ht += `</div></div>`;
    });
    document.getElementById("catalogo-categorias").innerHTML = ht;
}

function renderOrdenada() {
    let container = document.getElementById("lista-ordenada");
    if(selecionados.length === 0) {
        container.innerHTML = '<span style="color:#666">Nenhum produto selecionado na esteira. Clique nos produtos abaixo para selecionar.</span>';
        return;
    }
    
    let ht = "";
    selecionados.forEach((idx, pos) => {
        let p = produtos[idx];
        ht += `<div class="order-item" 
                 draggable="true" 
                 ondragstart="dragS(event, ${pos})"
                 ondragover="dragO(event)"
                 ondrop="dropO(event, ${pos})">
                <img src="${p.principal}">
                <div class="ord-title">${pos+1}. ${p.nome}</div>
               </div>`;
    });
    container.innerHTML = ht;
}

// ==== LÓGICA DE SELEÇÃO ====
function toggleCat(id) {
    let el = document.getElementById(id);
    if(el) el.classList.toggle('hidden');
}

function toggleProd(idx) {
    let pos = selecionados.indexOf(idx);
    if(pos > -1) selecionados.splice(pos, 1);
    else selecionados.push(idx);
    renderUI();
}

function selecionarCategoria(catNome) {
    let prods = categoriasDB[catNome];
    let todasDaCatEstaoSels = prods.every(p => selecionados.includes(p._idx));
    
    if (todasDaCatEstaoSels) {
        // Remover
        prods.forEach(p => {
            let i = selecionados.indexOf(p._idx);
            if(i > -1) selecionados.splice(i, 1);
        });
    } else {
        // Adicionar os que faltam
        prods.forEach(p => {
            if(!selecionados.includes(p._idx)) selecionados.push(p._idx);
        });
    }
    renderUI();
}

function limpar() {
    if(confirm("Remover absolutamente todos os produtos da seleção de PDF?")) {
        selecionados = [];
        renderUI();
    }
}

// ==== LÓGICA DE DRAG & DROP ====
let dragPos = null;
function dragS(e, pos) { dragPos = pos; }
function dragO(e) { e.preventDefault(); }
function dropO(e, toPos) {
    let item = selecionados.splice(dragPos, 1)[0];
    selecionados.splice(toPos, 0, item);
    renderOrdenada();
}

// ==== FUNÇÕES DO PDF (Premium e PNG) ====
function loadOverlay(msg) {
    document.getElementById("overlay").style.display = "flex";
    document.getElementById("ov-text").innerText = msg;
}
function hideOverlay() {
    document.getElementById("overlay").style.display = "none";
}

// Converte qualquer formato (WEBP, AVIF, JPEG, PNG base64) para PNG puro base64 usando Canvas (resolve bugs críticos do jsPDF)
function convertToPngBase64(sourceB64) {
    return new Promise((resolve) => {
        if(!sourceB64) return resolve("");
        let i = new Image();
        i.crossOrigin = "Anonymous";
        i.onload = () => {
            let cv = document.createElement("canvas");
            cv.width = i.width; cv.height = i.height;
            let ctx = cv.getContext("2d");
            ctx.fillStyle = "#ffffff"; // Fundo branco caso tenha transparência
            ctx.fillRect(0,0, cv.width, cv.height);
            ctx.drawImage(i, 0, 0);
            resolve(cv.toDataURL("image/png"));
        };
        i.onerror = () => resolve(sourceB64);
        i.src = sourceB64;
    });
}

function fitScale(w, h, maxW, maxH) {
    let k = Math.min(maxW/w, maxH/h);
    return {w: w*k, h: h*k};
}

async function loadImageDim(b64) {
    return new Promise(r => {
        if(!b64) return r({w:0,h:0});
        let i = new Image();
        i.onload = () => r({w:i.width, h:i.height});
        i.src = b64;
    });
}

// Retorna Array Buffer de uma URL via XMLHttpRequest p/ carregar JPEG limpo e contornar CORS
async function loadImgUrlAsB64Data(url) {
    return new Promise((resolve) => {
        let i = new Image();
        i.crossOrigin = "Anonymous";
        i.onload = () => {
            let cv = document.createElement("canvas");
            cv.width = i.width; cv.height = i.height;
            cv.getContext("2d").drawImage(i, 0, 0);
            resolve(cv.toDataURL("image/jpeg", 0.9));
        };
        i.onerror = () => resolve("");
        i.src = url;
    });
}

async function gerar() {
    if(selecionados.length === 0){ alert("Selecione primeiramente quais produtos farão parte do Catálogo!"); return; }
    
    loadOverlay("Baixando capas premium...");
    
    const doc = new jsPDF({unit:"mm", format:"a4"});
    
    // Download cover strings
    let capaExt = await loadImgUrlAsB64Data(COVER_URL);
    let verExt = await loadImgUrlAsB64Data(BACK_URL);

    if (capaExt) doc.addImage(capaExt, "JPEG", 0, 0, 210, 297);

    for(let i=0; i<selecionados.length; i++) {
        let p = produtos[selecionados[i]];
        loadOverlay(`Desenhando página ${i+1} de ${selecionados.length} - Produto: ${p.nome}...`);
        
        doc.addPage();
        
        // Fundo premium da Pagina
        doc.setFillColor(255, 255, 255);
        doc.rect(0, 0, 210, 297, "F");
        
        // Cabecalho Cinza suave identificando Categoria
        doc.setFillColor(242, 243, 245);
        doc.rect(0, 0, 210, 22, "F");
        doc.setFont("helvetica", "bold");
        doc.setFontSize(13);
        doc.setTextColor(80, 80, 80);
        doc.text(p.categoria_nome.toUpperCase(), 105, 14, {align:"center"});
        
        // Converter imagem principal de seja lá qual formato for p/ PNG puro limpo
        let princPNG = await convertToPngBase64(p.principal);
        if(princPNG) {
            let dims = await loadImageDim(princPNG);
            let f = fitScale(dims.w, dims.h, 170, 150);
            // Coloca a foto ao centro, mas pouco acima da metade
            doc.addImage(princPNG, "PNG", (210-f.w)/2, 35, f.w, f.h);
        }

        // Miniaturas de fotos extras em grade perfeitamente alinhada e centrada
        if (p.extras && p.extras.length > 0) {
            let total = Math.min(p.extras.length, 5); // limite 5 fotos
            let size = 32; // Quadrados de 32x32 mm
            let space = 4;
            let groupW = (total * size) + ((total-1) * space);
            let startX = (210 - groupW) / 2;
            let yEx = 195;
            
            for(let j=0; j<total; j++) {
                let exPNG = await convertToPngBase64(p.extras[j]);
                if(exPNG) {
                    doc.setDrawColor(220); // borda bem clara
                    doc.rect(startX, yEx, size, size, "D"); 
                    let eD = await loadImageDim(exPNG);
                    let eF = fitScale(eD.w, eD.h, size-2, size-2);
                    // Centraliza a imagem internamente dentro do box de 32mm
                    doc.addImage(exPNG, "PNG", startX + ((size-eF.w)/2), yEx + ((size-eF.h)/2), eF.w, eF.h);
                    startX += size + space;
                }
            }
        }

        // Título estilizado do produto (tamanho grande)
        doc.setFont("helvetica", "bold");
        doc.setFontSize(24);
        doc.setTextColor(20, 20, 20);
        doc.text(p.nome, 105, 245, {maxWidth: 190, align:"center"});
        
        if (p.status_promocao === 'Ativo' && parseFloat(p.preco_promocional) > 0) {
            // Preço Antigo
            doc.setFont("helvetica", "normal");
            doc.setFontSize(16);
            doc.setTextColor(150, 150, 150); // Cinza
            let oldPriceText = `De: R$ ${parseFloat(p.preco).toFixed(2).replace('.', ',')}`;
            doc.text(oldPriceText, 105, 255, {align:"center"});
            let pWidth = doc.getTextWidth(oldPriceText);
            doc.setDrawColor(150, 150, 150);
            doc.setLineWidth(0.5);
            doc.line(105 - (pWidth/2) - 1, 253, 105 + (pWidth/2) + 1, 253);

            // Preço Promocional
            doc.setFont("helvetica", "bold");
            doc.setFontSize(30);
            doc.setTextColor(43, 110, 246); // Azul
            doc.text(`Por: R$ ${parseFloat(p.preco_promocional).toFixed(2).replace('.', ',')}`, 105, 268, {align:"center"});
        } else {
            // Preço Normal
            doc.setFont("helvetica", "bold");
            doc.setFontSize(30);
            doc.setTextColor(43, 110, 246); // Azul
            doc.text(`R$ ${parseFloat(p.preco).toFixed(2).replace('.', ',')}`, 105, 260, {align:"center"});
        }
        
        // Roda-pé: Cor principal e número da página centralizado
        doc.setFillColor(43, 110, 246);
        doc.rect(0, 282, 210, 15, "F");
        doc.setFont("helvetica", "bold");
        doc.setFontSize(10);
        doc.setTextColor(255, 255, 255);
        doc.text(`Catálogo Profissional - Página ${i+1}`, 105, 291, {align:"center"});
    }

    if (verExt) {
        loadOverlay("Anexando a contracapa...");
        doc.addPage();
        doc.addImage(verExt, "JPEG", 0, 0, 210, 297);
    }
    
    loadOverlay("Empacotando e salvando seu Arquivo PDF...");
    doc.save("catalogo_premium_"+Date.now()+".pdf");
    hideOverlay();
}

// Inicia com todos ocultos, menos os que já vem pre selecionados
renderUI();
</script>

</body>
</html>