<?php
session_start();
include 'db.php';

if (!isset($_SESSION['admin_id'])) { header("Location: admin_login.php"); exit(); }

$admin_username = isset($_SESSION['admin_username']) ? $_SESSION['admin_username'] : 'أدمن';
if ($admin_username === 'alawael0') { session_unset(); session_destroy(); header("Location: admin_login.php"); exit(); }

function h($s){ return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); }

mysqli_set_charset($conn, "utf8mb4");

$stage = isset($_GET['stage']) ? trim($_GET['stage']) : '';
$class = isset($_GET['class']) ? trim($_GET['class']) : '';
$msg   = isset($_GET['msg']) ? trim($_GET['msg']) : '';

/* ========= حفظ بصمة الوجه + الصورة (POST) ========= */
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'save_face') {
    $student_id  = isset($_POST['student_id']) ? (int)$_POST['student_id'] : 0;
    $descriptor  = isset($_POST['descriptor']) ? trim($_POST['descriptor']) : '';
    $photo_data  = isset($_POST['photo_data']) ? trim($_POST['photo_data']) : '';

    if ($student_id <= 0 || $descriptor === '') {
        header("Location: admin_face_enroll.php?stage=".urlencode($stage)."&class=".urlencode($class)."&msg=".urlencode("❌ بيانات ناقصة"));
        exit();
    }

    $desc_arr = json_decode($descriptor, true);
    if (!is_array($desc_arr) || count($desc_arr) < 64) {
        header("Location: admin_face_enroll.php?stage=".urlencode($stage)."&class=".urlencode($class)."&msg=".urlencode("❌ لم يتم التعرف على الوجه بشكل صحيح"));
        exit();
    }

    $dir = __DIR__ . "/uploads/student_faces";
    if (!is_dir($dir)) { @mkdir($dir, 0755, true); }

    $saved_path = null;
    if ($photo_data !== '' && strpos($photo_data, 'data:image') === 0) {
        $parts = explode(',', $photo_data, 2);
        if (count($parts) === 2) {
            $bin = base64_decode($parts[1]);
            if ($bin !== false) {
                $filename = "student_".$student_id."_".date("Ymd_His").".jpg";
                $full = $dir . "/" . $filename;
                if (@file_put_contents($full, $bin) !== false) {
                    $saved_path = "uploads/student_faces/".$filename;
                }
            }
        }
    }

    $existing = null;
    $existing_photo = null;

    $stmt = mysqli_prepare($conn, "SELECT descriptors, photo_path FROM student_faces WHERE student_id=? LIMIT 1");
    mysqli_stmt_bind_param($stmt, "i", $student_id);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_bind_result($stmt, $existing, $existing_photo);
    $has = mysqli_stmt_fetch($stmt);
    mysqli_stmt_close($stmt);

    $list = array();
    if ($has && $existing) {
        $tmp = json_decode($existing, true);
        if (is_array($tmp)) $list = $tmp;
    }

    $list[] = $desc_arr;

    // خزن آخر 5 بصمات فقط
    if (count($list) > 5) {
        $list = array_slice($list, count($list)-5, 5);
    }

    $final_json = json_encode($list);
    $final_photo = $saved_path ? $saved_path : $existing_photo;

    if ($has) {
        $stmt = mysqli_prepare($conn, "UPDATE student_faces SET descriptors=?, photo_path=? WHERE student_id=?");
        mysqli_stmt_bind_param($stmt, "ssi", $final_json, $final_photo, $student_id);
        mysqli_stmt_execute($stmt);
        mysqli_stmt_close($stmt);
    } else {
        $stmt = mysqli_prepare($conn, "INSERT INTO student_faces (student_id, descriptors, photo_path) VALUES (?,?,?)");
        mysqli_stmt_bind_param($stmt, "iss", $student_id, $final_json, $final_photo);
        mysqli_stmt_execute($stmt);
        mysqli_stmt_close($stmt);
    }

    header("Location: admin_face_enroll.php?stage=".urlencode($stage)."&class=".urlencode($class)."&msg=".urlencode("✅ تم حفظ بصمة الوجه بنجاح"));
    exit();
}

/* ========= قوائم المرحلة/الشعبة ========= */
$stages = array();
$res = mysqli_query($conn, "SELECT DISTINCT stage FROM students ORDER BY stage ASC");
while ($r = mysqli_fetch_assoc($res)) { $stages[] = $r['stage']; }

