// banner-generator.js profissional para Elementor Free, Material Design

async function generateBanner() {
    const canvas = document.getElementById("bannerCanvas");
    const ctx = canvas.getContext("2d");

    const size = document.getElementById("size").value;
    const template = document.getElementById("template").value;
    const palette = document.getElementById("palette").value;
    const text = document.getElementById("bannerText").value;
    const bgUrl = document.getElementById("bgUrl").value;
    const logoUrl = document.getElementById("logoUrl").value;

    canvas.width = size === "1080" ? 1080 : 940;
    canvas.height = size === "1080" ? 1080 : 788;

    function loadImg(url) {
        return new Promise(r => {
            if (!url) return r(null);
            const img = new Image();
            img.crossOrigin = "anonymous";
            img.onload = () => r(img);
            img.src = url;
        });
    }

    // Paletas automáticas
    const palettes = {
        default: ["#2196F3","#4CAF50","#FF9800","#E91E63"],
        sunset: ["#FF5E5B","#D8D8D8","#FFED66","#FF7B00"],
        ocean: ["#006994","#00A8E8","#00BFFF","#00CED1"],
        forest: ["#2E7D32","#66BB6A","#A5D6A7","#C8E6C9"],
        neon: ["#39FF14","#FF00FF","#00FFFF","#FF3131"]
    };
    const colors = palettes[palette] || palettes.default;

    // Carregar imagens
    const [bg, logo] = await Promise.all([loadImg(bgUrl), loadImg(logoUrl)]);

    // Fundo
    if(bg){
        ctx.drawImage(bg,0,0,canvas.width,canvas.height);
    } else {
        // Gradiente de fundo
        const grad = ctx.createLinearGradient(0,0,canvas.width,canvas.height);
        grad.addColorStop(0, colors[0]);
        grad.addColorStop(1, colors[1]);
        ctx.fillStyle = grad;
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }

    // Aplicar templates
    applyTemplate(template, ctx, canvas, colors);

    // Texto com efeito neon
    ctx.font = "bold 72px 'Roboto', sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.lineWidth = 4;
    ctx.strokeStyle = palette==="neon" ? colors[1] : "#00000066";
    ctx.fillStyle = palette==="neon" ? colors[2] : "#FFFFFF";
    wrapText(ctx, text, canvas.width/2, canvas.height/2, canvas.width*0.8, 80);

    // Logo
    if(logo){
        const w = canvas.width*0.22;
        ctx.drawImage(logo, canvas.width-w-30, canvas.height-w-30, w, w);
    }

    // Marca d'água discreta
    ctx.font = "italic 24px 'Roboto'";
    ctx.fillStyle = "#FFFFFF33";
    ctx.textAlign = "right";
    ctx.fillText("Seu Banner", canvas.width-20, canvas.height-20);
}

function applyTemplate(type, ctx, canvas, colors){
    if(type==="promo"){
        ctx.fillStyle="rgba(0,0,0,0.45)";
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }
    if(type==="evento"){
        const grad = ctx.createLinearGradient(0,0,0,canvas.height);
        grad.addColorStop(0,"rgba(0,0,0,0.6)");
        grad.addColorStop(1,"rgba(0,0,0,0)");
        ctx.fillStyle = grad;
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }
    if(type==="anuncio"){
        ctx.fillStyle="rgba(255,255,255,0.25)";
        ctx.fillRect(40,40,canvas.width-80,canvas.height-80);
    }
    if(type==="neon"){
        const grad = ctx.createLinearGradient(0,0,canvas.width,canvas.height);
        grad.addColorStop(0,colors[0]);
        grad.addColorStop(1,colors[3]);
        ctx.fillStyle = grad;
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }
}

function wrapText(ctx,text,x,y,maxWidth,lineHeight){
    const words=text.split(" ");
    let line="";
    for(let n=0;n<words.length;n++){
        const testLine=line+words[n]+" ";
        const metrics=ctx.measureText(testLine);
        if(metrics.width>maxWidth){
            ctx.strokeText(line,x,y);
            ctx.fillText(line,x,y);
            line=words[n]+" ";
            y+=lineHeight;
        }else{
            line=testLine;
        }
    }
    ctx.strokeText(line,x,y);
    ctx.fillText(line,x,y);
}

function downloadPNG(){
    const link=document.createElement("a");
    link.download="banner.png";
    link.href=document.getElementById("bannerCanvas").toDataURL("image/png");
    link.click();
}

function downloadJPG(){
    const link=document.createElement("a");
    link.download="banner.jpg";
    link.href=document.getElementById("bannerCanvas").toDataURL("image/jpeg",0.85);
    link.click();
}

// Unsplash API simples
document.getElementById("unsplashBtn").addEventListener("click", async ()=>{
    const query = prompt("Digite a palavra-chave da imagem:");
    if(!query) return;
    const url = `https://source.unsplash.com/1080x1080/?${encodeURIComponent(query)}`;
    document.getElementById("bgUrl").value = url;
    alert("Imagem carregada! Clique em Gerar Banner");
});