{/* Top toolbar */}

{cmd === 'claude' && <> Mode

{MODES.map(m => ( ))}

Príkazy {SLASH_CMDS.map(s => ( ))} } cwd setCwd(e.target.value)} onBlur={() => reconnect()} placeholder="/opt/ERP" title="Pracovný adresár (zmena reštartuje session)" />

{/* PTY output (xterm) + drag-drop overlay */}

{ e.preventDefault(); setDragOver(true); }} onDragLeave={e => { e.preventDefault(); setDragOver(false); }} onDrop={e => { e.preventDefault(); setDragOver(false); uploadFiles(e.dataTransfer.files); }} >

{/* Bottom composer */}

{uploads.length > 0 && (

{uploads.map((u, i) => ( 📎 {u.name} · {(u.size/1024).toFixed(0)} kB ))}

)}

setComposer(e.target.value)}
              onKeyDown={e => {
                if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendComposer(); }
              }}
              onPaste={e => {
                const items = Array.from(e.clipboardData?.files || []);
                if (items.length > 0) { e.preventDefault(); uploadFiles(items); }
              }}
              rows={2}
              disabled={status !== 'connected'}
            />
            <div className="term-composer-side">
              <label className="term-attach-btn" title="Pripojiť súbor (alebo drag-drop do terminálu)">
                {uploading ? '⏳' : '📎'}
                <span style={{fontSize:11}}>Súbor</span>
                <input type="file" multiple hidden onChange={e => { uploadFiles(e.target.files); e.target.value = ''; }}/>
              </label>
              <button
                className="term-send-btn"
                onClick={sendComposer}
                disabled={status !== 'connected' || (!composer.trim() && uploads.length === 0)}
                title="Odoslať do PTY (Enter)"
              >↵ Odoslať</button>
            </div>
          </div>
        </div>
      </div>

<div className="small muted" style={{marginTop:8}}>
        💡 <b>Prvé spustenie:</b> claude vypíše OAuth URL — klikni v termináli a prihlas sa svojím claude.ai účtom.
        Token sa uloží na VPS, ďalšie spustenia ho použijú automaticky.
        <br/>
        🔒 Bash režim = plný root shell na VPS · všetky spawne v <code>audit_log</code>.
        Uploady ostávajú v <code>/tmp/.claude-uploads/<userId>/</code> 24h, potom sa mažú.
      </div>

<TerminalPasskeyPanel onChange={() => setReconnectKey(k => k + 1)}/>
    </AppShell>
  );
}

// ── Setup PIN (prvý vstup, ešte nemá nastavený terminál PIN) ──
function TerminalSetupPin({ onSet }) {
  const [loginPwd, setLoginPwd] = React.useState('');
  const [pin, setPin] = React.useState('');
  const [confirm, setConfirm] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const onlyDigits = (v) => v.replace(/\D+/g, '').slice(0, 4);
  async function submit(e) {
    e.preventDefault();
    if (!/^\d{4}$/.test(pin)) return setErr('PIN musí mať presne 4 číslice.');
    if (pin !== confirm) return setErr('Potvrdenie sa nezhoduje.');
    setBusy(true); setErr('');
    const r = await fetch('/api/admin-shell/set-password', {
      method: 'POST', credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ current_login_password: loginPwd, new_terminal_pin: pin }),
    });
    const j = await r.json();
    setBusy(false);
    if (r.ok && j.ok) onSet();
    else setErr(j.error === 'wrong_login_password' ? 'Login heslo je nesprávne.' : (j.message || 'Chyba.'));
  }
  return (
    <div className="card" style={{maxWidth:500, margin:'40px auto', padding:24}}>
      <div style={{textAlign:'center', fontSize:36, marginBottom:8}}>🔐</div>
      <h2 style={{margin:0, textAlign:'center'}}>Nastavte PIN terminálu</h2>
      <p className="muted" style={{textAlign:'center', marginTop:8}}>
        Terminál vyžaduje 4-miestny PIN (oddelený od login hesla) ako extra ochranná vrstva pred zneužitím v prípade ukradnutej session. Po 5 neúspešných pokusoch sa PIN uzamkne na 15 minút.
      </p>
      <form className="vstack" style={{gap:10, marginTop:20}} onSubmit={submit}>
        {err && <div className="auth-alert" role="alert"><span>{err}</span></div>}
        <div className="field">
          <label>Vaše login heslo (overenie)</label>
          <input className="input" type="password" value={loginPwd} onChange={e => setLoginPwd(e.target.value)} autoComplete="current-password" required/>
        </div>
        <div className="field">
          <label>Nový PIN (4 číslice)</label>
          <input
            className="input"
            type="password"
            inputMode="numeric"
            autoComplete="one-time-code"
            pattern="\d{4}"
            maxLength={4}
            value={pin}
            onChange={e => setPin(onlyDigits(e.target.value))}
            required
          />
        </div>
        <div className="field">
          <label>Potvrdiť PIN</label>
          <input
            className="input"
            type="password"
            inputMode="numeric"
            autoComplete="one-time-code"
            pattern="\d{4}"
            maxLength={4}
            value={confirm}
            onChange={e => setConfirm(onlyDigits(e.target.value))}
            required
          />
        </div>
        <button className="btn btn-primary btn-lg btn-block" type="submit" disabled={busy || !loginPwd || pin.length !== 4}>
          {busy ? 'Ukladám…' : 'Nastaviť PIN terminálu'}
        </button>
      </form>
    </div>
  );
}

