!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MasterMind V6 | Vision & Memory</title>
<style>
:root { --main: #00f2ff; --bg: #0a0a0a; --panel: #161616; }
body { background: var(--bg); color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; overflow: hidden; }

/* واجهة ذكية */
.app-container { display: flex; height: 100vh; }

/* سجل المحادثات (الذاكرة) */
.sidebar { width: 260px; background: #000; border-left: 1px solid #222; padding: 15px; display: flex; flex-direction: column; }
.new-chat { border: 1px dashed var(--main); padding: 10px; border-radius: 8px; text-align: center; cursor: pointer; color: var(--main); margin-bottom: 20px; }

/* منطقة الدردشة */
.main-chat { flex: 1; display: flex; flex-direction: column; position: relative; }
#output { flex: 1; overflow-y: auto; padding: 20px; scroll-behavior: smooth; }

/* منطقة الإدخال المطورة */
.input-box { padding: 20px; background: var(--panel); border-top: 1px solid #333; }
.input-wrapper { max-width: 800px; margin: 0 auto; display: flex; gap: 10px; align-items: center; background: #222; padding: 10px; border-radius: 15px; }

input[type="text"] { flex: 1; background: transparent; border: none; color: white; outline: none; font-size: 16px; }

/* أزرار الميزات */
.icon-btn { cursor: pointer; padding: 8px; border-radius: 50%; transition: 0.3s; display: flex; align-items: center; }
.icon-btn:hover { background: #333; }
#image-preview { display: none; height: 50px; border-radius: 5px; margin-left: 10px; border: 1px solid var(--main); }

.ai-msg { background: #1a1a1a; padding: 15px; border-radius: 15px; margin-bottom: 20px; border-right: 3px solid var(--main); line-height: 1.6; }
.user-msg { text-align: left; color: #aaa; margin-bottom: 15px; padding-left: 10px; }
</style>
</head>
<body>

<div class="app-container">
<div class="sidebar">
<div class="new-chat" onclick="location.reload()">+ محادثة جديدة</div>
<div style="font-size: 12px; color: #555;">المحادثات السابقة</div>
<div id="history-list"></div>
</div>

<div class="main-chat">
<div id="output">
<div class="ai-msg">مرحباً بك في MasterMind V6. أنا الآن أدعم رؤية الصور وتحليلها. جرب رفع صورة مخطط أو مسألة!</div>
</div>

<div class="input-box">
<div class="input-wrapper">
<label class="icon-btn" title="رفع صورة">
📷
<input type="file" id="image-input" accept="image/*" style="display:none" onchange="previewImage(this)">
</label>

<img id="image-preview">

<input type="text" id="user-input" placeholder="اسألني أي شيء أو حلل الصورة...">

<button onclick="askGemini()" id="send-btn" style="background:var(--main); border:none; padding:8px 15px; border-radius:10px; font-weight:bold; cursor:pointer;">إرسال</button>
</div>
</div>
</div>
</div>

// ميزة معاينة الصورة
function previewImage(input) {
if (input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('image-preview').src = e.target.result;
document.getElementById('image-preview').style.display = 'block';
base64Image = e.target.result.split(',')[1]; // تجهيز الصورة للذكاء
};
reader.readAsDataURL(input.files[0]);
}
}

async function askGemini() {
const input = document.getElementById('user-input');
const output = document.getElementById('output');
const text = input.value;
if (!text && !base64Image) return;

// عرض رسالة المستخدم
output.innerHTML += `<div class="user-msg">${text}</div>`;
input.value = "جاري التفكير...";
document.getElementById('send-btn').disabled = true;

// بناء الطلب (يدعم نص وصورة معاً)
const payload = {
contents: [{
parts: [
{ text: text },
...(base64Image ? [{ inline_data: { mime_type: "image/jpeg", data: base64Image } }] : [])
]
}]
};

try {
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${API_KEY}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});

const data = await response.json();
const aiText = data.candidates[0].content.parts[0].text;

output.innerHTML += `<div class="ai-msg">${aiText}</div>`;

// تخزين في الذاكرة المحلية
saveChat(text, aiText);

} catch (error) {
output.innerHTML += `<div class="ai-msg" style="color:red;">عذراً، تأكد من مفتاح API ومن جودة الإنترنت.</div>`;
}

// إعادة ضبط
input.value = "";
base64Image = "";
document.getElementById('image-preview').style.display = 'none';
document.getElementById('send-btn').disabled = false;
output.scrollTop = output.scrollHeight;
}

function saveChat(q, a) {
let history = JSON.parse(localStorage.getItem('chat_history') || '[]');
history.push({q, a});
localStorage.setItem('chat_history', JSON.stringify(history.slice(-10))); // حفظ آخر 10 محادثات
}
</script>

</body>
</html>