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

$catId = isset($_GET['categoria_id']) ? (int)$_GET['categoria_id'] : 0;

if ($catId > 0) {
    $sql = "SELECT p.*, c.nome as categoria_nome 
            FROM produtos p 
            LEFT JOIN categorias c ON c.id = p.categoria_id 
            WHERE p.categoria_id = $catId AND (p.status = 'ativo' OR p.status = '1')
            ORDER BY p.posicao ASC, p.id ASC";
} else {
    // Fallback para todos se não passar ID
    $sql = "SELECT p.*, c.nome as categoria_nome 
            FROM produtos p 
            LEFT JOIN categorias c ON c.id = p.categoria_id 
            WHERE (p.status = 'ativo' OR p.status = '1')
            ORDER BY c.nome, p.posicao ASC, p.id ASC";
}

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

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

if ($r) {
    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(!empty($p) && file_exists($p)){
        $t = pathinfo($p, PATHINFO_EXTENSION);
        return "data:image/$t;base64," . base64_encode(file_get_contents($p));
    }
    return "";
}

// O restante do arquivo segue o mesmo padrão premium do pdf.php
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gerador de Catálogo - PDF Categoria</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; }
.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; }

#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); } }

/* Grid de produtos simplificado para seleção rápida */
.grid-prods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px; margin-top: 20px;
}
.product-card {
    background: #111; border: 2px solid transparent;
    border-radius: 10px; padding: 10px; text-align: center;
    cursor: pointer; transition: 0.2s;
}
.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; }
.product-card .name { font-size: 0.9rem; margin-top:5px; }
</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" onclick="selecionarTodos()">Selecionar Todos</button>
    <button class="btn btn-primary" onclick="gerar()">GERAR PDF DA CATEGORIA</button>
</div>

<div class="container">
    <h2>Produtos no PDF (Arraste para ordenar)</h2>
    <div class="order-list" id="lista-ordenada">
        <span style="color:#666">Nenhum produto selecionado.</span>
    </div>

    <h2 style="margin-top:40px;">Selecione os produtos de: <?php echo count($produtos) > 0 ? htmlspecialchars($produtos[0]['categoria_nome']) : 'Categoria'; ?></h2>
    <div class="grid-prods" id="grid-produtos"></div>
</div>

<script>
const produtos = <?php
foreach($produtos as &$p){
    $p["principal_b64"] = $p["principal"] ? b64($p["principal"]) : "";
    $e = [];
    foreach($p["extras"] as $x) $e[] = b64($x);
    $p["extras_b64"] = $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 = []; 

function renderUI() {
    renderOrdenada();
    renderGrid();
}

function renderGrid() {
    let ht = "";
    produtos.forEach((p, idx) => {
        let isSel = selecionados.includes(idx) ? "sel" : "";
        ht += `
        <div class="product-card ${isSel}" onclick="toggleProd(${idx})">
            <img src="${p.principal_b64}">
            <div class="name">${p.nome}</div>
            <div style="color:#4ade80; font-weight:bold;">R$ ${parseFloat(p.preco).toFixed(2).replace('.',',')}</div>
        </div>`;
    });
    document.getElementById("grid-produtos").innerHTML = ht;
}

function renderOrdenada() {
    let container = document.getElementById("lista-ordenada");
    if(selecionados.length === 0) {
        container.innerHTML = '<span style="color:#666">Clique nos produtos abaixo para adicionar ao PDF.</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_b64}">
            <div class="ord-title">${pos+1}. ${p.nome}</div>
        </div>`;
    });
    container.innerHTML = ht;
}

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

function selecionarTodos() {
    selecionados = produtos.map((_, i) => i);
    renderUI();
}

function limpar() {
    selecionados = [];
    renderUI();
}

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);
    renderUI();
}

// LÓGICA DE PDF (REUTILIZADA DO PDF.PHP)
function loadOverlay(msg) { document.getElementById("overlay").style.display = "flex"; document.getElementById("ov-text").innerText = msg; }
function hideOverlay() { document.getElementById("overlay").style.display = "none"; }

async 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";
            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; }); }

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 os produtos!"); return; }
    loadOverlay("Iniciando geração do PDF...");
    const doc = new jsPDF({unit:"mm", format:"a4"});
    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(`Gerando página ${i+1} de ${selecionados.length}...`);
        doc.addPage();
        doc.setFillColor(255, 255, 255); doc.rect(0, 0, 210, 297, "F");
        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"});
        
        let princPNG = await convertToPngBase64(p.principal_b64);
        if(princPNG) {
            let dims = await loadImageDim(princPNG);
            let f = fitScale(dims.w, dims.h, 170, 150);
            doc.addImage(princPNG, "PNG", (210-f.w)/2, 35, f.w, f.h);
        }

        if (p.extras_b64 && p.extras_b64.length > 0) {
            let total = Math.min(p.extras_b64.length, 5);
            let size = 32; 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_b64[j]);
                if(exPNG) {
                    doc.rect(startX, yEx, size, size, "D");
                    let eD = await loadImageDim(exPNG);
                    let eF = fitScale(eD.w, eD.h, size-2, size-2);
                    doc.addImage(exPNG, "PNG", startX + ((size-eF.w)/2), yEx + ((size-eF.h)/2), eF.w, eF.h);
                    startX += size + space;
                }
            }
        }

        doc.setFont("helvetica", "bold"); doc.setFontSize(24); doc.setTextColor(20, 20, 20);
        doc.text(p.nome, 105, 245, {maxWidth: 190, align:"center"});
        
        doc.setFontSize(30); doc.setTextColor(43, 110, 246);
        doc.text(`R$ ${parseFloat(p.preco).toFixed(2).replace('.', ',')}`, 105, 260, {align:"center"});
        
        doc.setFillColor(43, 110, 246); doc.rect(0, 282, 210, 15, "F");
        doc.setFontSize(10); doc.setTextColor(255, 255, 255);
        doc.text(`Catálogo Profissional - Página ${i+1}`, 105, 291, {align:"center"});
    }
    if (verExt) { doc.addPage(); doc.addImage(verExt, "JPEG", 0, 0, 210, 297); }
    doc.save("catalogo_"+(p.categoria_nome || "categoria")+"_"+Date.now()+".pdf");
    hideOverlay();
}

renderUI();
</script>
</body>
</html>
