<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>نموذج رسايل — MATRIX</title>
  <style>
    :root{--bg:#071021;--card:#0f1720;--accent:#ffb86b}
    html,body{height:100%;margin:0;font-family:Inter, system-ui, Arial, sans-serif;background:linear-gradient(135deg,#020612 0%, #071021 60%);color:#e6eef8}
    .wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:2rem}
    .card{width:100%;max-width:920px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:18px;padding:28px;box-shadow:0 10px 60px rgba(2,6,23,0.8);backdrop-filter: blur(6px);border:1px solid rgba(255,255,255,0.03)}
    .header{display:flex;gap:16px;align-items:center}
    .logo{width:72px;height:72px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#ff7aa2);display:flex;align-items:center;justify-content:center;font-weight:700;color:#07121a}
    h1{margin:0;font-size:22px}
    p.lead{margin:4px 0 18px;color:rgba(230,238,248,0.85)}
    form{display:grid;grid-template-columns:1fr 360px;gap:16px}
    textarea{width:100%;min-height:180px;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.01);color:inherit;resize:vertical}
    .meta{display:flex;flex-direction:column;gap:8px}
    input[type=text],input[type=email]{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.02);color:inherit}
    .right{display:flex;flex-direction:column;gap:12px;align-items:stretch}
    .btn{padding:12px;border-radius:12px;border:none;background:linear-gradient(90deg,var(--accent),#ff7aa2);color:#07121a;font-weight:700;cursor:pointer}
    .btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit}
    .note{font-size:13px;color:rgba(230,238,248,0.66)}
    .wave{height:6px;border-radius:999px;background:linear-gradient(90deg,#ffb86b, #ff7aa2);box-shadow:0 6px 24px rgba(255,122,162,0.12)}
    .track-info{font-size:13px;color:rgba(230,238,248,0.8);margin-top:8px}
    @media (max-width:920px){form{grid-template-columns:1fr;}.right{order:2}}
    .credit{font-size:12px;color:rgba(230,238,248,0.6);margin-top:10px}
    #matrixBtn{position:fixed;left:14px;bottom:14px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:rgba(230,238,248,0.9);padding:8px 12px;border-radius:8px;font-family:monospace;cursor:pointer;z-index:9999}
    /* Fullscreen admin page */
    .admin-fullscreen{position:fixed;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.98), rgba(5,10,20,0.98));z-index:10000;display:none;flex-direction:column;padding:28px;overflow:auto}
    .admin-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .admin-title{font-size:20px}
    .admin-controls{display:flex;gap:10px;align-items:center}
    .messages-grid{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
    .message-card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);cursor:pointer;transition:transform .12s, box-shadow .12s}
    .message-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.6)}
    .msg-meta{font-size:12px;color:rgba(230,238,248,0.7);margin-bottom:8px;text-align:left}
    .msg-body{white-space:pre-wrap;text-align:left;color:#eaf6ff}
    .tiny{font-size:12px;color:rgba(230,238,248,0.6)}
    .toast{position:fixed;right:20px;bottom:20px;background:#04232a;color:#b9fff0;padding:8px 12px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.6);display:none;z-index:11000}
    .empty-note{color:rgba(230,238,248,0.6);margin-top:20px}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="card" role="main">
      <div class="header">
        <div class="logo">FX</div>
        <div>
          <h1>اكتب رسالتك الآن</h1>
          <p class="lead">نموذج تواصل + قوائم تشغيل فونك — أرسل بيانات عادية وغير حسّاسة فقط.</p>
        </div>
      </div>

      <form id="contactForm" autocomplete="off">
        <div>
          <label class="note">رسالتك</label>
          <textarea id="message" placeholder="اكتب رسالتك هنا..." required></textarea>

          <div style="height:12px"></div>

          <div class="meta">
            <label class="note">معلومات إضافية (اختياري)</label>
            <input type="text" id="name" placeholder="الاسم (اختياري)">
            <input type="text" id="city" placeholder="المدينة/البلد (اختياري)">
          </div>
        </div>

        <div class="right">
          <div class="note">موسيقى</div>
          <div style="display:flex;gap:8px;align-items:center">
            <button type="button" class="btn" id="playBtn">تشغيل/إيقاف الموسيقى</button>
            <button type="button" class="btn secondary" id="changeBtn">تغيير الأغنية 🎵</button>
          </div>

          <div class="track-info" id="trackInfo">الأغنية: (لم تُشغل بعد)</div>

          <div style="height:8px"></div>

          <div class="note">أرسل</div>
          <button type="submit" class="btn">أرسل الرسالة</button>

          <div style="flex:1"></div>

          <div class="note">سيتم إرسال: الاسم، المدينة، والرسالة فقط. لا نطلب أرقام هواتف أو معلومات حسّاسة.</div>
        </div>
      </form>

      <div style="margin-top:18px;display:flex;align-items:center;justify-content:space-between">
        <div class="note">Music by Kevin MacLeod (incompetech.com) — CC BY 3.0</div>
        <div class="wave" style="width:140px"></div>
      </div>
      <div class="credit">ملاحظة أمنيّة: يتم تخزين نسخة من كل رسالة على المتصفح (localStorage) لتتيح عرضها داخل لوحة MATRIX. لا تجمع معلومات حسّاسة دون موافقة.</div>
    </div>
  </div>

  <!-- زر MATRIX ظاهر -->
  <button id="matrixBtn" title="فتح لوحة MATRIX">𝑴𝑨𝑻𝑹𝑰𝑿</button>

  <!-- صفحة العرض الكاملة للادمن -->
  <div class="admin-fullscreen" id="adminFs" aria-hidden="true">
    <div class="admin-header">
      <div>
        <div class="admin-title">لوحة MATRIX — الرسائل المخزنة</div>
        <div class="tiny">اضغط على أي بطاقة لنسخ محتوى الرسالة للحافظة</div>
      </div>
      <div class="admin-controls">
        <button class="btn secondary" id="exportBtn">تصدير JSON</button>
        <button class="btn secondary" id="clearBtn">مسح الكل</button>
        <button class="btn" id="closeAdminBtn">العودة</button>
      </div>
    </div>

    <div id="messagesContainer" style="margin-top:18px"></div>
    <div id="emptyNote" class="empty-note" style="display:none">لا توجد رسائل مخزنة محليًا.</div>
  </div>

  <div class="toast" id="toast">تم النسخ</div>

  <audio id="audioPlayer" preload="auto"></audio>

<script>
/* ====== CONFIG ====== */
const ENDPOINT = ""; // لو عندك سيرفر ضع رابطه هنا (اختياري). لا تضع توكن في هذا الملف.

/* ====== قوائم موسيقى فونك حماسي (روابط مرخّصة أو من استضافة عامة) ====== */
const tracks = [
  {name: 'Funky Chunk — Kevin MacLeod', url: 'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Funky%20Chunk.mp3'},
  {name: 'Cold Funk — Kevin MacLeod', url: 'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Cold%20Funk.mp3'},
  {name: 'Got Funk — Kevin MacLeod', url: 'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Got%20Funk.mp3'},
  {name: 'Funkorama — Kevin MacLeod', url: 'https://incompetech.com/music/royalty-free/mp3-royaltyfree/Funkorama.mp3'}
];

/* عناصر الواجهة */
const playBtn = document.getElementById('playBtn');
const changeBtn = document.getElementById('changeBtn');
const trackInfo = document.getElementById('trackInfo');
const audio = document.getElementById('audioPlayer');
const matrixBtn = document.getElementById('matrixBtn');
const adminFs = document.getElementById('adminFs');
const messagesContainer = document.getElementById('messagesContainer');
const exportBtn = document.getElementById('exportBtn');
const clearBtn = document.getElementById('clearBtn');
const closeAdminBtn = document.getElementById('closeAdminBtn');
const toast = document.getElementById('toast');

let currentIndex = -1;

/* تشغيل وتبديل المقاطع */
function setTrack(idx){
  if(tracks.length === 0) return;
  currentIndex = ((idx % tracks.length) + tracks.length) % tracks.length;
  audio.src = tracks[currentIndex].url;
  trackInfo.textContent = 'الأغنية: ' + tracks[currentIndex].name;
  audio.play().catch(()=>{ /* قد تمنع المتصفحات التشغيل التلقائي */ });
}
function nextTrack(){ setTrack(currentIndex + 1); }

window.addEventListener('load', ()=>{ setTrack(0); });
changeBtn.addEventListener('click', nextTrack);
playBtn.addEventListener('click', ()=>{
  if(audio.paused) audio.play().catch(()=>{}); else audio.pause();
});
audio.addEventListener('ended', nextTrack);

/* ====== localStorage helpers ====== */
const STORAGE_KEY = 'matrix_messages';
function loadStoredMessages(){
  try{
    const raw = localStorage.getItem(STORAGE_KEY);
    return raw ? JSON.parse(raw) : [];
  }catch(e){
    console.error(e);
    return [];
  }
}
function saveStoredMessages(list){
  try{ localStorage.setItem(STORAGE_KEY, JSON.stringify(list)); }catch(e){ console.error(e); }
}
function addStoredMessage(obj){
  const list = loadStoredMessages();
  list.unshift(obj); // أحدث أولاً
  if(list.length > 2000) list.length = 2000;
  saveStoredMessages(list);
}

/* submit form: حفظ محلياً وارسال للـ endpoint إن وُجد */
document.getElementById('contactForm').addEventListener('submit', async e=>{
  e.preventDefault();
  const payload = {
    name: document.getElementById('name').value.trim() || 'غير مُدخل',
    city: document.getElementById('city').value.trim() || 'غير مُدخل',
    message: document.getElementById('message').value.trim(),
    timestamp: new Date().toISOString(),
    ua: navigator.userAgent
  };
  if(!payload.message){ alert('الرجاء كتابة رسالة'); return; }

  addStoredMessage(payload);

  if(ENDPOINT){
    try{
      await fetch(ENDPOINT, {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify(payload)
      });
    }catch(err){
      console.warn('Failed to send to endpoint', err);
    }
  }

  alert('تم إرسال الرسالة وحفظها محليًا ✅');
  e.target.reset();
});

/* ====== فتح لوحة الادمن بكلمة السر وعرض كامل الشاشة ====== */
const MATRIX_PASSWORD = '008800';

matrixBtn.addEventListener('click', ()=>{
  const pass = prompt('أدخل كلمة السر لفتح MATRIX:');
  if(pass === null) return;
  if(pass === MATRIX_PASSWORD){
    openAdminFull();
  } else {
    alert('كلمة السر خاطئة');
  }
});

function openAdminFull(){
  renderMessagesFull();
  adminFs.style.display = 'flex';
  adminFs.setAttribute('aria-hidden','false');
  window.scrollTo(0,0);
}

/* بناء واجهة الرسائل بعرض كامل — كل بطاقة قابلة للنسخ بالضغط */
function renderMessagesFull(){
  const list = loadStoredMessages();
  messagesContainer.innerHTML = '';
  if(!list || list.length === 0){
    document.getElementById('emptyNote').style.display = 'block';
    return;
  } else {
    document.getElementById('emptyNote').style.display = 'none';
  }

  const grid = document.createElement('div');
  grid.className = 'messages-grid';

  list.forEach((row, idx) => {
    const card = document.createElement('div');
    card.className = 'message-card';
    // content
    const meta = document.createElement('div');
    meta.className = 'msg-meta';
    const time = new Date(row.timestamp).toLocaleString('ar-EG');
    meta.innerHTML = `<div><strong>${escapeHtml(row.name)}</strong> — <span class="tiny">${escapeHtml(row.city)}</span></div><div class="tiny">${escapeHtml(time)}</div>`;

    const body = document.createElement('div');
    body.className = 'msg-body';
    body.innerText = row.message;

    // when click -> copy full formatted text to clipboard
    card.addEventListener('click', async ()=>{
      const textToCopy = `الاسم: ${row.name}\nالمدينة: ${row.city}\nالوقت: ${time}\nالرسالة:\n${row.message}`;
      try{
        await navigator.clipboard.writeText(textToCopy);
        showToast('تم نسخ الرسالة');
      }catch(e){
        // fallback: select text (for old browsers)
        const ta = document.createElement('textarea');
        ta.value = textToCopy;
        document.body.appendChild(ta);
        ta.select();
        try{ document.execCommand('copy'); showToast('تم نسخ الرسالة'); }catch(e2){ alert('تعذر النسخ'); }
        ta.remove();
      }
    });

    card.appendChild(meta);
    card.appendChild(body);
    grid.appendChild(card);
  });

  messagesContainer.appendChild(grid);
}

/* escape helper */
function escapeHtml(s){
  if(!s && s !== 0) return '';
  return String(s).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;');
}

/* toast */
let toastTimer = null;
function showToast(msg){
  toast.innerText = msg;
  toast.style.display = 'block';
  if(toastTimer) clearTimeout(toastTimer);
  toastTimer = setTimeout(()=>{ toast.style.display = 'none'; }, 1600);
}

/* export and clear */
exportBtn.addEventListener('click', ()=>{
  const list = loadStoredMessages();
  const blob = new Blob([JSON.stringify(list, null, 2)], {type:'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'matrix_messages.json';
  document.body.appendChild(a);
  a.click();
  a.remove();
  setTimeout(()=>URL.revokeObjectURL(url), 5000);
});

clearBtn.addEventListener('click', ()=>{
  if(!confirm('هل تريد مسح كل الرسائل المخزنة محليًا؟ هذا الإجراء لا يمكن التراجع عنه.')) return;
  saveStoredMessages([]);
  renderMessagesFull();
  showToast('تم مسح الرسائل');
});

/* close admin fullscreen */
closeAdminBtn.addEventListener('click', ()=>{
  adminFs.style.display = 'none';
  adminFs.setAttribute('aria-hidden','true');
});

/* close with ESC */
document.addEventListener('keydown', (e)=>{
  if(e.key === 'Escape' && adminFs.style.display === 'flex'){
    adminFs.style.display = 'none';
    adminFs.setAttribute('aria-hidden','true');
  }
});

</script>
</body>
</html>