image.js

const { createCanvas, GlobalFonts, loadImage } = require('@napi-rs/canvas');
const { join } = require('path');

// Load font
GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'noto.ttf'), 'Noto');

async function generatePrayerCard(options) {
    const {
        prayerName,
        prayerTime,
        positiveHadith,
        warningHadith,
    } = options;

    const canvas = createCanvas(800, 600);
    const ctx = canvas.getContext('2d');

    // Determine background image based on prayer name
    let bgFile = 'default.png';
    switch (prayerName.toLowerCase()) {
        case 'fajr':
            bgFile = 'fajr.jpg';
            break;
        case 'dhuhr':
        case 'zuhr':
            bgFile = 'dhuhr.webp';
            break;
        case 'asr':
            bgFile = 'asr.jpg';
            break;
        case 'maghrib':
            bgFile = 'maghrib.jpg';
            break;
        case 'isha':
            bgFile = 'isha.jpg';
            break;
        default:
            bgFile = 'default.jpg';
            break;
    }

    // Load and draw background image
    const bg = await loadImage(join(__dirname, 'assets', bgFile));
    ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);

    // Header with underline
    ctx.fillStyle = '#000';
    ctx.font = 'bold 68px Noto';
    const headerText = `حان وقت صلاة ${prayerName}`;
    const headerWidth = ctx.measureText(headerText).width;
    const headerX = (canvas.width - headerWidth) / 2;
    const headerY = 115;
    ctx.fillText(headerText, headerX, headerY);
    ctx.beginPath();
    ctx.moveTo(headerX, headerY + 17);
    ctx.lineTo(headerX + headerWidth, headerY + 17);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.stroke();

    // Generic text renderer
    const renderText = (text, x, startY, maxWidth, lineHeight, color, shadowColor = null, bold = false, align = 'center', fontSize = 28) => {
        ctx.font = `${bold ? 'bold' : 'normal'} ${fontSize}px Noto`;
        ctx.textAlign = align;
        ctx.fillStyle = color;

        // Set shadow if provided
        if (shadowColor) {
            ctx.shadowColor = shadowColor;
            ctx.shadowBlur = 4;
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
        } else {
            ctx.shadowColor = 'transparent';
            ctx.shadowBlur = 0;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
        }

        const words = text.split(' ');
        let line = '';
        let y = startY;

        for (let i = 0; i < words.length; i++) {
            const testLine = line + words[i] + ' ';
            const metrics = ctx.measureText(testLine);
            if (metrics.width > maxWidth && i > 0) {
                ctx.fillText(line, x, y);
                line = words[i] + ' ';
                y += lineHeight;
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);

        // Reset shadow
        ctx.shadowColor = 'transparent';
        ctx.shadowBlur = 0;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
    };

    // Central Text
    const centralText =
        ' اللهم صل على محمد، اللهم رب هذه الدعوة التامة، والصلاة القائمة، آت محمدًا الوسيلة والفضيلة، وابعثه مقامًا محمودًا الذي وعدته إنك لا تخلف الميعاد.';
    renderText(centralText, canvas.width / 2, 220, 700, 44, '#000', null, true, 'center', 28);

    // Hadiths with shadow
    renderText(warningHadith, canvas.width / 4 + 15, 385, 350, 48, '#000', 'rgba(200, 0, 0, 0.65)', true, 'center', 32);
    renderText(positiveHadith, (canvas.width * 3) / 4 - 15, 385, 350, 48, '#000', 'rgba(0, 200, 0, 0.65)', true, 'center', 32);

    // Splitting line above footer
    ctx.beginPath();
    ctx.moveTo(30, canvas.height - 70);
    ctx.lineTo(canvas.width - 30, canvas.height - 70);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 1.5;
    ctx.stroke();

    // Footer
    ctx.fillStyle = '#000';
    ctx.font = 'bold 24px Noto';
    ctx.textAlign = 'left';
    ctx.fillText(`Prayer Reminder • ${prayerName}`, 40, canvas.height - 40);

    ctx.textAlign = 'right';
    ctx.fillText(`Time: ${prayerTime}`, canvas.width - 40, canvas.height - 40);

    return canvas.encode('png');
}

module.exports = generatePrayerCard;