/* ui.jsx — shared building blocks.
   Globals: Avatar, NavTabs, Toasts, AdminLoginModal
*/

(function () {
const { useState, useEffect, useRef } = React;

// ===========================================================
// Avatar
// ===========================================================
function Avatar({ student, allowUpload = false, onUpload }) {
  const fileRef = useRef(null);
  const handlePick = (e) => {
    const f = e.target.files?.[0];
    if (f) onUpload?.(f);
    e.target.value = '';
  };
  return (
    <div className="avatar-block">
      {student.avatar
        ? <img src={student.avatar} alt={student.name}/>
        : <PixelAvatar seed={student.id}/>}
      {allowUpload && (
        <>
          <input ref={fileRef} type="file" accept="image/*" hidden onChange={handlePick}/>
          <button
            onClick={(e) => { e.stopPropagation(); fileRef.current?.click(); }}
            style={{
              position: 'absolute', bottom: 0, left: 0, right: 0,
              background: 'rgba(6,5,11,0.85)',
              fontFamily: 'var(--font-disp)', fontSize: 9,
              letterSpacing: 1.5, color: 'var(--ender-hi)',
              padding: '6px', textTransform: 'uppercase',
              borderTop: '2px solid var(--ender)',
            }}
          >
            Foto uploaden
          </button>
        </>
      )}
    </div>
  );
}

// ===========================================================
// NavTabs
// ===========================================================
function NavTabs({ value, onChange }) {
  const tabs = [
    { id: 'roster',     label: 'Klaslijst'  },
    { id: 'recipes',    label: 'Recepten'   },
    { id: 'tools',      label: 'Tools'      },
    { id: 'whiteboard', label: 'Bord'       },
  ];
  return (
    <div className="tabs">
      {tabs.map(t => (
        <button
          key={t.id}
          className={`tab ${value === t.id ? 'active' : ''}`}
          onClick={() => onChange(t.id)}
        >{t.label}</button>
      ))}
    </div>
  );
}

// ===========================================================
// Toasts
// ===========================================================
function Toasts({ items }) {
  return (
    <div className="toasts">
      {items.map(t => (
        <div key={t.id} className={`toast ${t.kind || 'info'}`}>
          {t.icon && <ItemIcon itemKey={t.icon} size={20} glow/>}
          <span>{t.text}</span>
        </div>
      ))}
    </div>
  );
}

// ===========================================================
// AdminLoginModal
// ===========================================================
function AdminLoginModal({ onSubmit, onCancel, error }) {
  const [val, setVal] = useState('');
  const inputRef = useRef(null);
  useEffect(() => { inputRef.current?.focus(); }, []);
  const submit = (e) => { e?.preventDefault(); onSubmit(val); };

  return (
    <div className="modal-overlay" onClick={onCancel}>
      <form className="modal" onClick={(e)=>e.stopPropagation()} onSubmit={submit}>
        <div className="modal-inner">
          <h3>Leerkrachtmodus</h3>
          <p>Voer het wachtwoord in om materialen toe te kennen en foto's te uploaden.</p>
          <input
            ref={inputRef}
            type="password"
            value={val}
            onChange={(e)=>setVal(e.target.value)}
            placeholder="wachtwoord"
            autoComplete="off"
          />
          {error && (
            <p style={{ color:'var(--danger)', fontSize: 18, marginTop: -8, marginBottom: 14 }}>
              {error}
            </p>
          )}
          <div className="modal-actions">
            <button type="button" className="btn-pixel ghost" onClick={onCancel}>Annuleer</button>
            <button type="submit" className="btn-pixel violet">Ontgrendel</button>
          </div>
        </div>
      </form>
    </div>
  );
}

Object.assign(window, { Avatar, NavTabs, Toasts, AdminLoginModal });
})();