<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frambe Admin</title>
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #0f0f1a; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 1.5rem; min-height: 100vh; }
    h1 { font-size: 1.6rem; font-weight: 300; margin-bottom: 0.25rem; }
    .header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; }
    .header img { width: 48px; height: 48px; border-radius: 10px; }
    .header .version { font-size: 0.8rem; color: #666; }
    .header-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
    .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
    .status-dot.online { background: #4ade80; }
    .status-dot.sleeping { background: #fbbf24; }
    .status-dot.playing { background: #60a5fa; }
    .clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
    .client-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.25rem; transition: all 0.2s; }
    .client-card:hover { border-color: rgba(99,102,241,0.3); background: rgba(255,255,255,0.06); }
    .client-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .client-name { font-size: 1.1rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }
    .client-ip { font-size: 0.75rem; color: #888; font-family: monospace; }
    .client-status { font-size: 0.8rem; color: #aaa; text-transform: capitalize; }
    .name-input { background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; color: #fff; font-size: 0.9rem; padding: 4px 8px; width: 140px; }
    .name-input:focus { outline: none; border-color: #6366f1; }
    .controls { display: flex; flex-direction: column; gap: 0.75rem; }
    .control-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
    .control-label { font-size: 0.8rem; color: #888; min-width: 60px; }
    .btn { padding: 6px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; background: rgba(255,255,255,0.06); color: #e0e0e0; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
    .btn.danger { background: rgba(239,68,68,0.15); border-color: #ef4444; color: #fca5a5; }
    .btn.danger:hover { background: rgba(239,68,68,0.3); }
    .btn.success { background: rgba(34,197,94,0.15); border-color: #22c55e; color: #86efac; }
    .btn.success:hover { background: rgba(34,197,94,0.3); }
    .btn.logout { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #fca5a5; font-size: 0.75rem; padding: 4px 12px; }
    .btn.logout:hover { background: rgba(239,68,68,0.25); }
    select { padding: 6px 10px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; background: rgba(255,255,255,0.06); color: #e0e0e0; font-size: 0.8rem; cursor: pointer; max-width: 200px; }
    select:focus { outline: none; border-color: #6366f1; }
    option { background: #1a1a2e; color: #e0e0e0; }
    input[type=range] { width: 120px; accent-color: #6366f1; }
    .range-value { font-size: 0.8rem; color: #aaa; min-width: 30px; }
    .toggle { position: relative; width: 40px; height: 22px; cursor: pointer; }
    .toggle input { display: none; }
    .toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); border-radius: 11px; transition: 0.2s; }
    .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: #888; border-radius: 50%; transition: 0.2s; }
    .toggle input:checked + .toggle-slider { background: rgba(99,102,241,0.4); }
    .toggle input:checked + .toggle-slider::before { transform: translateX(18px); background: #a5b4fc; }
    .empty-state { text-align: center; padding: 4rem 2rem; color: #666; }
    .empty-state h2 { font-size: 1.2rem; font-weight: 400; margin-bottom: 0.5rem; color: #888; }
    .ws-status { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; }
    .ws-status.connected { background: rgba(34,197,94,0.15); color: #86efac; }
    .ws-status.disconnected { background: rgba(239,68,68,0.15); color: #fca5a5; }
    .divider { border: none; border-top: 1px solid rgba(255,255,255,0.06); margin: 0.5rem 0; }
  </style>
</head>
<body>
  <div class="header">
    <img src="/img/icon.png" alt="Frambe" onerror="this.style.display='none'">
    <div><h1>Frambe Admin</h1><span class="version" id="version-text">Connecting...</span></div>
    <div class="header-right">
      <span class="ws-status disconnected" id="ws-status">Disconnected</span>
      <button class="btn logout" id="logout-btn" style="display:none" onclick="doLogout()">Logout</button>
    </div>
  </div>
  <div class="clients-grid" id="clients-grid">
    <div class="empty-state"><h2>No frames connected</h2><p>Open Frambe on a tablet or screen to see it here</p></div>
  </div>
  <script>
    var ws=null, clientsData={}, albumsCache=[], peopleCache=[], authEnabled=false;

    // Check if auth is enabled and show/hide logout button
    (async function checkAuth() {
      try {
        var r = await (await fetch('/api/auth/status')).json();
        authEnabled = r.authEnabled;
        if (authEnabled) document.getElementById('logout-btn').style.display = '';
      } catch(e) {}
    })();

    async function doLogout() {
      try { await fetch('/api/auth/logout', { method: 'POST' }); } catch(e) {}
      window.location.href = '/admin/login';
    }

    function connect() {
      var proto = location.protocol==='https:'?'wss:':'ws:';
      ws = new WebSocket(proto+'//'+location.host+'/ws');
      ws.onopen = function(){ document.getElementById('ws-status').textContent='Connected'; document.getElementById('ws-status').className='ws-status connected'; ws.send(JSON.stringify({type:'register',role:'admin'})); loadAlbumsAndPeople(); };
      ws.onmessage = function(e){ var msg=JSON.parse(e.data); if(msg.type==='clientList'){clientsData={};msg.clients.forEach(function(c){clientsData[c.id]=c;});renderClients();} else if(msg.type==='clientUpdate'){clientsData[msg.clientId]=msg.client;renderClients();} };
      ws.onclose = function(){ document.getElementById('ws-status').textContent='Disconnected'; document.getElementById('ws-status').className='ws-status disconnected'; setTimeout(connect,3000); };
    }
    async function loadAlbumsAndPeople(){ try{ var c=await(await fetch('/api/config')).json(); document.getElementById('version-text').textContent='v'+(c.version||'?'); albumsCache=await(await fetch('/api/albums')).json(); peopleCache=await(await fetch('/api/people')).json(); }catch(e){} }
    function sendCommand(id,action,payload){ if(ws&&ws.readyState===WebSocket.OPEN) ws.send(JSON.stringify({type:'adminCommand',targetId:id,action:action,payload:payload||{}})); }
    function renameClient(id,name){ if(ws&&ws.readyState===WebSocket.OPEN) ws.send(JSON.stringify({type:'renameClient',targetId:id,name:name})); }
    function handleSourceChange(id,val){ if(!val)return; if(val==='random')sendCommand(id,'setSource',{source:'random'}); else if(val==='favorites')sendCommand(id,'setSource',{source:'favorites'}); else if(val.startsWith('album:'))sendCommand(id,'setSource',{source:'album',albumId:val.substring(6)}); else if(val.startsWith('person:'))sendCommand(id,'setSource',{source:'person',personId:val.substring(7)}); }
    function esc(s){ var d=document.createElement('div');d.appendChild(document.createTextNode(s||''));return d.innerHTML; }
    function renderClients(){
      var grid=document.getElementById('clients-grid'),ids=Object.keys(clientsData);
      if(!ids.length){grid.innerHTML='<div class="empty-state"><h2>No frames connected</h2><p>Open Frambe on a tablet or screen to see it here</p></div>';return;}
      var html='';
      ids.forEach(function(id){ var c=clientsData[id],sc=c.status==='playing'?'playing':c.status==='sleeping'?'sleeping':'online',cfg=c.config||{};
        html+='<div class="client-card">';
        html+='<div class="client-header"><div><div class="client-name"><span class="status-dot '+sc+'"></span><input class="name-input" value="'+esc(c.name||'')+'" placeholder="'+esc(c.ip)+'" onchange="renameClient(\''+id+'\',this.value)"/></div><div class="client-ip">'+esc(c.ip)+'</div></div><div class="client-status">'+esc(c.status||'connected')+'</div></div>';
        html+='<div class="controls">';
        html+='<div class="control-row"><span class="control-label">Source</span><select onchange="handleSourceChange(\''+id+'\',this.value)"><option value="">-- Select --</option><option value="random">Random Photos</option><option value="favorites">Favorites</option>';
        albumsCache.forEach(function(a){html+='<option value="album:'+a.id+'">'+esc(a.albumName)+' ('+a.assetCount+')</option>';});
        peopleCache.filter(function(p){return p.name;}).forEach(function(p){html+='<option value="person:'+p.id+'">'+esc(p.name)+' (person)</option>';});
        html+='</select></div><hr class="divider">';
        html+='<div class="control-row"><span class="control-label">Playback</span><button class="btn success" onclick="sendCommand(\''+id+'\',\'start\')">Start</button><button class="btn" onclick="sendCommand(\''+id+'\',\'stop\')">Stop</button><button class="btn" onclick="sendCommand(\''+id+'\',\'next\')">Next</button><button class="btn" onclick="sendCommand(\''+id+'\',\'prev\')">Prev</button></div>';
        html+='<div class="control-row"><span class="control-label">Power</span><button class="btn danger" onclick="sendCommand(\''+id+'\',\'sleep\')">Sleep</button><button class="btn success" onclick="sendCommand(\''+id+'\',\'wake\')">Wake</button><button class="btn" onclick="sendCommand(\''+id+'\',\'refresh\')">Refresh</button></div>';
        html+='<hr class="divider">';
        html+='<div class="control-row"><span class="control-label">Interval</span><input type="range" min="5" max="120" value="'+(cfg.slideshowInterval||30)+'" oninput="this.nextElementSibling.textContent=this.value+\'s\'" onchange="sendCommand(\''+id+'\',\'setConfig\',{slideshowInterval:parseInt(this.value)})"><span class="range-value">'+(cfg.slideshowInterval||30)+'s</span></div>';
        html+='<div class="control-row"><span class="control-label">Clock</span><label class="toggle"><input type="checkbox" '+(cfg.showClock!==false?'checked':'')+' onchange="sendCommand(\''+id+'\',\'setConfig\',{showClock:this.checked})"><span class="toggle-slider"></span></label><span class="control-label">Date</span><label class="toggle"><input type="checkbox" '+(cfg.showDate!==false?'checked':'')+' onchange="sendCommand(\''+id+'\',\'setConfig\',{showDate:this.checked})"><span class="toggle-slider"></span></label></div>';
        html+='<div class="control-row"><span class="control-label">EXIF</span><label class="toggle"><input type="checkbox" '+(cfg.showExif!==false?'checked':'')+' onchange="sendCommand(\''+id+'\',\'setConfig\',{showExif:this.checked})"><span class="toggle-slider"></span></label><span class="control-label">Progress</span><label class="toggle"><input type="checkbox" '+(cfg.showProgress!==false?'checked':'')+' onchange="sendCommand(\''+id+'\',\'setConfig\',{showProgress:this.checked})"><span class="toggle-slider"></span></label></div>';
        html+='</div></div>';
      });
      grid.innerHTML=html;
    }
    connect();
  </script>
</body>
</html>