script.js

let selectedHashtag = "#StandWithPalestine"; // الهاشتاج الافتراضي

function updateHashtag() {
    selectedHashtag = document.getElementById('hashtag-select').value;
    document.getElementById('hashtag1').textContent = selectedHashtag;
    document.getElementById('hashtag2').textContent = selectedHashtag;
}

async function loadTwitterImage() {
    const username = document.getElementById('username-input').value.trim();
    if (!username) {
        alert("الرجاء إدخال اسم مستخدم تويتر.");
        return;
    }

    const loading = document.getElementById('loading');
    const successMessage = document.getElementById('success-message');

    loading.style.display = 'block';
    successMessage.style.display = 'none';

    try {
        const img1 = document.getElementById('profile-image1');
        const img2 = document.getElementById('profile-image2');
        const imageUrl = `https://unavatar.io/x/${username}`;
        img1.crossOrigin = 'anonymous';
        img2.crossOrigin = 'anonymous';
        img1.src = `${imageUrl}?t=${new Date().getTime()}`;
        img2.src = `${imageUrl}?t=${new Date().getTime()}`;

        img1.onload = img2.onload = () => {
            loading.style.display = 'none';
            successMessage.style.display = 'block';
            console.log("تم تحميل الصورة بنجاح");
        };

        img1.onerror = img2.onerror = () => {
            loading.style.display = 'none';
            alert("حدث خطأ أثناء تحميل الصورة.");
        };
    } catch (error) {
        loading.style.display = 'none';
        console.error("خطأ:", error);
        alert("حدث خطأ أثناء تحميل الصورة. الرجاء التحقق من اسم المستخدم.");
    }
}

function handleImageUpload(event) {
    const file = event.target.files[0];
    if (file) {
        if (!file.type.startsWith('image/')) {
            alert("الرجاء اختيار ملف صورة صالح.");
            return;
        }

        const loading = document.getElementById('loading');
        const successMessage = document.getElementById('success-message');

        loading.style.display = 'block';
        successMessage.style.display = 'none';

        const reader = new FileReader();
        reader.onload = function(e) {
            const img1 = document.getElementById('profile-image1');
            const img2 = document.getElementById('profile-image2');
            img1.src = e.target.result;
            img2.src = e.target.result;

            img1.onload = img2.onload = () => {
                loading.style.display = 'none';
                successMessage.style.display = 'block';
                console.log("تم تحميل الصورة بنجاح");
            };

            img1.onerror = img2.onerror = () => {
                loading.style.display = 'none';
                alert("حدث خطأ أثناء تحميل الصورة.");
            };
        };
        reader.readAsDataURL(file);
    }
}

function downloadImage(type) {
    const profileImg = document.getElementById(type === 'transparent' ? 'profile-image1' : 'profile-image2');
    const overlayImg = document.getElementById(type === 'transparent' ? 'overlay-image1' : 'overlay-image2');

    if (!profileImg.src || profileImg.src === window.location.href) {
        alert("الرجاء تحميل صورة أولاً.");
        return;
    }

    try {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 300;
        canvas.height = 300;

        // رسم صورة ps.png
        ctx.drawImage(overlayImg, 0, 0, canvas.width, canvas.height);

        // تفعيل الشفافية إذا كانت الصورة الشفافة
        if (type === 'transparent') {
            ctx.globalAlpha = 0.5;
        }

        // رسم الصورة المستوردة
        if (type === 'circle') {
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 * 0.8, 0, Math.PI * 2);
            ctx.closePath();
            ctx.clip();
            ctx.drawImage(profileImg, canvas.width * 0.1, canvas.height * 0.1, canvas.width * 0.8, canvas.height * 0.8);
        } else {
            ctx.drawImage(profileImg, 0, 0, canvas.width, canvas.height);
        }

        ctx.globalAlpha = 1;

        // إضافة الهاشتاج
        ctx.font = "16px Arial";
        ctx.fillStyle = "white";
        ctx.textAlign = "center";
        ctx.fillText(selectedHashtag, canvas.width / 2, canvas.height - 15);

        // تصدير الصورة
        const link = document.createElement('a');
        link.download = type === 'transparent' ? 'transparent-image.png' : 'circle-image.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
    } catch (error) {
        console.error("خطأ أثناء التصدير:", error);
        alert("حدث خطأ أثناء تصدير الصورة. الرجاء المحاولة مرة أخرى.");
    }
}