// ── Unlock (PIN už existuje) ──
function TerminalUnlock({ onUnlocked, hasPasskeys }) {
  const [pin, setPin] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [bioBusy, setBioBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [attemptsLeft, setAttemptsLeft] = React.useState(null);
  const [lockedUntil, setLockedUntil] = React.useState(0);
  const [now, setNow] = React.useState(Date.now());
  const onlyDigits = (v) => v.replace(/\D+/g, '').slice(0, 4);
  const webauthnLib = window.SimpleWebAuthnBrowser;

// Pri mounte zisti, či je rate-limit lockout aktívny.
  React.useEffect(() => {
    fetch('/api/admin-shell/status', { credentials: 'same-origin' })
      .then(r => r.json())
      .then(j => { if (j.locked_until && j.locked_until > Date.now()) setLockedUntil(j.locked_until); })
      .catch(() => {});
  }, []);

// Countdown tick počas lockoutu.
  React.useEffect(() => {
    if (!lockedUntil || lockedUntil <= Date.now()) return;
    const id = setInterval(() => {
      const t = Date.now();
      setNow(t);
      if (t >= lockedUntil) { setLockedUntil(0); setErr(''); }
    }, 1000);
    return () => clearInterval(id);
  }, [lockedUntil]);

const locked = lockedUntil > now;
  const secondsLeft = locked ? Math.ceil((lockedUntil - now) / 1000) : 0;

async function submit(e) {
    e.preventDefault();
    if (!/^\d{4}$/.test(pin) || locked) return;
    setBusy(true); setErr('');
    const r = await fetch('/api/admin-shell/unlock', {
      method: 'POST', credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pin }),
    });
    const j = await r.json();
    setBusy(false);
    if (r.ok && j.ok) { onUnlocked(); return; }
    if (j.error === 'rate_limited') {
      setLockedUntil(j.locked_until || 0);
      setAttemptsLeft(null);
      setErr(j.message || 'Príliš veľa neúspešných pokusov.');
    } else if (j.error === 'wrong_pin') {
      setAttemptsLeft(typeof j.attempts_left === 'number' ? j.attempts_left : null);
      setErr(typeof j.attempts_left === 'number'
        ? `Nesprávny PIN. Zostáva pokusov: ${j.attempts_left}.`
        : 'Nesprávny PIN.');
      setPin('');
    } else {
      setErr(j.message || 'Chyba.');
    }
  }

return (
    <div className="card" style={{maxWidth:420, margin:'40px auto', padding:24}}>
      <div style={{textAlign:'center', fontSize:36, marginBottom:8}}>🔒</div>
      <h2 style={{margin:0, textAlign:'center'}}>Terminál je uzamknutý</h2>
      <p className="muted" style={{textAlign:'center', marginTop:8}}>
        Zadajte 4-miestny PIN terminálu. Odomknutie platí 1 hodinu, potom sa znova spýta.
      </p>
      <form className="vstack" style={{gap:10, marginTop:20}} onSubmit={submit}>
        {locked && (
          <div className="auth-alert" role="alert">
            <span>Uzamknuté po 5 nesprávnych pokusoch. Odblokovanie o <b>{secondsLeft}s</b>.</span>
          </div>
        )}
        {!locked && err && <div className="auth-alert" role="alert"><span>{err}</span></div>}
        <div className="field">
          <input
            className="input"
            type="password"
            inputMode="numeric"
            autoComplete="one-time-code"
            pattern="\d{4}"
            maxLength={4}
            value={pin}
            onChange={e => setPin(onlyDigits(e.target.value))}
            autoFocus
            placeholder="••••"
            disabled={busy || locked}
            style={{textAlign:'center', letterSpacing:'0.5em', fontSize:24}}
          />
        </div>
        <button className="btn btn-primary btn-lg btn-block" type="submit" disabled={busy || locked || pin.length !== 4}>
          {busy ? 'Overujem…' : 'Odomknúť PIN-om'}
        </button>
        {hasPasskeys && webauthnLib && (
          <>
            <div className="small muted" style={{textAlign:'center', margin:'4px 0'}}>— alebo —</div>
            <button
              type="button"
              className="btn btn-lg btn-block"
              disabled={bioBusy || locked}
              onClick={async () => {
                setBioBusy(true); setErr('');
                try {
                  const optR = await fetch('/api/admin-shell/passkey/unlock/options', { method:'POST', credentials:'same-origin' });
                  const optJ = await optR.json();
                  if (!optR.ok) throw new Error(optJ.message || optJ.error);
                  const assertion = await webauthnLib.startAuthentication({ optionsJSON: optJ.options });
                  const verR = await fetch('/api/admin-shell/passkey/unlock/verify', {
                    method:'POST', credentials:'same-origin',
                    headers: { 'Content-Type':'application/json' },
                    body: JSON.stringify({ response: assertion }),
                  });
                  const verJ = await verR.json();
                  if (verR.ok && verJ.ok) onUnlocked();
                  else throw new Error(verJ.message || verJ.error || 'verification_failed');
                } catch (e) {
                  setErr('Biometria zlyhala: ' + (e.message || e.name || 'unknown'));
                }
                setBioBusy(false);
              }}
              style={{background:'#fff', border:'1.5px solid var(--navy-700)', color:'var(--navy-700)', fontWeight:600}}
            >
              {bioBusy ? 'Čakám na biometriu…' : '👆 Odomknúť cez Touch ID / Face ID'}
            </button>
          </>
        )}
      </form>
    </div>
  );
}

