/* global React, AdmIcons, AdmTags, AdmAvatar, admFmtWatch, admFmtDate, admFmtRel, admDaysSince, admDisplayName, admInitials, admParseUA */

const { useState: useDetailState } = React;

// Thin wrapper around the admin Edge Functions: returns { ok, error } and pulls the
// real message out of a non-2xx response body when present.
async function invokeAdminFn(name, body) {
  const { data, error } = await window.supabaseClient.functions.invoke(name, { body });
  if (error) {
    let msg = error.message || 'Request failed.';
    try { const b = await error.context?.json(); if (b?.error) msg = b.error; } catch (_) {}
    return { ok: false, error: msg };
  }
  return { ok: true, data };
}

// `user` is one member object from list-members (BUILD_PLAN.md 4.4). Every mutation
// goes through an Edge Function, then `onChanged` refreshes the list so the row and
// this panel re-render from real data.
function UserDetailPanel({ user, onClose, onChanged }) {
  const [access, setAccess] = useDetailState(() => user.module_progress.filter(m => m.has_access).map(m => m.module_id));
  const [role, setRole]     = useDetailState(user.role);
  const [status, setStatus] = useDetailState(user.status);
  const [busy, setBusy]     = useDetailState('');       // which action is in flight
  const [msg, setMsg]       = useDetailState(null);     // { kind: 'ok'|'err', text }
  const [pwOpen, setPwOpen] = useDetailState(false);
  const [pw, setPw]         = useDetailState('');
  const [unOpen, setUnOpen] = useDetailState(false);
  const [un, setUn]         = useDetailState(user.username || '');
  const [confirmText, setConfirmText] = useDetailState('');

  async function toggleAccess(m) {
    if (busy) return;
    const grant = !access.includes(m.module_id);
    setBusy('access'); setMsg(null);
    const r = await invokeAdminFn('set-module-access', { user_id: user.id, module_id: m.module_id, grant });
    setBusy('');
    if (!r.ok) { setMsg({ kind: 'err', text: r.error }); return; }
    setAccess(prev => grant ? [...prev, m.module_id] : prev.filter(id => id !== m.module_id));
    setMsg({ kind: 'ok', text: grant ? `Access to ${m.code} granted.` : `Access to ${m.code} revoked.` });
    onChanged && onChanged();
  }

  async function changeRole(next) {
    if (busy || next === role) return;
    setBusy('role'); setMsg(null);
    const r = await invokeAdminFn('set-member-role', { user_id: user.id, role: next });
    setBusy('');
    if (!r.ok) { setMsg({ kind: 'err', text: r.error }); return; }
    setRole(next); setMsg({ kind: 'ok', text: `Role set to ${next}.` });
    onChanged && onChanged();
  }

  async function setMemberStatus(next) {
    if (busy) return;
    setBusy('status'); setMsg(null);
    const r = await invokeAdminFn('set-member-status', { user_id: user.id, status: next });
    setBusy('');
    if (!r.ok) { setMsg({ kind: 'err', text: r.error }); return; }
    setStatus(next);
    setMsg({ kind: 'ok', text: next === 'suspended' ? 'Account suspended — login is now blocked.' : 'Account reinstated.' });
    onChanged && onChanged();
  }

  async function submitPassword() {
    if (busy) return;
    if (pw.length < 6) { setMsg({ kind: 'err', text: 'Password must be at least 6 characters.' }); return; }
    setBusy('pw'); setMsg(null);
    const r = await invokeAdminFn('reset-password', { user_id: user.id, password: pw });
    setBusy('');
    if (!r.ok) { setMsg({ kind: 'err', text: r.error }); return; }
    setPw(''); setPwOpen(false);
    setMsg({ kind: 'ok', text: 'Password updated. Share the new password with the member.' });
  }

  async function submitUsername() {
    if (busy) return;
    setBusy('username'); setMsg(null);
    const r = await invokeAdminFn('set-member-username', { user_id: user.id, username: un.trim() });
    setBusy('');
    if (!r.ok) { setMsg({ kind: 'err', text: r.error }); return; }
    setUnOpen(false);
    setMsg({ kind: 'ok', text: `Username set — the member now logs in as "${r.data.username}".` });
    onChanged && onChanged();
  }

  async function deleteMember() {
    if (busy) return;
    setBusy('delete'); setMsg(null);
    const r = await invokeAdminFn('delete-member', { user_id: user.id });
    setBusy('');
    if (!r.ok) { setMsg({ kind: 'err', text: r.error }); return; }
    onChanged && onChanged();
    onClose();
  }

  const confirmArmed = confirmText.trim().toUpperCase() === 'DELETE';

  return (
    <>
      <div className="adm-panel-scrim" onClick={onClose} />
      <div className="adm-panel">
        <div className="adm-panel-flare" />
        <div className="adm-panel-head">
          <div className="left">
            <AdmAvatar initials={admInitials(user)} size={56} />
            <div>
              <h2>{admDisplayName(user)}</h2>
              <div className="sub">{user.email} · {user.id.slice(0, 8)}</div>
              <div className="tags">
                <AdmTags.Role role={role} />
                <AdmTags.Status status={status} />
              </div>
            </div>
          </div>
          <button className="adm-panel-close" onClick={onClose}>
            <AdmIcons.Close size={14} />
          </button>
        </div>

        <div className="adm-panel-body">

          <div className="adm-section">
            <h3><span style={{color:'#3A3A3A', marginRight: 10}}>01</span>Account</h3>
            <div className="adm-kv">
              <div className="k">Username</div>
              <div className="v">{user.username || <span className="muted">not set</span>}</div>
              <div className="k">Email</div>
              <div className="v">{user.email}</div>
              <div className="k">Joined</div>
              <div className="v">{admFmtDate(user.joined_at)}</div>
              <div className="k">Created by</div>
              <div className="v">{user.invited_by || <span className="muted">—</span>}</div>
            </div>
          </div>

          <div className="adm-section">
            <h3><span style={{color:'#3A3A3A', marginRight: 10}}>02</span>Engagement</h3>
            <div className="adm-stat-grid">
              <div className="cell">
                <div className="lbl">Watch time</div>
                <div className="val">{admFmtWatch(user.watch_seconds / 60)}</div>
                <div className="sub">{user.lessons_completed} lessons completed</div>
              </div>
              <div className="cell">
                <div className="lbl">Total visits</div>
                <div className="val">{user.total_logins}</div>
                <div className="sub">last seen {admFmtRel(admDaysSince(user.last_seen_at))}</div>
              </div>
              <div className="cell">
                <div className="lbl">Current module</div>
                <div className="val">{user.current_module_code || '—'}</div>
                <div className="sub">{user.current_module_code ? `${user.current_module_title} · lesson ${user.current_lesson_n ?? '—'}` : 'no module access'}</div>
              </div>
              <div className="cell">
                <div className="lbl">Lesson progress</div>
                <div className="val">{user.current_lesson_n ? `${user.current_lesson_pct}%` : '—'}</div>
                <div className="sub">{user.current_lesson_n ? `${user.current_module_code} / ${user.current_lesson_n}` : 'no lesson started'}</div>
              </div>
            </div>
            <div style={{ marginTop: 14 }}>
              <div className="adm-spark">
                {user.daily_logins.map((n, i) => (
                  <div
                    key={i}
                    className={`bar ${n === 0 ? 'empty' : ''}`}
                    title={`${n} visit${n === 1 ? '' : 's'}`}
                    style={{ height: n === 0 ? 4 : Math.min(32, 8 + n * 6) + 'px' }}
                  />
                ))}
              </div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:6, fontSize:10, color:'#3A3A3A', letterSpacing:'0.18em', textTransform:'uppercase'}}>
                <span>Visits · 14 days ago</span>
                <span>Today</span>
              </div>
            </div>
          </div>

          <div className="adm-section">
            <h3><span style={{color:'#3A3A3A', marginRight: 10}}>03</span>Module Access</h3>
            <div className="adm-mod-list">
              {user.module_progress.map(m => {
                const unlocked = access.includes(m.module_id);
                const how = !unlocked ? 'Locked — click to grant access'
                  : m.granted_by === 'auto' ? 'Unlocked through progression — click to revoke'
                  : 'Granted by admin — click to revoke';
                return (
                  <div key={m.module_id} className={`adm-mod-item ${!unlocked ? 'is-locked' : ''}`}>
                    <div className="code">{m.code}</div>
                    <div className="title">
                      {m.title}
                      {m.current && unlocked && <span className="cur">Current</span>}
                    </div>
                    <div className="pct">{!unlocked ? '— Locked' : `${m.pct}%`}</div>
                    <button
                      className={`adm-mod-toggle ${unlocked ? 'on' : ''}`}
                      disabled={!!busy}
                      onClick={() => toggleAccess(m)}
                      title={how}
                    />
                  </div>
                );
              })}
            </div>
          </div>

          {user.lessons_log.length > 0 && (
            <div className="adm-section">
              <h3><span style={{color:'#3A3A3A', marginRight: 10}}>04</span>Lessons completed · Recent</h3>
              <div className="adm-log">
                {user.lessons_log.map((l, i) => (
                  <div key={i} className="adm-log-row">
                    <span>{l.title}</span>
                    <span className="when">{l.module_code} / {l.n} · {admFmtDate(l.at)}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {user.login_events.length > 0 && (
            <div className="adm-section">
              <h3><span style={{color:'#3A3A3A', marginRight: 10}}>05</span>Recent visits</h3>
              <div className="adm-events">
                {user.login_events.map((e, i) => {
                  const at = new Date(e.at);
                  return (
                    <div key={i} className="adm-event">
                      <div className="when">
                        {at.toLocaleDateString('en-GB', { day:'2-digit', month:'short' })}
                        <span className="sub">{at.toLocaleTimeString('en-GB', { hour:'2-digit', minute:'2-digit' })}</span>
                      </div>
                      <div className="device">{admParseUA(e.user_agent)}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          <div className="adm-section">
            <h3><span style={{color:'#3A3A3A', marginRight: 10}}>06</span>Manage</h3>

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

            <div className="adm-actions">
              <button className="adm-action" disabled={!!busy} onClick={() => { setPwOpen(o => !o); setUnOpen(false); setMsg(null); }}>
                {pwOpen ? 'Cancel reset' : 'Reset password'}
              </button>
              <button className="adm-action" disabled={!!busy} onClick={() => { setUnOpen(o => !o); setPwOpen(false); setMsg(null); }}>
                {unOpen ? 'Cancel' : user.username ? 'Change username' : 'Set username'}
              </button>
              {status === 'active'
                ? <button className="adm-action danger" disabled={!!busy} onClick={() => setMemberStatus('suspended')}>
                    {busy === 'status' ? 'Working…' : 'Suspend account'}
                  </button>
                : <button className="adm-action" disabled={!!busy} onClick={() => setMemberStatus('active')}>
                    {busy === 'status' ? 'Working…' : 'Reinstate account'}
                  </button>}
            </div>

            {unOpen && (
              <div className="adm-field" style={{ marginTop: 14 }}>
                <label>Login username</label>
                <div style={{ display: 'flex', gap: 10 }}>
                  <input type="text" value={un} autoComplete="off" placeholder="3-30 chars: letters, numbers, _ . -"
                    onChange={e => setUn(e.target.value)} style={{ flex: 1 }} maxLength={30} />
                  <button className="adm-btn-glow" disabled={!!busy || !un.trim()} onClick={submitUsername}>
                    {busy === 'username' ? 'Saving…' : 'Save username'}
                  </button>
                </div>
              </div>
            )}
            {pwOpen && (
              <div className="adm-field" style={{ marginTop: 14 }}>
                <label>New password</label>
                <div style={{ display: 'flex', gap: 10 }}>
                  <input type="text" value={pw} autoComplete="off" placeholder="at least 6 characters"
                    onChange={e => setPw(e.target.value)} style={{ flex: 1 }} />
                  <button className="adm-btn-glow" disabled={!!busy} onClick={submitPassword}>
                    {busy === 'pw' ? 'Setting…' : 'Set password'}
                  </button>
                </div>
              </div>
            )}

            <div className="adm-danger-zone">
              <label>Delete account</label>
              <div className="adm-danger-note">Irreversible — removes the login and all progress. Type <b>DELETE</b> to confirm.</div>
              <div style={{ display: 'flex', gap: 10 }}>
                <input value={confirmText} autoComplete="off" placeholder="DELETE"
                  onChange={e => setConfirmText(e.target.value)} style={{ flex: 1 }} />
                <button className="adm-action danger" disabled={!confirmArmed || !!busy} onClick={deleteMember}>
                  {busy === 'delete' ? 'Deleting…' : 'Delete permanently'}
                </button>
              </div>
            </div>

            {msg && <div className={`adm-manage-msg ${msg.kind}`} role="alert">{msg.text}</div>}
          </div>

        </div>
      </div>
    </>
  );
}
window.UserDetailPanel = UserDetailPanel;