/* global React, AdmIcons */

const { useState: useDialogState } = React;

// `modules` = live module list from list-members (id/code/title), so the access
// picker reflects whatever Ayani has set up in Content, not a hardcoded skeleton.
function NewMemberDialog({ open, onClose, onCreated, modules }) {
  const [email, setEmail]       = useDialogState('');
  const [password, setPassword] = useDialogState('');
  const [username, setUsername] = useDialogState('');
  const [role, setRole]         = useDialogState('member');
  const [access, setAccess]     = useDialogState(['301']);
  const [busy, setBusy]         = useDialogState(false);
  const [error, setError]       = useDialogState('');

  if (!open) return null;
  const toggle = (code) => setAccess(a => a.includes(code) ? a.filter(c => c !== code) : [...a, code]);

  function reset() {
    setEmail(''); setPassword(''); setUsername(''); setRole('member'); setAccess(['301']); setError('');
  }
  function close() { if (!busy) { reset(); onClose(); } }

  async function create() {
    if (busy) return;
    setError('');
    if (!email.trim() || !email.includes('@')) { setError('A valid email is required.'); return; }
    if (password.length < 6) { setError('Password must be at least 6 characters.'); return; }
    if (!/^[A-Za-z0-9_.-]{3,30}$/.test(username.trim())) { setError('Username must be 3-30 characters: letters, numbers, _ . or -'); return; }
    setBusy(true);

    const { data, error: fnError } = await window.supabaseClient.functions.invoke('create-member', {
      body: {
        email: email.trim().toLowerCase(),
        password,
        username: username.trim(),
        role,
        module_access: access,
      },
    });

    // Edge Function returns a non-2xx (e.g. duplicate email) as a FunctionsHttpError;
    // pull the real message out of the response body when present.
    if (fnError) {
      let msg = fnError.message || 'Could not create the account.';
      try { const body = await fnError.context?.json(); if (body?.error) msg = body.error; } catch (_) {}
      setError(msg);
      setBusy(false);
      return;
    }

    setBusy(false);
    if (onCreated) onCreated(data?.member);
    reset();
    onClose();
  }

  return (
    <div className="adm-dialog-scrim" onClick={close}>
      <div className="adm-dialog" onClick={e => e.stopPropagation()}>
        <div className="flare" />
        <h3>New Member</h3>
        <div className="sub">Set credentials and grant module access. The account is active immediately — the member can log in with these credentials right away.</div>

        <div className="adm-field">
          <label>Email</label>
          <input value={email} onChange={e => setEmail(e.target.value)} placeholder="member@proton.me" type="email" autoComplete="off" />
        </div>
        <div className="adm-field">
          <label>Password</label>
          <input value={password} onChange={e => setPassword(e.target.value)} placeholder="•••••••••••" type="text" autoComplete="off" />
        </div>
        <div className="adm-field">
          <label>Username <span style={{color:'#3A3A3A', letterSpacing:0, textTransform:'none'}}>· what the member logs in with</span></label>
          <input value={username} onChange={e => setUsername(e.target.value)} placeholder="trader_handle" maxLength={30} autoComplete="off" />
        </div>

        <div className="adm-field">
          <label>Role</label>
          <div className="adm-role-pick">
            {['member','mentor','admin'].map(r => (
              <button key={r} className={role === r ? 'on' : ''} onClick={() => setRole(r)}>{r}</button>
            ))}
          </div>
        </div>

        <div className="adm-field">
          <label>Module Access</label>
          <div className="adm-mod-pick">
            {(modules || []).map(m => (
              <button key={m.id} className={access.includes(m.code) ? 'on' : ''} onClick={() => toggle(m.code)}>
                <span className="c">{m.code}</span>
                {m.title}
              </button>
            ))}
          </div>
        </div>

        {error && <div className="adm-dialog-error" role="alert">{error}</div>}

        <div className="adm-dialog-actions">
          <button className="adm-action" onClick={close} disabled={busy}>Cancel</button>
          <button className="adm-btn-glow" onClick={create} disabled={busy}>{busy ? 'Creating…' : 'Create Account'}</button>
        </div>
      </div>
    </div>
  );
}
window.NewMemberDialog = NewMemberDialog;