/* TMD Portal — People: staff list and access management (backed by public.tmd_staff).
   Owners and Managers add people, send invites, change roles, deactivate or remove.
   Only an Owner can touch another Owner. Interns see the list only. */
const { useState: uSs, useEffect: uEs, useMemo: uMs, useCallback: uCs } = React;

const STAFF_ROLES = ['Owner', 'Manager', 'Intern'];
const initialsOf = name => (name || '?').split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();

async function staffCall(_session, payload) {
  // Always use the current token: the one captured at page load may have been refreshed since.
  const { data: { session } } = await SB.auth.getSession();
  if (!session) throw new Error('Not signed in.');
  const res = await fetch(window.TMD_CONFIG.supabaseUrl + '/functions/v1/manage-staff', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'apikey': window.TMD_CONFIG.supabaseKey,
      'Authorization': 'Bearer ' + session.access_token
    },
    body: JSON.stringify(payload)
  });
  const data = await res.json().catch(() => ({}));
  if (!res.ok || data.error) throw new Error(data.error || ('Request failed (HTTP ' + res.status + ')'));
  return data;
}

function Staff({ app, session, reloadSession }) {
  const [rows, setRows] = uSs(null);
  const [err, setErr] = uSs('');
  const [adding, setAdding] = uSs(false);
  const [confirm, setConfirm] = uSs(null);
  const [busy, setBusy] = uSs('');
  const me = (session && session.user.email || '').toLowerCase();
  const myRole = app.role;
  const isAdmin = myRole === 'Owner' || myRole === 'Manager';
  const isOwner = myRole === 'Owner';

  const load = uCs(async () => {
    const { data, error } = await SB.from('tmd_staff').select('*').order('role').order('name');
    if (error) { setErr(error.message); return; }
    setErr(''); setRows(data || []);
  }, []);
  uEs(() => { load(); }, [load]);

  const canTouch = r => isAdmin && (isOwner || r.role !== 'Owner');
  const isMe = r => (r.email || '').toLowerCase() === me;

  const update = async (r, patch, label) => {
    setBusy(r.email);
    const { error } = await SB.from('tmd_staff').update(patch).eq('email', r.email);
    setBusy('');
    if (error) { app.toast('Not saved: ' + error.message); return; }
    app.toast(label || 'Saved');
    await load();
    if (isMe(r) && reloadSession) reloadSession();
  };

  const act = async (r, action, label) => {
    setBusy(r.email);
    try {
      const out = await staffCall(session, { action, email: r.email });
      app.toast(out.note || label);
      await load();
    } catch (e) {
      app.toast(e.message);
    } finally {
      setBusy('');
    }
  };

  const active = (rows || []).filter(r => r.active), inactive = (rows || []).filter(r => !r.active);

  return (
    <div className="page">
      <PageHead
        title="People"
        count={rows ? active.length : null}
        sub="Who can open the Desk, and as what. Sign-up is open, but only addresses listed here get in."
        actions={isAdmin ? <Btn kind="primary" onClick={() => setAdding(true)}>Add person</Btn> : null}
      />

      {err ? <div className="empty"><b>Could not load people.</b><p>{err}</p></div> : null}
      {!rows && !err ? <p className="muted">Loading</p> : null}

      {rows ? (
        <table className="tbl staff-tbl">
          <thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th>{isAdmin ? <th className="r">Actions</th> : null}</tr></thead>
          <tbody>
            {active.concat(inactive).map(r => (
              <tr key={r.email} className={r.active ? '' : 'staff-off'}>
                <td className="strong"><span className="who"><span className="av" style={{ width: 26, height: 26, fontSize: 10 }}>{initialsOf(r.name)}</span><span>{r.name}{isMe(r) ? <em className="staff-you">you</em> : null}</span></span></td>
                <td className="muted">{r.email}</td>
                <td>
                  {canTouch(r) && !isMe(r) ? (
                    <select className="staff-role" value={r.role} disabled={busy === r.email} onChange={e => update(r, { role: e.target.value }, 'Role changed')}>
                      {STAFF_ROLES.filter(x => isOwner || x !== 'Owner').map(x => <option key={x} value={x}>{x}</option>)}
                    </select>
                  ) : r.role}
                </td>
                <td>
                  {r.active ? <Status stage="Active" sem="done" size="sm" /> : <Status stage="Inactive" sem="blocked" size="sm" />}
                  {r.invited_at ? <em className="staff-meta num">invited {fmtDate(r.invited_at.slice(0, 10), true)}</em> : null}
                </td>
                {isAdmin ? (
                  <td className="r staff-acts">
                    {canTouch(r) && !isMe(r) ? (
                      <>
                        <button type="button" className="link" disabled={busy === r.email} onClick={() => act(r, 'reset', 'Password reset email sent')}>Reset password</button>
                        <button type="button" className="link" disabled={busy === r.email} onClick={() => act(r, 'invite_again', 'Invite sent')} hidden>Resend invite</button>
                        <button type="button" className="link" disabled={busy === r.email} onClick={() => update(r, { active: !r.active }, r.active ? 'Access removed' : 'Access restored')}>{r.active ? 'Deactivate' : 'Reactivate'}</button>
                        <button type="button" className="link link-danger" disabled={busy === r.email} onClick={() => setConfirm(r)}>Remove</button>
                      </>
                    ) : <span className="muted">—</span>}
                  </td>
                ) : null}
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}

      <p className="fine staff-note">
        Adding a person emails them an invite link to set a password. Supabase’s built-in mailer allows only a few of these an hour.
        Deactivating keeps the record but closes access immediately. Removing deletes the record and the account.
        {isOwner ? ' Only you, as Owner, can add or change other Owners.' : ' Only an Owner can add or change Owners.'}
      </p>

      <AddPerson open={adding} onClose={() => setAdding(false)} session={session} isOwner={isOwner} onDone={async note => { setAdding(false); app.toast(note); await load(); }} />

      <Confirm
        open={!!confirm}
        title={confirm ? 'Remove ' + confirm.name + '?' : ''}
        body={<p>This deletes the staff record and the sign-in account for <b>{confirm && confirm.email}</b>. It cannot be undone. Use Deactivate if you only want to pause access.</p>}
        confirmLabel="Remove"
        onConfirm={async () => { const r = confirm; setConfirm(null); await act(r, 'remove', r.name + ' removed'); }}
        onClose={() => setConfirm(null)}
      />
    </div>
  );
}

function AddPerson({ open, onClose, session, isOwner, onDone }) {
  const [name, setName] = uSs('');
  const [email, setEmail] = uSs('');
  const [role, setRole] = uSs('Manager');
  const [invite, setInvite] = uSs(true);
  const [busy, setBusy] = uSs(false);
  const [err, setErr] = uSs('');
  uEs(() => { if (open) { setName(''); setEmail(''); setRole('Manager'); setInvite(true); setErr(''); setBusy(false); } }, [open]);

  const submit = async () => {
    setErr('');
    if (!name.trim()) { setErr('A name is needed.'); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) { setErr('Enter a working email address.'); return; }
    setBusy(true);
    try {
      if (invite) {
        const out = await staffCall(session, { action: 'invite', email: email.trim(), name: name.trim(), role });
        onDone(out.note || (out.invited ? 'Invite sent to ' + email.trim() : 'Added'));
      } else {
        const { error } = await SB.from('tmd_staff').upsert({ email: email.trim().toLowerCase(), name: name.trim(), role, active: true, added_by: session.user.email }, { onConflict: 'email' });
        if (error) throw error;
        onDone(name.trim() + ' added. They can create their own account on the sign-in screen.');
      }
    } catch (e) {
      setErr(e.message || 'Could not add this person.');
      setBusy(false);
    }
  };

  return (
    <Sheet open={open} onClose={onClose} title="Add person"
      footer={<><Btn kind="secondary" onClick={onClose}>Cancel</Btn><Btn kind="ink" disabled={busy} onClick={submit}>{busy ? 'Working' : invite ? 'Add and send invite' : 'Add'}</Btn></>}>
      <label className="tf"><span>Name</span><input value={name} onChange={e => setName(e.target.value)} autoFocus /></label>
      <label className="tf"><span>Email</span><input type="email" inputMode="email" value={email} onChange={e => setEmail(e.target.value)} /></label>
      <label className="tf"><span>Role</span>
        <select value={role} onChange={e => setRole(e.target.value)}>
          {STAFF_ROLES.filter(x => isOwner || x !== 'Owner').map(x => <option key={x} value={x}>{x}</option>)}
        </select>
      </label>
      <p className="fine">Owner and Manager see money and can manage people. Intern sees work and tasks only.</p>
      <label className="tgl"><input type="checkbox" checked={invite} onChange={e => setInvite(e.target.checked)} /><span>Email them an invite link now</span></label>
      {err ? <p className="si-err">{err}</p> : null}
    </Sheet>
  );
}

/* Landing from an invite or password-reset link: set a password before entering. */
function SetPassword({ email, onDone, onOut }) {
  const [pw, setPw] = uSs('');
  const [pw2, setPw2] = uSs('');
  const [busy, setBusy] = uSs(false);
  const [err, setErr] = uSs('');
  const submit = async e => {
    if (e && e.preventDefault) e.preventDefault();
    setErr('');
    if (pw.length < 8) { setErr('Use at least 8 characters.'); return; }
    if (pw !== pw2) { setErr('The two passwords do not match.'); return; }
    setBusy(true);
    const { error } = await SB.auth.updateUser({ password: pw });
    setBusy(false);
    if (error) { setErr(error.message); return; }
    onDone();
  };
  return (
    <div className="signin">
      <form className="si-box" onSubmit={submit}>
        <div className="si-mark"><Mark size={30} /></div>
        <Eyebrow>Welcome</Eyebrow>
        <h2 className="si-h">Set your password.</h2>
        <p className="si-p">For <b>{email}</b>. You will use it with this email to sign in from now on.</p>
        <label className="tf"><span>New password</span><input type="password" autoComplete="new-password" value={pw} onChange={e => setPw(e.target.value)} autoFocus /></label>
        <label className="tf"><span>Again</span><input type="password" autoComplete="new-password" value={pw2} onChange={e => setPw2(e.target.value)} /></label>
        {err ? <p className="si-err">{err}</p> : null}
        <Btn kind="primary" full disabled={busy} onClick={submit}>{busy ? 'Working' : 'Save and continue'}</Btn>
        <button type="submit" hidden aria-hidden="true" tabIndex={-1}></button>
        <div className="si-links"><button type="button" className="link" onClick={onOut}>Cancel and sign out</button></div>
      </form>
    </div>
  );
}

Object.assign(window, { Staff, SetPassword, staffCall });