<?php
require_once '../config.php';
start_secure_session();
$u=current_user();if(!$u){header('Location: ' . url('?login=1'));exit;}
?><!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title>وكلاء AI — سودانا</title>
  <style>
    :root{--green:#00d97e;--bg:#0a1628;--card:#0d2137;--border:#1e3a2a;--text:#e2e8f0;--muted:#64748b}
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--text)}
    .header{background:#060d1a;border-bottom:1px solid var(--border);padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
    .logo{font-weight:900;font-size:1rem}
    .back{color:var(--muted);font-size:.8rem;text-decoration:none;border:1px solid var(--border);padding:5px 12px;border-radius:7px}
    .container{max-width:1000px;margin:0 auto;padding:20px}
    .page-title{font-size:1.1rem;font-weight:900;margin-bottom:18px;display:flex;align-items:center;gap:8px}
    .agents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:20px}
    .agent-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;transition:.2s;cursor:pointer}
    .agent-card:hover{border-color:var(--accent,#00d97e);transform:translateY(-2px)}
    .agent-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
    .agent-avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
    .agent-name{font-weight:800;font-size:.85rem}
    .agent-key{font-size:.68rem;color:var(--muted)}
    .agent-sectors{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
    .sector-tag{font-size:.62rem;padding:2px 7px;border-radius:8px;font-weight:600}
    .agent-status{display:flex;align-items:center;justify-content:space-between;font-size:.7rem}
    .status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
    
    /* Test area */
    .test-area{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
    .test-area h3{font-size:.9rem;font-weight:800;margin-bottom:14px}
    .test-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .test-input{background:#060d1a;border:1px solid var(--border);color:var(--text);border-radius:9px;padding:10px 14px;font-family:inherit;font-size:.82rem;width:100%}
    .test-input:focus{outline:none;border-color:var(--green)}
    .test-btn{background:var(--green);color:#000;border:none;border-radius:9px;padding:10px 20px;font-family:inherit;font-weight:800;font-size:.82rem;cursor:pointer;width:100%;margin-top:8px}
    .test-result{background:#060d1a;border:1px solid var(--border);border-radius:9px;padding:12px;font-size:.75rem;min-height:100px;color:#6ee7b7;font-family:monospace;white-space:pre-wrap;overflow:auto}
    @media(max-width:600px){.agents-grid{grid-template-columns:1fr}.test-grid{grid-template-columns:1fr}.container{padding:14px}}
  </style>
</head>
<body>
<header class="header">
  <div class="logo">🤖 وكلاء AI — AssistantEngine</div>
  <a href="/dashboard/" class="back">← Dashboard</a>
</header>
<div class="container">
  <div class="page-title">🎯 14 مساعد متخصص <span style="font-size:.72rem;color:var(--muted);font-weight:400">AssistantEngine v2</span></div>

  <?php
  $agents=[
    ['hub','مساعد سودانا العام','🤖','#00d97e',['platform','general','government']],
    ['medical','المساعد الطبي','⚕️','#ef4444',['medical','pharmacy','family','emergency']],
    ['legal','المساعد القانوني','⚖️','#a78bfa',['legal']],
    ['finance','المساعد المالي','💰','#f59e0b',['finance','banking']],
    ['education','المساعد التعليمي','🎓','#0ea5e9',['education','academic']],
    ['agriculture','المساعد الزراعي','🌾','#84cc16',['agriculture']],
    ['mental','مساعد الصحة النفسية','🧘','#f472b6',['mental']],
    ['career','المساعد المهني','💼','#fb923c',['career']],
    ['community','مساعد الحي','🏘️','#34d399',['community']],
    ['market','مساعد السوق','🛒','#fbbf24',['market']],
    ['sales','مساعد الأعمال','📈','#60a5fa',['business','bde']],
    ['developer','مساعد المطورين','💻','#c084fc',['developer','tech']],
    ['investment','مساعد الاستثمار','📊','#2dd4bf',['finance']],
    ['enterprise','مساعد المؤسسات','🏢','#94a3b8',['enterprise']],
  ];
  ?>
  <div class="agents-grid">
    <?php foreach($agents as [$key,$name,$ic,$col,$sectors]): ?>
    <div class="agent-card" style="--accent:<?= $col ?>" onclick="testAgent('<?= $key ?>','<?= $name ?>')">
      <div class="agent-header">
        <div class="agent-avatar" style="background:<?= $col ?>18;border:1px solid <?= $col ?>40"><?= $ic ?></div>
        <div>
          <div class="agent-name"><?= $name ?></div>
          <div class="agent-key"><?= $key ?></div>
        </div>
      </div>
      <div class="agent-sectors">
        <?php foreach($sectors as $s): ?>
        <span class="sector-tag" style="background:<?= $col ?>15;color:<?= $col ?>"><?= $s ?></span>
        <?php endforeach;?>
      </div>
      <div class="agent-status">
        <span style="display:flex;align-items:center;gap:4px"><span class="status-dot"></span> نشط</span>
        <span style="color:<?= $col ?>;font-size:.65rem">← اختبر</span>
      </div>
    </div>
    <?php endforeach;?>
  </div>

  <!-- Test Playground -->
  <div class="test-area">
    <h3>🧪 اختبر مساعداً مباشرة</h3>
    <div class="test-grid">
      <div>
        <select id="test-domain" class="test-input" style="margin-bottom:8px">
          <?php foreach($agents as [$key,$name]): ?>
          <option value="<?= $key ?>"><?= $name ?> (<?= $key ?>)</option>
          <?php endforeach;?>
        </select>
        <textarea id="test-q" class="test-input" rows="4" placeholder="اكتب سؤالاً لاختبار المساعد..."></textarea>
        <button class="test-btn" onclick="runTest()">▶ تشغيل الاختبار</button>
      </div>
      <div>
        <div style="font-size:.72rem;color:var(--muted);margin-bottom:6px">النتيجة:</div>
        <div class="test-result" id="test-result">// اختر مساعداً وأدخل سؤالاً</div>
      </div>
    </div>
  </div>
</div>
<script>
function testAgent(key,name){
  document.getElementById('test-domain').value=key;
  document.getElementById('test-q').focus();
  document.getElementById('test-result').textContent='// اختبار: '+name+'
// أدخل سؤالك واضغط تشغيل';
}
async function runTest(){
  const domain=document.getElementById('test-domain').value;
  const q=document.getElementById('test-q').value.trim();
  if(!q)return;
  const result=document.getElementById('test-result');
  result.textContent='// جاري الاختبار...';
  try{
    const r=await fetch('/api/visitor_ask.php',{method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({q,service:domain,force_domain:domain})});
    const d=await r.json();
    result.textContent=JSON.stringify({
      domain:d.domain||domain,
      assistant_name:d.assistant_name||'—',
      sector:d.sector||'—',
      action:d.action||d.assistant_action||'—',
      confidence:d.confidence||0,
      answer:(d.answer||d.response||'').slice(0,300)
    },null,2);
  }catch(e){result.textContent='// خطأ: '+e.message;}
}
</script>
</body>
</html>