/* Vault login + presence/logout utilities — wired to the real Supabase backend */

/* Free, no-login utilities — static tool pages under /tools. Surfaced on the
   login screen so they're usable without unlocking the vault. */
const FREE_TOOLS = [
  { id: 'paper', name: 'Paper Studio', desc: 'Printable paper — graph, dotted, lined, music. Every style A4 at 100%.', href: '/tools/paper-studio.html', icon: 'grid' },
  { id: 'print', name: 'Print Studio', desc: 'Place images on A4 and print at exact, true-to-life size.', href: '/tools/print-studio.html', icon: 'columns' },
  { id: 'backdrop', name: 'Backdrop Studio', desc: 'Fill the transparent areas of an image with a solid colour, ready to print.', href: '/tools/backdrop-studio.html', icon: 'image' },
  { id: 'linkedin', name: 'LinkedIn Architect', desc: 'Draft, format & polish posts — Unicode fonts, emoji picker, AI refine.', href: '/tools/linkedin-architect.html', icon: 'align' },
];

function ToolsLauncher({ onBack }) {
  return React.createElement('div', { className: 'login-root tools-root' },
    React.createElement('div', { className: 'login-aura' }),
    React.createElement('div', { className: 'login-grid' }),
    React.createElement('div', { className: 'tools-panel' },
      React.createElement('div', { className: 'tools-head' },
        React.createElement('div', { className: 'tools-mark' }, React.createElement(Icons.grid, { size: 20 })),
        React.createElement('div', { className: 'tools-head-text' },
          React.createElement('h1', { className: 'tools-title' }, 'FREE TOOLS'),
          React.createElement('p', { className: 'tools-sub' }, 'Open utilities · no sign-in needed')),
        React.createElement('button', { className: 'tools-back', onClick: onBack },
          React.createElement(Icons.chevL, { size: 14, sw: 2.5 }), 'Vault')),
      React.createElement('div', { className: 'tools-grid' },
        FREE_TOOLS.map(t => React.createElement('a', { key: t.id, className: 'tool-card', href: t.href },
          React.createElement('span', { className: 'tool-ico' }, React.createElement(Icons[t.icon], { size: 19 })),
          React.createElement('span', { className: 'tool-name' }, t.name),
          React.createElement('span', { className: 'tool-desc' }, t.desc),
          React.createElement('span', { className: 'tool-go' }, 'Open', React.createElement(Icons.chevR, { size: 13, sw: 2.5 })))))));
}

function LoginScreen({ onUnlock, onTools }) {
  const [pw, setPw] = React.useState('');
  const [err, setErr] = React.useState('');
  const [shake, setShake] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => { if (ref.current) ref.current.focus(); }, []);

  const submit = async () => {
    if (pw.trim().length === 0 || busy) return;
    setBusy(true); setErr('');
    const res = await window.VaultDB.signIn(pw);
    setBusy(false);
    if (res.ok) { onUnlock(); return; }
    if (res.error === 'offline') { setErr('Database is offline. Try again shortly.'); return; }
    setErr(res.error === 'Invalid password' ? 'Incorrect password' : res.error);
    setShake(true); setPw('');
    setTimeout(() => setShake(false), 420);
    if (ref.current) ref.current.focus();
  };

  return React.createElement('div', { className: 'login-root' },
    React.createElement('div', { className: 'login-aura' }),
    React.createElement('div', { className: 'login-grid' }),
    React.createElement('div', { className: 'login-card' },
      React.createElement('div', { className: 'login-mark' }, React.createElement(Icons.shield, { size: 30 })),
      React.createElement('h1', { className: 'login-title' }, 'PERSONAL VAULT'),
      React.createElement('p', { className: 'login-sub' }, 'Secure · Private · Yours'),
      React.createElement('div', { className: 'login-field' + (shake ? ' shake' : '') },
        React.createElement('span', { className: 'login-lock' }, React.createElement(Icons.shield, { size: 15 })),
        React.createElement('input', {
          ref, type: 'password', className: 'login-input', placeholder: 'Enter password',
          value: pw, disabled: busy,
          onChange: (e) => { setPw(e.target.value); setErr(''); },
          onKeyDown: (e) => { if (e.key === 'Enter') submit(); },
        })),
      err ? React.createElement('div', { className: 'login-err' }, err) : null,
      React.createElement('button', { className: 'login-btn', onClick: submit, disabled: busy },
        busy ? 'Unlocking…' : 'Unlock',
        busy ? null : React.createElement(Icons.chevR, { size: 16, sw: 2.5 })),
      onTools ? React.createElement('button', { className: 'login-tools-link', onClick: onTools },
        React.createElement(Icons.grid, { size: 14 }), 'Free tools — no login needed') : null,
      React.createElement('div', { className: 'login-foot' },
        React.createElement('span', { className: 'login-pres' },
          React.createElement('span', { className: 'pres-dot' }), 'Secure · Private · Yours'))));
}

/* Live presence count from the shared Supabase presence channel */
function Presence() {
  const [count, setCount] = React.useState(1);
  React.useEffect(() => window.VaultDB.presence(setCount), []);
  return React.createElement('div', { className: 'presence', title: count > 1 ? (count + ' people in this vault') : 'You are the only one here' },
    React.createElement('span', { className: 'pres-live' }),
    React.createElement('span', { className: 'pres-count' }, count > 1 ? (count + ' online') : 'Online'));
}

function TopbarUtils({ onLogout }) {
  return React.createElement('div', { className: 'topbar-utils' },
    React.createElement(Presence),
    React.createElement('button', { className: 'logout-btn', onClick: onLogout, title: 'Log out' },
      React.createElement(Icons.logout, { size: 15 }),
      React.createElement('span', null, 'Logout')));
}

Object.assign(window, { LoginScreen, ToolsLauncher, Presence, TopbarUtils });