// ── Passkey manažment — registrácia po unlock-u (PIN), zoznam, mazanie ──
function TerminalPasskeyPanel({ onChange }) {
  const [list, setList] = React.useState([]);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [label, setLabel] = React.useState('');
  const webauthnLib = window.SimpleWebAuthnBrowser;

async function load() {
    const r = await fetch('/api/admin-shell/passkey/list', { credentials:'same-origin' });
    const j = await r.json();
    if (r.ok && j.ok) setList(j.passkeys || []);
  }
  React.useEffect(() => { load(); }, []);

async function register() {
    if (!webauthnLib) { setErr('Tento prehliadač nepodporuje WebAuthn.'); return; }
    setBusy(true); setErr('');
    try {
      const optR = await fetch('/api/admin-shell/passkey/register/options', { method:'POST', credentials:'same-origin' });
      const optJ = await optR.json();
      if (!optR.ok) throw new Error(optJ.message || optJ.error);
      const attestation = await webauthnLib.startRegistration({ optionsJSON: optJ.options });
      const verR = await fetch('/api/admin-shell/passkey/register/verify', {
        method:'POST', credentials:'same-origin',
        headers: { 'Content-Type':'application/json' },
        body: JSON.stringify({ response: attestation, label: label.trim() || (navigator.userAgent.match(/Mac|iPhone|iPad|Android|Windows/)?.[0] || 'Zariadenie') }),
      });
      const verJ = await verR.json();
      if (!verR.ok || !verJ.ok) throw new Error(verJ.message || verJ.error);
      setLabel('');
      await load();
      onChange && onChange();
    } catch (e) {
      setErr('Registrácia zlyhala: ' + (e.message || e.name || 'unknown'));
    }
    setBusy(false);
  }

async function del(id) {
    if (!confirm('Zmazať tento passkey? Po vymazaní sa cez toto zariadenie nepripojíš.')) return;
    const r = await fetch('/api/admin-shell/passkey/' + id, { method:'DELETE', credentials:'same-origin' });
    if (r.ok) { await load(); onChange && onChange(); }
  }

return (
    <div className="card" style={{padding:14, marginTop:14}}>
      <div className="card-head"><h3>🔐 Biometria — registrované zariadenia</h3></div>
      <div className="card-body vstack" style={{gap:10}}>
        {err && <div className="auth-alert" role="alert"><span>{err}</span></div>}
        {list.length === 0 && (
          <div className="small muted">
            Žiadne passkey ešte nie sú zaregistrované. Klikni „Zaregistrovať toto zariadenie" — Mac/iPhone si pýta Touch ID alebo Face ID.
          </div>
        )}
        {list.length > 0 && (
          <table className="tbl" style={{margin:0}}>
            <thead><tr><th>Zariadenie</th><th>Pridané</th><th>Naposledy</th><th></th></tr></thead>
            <tbody>
              {list.map(p => (
                <tr key={p.id}>
                  <td>👆 {p.label || '(bez popisu)'}</td>
                  <td className="small muted">{new Date(p.created_at * 1000).toLocaleDateString('sk-SK')}</td>
                  <td className="small muted">{p.last_used_at ? new Date(p.last_used_at * 1000).toLocaleString('sk-SK') : '—'}</td>
                  <td style={{textAlign:'right'}}><button className="btn btn-xs btn-danger" onClick={() => del(p.id)}><Ico.x/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
        <div className="hstack" style={{gap:6}}>
          <input
            className="input"
            placeholder="Popis (napr. MacBook M2, iPhone 15 Pro)"
            value={label}
            onChange={e => setLabel(e.target.value)}
            maxLength={60}
            style={{flex:1}}
          />
          <button className="btn btn-primary" onClick={register} disabled={busy || !webauthnLib}>
            {busy ? 'Čakám…' : '+ Zaregistrovať toto zariadenie'}
          </button>
        </div>
        {!webauthnLib && (
          <div className="small muted">⚠️ Tento prehliadač nepodporuje WebAuthn — biometria nie je dostupná.</div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AdminTerminal, TerminalPasskeyPanel });