$classes = array();
if ($stage !== '') {
  $st = mysqli_real_escape_string($conn, $stage);
  $res2 = mysqli_query($conn, "SELECT DISTINCT class FROM students WHERE stage='$st' ORDER BY class ASC");
  while ($r = mysqli_fetch_assoc($res2)) { $classes[] = $r['class']; }
}

/* ========= قائمة الطلاب ========= */
$students = array();
if ($stage !== '' && $class !== '') {
  $st = mysqli_real_escape_string($conn, $stage);
  $cl = mysqli_real_escape_string($conn, $class);

  $sql = "
    SELECT s.id, s.name,
           (SELECT CASE WHEN sf.student_id IS NULL THEN 0 ELSE 1 END FROM student_faces sf WHERE sf.student_id = s.id LIMIT 1) AS has_face
    FROM students s
    WHERE s.stage='$st' AND s.class='$cl'
    ORDER BY s.name ASC
  ";
  $res3 = mysqli_query($conn, $sql);
  while ($r = mysqli_fetch_assoc($res3)) { $students[] = $r; }
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>📷 تسجيل بصمة الوجه | ثانوية الأوائل الأهلية للبنين</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Tajawal',sans-serif;
  min-height:100vh;
  background:radial-gradient(circle at 20% 20%,#1a1f3b,#0b0d18 80%);
  color:#fff; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; top:-50%; left:-50%; width:200%; height:200%;
  background:
    radial-gradient(circle at 30% 30%,rgba(0,255,255,0.2),transparent 70%),
    radial-gradient(circle at 70% 70%,rgba(255,215,0,0.2),transparent 80%),
    radial-gradient(circle at 50% 100%,rgba(138,43,226,0.15),transparent 60%);
  animation:nebula 25s linear infinite alternate; filter:blur(90px); z-index:-1;
}
@keyframes nebula{0%{transform:rotate(0deg) scale(1)}100%{transform:rotate(360deg) scale(1.2)}}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 25px; background:rgba(255,255,255,0.07);
  border-bottom:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 12px rgba(0,255,255,0.1);
  position:sticky; top:0; z-index:10;
}
header .left{display:flex;align-items:center;gap:12px}
header img{height:45px;border-radius:50%;box-shadow:0 0 10px rgba(0,255,255,0.3)}
header h1{font-size:18px;font-weight:700;margin:0}
header .user{font-size:13px;color:#0ff;opacity:0.85}
header .btn{
  background:linear-gradient(90deg,#00e6ff,#007bff);
  color:#fff;padding:9px 18px;border-radius:10px;
  text-decoration:none;font-weight:bold;transition:0.3s; display:inline-block;
}
header .btn:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(0,255,255,0.4)}
.container{max-width:1200px;margin:20px auto 60px;padding:0 20px}
.title{text-align:center; margin:25px 0 15px}
.title h2{font-size:26px;color:#00e6ff;text-shadow:0 0 15px rgba(0,255,255,0.4)}
.title p{color:#ddd;margin-top:8px;line-height:1.7}
.panel{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:22px; padding:18px; box-shadow:0 0 20px rgba(0,255,255,0.08);
}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.select{
  background:rgba(0,0,0,0.25); color:#fff;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px; padding:10px 12px; min-width:220px;
  outline:none;
}
.btn2{
  background:linear-gradient(90deg,#00e6ff,#007bff);
  border:none; color:#fff; padding:10px 14px;
  border-radius:12px; font-weight:700; cursor:pointer; transition:.2s;
}
.btn2:hover{transform:scale(1.03);box-shadow:0 0 15px rgba(0,255,255,0.35)}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid rgba(255,255,255,0.18);
}
.badge.ok{background:rgba(0,255,120,0.12); color:#6fffb0}
.badge.no{background:rgba(255,120,0,0.10); color:#ffd08a}
.msg{margin:14px 0; text-align:center; font-weight:700; color:#fff}
.grid{
  margin-top:18px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:14px;
}
.card{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px; padding:14px 14px;
  box-shadow:0 0 18px rgba(0,255,255,0.06);
}
.card h3{font-size:16px;margin-bottom:8px}
.card .meta{color:#ccc;font-size:13px;margin-bottom:10px}
.card .actions{display:flex;gap:10px;flex-wrap:wrap}
.small{padding:9px 12px;border-radius:12px;font-weight:700;border:none;cursor:pointer}
.small.primary{background:linear-gradient(90deg,#00e6ff,#007bff);color:#fff}

.modal{
  position:fixed; inset:0; background:rgba(0,0,0,0.65);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.modal.active{display:flex}
.modal .box{
  width:min(920px, 95vw);
  background:rgba(15,18,40,0.92);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:22px; padding:18px;
  box-shadow:0 0 30px rgba(0,255,255,0.18);
}
.modal .box h3{margin-bottom:10px}
.videoWrap{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start}
.videoBox{position:relative}
video, canvas{
  width:360px; max-width:100%;
  border-radius:18px; border:1px solid rgba(255,255,255,0.15);
  background:#000;
}
#overlay{
  position:absolute; inset:0; pointer-events:none;
}
.note{color:#ccc;font-size:13px;line-height:1.7;margin-top:10px}
.footerBtns{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.toggle{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.15);
  padding:10px 12px;border-radius:14px;
}
.toggle input{transform:scale(1.2)}
@media (max-width:600px){
  header{flex-direction:column;gap:8px;text-align:center}
  header .left{flex-direction:column;gap:6px}
}
</style>
</head>
<body>

<header>
  <div class="left">
    <img src="logo.png" alt="logo">
    <div>
      <h1>تسجيل بصمة الوجه</h1>
      <div class="user">مرحباً، <?php echo h($admin_username); ?></div>
    </div>
  </div>
  <div style="display:flex; gap:10px; flex-wrap:wrap;">
    <a href="admin_dashboard.php" class="btn">لوحة التحكم</a>
    <a href="admin_logout.php" class="btn">تسجيل خروج</a>
  </div>
</header>

<div class="container">
  <div class="title">
    <h2>📷 تسجيل صورة + بصمة وجه لكل طالب</h2>
    <p>اختر المرحلة والشعبة، ثم افتح الكامرة أمام الطالب. (تم تفعيل التسجيل التلقائي لسرعة أعلى)</p>
  </div>

  <div class="panel">
    <form method="get" class="row">
      <select name="stage" class="select" onchange="this.form.submit()">
        <option value="">اختر المرحلة</option>
        <?php foreach($stages as $stg): ?>
          <option value="<?php echo h($stg); ?>" <?php echo ($stage===$stg?'selected':''); ?>><?php echo h($stg); ?></option>
        <?php endforeach; ?>
      </select>

      <select name="class" class="select" <?php echo ($stage===''?'disabled':''); ?> onchange="this.form.submit()">
        <option value=""><?php echo ($stage===''?'اختر المرحلة أولاً':'اختر الشعبة'); ?></option>
        <?php foreach($classes as $cl): ?>
          <option value="<?php echo h($cl); ?>" <?php echo ($class===$cl?'selected':''); ?>><?php echo h($cl); ?></option>
        <?php endforeach; ?>
      </select>

      <a class="btn2" href="admin_face_enroll.php">تحديث</a>
    </form>

    <?php if ($msg !== ''): ?>
      <div class="msg"><?php echo h($msg); ?></div>
    <?php endif; ?>

    <?php if ($stage!=='' && $class!=='' && empty($students)): ?>
      <div class="msg">لا يوجد طلاب ضمن هذه الشعبة.</div>
    <?php endif; ?>

    <?php if (!empty($students)): ?>
      <div class="grid">
        <?php foreach($students as $s): ?>
          <div class="card">
            <h3>👤 <?php echo h($s['name']); ?></h3>
            <div class="meta">
              رقم الطالب: <b><?php echo (int)$s['id']; ?></b> —
              الحالة:
              <?php if ((int)$s['has_face']===1): ?>
                <span class="badge ok">✅ لديه بصمة</span>
              <?php else: ?>
                <span class="badge no">⚠️ بدون بصمة</span>
              <?php endif; ?>
            </div>
            <div class="actions">
              <button type="button" class="small primary" onclick="openEnroll(<?php echo (int)$s['id']; ?>,'<?php echo h($s['name']); ?>')">📷 تسجيل/تحديث البصمة</button>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>
</div>

<!-- Modal -->
<div class="modal" id="modal">
  <div class="box">
    <h3 id="mTitle">تسجيل بصمة الوجه</h3>

    <div class="videoWrap">
      <div class="videoBox">
        <video id="video" autoplay muted playsinline></video>
        <canvas id="overlay" width="360" height="270"></canvas>
        <div class="note">خلي الطالب يثبت وجهه نص ثانية… النظام راح يسجل تلقائياً.</div>
      </div>
      <div>
        <canvas id="canvas" width="360" height="270"></canvas>
        <div class="note">هذا راح يكون “صورة الطالب” المحفوظة.</div>
      </div>
    </div>

    <div class="footerBtns">
      <label class="toggle">
        <input type="checkbox" id="autoEnroll" checked>
        <span>⚡ تسجيل تلقائي</span>
      </label>

      <button class="btn2" type="button" onclick="captureAndSave()">✅ التقط واحفظ (يدوي)</button>
      <button class="btn2" type="button" style="background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.15);" onclick="closeModal()">إغلاق</button>
      <span id="status" style="margin-right:auto;color:#00e6ff;font-weight:700;"></span>
    </div>

    <form id="saveForm" method="post" style="display:none;">
      <input type="hidden" name="action" value="save_face">
      <input type="hidden" name="student_id" id="student_id">
      <input type="hidden" name="descriptor" id="descriptor">
      <input type="hidden" name="photo_data" id="photo_data">
    </form>
  </div>
</div>

<script src="https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js"></script>
<script>
const MODEL_URL = './face_models';

let stream = null;
let currentStudentId = 0;

// ✅ تحميل مرة واحدة فقط
let modelsLoaded = false;
let modelsPromise = null;

// ✅ حلقة التسجيل التلقائي
let autoRunning = false;
let capturing = false;

function setStatus(t){ document.getElementById('status').textContent = t; }

function loadModelsOnce(silent){
  if(modelsLoaded) { if(!silent) setStatus('✅ النماذج جاهزة'); return Promise.resolve(true); }
  if(modelsPromise) return modelsPromise;

  if(!silent) setStatus('جاري تحميل نماذج الذكاء...');
  modelsPromise = Promise.all([
    faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
    faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
    faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL)
  ]).then(()=>{
    modelsLoaded = true;
    if(!silent) setStatus('✅ تم تحميل النماذج');
    return true;
  }).catch((e)=>{
    console.log('MODEL LOAD ERROR =>', e);
    modelsPromise = null;
    if(!silent) setStatus('❌ خطأ تحميل النماذج');
    throw e;
  });

  return modelsPromise;
}

// ✅ تحميل بالخلفية
window.addEventListener('load', () => {
  try{ loadModelsOnce(true); }catch(e){}
});

async function startCamera(){
  const video = document.getElementById('video');
  stream = await navigator.mediaDevices.getUserMedia({
    video: { facingMode:'user', width:{ideal:640}, height:{ideal:480}, frameRate:{ideal:24} },
    audio:false
  });
  video.srcObject = stream;
  await new Promise(r => video.onloadedmetadata = r);
  try{ await video.play(); }catch(e){}
  // ضبط overlay نفس قياس الفيديو الفعلي
  syncOverlay();
}

function syncOverlay(){
  const video = document.getElementById('video');
  const overlay = document.getElementById('overlay');
  const w = video.videoWidth || 360;
  const h = video.videoHeight || 270;
  overlay.width = w;
  overlay.height = h;
}

function stopCamera(){
  try{
    if(stream){
      stream.getTracks().forEach(t=>t.stop());
      stream = null;
    }
  }catch(e){}
}

async function openEnroll(id,name){
  currentStudentId = id;
  document.getElementById('student_id').value = id;
  document.getElementById('mTitle').textContent = '📷 تسجيل بصمة: ' + name;
  document.getElementById('modal').classList.add('active');

  try{
    if(typeof faceapi === 'undefined'){ setStatus('❌ مكتبة face-api.js لم تُحمّل'); return; }
    await loadModelsOnce(false);
    await startCamera();

    // ✅ شغّل التلقائي مباشرة
    if(document.getElementById('autoEnroll').checked){
      startAutoEnroll();
    }else{
      setStatus('جاهز…');
    }
  }catch(e){
    setStatus('❌ فشل تشغيل الكامرة أو تحميل النماذج');
    console.log(e);
  }
}

function closeModal(){
  stopAutoEnroll();
  stopCamera();
  setStatus('');
  document.getElementById('modal').classList.remove('active');

  // تنظيف overlay
  try{
    const overlay = document.getElementById('overlay');
    const ctx = overlay.getContext('2d');
    ctx.clearRect(0,0,overlay.width,overlay.height);
  }catch(e){}
}

// ✅ تسجيل تلقائي سريع:
// - نعمل كشف خفيف جداً على الفيديو (بدون descriptor) بسرعة
// - لما يثبت الوجه 3 مرات متتالية: نسوي التحليل الثقيل مرة واحدة ونحفظ
async function startAutoEnroll(){
  if(autoRunning) return;
  autoRunning = true;
  capturing = false;

  const video = document.getElementById('video');
  const overlay = document.getElementById('overlay');
  const ctx = overlay.getContext('2d');

  let stableHits = 0;
  let lastOk = false;

  setStatus('⚡ تسجيل تلقائي… قرّب الوجه');

  while(autoRunning){
    if(capturing){
      await new Promise(r=>setTimeout(r, 120));
      continue;
    }

    syncOverlay();
    ctx.clearRect(0,0,overlay.width,overlay.height);

    // كشف خفيف سريع
    const det = await faceapi.detectSingleFace(
      video,
      new faceapi.TinyFaceDetectorOptions({ inputSize: 160, scoreThreshold: 0.45 })
    );

    if(det){
      const box = det.box;

      // رسم مربع
      ctx.strokeStyle = 'rgba(0,230,255,0.9)';
      ctx.lineWidth = 3;
      ctx.strokeRect(box.x, box.y, box.width, box.height);

      // شرط بسيط: الوجه يكون واضح (مو صغير جداً)
      const bigEnough = (box.width >= 90 && box.height >= 90);

      if(bigEnough){
        stableHits++;
        lastOk = true;
        setStatus('✅ تم رصد وجه… ثبّت لحظة ('+stableHits+'/3)');
      }else{
        stableHits = 0;
        lastOk = false;
        setStatus('قرّب الوجه شوي حتى يكون واضح');
      }

      if(stableHits >= 3){
        // نفّذ التحليل والحفظ مرة واحدة
        capturing = true;
        stableHits = 0;
        await autoCaptureAndSave();
        // بعد submit راح تسوي ريداريكت، فما نحتاج نكمل
        return;
      }
    }else{
      if(lastOk){ stableHits = 0; lastOk = false; }
      setStatus('ضع الوجه أمام الكامرة…');
    }

    await new Promise(r=>setTimeout(r, 180)); // توازن سرعة/CPU
  }
}

function stopAutoEnroll(){
  autoRunning = false;
  capturing = false;
}

async function autoCaptureAndSave(){
  if(!currentStudentId) return;

  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  // التقط صورة
  setStatus('📸 التقاط…');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // تحليل ثقيل مرة واحدة
  setStatus('🧠 تحليل الوجه وحفظ…');
  const detection = await faceapi
    .detectSingleFace(video, new faceapi.TinyFaceDetectorOptions({ inputSize: 224, scoreThreshold: 0.5 }))
    .withFaceLandmarks()
    .withFaceDescriptor();

  if(!detection){
    capturing = false;
    setStatus('❌ فشل التعرف… جرّب مرة ثانية');
    return;
  }

  const descriptor = Array.from(detection.descriptor);
  document.getElementById('descriptor').value = JSON.stringify(descriptor);
  document.getElementById('photo_data').value = canvas.toDataURL('image/jpeg', 0.90);

  setStatus('✅ جاري الحفظ…');
  document.getElementById('saveForm').submit();
}

// زر يدوي يبقى موجود
async function captureAndSave(){
  if(capturing) return;
  capturing = true;

  try{
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    setStatus('جاري التقاط الصورة...');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    setStatus('جاري تحليل الوجه...');
    const detection = await faceapi
      .detectSingleFace(video, new faceapi.TinyFaceDetectorOptions({ inputSize: 224, scoreThreshold: 0.5 }))
      .withFaceLandmarks()
      .withFaceDescriptor();

    if(!detection){
      capturing = false;
      setStatus('❌ لم يتم العثور على وجه واضح، حاول مرة أخرى');
      return;
    }

    const descriptor = Array.from(detection.descriptor);
    document.getElementById('descriptor').value = JSON.stringify(descriptor);
    document.getElementById('photo_data').value = canvas.toDataURL('image/jpeg', 0.90);

    setStatus('جاري الحفظ...');
    document.getElementById('saveForm').submit();
  }catch(e){
    capturing = false;
    setStatus('❌ خطأ أثناء الالتقاط');
    console.log(e);
  }
}

// تغيير التلقائي أثناء فتح المودال
document.addEventListener('change', (e)=>{
  if(e.target && e.target.id === 'autoEnroll'){
    if(document.getElementById('modal').classList.contains('active')){
      if(e.target.checked){
        startAutoEnroll();
      }else{
        stopAutoEnroll();
        setStatus('تم إيقاف التلقائي (استخدم الزر اليدوي)');
      }
    }
  }
});
</script>

</body>
</html>
